開始的例子 · AngularJS學習筆記

# 3. 開始的例子我們從一個完整的例子開始認識 ng ： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 6 <title>試驗</title> 7 8 <script type="text/javascript" src="jquery-1.8.3.js"></script> 9 <script type="text/javascript" src="angular.js"></script> 1011 </head> 12 <body> 13 <div ng-controller="BoxCtrl"> 14 <div style="width: 100px; height: 100px; background-color: red;" 15 ng-click="click()"></div> 16 <p>{{ w }} x {{ h }}</p> 17 <p>W: <input type="text" ng-model="w" /></p> 18 <p>H: <input type="text" ng-model="h" /></p> 19 </div> 202122 <script type="text/javascript" charset="utf-8"> 232425 var BoxCtrl = function($scope, $element){ 2627 //$element 就是一個 jQuery 對象 28 var e = $element.children().eq(0); 29 $scope.w = e.width(); 30 $scope.h = e.height(); 3132 $scope.click = function(){ 33 $scope.w = parseInt($scope.w) + 10; 34 $scope.h = parseInt($scope.h) + 10; 35 } 3637 $scope.$watch('w', 38 function(to, from){ 39 e.width(to); 40 } 41 ); 4243 $scope.$watch('h', 44 function(to, from){ 45 e.height(to); 46 } 47 ); 48 } 4950 angular.bootstrap(document.documentElement); 51 </script> 52 </body> 53 </html> 從上面的代碼中，我們看到在通常的 HTML 代碼當中，引入了一些標記，這些就是 ng 的模板機制，它不光完成數據渲染的工作，還實現了數據綁定的功能。同時，在 HTML 中的本身的 DOM 層級結構，被 ng 利用起來，直接作為它的內部機制中，上下文結構的判斷依據。比如例子中 _p_ 是 _div_ 的子節點，那么 _p_ 中的那些模板標記就是在 _div_ 的 _Ctrl_ 的作用范圍之內。其它的，也同樣寫一些 js 代碼，里面重要的是作一些數據的操作，事件的綁定定義等。這樣，數據的變化就會和頁面中的 DOM 表現聯系起來。一旦這種聯系建立起來，也即完成了我們所說的“雙向綁定”。然后，這里說的“事件”，除了那些“點擊”等通常的 DOM 事件之外，我們還更關注“數據變化”這個事件。最后，可以使用： angular.bootstrap(document.documentElement); 來把整個頁面驅動起來了。（你可以看到一個可被控制大小的紅色方塊）更完整的方法是定義一個 APP ： 1 <!DOCTYPE html> 2 <html ng-app="MyApp"> 3 <head> 4 <meta charset="utf-8" /> 5 6 <title>數據正向綁定</title> 7 8 <script type="text/javascript" src="jquery-1.8.3.js"></script> 9 <script type="text/javascript" src="angular.js"></script> 1011 </head> 12 <body> 1314 <div ng-controller="TestCtrl"> 15 <input type="text" value="" id="a" /> 16 </div> 171819 <script type="text/javascript"> 20 var TestCtrl = function(){ 21 console.log('ok'); 22 } 2324 //angular.bootstrap(document.documentElement); 25 angular.module('MyApp', [], function(){console.log('here')}); 26 </script> 2728 </body> 29 </html> 這里說的一個 App 就是 _ng_ 概念中的一個 _Module_ 。對于 _Controller_ 來說，如果不想使用全局函數，也可以在 app 中定義： var app = angular.module('MyApp', [], function(){console.log('here')}); app.controller('TestCtrl', function($scope){ console.log('ok'); } ); 上面我們使用 _ng-app_ 來指明要使用的 App ，這樣的話可以把顯式的初始化工作省了。一般完整的過程是： var app = angular.module('Demo', [], angular.noop); angular.bootstrap(document, ['Demo']); 使用 `angular.bootstrap` 來顯示地做初始化工具，參數指明了根節點，裝載的模塊（可以是多個模塊）。