AngularJS的初始化
本文主要介紹AngularJS的自動初始化以及在必要的適合如何手動初始化。
Angular <script> Tag
下面通過一小段代碼來介紹推薦的自動初始化過程：
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
- 把script標簽放在頁面的底部可以縮短應用加載的時間，因為這樣的話Html的加載不會被angular.js腳本的加載阻塞。
- angular-[version].js是具有可讀性的版本，適用於開發和調試。
- angular-[version].min.js是壓縮和混淆后的版本，適用於產品代碼。
- 如果你想讓angular自動初始化的話，可以在<html>標簽中加上ng-app
<html ng-app> … </html>
- 如果要支持IE7的話需要加上id="ng-app"
<html id="ng-app" ng-app> … </html>
- 如果要使用舊版的指令語法（ng:）的話，要支持IE還需要在<html>標簽中引入xml的命名空間（因為一些歷史原因，現在已經不推薦使用ng:的語法了）
<html xmlns:ng="http://angularjs.org"> … </html>
自動初始化（Automatic Initialization）
在DOMContentLoaded事件觸發時Angular會執行自動初始化過程。這時，Angular會查找ng-app指令，並用它來標明整個應用的根作用域。如果找到了ng-app指令，Angular會做一下幾件事：
- 加載和指令（directive）內容相關的模塊（module）
- 創建一個應用“注入器”（injector）
- 將含有ng-app指令的節點作為根節點來編譯DOM。這樣一來，你可以只指定一部分DOM作為Angular應用。
手動初始化（Manual Initialization）
如果你想更多的來控制初始化的過程，你可以手動的執行引導程序。比如你需要用到腳本加載器（script loader）或者要在Angular編譯頁面之前加入一些操作的話，你就需要手動的調用Angular的初始化方法了。例如：
<!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.module('myApp',[]); angular.bootstrap(document,['myApp']); }); </script> </body> </html>
注意：angular.bootstrap函數簽名如下：
| 參數 | 類型 | 說明 |
| element | Element | 作為Angular應用根作用域的DOM元素 |
| modules (optional) |
Array<String|Function|Array> | 數組中為所有需要加載的模塊的的名稱，每個模塊的名字需要在此之前定義，Angular不會在運行到這里時自己去定義模塊。 |
如果手動調用初始化函數的話，代碼的書寫需要遵循以下順序：
- 等到頁面加載完成后，找到AngularJS的根元素（通常是文檔的根元素）。
- 調用angular.bootstrap函數將模板編譯成可以執行的、數據雙向綁定的應用程序。
延遲引導（Deferred Bootstrap）
這個特性使得像Batarang這樣的工具和一些test runner能夠在Angular的引導過程中建立鈎子，在注冊需要注入的依賴的時候可以增加或者替換注入的service，或者mock一些比較重的依賴。當angular.bootstrap被調用時如果window.name中包含前綴NG_DEFER_BOOTSTRAP!，引導過程將會被暫停直到angular.resumeBootstrap()被調用。angular.resumeBootstrap()可以傳入一個可選的模塊數組作為參數，這個數組中的模塊會被加到引導函數的模塊數組中一起被初始化。
=============Angular JS學習筆記系列=============
- AngularJS學習筆記1——什么是AngularJS？
- AngularJS學習筆記2——AngularJS的初始化
=========================================
作者：make dream