• 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>
  • 相关阅读:
    MAC OSX 下 使用openssl 命令 生成RSA公钥和私钥
    iOS 高效开发-----延时执行用GCD
    iOS 高效开发-----实现description 方法 (续)
    iOS 高效开发-----实现description 方法
    ios 高效开发-----字面量
    利用脚本打包的动态库 在打包发布时出现得问题解析 ERROR ITMS-90362等
    打包framework 涉及到得架构问题
    XCode 6 制作framework
    【Mac软件推荐】终端常用者的萌物Go2Shell
    项目总结吧
  • 原文地址:https://www.cnblogs.com/liangfc/p/10061872.html
Copyright © 2020-2023  润新知