angular学习-01引导加载

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>