點擊查看AngularJS系列目錄
轉載請注明出處:http://www.cnblogs.com/leosx/
Bootstrap(初始化)
這章介紹了Angular的初始化過程,以及如何在必要的時候,手動進行初始化Angular。
-
Angular <script> 標簽
- 什么都不說,先來個例子。 這個例子展示了Angular推薦的如何繼承Angular和自動初始化Angular。
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
1. 我們應該講Script標簽放在頁面底部。這樣可以改善應用程序的加載時間。 你可以從http://code.angularjs.org去獲得最新的版本。
2. ng-app指示了你的Angular應用程序的根。如果你希望你的整個頁面都是Angular應用程序,那么你可以把它放到<html>標簽上。
3.如果你選擇比較舊式的指令語法,例如:為了兼容IE低版本,你在html標簽中使用命名空間(這個是個歷史原因,我們是不推薦你使用命名空間的)。
自動初始化
如果引用了angular.js腳本,而且document.readyState為“complete”狀態,那么AngularJS會在DOMContentLoaded事件中自動初始化。此時,Angular會先去查找 ng-app指令作為你的應用程序的根。如果Angular發現了 ng-app指令,那么它將:
1. 加載與這個指令相關的模塊。
2. 創建應用程序注入器。
3. 編譯器將ng-app指令作為一個根去編譯為對應的DOM樹。在這里,你就可以告訴Angular應用程序,把哪部分DOM編譯為Angular應用程序的一部分。
<!doctype html> <html ng-app="optionalModuleName"> <body> I can add: {{ 1+2 }}. <script src="angular.js"></script> </body> </html>
手動初始化(可以解決IE低版本瀏覽器問題)
如果你想要去控制Angular應用程序的初始化過程,那么你可以使用手動引導啟動的方法。當然,你也可以使用一個手動啟動器方法去代替掉原來的啟動方法,手動初始化調用angular.bootstrap()方法。直接來一個例子吧!
<!doctype html> <html> <body> <div ng-controller="MyController"> Hello {{greetMe}}! </div> <script src="http://code.angularjs.org/snapshot/angular.js"></script> <script> angular.module('myApp', []) .controller('MyController', ['$scope', function ($scope) { $scope.greetMe = 'World'; }]); angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); }); </script> </body> </html>
請注意,我們把我們的應用程序名稱(上例中就是模塊myApp的名稱“myApp”)通過injector注入器 注入到了angular.bootstrap方法中的第二個參數中去。需要注意的是,angular.bootstrap 它不動態去創建模塊,所以當你把它當做參數傳遞的時候,你必須自己去創建你的模塊。下面來看看另一個手動初始化Angular的例子:
你應該在你定義了和加載了你的module之后再去調用 angular.bootstrap() 方法。你不可以在angular.bootstrap() 調用之后再去增加controller, service, directives等等…
注意:當你手動啟動你的應用程序的時候,你是不可以再去使用 ng-app 指令的。。
你的代碼應該遵循這樣的順序:
1. 當你的所有文件,代碼都加載完畢之后,去找到你的根元素(要作為Angular應用程序的那個元素),通常,我們都是將文檔(document)作為的我們的根。
2. 調用 angular.bootstrap,去編譯為一個可以進行雙向綁定的可執行的Angular應用程序。
延遲啟動
這個特性允許類似Batarang的工具,和測試工具去鈎住Angular的啟動流程,然后偷偷的在模塊的依賴注入器中,替換掉多個需要注入的參數的注入對象,也可增加一些需要注入的服務,還可以重新整理依賴關系。
如果將 window.name的值加上一個”NG_DEFER_BOOTSTRAP”前綴,當angular.bootstrap被調用的時候,啟動過程會暫停,知道angular.resumeBootstrap() 方法被調用。
angular.resumeBootstrap() 方法接受一個可選的數組,用來指示哪些模塊應該被添加到原始應用程序的啟動器中。