angular學習-01引導載入
阿新 • • 發佈：2018-12-04
1.angular引入方式，可以使用script標籤引入
<script src="angular.js">
2.angularJS什麼時候初始化
2.1當DOMContentLoaded 事件執行時
2.1.1 DOMContentLoaded 當初始的 HTML 文件被完全載入和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、影象和子框架的完成載入（IE9.0及以上瀏覽器相容）
2.12 還有個load事件還記得不,當文件內容完全載入（包括圖片/音訊/視訊等）完成後觸發,
區別:坑定是先觸發DOMContentLoaded 再觸發load;DOMContentLoaded 需要解析完DOM樹後觸發，DOM樹是HTML DOM節點+CSS OM組合渲染的
2.2當angularJS script標籤執行時
2.2.1 當angularJS 的執行且document.readyState 被置為complete (完整時) 此時尋找ng-app指令開始初始化
2.2.1.1初始化主要做的是，載入ng-app指令所指定的模組，穿件應用所需injector ,以ng-app為根節點，遍歷並編譯DOM,ng-app高蘇你哪裡是angularJS的應用
document.readyState 文件載入狀態 : loading(載入) interractive(完檔載入完成，但子框架，影象，視訊還在載入中) complete(載入完馬上出發load事件) 每次狀態出發 readyStateChange事件
<script>
window.onload=function(){
alert('文件載入完畢');
console.log("文件載入完畢",document.readyState); //complete
}
</script>
<script>
console.log("readyState",document.readyState); //loading
如果你想在初始化之前獲取更多的控制權,那麼可以選擇手動初始化
<!doctype html> <html xmlns:ng="http://angularjs.org"> <body> Hello World! <script src="http://code.angularjs.org/angular.js"></script> <script> angular.element(document).ready(function() { angular.module('myApp', []); angular.bootstrap(document, ['myApp']); }); </script> </body> </html>