我们从一个完整的例子开始认识 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 利用起来，直接作为它的内部机制中，上下文结构的判断依据。比如例子中 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>
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 来显示地做初始化工具，参数指明了根节点，装载的模块（可以是多个模块）。