在上節簡單介紹了angular js架構，在這節将繼續angular的bootstrap(引導)和compiler(編譯)機制。
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。在<code>domcontentloaded事件觸發angular會自動尋找ngapp作為應用的根節點，如果找到則會進行如下操作：</code>
<code>加載module(子產品)相關directive(指令)。</code>
<code>編譯處理ng-app作為根節點的指令。這裡允許你自定義選擇dom節點作為應用根節點。</code>
<code></code><code></code>
<code></code><code> 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></code>
<code></code>
<code></code>
如果想對對初始化有更多的控制權，可以采用自定義手動引導方法初始化代替angular的自動初始化。比如你需要在angular編譯模闆之前做一些事情，比如改變模闆某些内容。手動引導方式将會如下：
3 <html xmlns:ng="http://angularjs.org">
7 hello {{'world'}}!
9 <script src="http://code.angularjs.org/angular.js"></script>
11 <script>
13 angular.element(document).ready(function() {
14
15 angular.bootstrap(document);
16
17 });
18
19 </script>
20
21 </body>
22
23 </html>
在頁面所有代碼加載完成後，找到html模闆根節點(典型為document元素).
轉換dom，收集directive，傳回link(連接配接)function。
合并指令和scope産生一個活生生的view。scop mode中的任何改變都會通過反應到view中，并來自view的使用者互動也會同步到scope model，并scope是一個單一資料源。
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上：
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
you can drag and move me to anywhere !
有許多的模闆引擎都被設計為模闆(template)和資料(model)的合并傳回一個字元串，再利用<code>innerhtml追加在dom節點，這以為則資料的任何改變都必須重新合并生成新的内容追加在dom上。形如下圖屬于單向綁定技術：</code>
<code> 而angular則不同利用directive指令而非字元串，傳回值是一個合并資料model的link function。view和model的綁定是自動，透明的，不需要開發人員添加額外的action去更新view，angular在這裡不僅是資料model的綁定，還有行為概念。作為雙向的綁定，形如下圖：</code>
資料：
angular随筆：
<a href="http://www.cnblogs.com/whitewolf/archive/2012/08/12/2635586.html">angularjs - javascript mvc 架構</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2012/08/13/2637262.html">angular-bootstrap和compiler</a>
其他章節還在翻譯中...希望大家多多指教，對于翻譯我不會去按照原文完全翻譯，會按照自己的了解。