揭秘AngularJS工作原理

前端之家收集整理的这篇文章主要介绍了揭秘AngularJS工作原理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
原文出处: http://www.jb51.cc/article/p-clvebxjb-baa.html

目录(?)[+]

从本质上讲,在浏览器加载AngularJSweb应用的方式与加载非AngularJS引用的方式一样。但是,它们的运行方式略有不同。

当浏览器触发DOMContentLoaded事件时,AngularJS就开始工作。它首先寻找ng-app指令。[加载AngularJS时,如果document.readyState被设置为complete,AngularJS也会启动初始化。]

如果浏览器在DOM中找到ng-app指令,它会为我们自动启动应用。如果没有找到这个指令Angular期望我们自己手动启动应用。要手动启动一个AngularJS应用,可以使用Angular的bootstrap()方法

   
   
  • 1
  • 2
  • 1
  • 2
var ele = document.createElement("div"); Angular.bootstrap(ele,['myApp']);
    
    
  • 1
    • 1
    Angular.bootstrap(document,0); Box-sizing: border-Box;">'myApp']);

    注意:使用bottstrap()方法只能启动Angular应用一次。

    Angular会使用ng-app指令的值配置 injector injector就会在应用程序创建 @H_502_216@compil@H_502_228@e rootScope创建完成后, compile rootScope与现有的DOM连接起来,然后从设置ng-app指令为根元素的地方开始编译DOM。

    一、视图的工作原理:

    浏览器在提取脚本时(从script标签中),会暂停DOM解析并等待脚本取回。
    当Angular.js被取回时,浏览器会执行它,同时设置一个事件监听器来监听浏览器的DOMContentLoaded事件。

    注意:DOMContentLoaded事件会在HTML文档加载完成并开始解析时触发。

    二、编译阶段:

    compile服务会遍历DOM树并搜集它找到的所有指令,然后将所有指令的链接函数合并为一个单一的链接函数。然后这个链接函数会将编译好的模板连接到$rootScope中。

    三、运行时

    当事件被触发时,事件处理程序就会在指令(AngularJS)的上下文中进行调用。AngularJS会在包含作用域 a@H_337_403@pply()Angular rootScope上启动$digest循环时开始整个过程的,并会传播到所有子作用域中。

    Angular进入 digest evalAsync队列清空,此外 digest watch没有东西改变。然后将回调执行上下文交还给浏览器,DOM将会被渲染到指令的位置。

    [转载请标明出处:http://blog.csdn.net/ligang2585116]

    原文链接:https://www.f2er.com/angularjs/148427.html

    猜你在找的Angularjs相关文章