Angular的啟動分為手動和自動兩種。
自動啟動
定義模塊的例子中,采用的就是自動的方式:通過內置的指令ngApp 來指定啟動時加載的模塊。<html ng-app="myApp">
根據官方文檔,Angular的自動初始化發生在兩個時機:
1、響應DOMContentLoaded事件(頁面文檔完全加載並解析完畢后會觸發該事件,不會等待圖片、樣式文件)
2、document.readyState的值為'complete'。(兼容IE8,頁面完全加載,相當於load事件觸發)
這時,Angular會調用angularInit方法進行初始化,首先查找ngApp directive,該directive指定了應用程序的根結點,通常位於初始頁面的<html>標記上。當然,ngApp如果位於某個子結點(如div元素),則可以將Angular應用程序限制在DOM樹的一部分上。如果Angular找到了ngApp,則會調用bootstrap方法開始啟動過程,主要工作如下:
- 加載ngApp指定的模塊
- 創建應用程序的依賴注入對象(injector)。此時$compile,$rootScope會被注入,用於后續的compile過程。有關依賴注入過程有后文。
- 以ngApp為根結點,compile整個DOM樹。有關compile過程,在后續文章中詳談。
手動啟動
有些情況下,開發者需要在初始化階段做些額外的配置或控制,比如include一些模塊或者需要在compile過程之前完成一些工作。這就需要手動啟動。手動啟動通過angular.bootstrap方法。一個例子如下:
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
該方法的第一個參數指定了Angular應用所在的根DOM元素;
第二個參數定義了需要依賴加載的模塊(相當於ngApp),該模塊必須事先定義完成(包括其controller,directive等組件),bootstrap方法不會定義該模塊。
(該方法還有第三個參數,參見這里)。一個Anuglar應用一旦啟動,就不能再添加controller, service等組件。
值得注意的是:
- angular.bootstrap只會綁定第一次加載的對象。
- 后面重復的綁定或者其他對象的綁定,都會在控制台輸出錯誤提示。
