本文主要介紹AngularJS的自動初始化以及在必要的適合如何手動初始化。
Angular <script> Tag
下面通過一小段代碼來介紹推薦的自動初始化過程:
<!doctype html><html xmlns:ng="http://angularjs.org" ng-app><body> ... <script src="angular.js"></body></html>
<html ng-app> … </html>
<html id="ng-app" ng-app> … </html>
<html xmlns:ng="http://angularjs.org"> … </html>
自動初始化(Automatic Initialization)
在DOMContentLoaded事件觸發(fā)時Angular會執(zhí)行自動初始化過程。這時,Angular會查找ng-app指令,并用它來標(biāo)明整個應(yīng)用的根作用域。如果找到了ng-app指令,Angular會做一下幾件事:
手動初始化(Manual Initialization)
如果你想更多的來控制初始化的過程,你可以手動的執(zhí)行引導(dǎo)程序。比如你需要用到腳本加載器(script loader)或者要在Angular編譯頁面之前加入一些操作的話,你就需要手動的調(diào)用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函數(shù)簽名如下:
參數(shù) | 類型 | 說明 |
element | Element | 作為Angular應(yīng)用根作用域的DOM元素 |
modules (optional) | Array<String|Function|Array> | 數(shù)組中為所有需要加載的模塊的的名稱,每個模塊的名字需要在此之前定義,Angular不會在運行到這里時自己去定義模塊。 |
如果手動調(diào)用初始化函數(shù)的話,代碼的書寫需要遵循以下順序:
延遲引導(dǎo)(Deferred Bootstrap)
這個特性使得像Batarang這樣的工具和一些test runner能夠在Angular的引導(dǎo)過程中建立鉤子,在注冊需要注入的依賴的時候可以增加或者替換注入的service,或者mock一些比較重的依賴。當(dāng)angular.bootstrap被調(diào)用時如果window.name中包含前綴NG_DEFER_BOOTSTRAP!,引導(dǎo)過程將會被暫停直到angular.resumeBootstrap()被調(diào)用。angular.resumeBootstrap()可以傳入一個可選的模塊數(shù)組作為參數(shù),這個數(shù)組中的模塊會被加到引導(dǎo)函數(shù)的模塊數(shù)組中一起被初始化。