开始的例子

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 来显示地做初始化工具，参数指明了根节点，装载的模块（可以是多个模块）。