AngularJS执行流程的示例分析

这篇文章主要介绍了AngularJS执行流程的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一.启动阶段

浏览器解析HTML页面，读取到angular.js的<script>标签后会停止解析后面的DOM节点，开始执行angular.js，与此同时，Angular会设置一个事件监听器来监听DOMContentLoaded事件，当Angular监听到这个事件后，Angular就启动了。

二.初始化阶段

Angular启动后，它会查找ng-app指令，然后初始化一系列必要的组件（即$injector、$compile服务以及$rootScope），接着继续解析DOM。

三.编译、链接阶段

1.Angular使用$compile服务通过遍历DOM树的方式查找带有指令的DOM元素，然后根据指令的priority优先级对这些查找到的指令进行排序。

2.之后使用$injector服务查找和收集每个指令下面的compile函数，并执行它。

3.每个节点的compile方法运行之后，$compile服务就会调用链接函数。这个链接函数为绑定了封闭作用域的指令设置监控。这一行为会创建实时视图。

4.以上所有完成后，Angular启动完成

四.运行阶段

Angular提供了自己的事件循环。指令自身会注册事件监听器，因此当事件被触发时，指令函数就会运行在AngularJS的$digest循环中。$digest循环会等待$watch表达式列表，当检测到模型变化后，就会调用$watch函数，然后再次查看$watch列表以确保没有模型被改变。一旦$digest循环稳定下来，并且检测到没有潜在的变化了，执行过程就会离开Angular上下文并且通常会回到浏览器中。

感谢你能够认真阅读完这篇文章，希望小编分享的“AngularJS执行流程的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!