AngularJS執(zhí)行流程詳解
一.啟動(dòng)階段
瀏覽器解析HTML頁(yè)面,讀取到angular.js的<script>標(biāo)簽后會(huì)停止解析后面的DOM節(jié)點(diǎn),開(kāi)始執(zhí)行angular.js,與此同時(shí),Angular會(huì)設(shè)置一個(gè)事件監(jiān)聽(tīng)器來(lái)監(jiān)聽(tīng)DOMContentLoaded事件,當(dāng)Angular監(jiān)聽(tīng)到這個(gè)事件后,Angular就啟動(dòng)了。
二.初始化階段
Angular啟動(dòng)后,它會(huì)查找ng-app指令,然后初始化一系列必要的組件(即$injector、$compile服務(wù)以及$rootScope),接著繼續(xù)解析DOM。
三.編譯、鏈接階段
1.Angular使用$compile服務(wù)通過(guò)遍歷DOM樹(shù)的方式查找?guī)в兄噶畹腄OM元素,然后根據(jù)指令的priority優(yōu)先級(jí)對(duì)這些查找到的指令進(jìn)行排序。
2.之后使用$injector服務(wù)查找和收集每個(gè)指令下面的compile函數(shù),并執(zhí)行它。
3.每個(gè)節(jié)點(diǎn)的compile方法運(yùn)行之后,$compile服務(wù)就會(huì)調(diào)用鏈接函數(shù)。這個(gè)鏈接函數(shù)為綁定了封閉作用域的指令設(shè)置監(jiān)控。這一行為會(huì)創(chuàng)建實(shí)時(shí)視圖。
4.以上所有完成后,Angular啟動(dòng)完成
四.運(yùn)行階段
Angular提供了自己的事件循環(huán)。指令自身會(huì)注冊(cè)事件監(jiān)聽(tīng)器,因此當(dāng)事件被觸發(fā)時(shí),指令函數(shù)就會(huì)運(yùn)行在AngularJS的$digest循環(huán)中。$digest循環(huán)會(huì)等待$watch表達(dá)式列表,當(dāng)檢測(cè)到模型變化后,就會(huì)調(diào)用$watch函數(shù),然后再次查看$watch列表以確保沒(méi)有模型被改變。一旦$digest循環(huán)穩(wěn)定下來(lái),并且檢測(cè)到?jīng)]有潛在的變化了,執(zhí)行過(guò)程就會(huì)離開(kāi)Angular上下文并且通常會(huì)回到瀏覽器中。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
Angularjs渲染的 using 指令的星級(jí)評(píng)分系統(tǒng)示例
本篇文章主要介紹了Angularjs渲染的 using 指令的星級(jí)評(píng)分系統(tǒng)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼
本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件
這篇文章主要為大家介紹了Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05AngularJS ng-controller 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-controller 指令,這里對(duì)ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08angular.js實(shí)現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實(shí)現(xiàn)列表orderby排序的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10angular.js指令中transclude選項(xiàng)及ng-transclude指令詳解
這篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude選項(xiàng)的相關(guān)資料,文中介紹的非常詳細(xì),并給出了完整的示例代碼大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-05-05Angular通過(guò)angular-cli來(lái)搭建web前端項(xiàng)目的方法
這篇文章主要介紹了Angular通過(guò)angular-cli來(lái)搭建web前端項(xiàng)目的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07詳解用webpack2搭建angular2的項(xiàng)目
本篇文章主要介紹了詳解用webpack2搭建angular2的項(xiàng)目 ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06