自動初始化
請將ng-app指令放到你應用的標簽節點中, 如果你想要AngularJS自動執行整個<html>程序就把它放在 <html> 標簽中。比如：<html ng-app>
AngularJS會在DOMContentLoaded事件觸發時執行，並通過ng-app指令尋找你應用的根作用域。如果 ng-app指令找到了，那麼AngularJS將會：
（1）載入指令相關的模塊。這裡指的是optionalModuleName模塊。
（2）創建應用的“注入器(injector)”。
（3）擁有ng-app 指令的標簽為根節點來編譯其中的DOM。
<!doctype html>
<html ng-app="optionalModuleName">
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>
手動初始化
如果你需要主動控制一下初始化的過程，你可以使用手動執行引導程序的方法。
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
</body>
</html>
等頁面和所有的腳本加載完之後，找到HTML模板的根節點——通常就是文檔的根節點。
調用 angular.bootstrap方法，將模板編譯成可執行的、數據雙向綁定的應用程序。
HTML編譯器
HTML在編寫靜態頁面時，有很多聲明式的結構來控制格式。比如你要把某個內容居中，你只需要添加一個 align="center" 的屬性給需要內容居中的元素就行了。這就是聲明式語言的強大之處。
但是聲明式語言也有力所不能及的地方，原因之一在於你不能用它來讓浏覽器識別新的語法。比如說，你不要內容居中，而是居左到1/3,這時它就做不到了。所以我們需要一個辦法讓浏覽器能學會新的HTML語法。
AngularJS的HTML編譯器能讓浏覽器識別新的HTML語法。它能讓你將行為關聯到HTML元素或者屬性上，甚至能讓你創造具有自定義行為的新元素。AngularJS稱這種行為擴展為“指令”。
編譯器是AngularJS提供的一項服務，它通過遍歷DOM來查找和它相關的屬性。整個編譯的過程分為兩個階段。
•編譯： 遍歷DOM並且收集所有的相關指令，生成一個鏈接函數。
•鏈接： 給指令綁定一個作用域，生成一個動態的視圖。作用域模型的任何改變都會反映到視圖上，並且視圖上的任何用戶操作也都會反映到作用域模型。這使得作用域模型成為你的業務邏輯裡唯一要關心的東西。
有一些指令，比如ng-repeat會為數據集合裡的每一項都克隆一次對應的DOM元素。將整個編譯過程分為編譯和鏈接兩個階段的作法改善了整體的性能，因為克隆出來的模板總共只需要被編譯一次，然後鏈接到各自的模型實例上就行了。
指令指示的是“當關聯的HTML結構進入編譯階段時應該執行的操作”。指令可以寫在元素的名稱裡，屬性裡，css類名裡，注釋裡。下面有幾個功能相同的使用ng-bind指令的例子。
<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->
指令本質上只是一個當編譯器編譯到相關DOM時需要執行的函數。
下面是一條能讓元素變得可拖拽的指令。注意<span>元素裡的那個draggable屬性。
<!doctype html>
<html ng-app="drag">
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script>
angular.module('drag', []).directive('draggable', function($document) {
var startX=0, startY=0, x = 0, y = 0;
return function(scope, element, attr) {
element.css({
position: 'relative',
border: '1px solid red',
backgroundColor: 'lightgrey',
cursor: 'pointer'
});
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
});
function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
});
</script>
</head>
<body>
<span draggable>Drag ME</span>
</body>
</html>
通過加入draggable屬性可以讓任何HTML元素都實現這個新的行為。我們這種改進的優美之處在於我們給了浏覽器新能力。我們用了一種只要開發者熟悉HTML規則，就會很自然的擴展浏覽器理解新行為新語法的能力。
angular視圖
網上有很多的模板系統，比如handlerbars。他們大多數都是“將靜態的字符模板和數據綁定，生成新字符，然後通過innerHTML插入到頁面元素中”。這意味著數據上的任何改變，都會導致數據要重新和模板結合生成新字符，再插入到DOM裡。
AngularJS則不同，AngularJS編譯器使用的是帶指令的DOM，而不是字符串模板。它返回的是一個鏈接函數，這個函數和作用域模型結合就會生成一個動態視圖。這個視圖和模型的綁定過程是“透明的”。開發者不需要做任何關於更新視圖的工作。並且應用程序也沒有用到innerHTML。更特別的是，Angular的指令不僅僅能使用字符串形式的綁定，還可以使用一些指示行為的結構體，比如：ng-repeat。
AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm
希望你喜歡，並分享我的工作~帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡
