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> 10
11 </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> 20
21
22 <script type="text/javascript" charset="utf-8"> 23
24
25 var BoxCtrl = function($scope, $element){ 26
27 //$element 就是一个 jQuery 对象 28 var e = $element.children().eq(0); 29 $scope.w = e.width(); 30 $scope.h = e.height(); 31
32 $scope.click = function(){ 33 $scope.w = parseInt($scope.w) + 10; 34 $scope.h = parseInt($scope.h) + 10; 35 } 36
37 $scope.$watch('w', 38 function(to, from){ 39 e.width(to); 40 } 41 ); 42
43 $scope.$watch('h', 44 function(to, from){ 45 e.height(to); 46 } 47 ); 48 } 49
50 angular.bootstrap(document.documentElement); 51 </script> 52 </body> 53 </html>

从上面的代码中,我们看到在通常的 HTML 代码当中,引入了一些标记,这些就是 ng 的模板机制,它不光完成数据渲染的工作,还实现了数据绑定的功能。

同时,在 HTML 中的本身的 DOM 层级结构,被 ng 利用起来,直接作为它的内部机制中,上下文结构的判断依据。比如例子中 pdiv 的子节点,那么 p 中的那些模板标记就是在 divCtrl 的作用范围之内。

其它的,也同样写一些 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> 10
11 </head> 12 <body> 13
14 <div ng-controller="TestCtrl"> 15 <input type="text" value="" id="a" /> 16 </div> 17
18
19 <script type="text/javascript"> 20 var TestCtrl = function(){ 21 console.log('ok'); 22 } 23
24 //angular.bootstrap(document.documentElement); 25 angular.module('MyApp', [], function(){console.log('here')}); 26 </script> 27
28 </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 来显示地做初始化工具,参数指明了根节点,装载的模块(可以是多个模块)。