1、使用NG實作雙邊資料綁定
所有需要ng管理的代碼必須被包裹在一個有ng-app指令的元素中
ng-app是ng的入口，表示目前元素的所有指令都會被angular管理（對每一個指令進行分析和操作）
1 <body>
2 <div ng-app ng-init="user.name='world'">
3 <h1>使用NG實作雙邊資料綁定</h1>
4 <input type="text"
5 placeholder="請輸入你的姓名"
6 ng-model="user.name">
7 <p>hello <strong>{{user.name}}</strong></p>
8 </div>
9 <script src="bower_components/angular/angular.js"></script>
10 </body> 2、子產品
1 <body>
2 <div ng-app="myApp" ng-controller="DemoController">
3 <h1>使用NG實作雙邊資料綁定</h1>
4 <input type="text" placeholder="請輸入你的姓名" ng-model="user.name">
5 <p>hello <strong>{{user.name}}</strong></p>
6 <input type="button" ng-click="show()">
7 </div>
8 <script src="bower_components/angular/angular.js"></script>
9 <script>
10 // 注冊子產品 通過module函數，
11 // 第一個參數是這個子產品的名字
12 // !!! 第二個參數是這個子產品所依賴的子產品, 如果不依賴任何子產品也必須傳遞第二個參數，如果沒有傳遞第二個參數，angular.module就不是建立一個子產品
13 // angular.module 傳回 剛剛建立的子產品對象
14 var app= angular.module('myApp',[]);
15 // app.controller 方法用于建立一個控制器，所建立的控制器屬于myApp子產品
16 // app.controller('DemoCtrl');
17 // 控制器函數的參數中有一個$scope
18 // angular.module('myApp').controller('DemoController', function($scope) {
19 // // 當控制器執行時會自動執行的函數
20 // $scope.user = {};
21 // $scope.user.name = '張三';
22 // // $scope不僅僅可以往視圖中暴露資料，還可以暴露行為
23 // $scope.show = function() {
24 // console.log($scope.user);
25 // };
26 // });
27 </script>
28 </body> 3、控制器
1 <body ng-app="myModule" ng-controller="HelloController">
2 <script src="bower_components/angular/angular.js"></script>
3 <script>
4 // 由于控制器是必須出現在某個子產品下的，想建立一個控制器必須先建立子產品
5 var module = angular.module('myModule', []); // 傳回的就是子產品對象
6
7 // angular在執行控制器函數時，
8 // 會根據參數的名字（$scope）去自動的注入對象
9 // 根據參數名稱傳遞對應對象，是以必須要寫正确的參數名稱
10 // module.controller('HelloController', function($scope) {
11 // console.log($scope);
12 // });
13 //
14 // 由于壓縮代碼會改變參數名稱，注冊控制的标準方式就是通過第二個參數傳遞數組的方式（數組的成員最後一個就是原本的控制器函數，前面的成員都是需要注入的對象名稱）
15 module.controller('HelloController', ['$scope','$http', function(a,b) {
16 console.log(a);
17 }]);
18 </script>
19 </body> 4、注冊登入的實作
1 <!DOCTYPE html>
2 <html lang="en" ng-app="HelloApp">
3
4 <head>
5 <meta charset="utf-8">
6 </head>
7
8 <body>
9 <table border="1" ng-controller="WorldController">
10 <tr>
11 <td>使用者名</td>
12 <td>
13 <input type="text" ng-model="user.username">
14 </td>
15 </tr>
16 <tr>
17 <td>密碼</td>
18 <td>
19 <input type="password" ng-model="user.password">
20 </td>
21 </tr>
22 <tr>
23 <td></td>
24 <td>
25 <input type="button" ng-click="login()" value="登陸">
26 </td>
27 </tr>
28 <tr>
29 <td></td>
30 <td>{{message}}</td>
31 </tr>
32 </table>
33 <script src="bower_components/angular/angular.js"></script>
34 <script>
35 // 建立一個子產品
36 var app = angular.module('HelloApp', []);
37 // 為這個子產品建立一個控制器
38 app.controller('WorldController', ['$scope', function($scope) {
39
40 // 資料
41 $scope.user = {
42 username: '',
43 password: ''
44 };
45 $scope.demo = '';
46
47 // 行為資料
48 $scope.login = function() {
49 // 因為資料的變化時雙向的同步，是以界面上的值變化會同步到$scope.user上
50 console.log($scope.user);
51 };
52
53
54 // 請輸入使用者名 輸入格式不合法
55 $scope.message = '請輸入使用者名';
56 // $scope.message取決于$scope.user
57
58 // 官方的API中提供了一個$scope.$watch方法，
59 $scope.$watch('user.username', function(now, old) {
60 // 當user.username發生變化時觸發這個函數
61 // console.log('now is ' + now);
62 // console.log('old is ' + old);
63 if (now) {
64 if (now.length < 7) {
65 $scope.message = '輸入格式不合法';
66 } else {
67 $scope.message = '';
68 }
69 } else {
70 $scope.message = '請輸入使用者名';
71 }
72 });
73
74 // angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite
75 //
76 // angular.element('body')
77 }]);
78 </script>
79 </body>
80
81 </html> 5、表達式（頁面由表達式轉為資料過程的隐藏）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Angular 表達式</title>
7 <style>
8 /* ng-cloak指令就是在NG執行完畢過後自動移除 */
9
10 [ng-cloak],
11 .ng-cloak {
12 display: none;
13 }
14 </style>
15 </head>
16
17 <body ng-app class="ng-cloak">
18 {{ true ? 'true':'false' }}
19 <script src="bower_components/angular/angular.js"></script>
20 </body>
21
22 </html> ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)