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 </script> <img src="img/HBuilder.png" alt="" /> <script> window.addEventListener("DOMContentLoaded",function(){ alert("DOM加载完毕"); console.log("DOM加载完毕",document.readyState); //interractive }) </script>
如果你想在初始化之前获取更多的控制权,那么可以选择手动初始化
<!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>