AngularJS入門demo

時間 2019-11-16

標籤 angularjs 入門 demo 欄目 AngularJS 简体版

原文原文鏈接

一.AngularJS簡介

　　AngularJS誕生於2009年,由Misko Hevery 等人建立,後爲Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中html

二.四大特性

　1.mvc設計模式

　　Model:數據,其實就是angular變量($scope.XX);前端

　　View: 數據的呈現,Html+Directive(指令);git

　　Controller:操做數據,就是function,數據的增刪改查;github

　2.雙向綁定

　　左邊的視圖就是咱們能看到的頁面，右邊數據模型也就是變量，咱們經過控制器改變變量值，視圖也會跟着變化。一樣，視圖裏面，好比有個文本框，修改文本框，對應的變量值也會修改。web

　3.依賴注入

　　指某個對象依賴的其餘對象無需手工建立，此對象在建立時，其依賴的對象由框架來自動建立並注入進來。json

　4.模塊化設計

　　高內聚低耦合法則設計模式

　　1)官方提供的模塊 ng、ngRoute、ngAnimate數組

　　2)用戶自定義的模塊 angular.module('模塊名',[ ])mvc

三.入門案例

　　下載angular.min.js庫文件：https://github.com/angular/angular.js/releasesapp

　　和下面的html放在同一目錄

<html>
<head>
    <title>入門案例</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app>
{{1+2}}
</body>
</html>

<html>
<head>
    <title>雙向綁定</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app>
請輸入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

<html>
<head>
    <title>初始化</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app   ng-init="myname='st2'">
請輸入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

<html>
<head>
    <title>初始化</title>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
        //定義控制器
        app.controller('myController',function($scope){
            $scope.add=function(){
                return parseInt($scope.x)+parseInt($scope.y);
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
運算結果：{{add()}}
</body>
</html>

<html>
<head>
    <title>事件指令</title>
    <script src="angular.min.js"></script>    
    <script>
        var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
        //定義控制器
        app.controller('myController',function($scope){            
            $scope.add=function(){
                $scope.z= parseInt($scope.x)+parseInt($scope.y);
            }            
        });    
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
<button ng-click="add()">運算</button>
結果：{{z}}
</body>
</html>

<html>
<head>
    <title>入門小Demo-6  循環數據</title>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
        //定義控制器
        app.controller('myController',function($scope){
            $scope.list= [12,122,123,321 ];//定義數組
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
    <td>{{x}}</td>
</tr>
</table>
</body>
</html>

<html>
<head>
    <title>循環對象數組</title>
    <script src="angular.min.js"></script>    
    <script>
        var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
        //定義控制器
        app.controller('myController',function($scope){        
            $scope.list= [
                {name:'張三',shuxue:100,yuwen:99},
                {name:'李四',shuxue:99,yuwen:100},
                {name:'王五',shuxue:100,yuwen:99}
            ];//定義數組            
        });    
    </script>    
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
    <td>姓名</td>
    <td>數學</td>
    <td>語文</td>
</tr>
<tr ng-repeat="entity in list">
    <td>{{entity.name}}</td>
    <td>{{entity.shuxue}}</td>
    <td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

下面這個案例須要在跑在web工程中

<html>
<head>
    <title>內置服務</title>
    <meta charset="utf-8" />
    <script src="angular.min.js"></script>    
    <script>
        var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊
        //定義控制器
        app.controller('myController',function($scope,$http){        
            $scope.findAll=function(){
                $http.get('data.json').success(
                    function(response){
                        $scope.list=response;
                    }                    
                );                
            }            
        });    
    </script>    
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
    <td>姓名</td>
    <td>數學</td>
    <td>語文</td>
</tr>
<tr ng-repeat="entity in list">
    <td>{{entity.name}}</td>
    <td>{{entity.shuxue}}</td>
    <td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

1. AngularJS - 入門小Demo
2. AngularJS引入Echarts的Demo
3. AngularJs入門
4. AngularJS入門
5. angularjs入門
6. AngularJS入門（三）
7. AngularJS入門（一）
8. AngularJS入門（五）
9. (angularjs) 入門
10. AngularJS入門(一)
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。