AngularJS执行过程的详细介绍

一.开办阶段

每个人都应该知道，当浏览器加载一个HTML页面时，它会先将HMTL页面解析成一个DOM树，然后逐个加载DOM树中的每个元素节点。我们可以把Angularjs看作是一个类似jQuery的js库，我们通过脚本标签把它引入到HTML中。此时，Angular被视为一个普通的DOM节点，等待浏览器解析。当浏览器解析这个节点时，发现它是一个js文件，所以浏览器会停止解析剩下的DOM节点，开始执行这个JS(即angular.js)。同时，Angular将设置一个事件监听器来监听浏览器的DOMContentLoaded事件。当Angular监听此事件时，它将启动Angular应用程序。

第二，初始化阶段

当Angular开始启动时，它会寻找ng-app指令，初始化一系列必要的组件(即$injector、$compile service和$rootScope)，然后重新开始解析DOM树。

第三，编译和链接

$compile服务通过遍历DOM树找到带有声明指令的DOM元素。当遇到具有一个或多个指令的DOM元素时，它会对指令进行排序(基于指令的优先级优先级)，然后使用$injector服务来查找和收集指令的编译函数并执行它。

每个节点的编译方法运行后，$compile服务将调用link函数。此链接功能设置对绑定到封闭范围的指令的监控。这种行为会创建实时视图。

最后，在$compile服务完成之后，AngularJS运行时就准备好了。

四.操作阶段

Angular提供了自己的事件周期。指令本身注册了一个事件监听器，因此当事件被触发时，指令函数在AngularJS的$digest循环中运行。$digest循环将等待$watch表达式列表。当检测到型号变化时，它将调用$watch函数，然后再次检查$watch列表以确保没有型号变化。

一旦$digest循环稳定下来并且没有检测到潜在的变化，执行过程将离开Angular上下文，通常返回到浏览器，在那里将呈现DOM。

画出上述过程的关键步骤图，如下所示：

以上是对AngularJS实现过程的详细介绍，后续我们会继续整理相关材料。感谢您对本网站的支持。