码迷,mamicode.com
首页 > 其他好文 > 详细

angular学习-01引导加载

时间:2018-12-04 00:55:04      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:list   加载完成   初始化   dde   cti   script   节点   java   XML   

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"  />
	<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>

 

angular学习-01引导加载

标签:list   加载完成   初始化   dde   cti   script   节点   java   XML   

原文地址:https://www.cnblogs.com/liangfc/p/10061872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!