zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Codeforces Round #649 (Div. 2) D. Ehab's Last Corollary
    Educational Codeforces Round 89 (Rated for Div. 2) E. Two Arrays
    Educational Codeforces Round 89 (Rated for Div. 2) D. Two Divisors
    Codeforces Round #647 (Div. 2) E. Johnny and Grandmaster
    Codeforces Round #647 (Div. 2) F. Johnny and Megan's Necklace
    Codeforces Round #648 (Div. 2) G. Secure Password
    Codeforces Round #646 (Div. 2) F. Rotating Substrings
    C++STL常见用法
    各类学习慕课(不定期更新
    高阶等差数列
  • 原文地址:https://www.cnblogs.com/liangfc/p/10061872.html
Copyright © 2011-2022 走看看