一：Bootstrap：Angular的初始化

1：Angular推薦的自動化初始如下：

1 <! doctype html >
2
3 < html xmlns:ng ="http://angularjs.org" ng-app >
4
5 < body >
6
7 ...
8
9 < script src ="angular.js" >
10
11 < / body>
12
13 < / html

利用ngapp標示你需要自動引導應用程序的根節點，一般典型為html tag。在DOMContentLoaded事件觸發Angular會自動尋找ngapp作為應用的根節點，如果找到則會進行如下操作：

加載module(模塊)相關directive(指令)。
創建應用程序injector(Angular的注入機制).
編譯處理ng-app作為根節點的指令。這里允許你自定義選擇DOM節點作為應用根節點。

 
          
           
            1  
           <! 
           doctype html 
           > 
           
 
            2  
           
 
            3  
           < 
           html  
           ng-app 
           ="optionalModuleName" 
           > 
           
 
            4  
           
 
            5  
           < 
           body 
           > 
           
 
            6  
           
 
            7 I can add: {{ 1+2 }}. 
           
 
            8  
           
 
            9  
           < 
           script  
           src 
           ="angular.js" 
           ></ 
           script 
           > 
           
 
           10  
           
 
           11  
           </ 
           body 
           > 
           
 
           12  
           
 
           13  
           </ 
           html 
           >

2：手動初始化：

如果想對對初始化有更多的控制權，可以采用自定義手動引導方法初始化代替angular的自動初始化。比如你需要在angular編譯模板之前做一些事情，比如改變模板某些內容。手動引導方式將會如下：

1 <! doctype html >
2
3 < html xmlns:ng ="http://angularjs.org" >
4
5 < body >
6
7 Hello {{'World'}}!
8
9 < script src ="http://code.angularjs.org/angular.js" ></ script >
10
11 < script >
12
13 angular.element(document).ready( function () {
14
15 angular.bootstrap(document);
16
17 });
18
19 </ script >
20
21 </ body >
22
23 </ html >

在頁面所有代碼加載完成后，找到html模板根節點(典型為document元素).
調用api/angular.bootstrap（angular.bootstrap(element[, modules])）編譯模板使其可執行.

二：Compiler：Angular的編譯

Angular的編譯機制允許開發人員給瀏覽器添加新的Html語法，允許我們添加一些html節點，attribute，甚至創建一些自定義的節點，attribute。Angular把這些行為的擴展成為指令directives.Angular帶來了有用的directive，並允許我們創建特定領域的directive。

1: Compiler處理分為兩個步驟：

轉換DOM，收集directive，返回Link(連接)function。
合並指令和Scope產生一個活生生的View。scop mode中的任何改變都會通過反應到view中，並來自view的用戶交互也會同步到scope model，並scope是一個單一數據源。

2:指令Directive

Directive是一個會被特殊的html設計編輯處理的行為。其可以被放置在節點的names, attributes, class 上，甚至是html注釋中。下面是Angular自帶的ng-bind的等價寫法：

1 < span ng-bind ="exp" ></ span >
2
3 < span class ="ng-bind: exp;" ></ span >
4
5 < ng-bind ></ ng-bind >
6 <!-- directive: ng-bind exp –>

directive僅僅是一個在dom中會被Angular執行的一個function。下面是一個拖拽的實例，其可以被應用於span，div的attribute上：

View Code

1 angular.module('drag', []).directive('draggable', function ($document) {
2      var startX = 0,
3         startY = 0,
4         x = 0,
5         y = 0;
6      return function (scope, element, attr) {
7         element.css({
8             position: 'relative',
9             border: '1px solid red',
10             backgroundColor: 'lightgrey',
11             cursor: 'pointer'
12         });
13         element.bind('mousedown', function (event) {
14             startX = event.screenX - x;
15             startY = event.screenY - y;
16             $document.bind('mousemove', mousemove);
17             $document.bind('mouseup', mouseup);
18         });
19
20          function mousemove(event) {
21             y = event.screenY - startY;
22             x = event.screenX - startX;
23             element.css({
24                 top: y + 'px',
25                 left: x + 'px'
26             });
27         }
28
29          function mouseup() {
30             $document.unbind('mousemove', mousemove);
31             $document.unbind('mouseup', mouseup);
32         }
33     }
34 });
35
36

Demo
you can drag and move me to anywhere !

3：view理解

有許多的模板引擎都被設計為模板(template)和數據(model)的合並返回一個字符串，再利用innerHTML追加在DOM節點，這以為則數據的任何改變都必須重新合並生成新的內容追加在DOM上。形如下圖屬於單向綁定技術：

而Angular則不同利用directive指令而非字符串，返回值是一個合並數據model的link function。view和model的綁定是自動，透明的，不需要開發人員添加額外的action去更新view，Angular在這里不僅是數據model的綁定，還有行為概念。作為雙向的綁定，形如下圖：