1. 程式人生 > >瀏覽器載入Angular Web應用的方式

瀏覽器載入Angular Web應用的方式

瀏覽器載入Angular Web應用的方式:

1、瀏覽器獲取Html程式碼並開始構建Dom樹。

2、瀏覽器在構建Dom樹的過程中遇到了angular.js,這時就會提取指令碼(angular.js檔案),暫停Dom樹的構建直至js檔案提取完成。

3、angular.js檔案提取完成後會設定事件監聽器來監聽瀏覽器的DomContentLoaded事件(此事件會在html文件載入完畢即Dom樹構建完成後觸發)。

4、當angular.js檔案監測到DomContentLoaded事件時會立刻啟動,首先查詢ng-app指令,然後建立一系列必要的元件(即$injector、$compile、$rootscope),然後開始解析剛才建立好的Dom樹。

5、angular中的$compile服務會遍歷Dom樹並蒐集它找到的所有指令。

6、執行$injector服務查詢的所有指令的compile函式。

7、每個指令的編譯方法執行完成後,$xompile服務會呼叫連結函式,建立實時檢視。

8、等待事件觸發,angular會執行$digest迴圈。

9、當有變化發生時呼叫$watch函式。

10、再次執行$digest迴圈,直至沒有變化。

11、一旦$digest迴圈穩定下來,執行過程就會離開angular上下文並且回到瀏覽器中,Dom將會被渲染到這裡。

 

以上僅為自己的理解,僅供參考。