浏览器加载Angular Web应用的方式

浏览器加载Angular Web应用的方式:

1、浏览器获取Html代码并开始构建Dom树。

2、浏览器在构建Dom树的过程中遇到了angular.js,这时就会提取脚本(angular.js文件),暂停Dom树的构建直至js文件提取完成。

3、angular.js文件提取完成后会设置事件监听器来监听浏览器的DomContentLoaded事件(此事件会在html文档加载完毕即Dom树构建完成后触发)。

4、当angular.js文件监测到DomContentLoaded事件时会立刻启动,首先查找ng-app指令,然后创建一系列必要的组件(即$injector、$compile、$rootscope),然后开始解析刚才创建好的Dom树。

5、angular中的$compile服务会遍历Dom树并搜集它找到的所有指令。

6、执行$injector服务查找的所有指令的compile函数。

7、每个指令的编译方法运行完成后,$xompile服务会调用链接函数,创建实时视图。

8、等待事件触发,angular会执行$digest循环。

9、当有变化发生时调用$watch函数。

10、再次执行$digest循环,直至没有变化。

11、一旦$digest循环稳定下来,执行过程就会离开angular上下文并且回到浏览器中,Dom将会被渲染到这里。

以上仅为自己的理解,仅供参考。

猜你喜欢

转载自blog.csdn.net/weixin_39963132/article/details/78812799