瀏覽器載入Angular Web應用的方式
阿新 • • 發佈:2018-12-27
瀏覽器載入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將會被渲染到這裡。
以上僅為自己的理解,僅供參考。