• 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>
  • 相关阅读:
    使用DOM4J生成XML文档的分析和简单实例
    察看数据库索引使用情况
    SQL Server分布式事务模板
    SQLBulkCopy 性能统计
    个人技术发展思路
    在SQLServer 中利用OUTPUT 语句实现删除数据的同时备份数据
    对一段SQL进行语法检查
    LoD 迪米特法则
    开发心得
    实现一个服务的基础结构和管理本地服务和WCF服务的管理器
  • 原文地址:https://www.cnblogs.com/liangfc/p/10061872.html
Copyright © 2020-2023  润新知