安古拉JS工作原理详解

个人认为有必要对AngularJS的运行机制有一个很好的了解，才能尽可能的避免掉坑。在本文中，我将根据网上的信息和自己的理解，对AngularJS在启动后的每一步都做了哪些清晰详细的分析。首先，一小段代码(index.html)，结合代码，让我们看看angular一步步做了什么。

！doctype htmlhtml ng-app头脚本src=' http : angular . js '/脚本/头体png-init=' name=' World ' ' Hello { { name } }！/p/body/html当您使用浏览器访问index.html时，浏览器会依次执行以下操作：

上传html并解析成DOM；加载angular.js脚本；AngularJS等待DOMContentLoaded事件的触发；AngularJS查找ng-app指令，并根据该指令确定应用程序的边界；使用ng-app中指定的模块配置$注射器；使用$injector创建$compile服务和$ rootscope使用$compile服务编译DOM，并将其链接到$ rootScopeng-init指令为作用域中的变量名赋值；替换表达式{{name}}，它将显示为“Hello World！”整个过程可以用这张图来表示：

通过上面的例子，我们知道了AngularJS是如何一步一步地渲染一个页面的。那么它是如何与浏览器的事件循环交互的呢？或者如何与用户互动？大致来说，主要分为三个阶段：

1.浏览器的事件循环一直在等待事件的触发，包括用户交互、定时事件或网络事件(如服务器响应等)。);

2.事件一旦被触发，就会进入Javascript的上下文，一般会修改DOM通过回调函数；

3.执行回调函数后，浏览器根据新的DOM呈现新页面。

如下图所示，交互过程主要由几个循环组成：

AngularJS修改了一般的Javascript工作流，并提供了自己的事件处理机制。这样就把Javascript上下文分成了两部分，一部分是原生的Javascript上下文，另一部分是AngularJS上下文。只有AngularJS上下文中的操作才能享受Angular数据绑定、异常处理、属性观察等服务。但Angular并不总是接受外来者(如原生Javascript操作、自定义事件回调、第三方库等)。).您可以使用AngularJS提供的$apply()函数将这些外部人员包装到AngularJS的上下文中，这样Angular就可以感知他们所做的更改。

接下来，让我们看看这些循环在交互过程中是如何工作的。

1.首先，浏览器会一直处于监听状态。一旦事件被触发，它将被添加到事件队列中，事件队列中的事件将被逐一执行。

2.如果事件队列中的事件被$apply()包装，它将进入AngularJS的上下文，其中fn()是我们想要在AngularJS的上下文中执行的函数。

3.AngularJS将执行fn()函数，这通常会改变一些应用程序状态。

4.然后AngularJS将进入由两个小循环组成的$digest循环，一个循环用于处理$ Evaasync队列(用于调度一些在渲染视图之前需要处理的操作，通常由setTimeout(0)实现，速度会比较慢，可能会造成视图抖动的问题)，另一个循环用于处理$watch list(是一些表达式的集合，一旦有变化，那么， $digest循环将迭代，直到$evalAsync队列为空并且$watch列表为空，也就是说，模型没有变化。

5.一旦AngularJS的$digest循环结束，整个执行将离开AngularJS和Javascript的上下文，然后浏览器将使用更改的数据重新呈现视图。

接下来，让我们结合代码来分析它：

！doctype html html ng-app head script src=' http : angular . js '/script/head body input ng-model=' name ' pHello { { name } }！/p/body/html这段代码和之前的代码唯一的区别就是有一个输入来接收用户的输入。当使用浏览器访问这个html文件时，输入端的ng-model指令会将keydown事件绑定到输入端，并向name变量建议一个$watch，以接收变量值更改的通知。在交互阶段，主要发生以下一系列事件：

1.当用户按下键盘上的一个键(例如，a)时，触发输入上的按键事件；

2.输入指令感知输入值的变化，并调用$ apply ("name=' a ' ")来更新模型；在AngularJS的上下文中；

3.AngularJS为名称分配“a ”;

4.当$ digest循环开始时，$watch list检测到名称值的更改，然后通知{{name}}表达式更新DOM；

5.退出AngularJS的上下文，然后退出Javascript上下文中的keydown事件；

6.浏览器重新呈现视图。

以上是对AngularJS工作原理的资料整理，后续会继续补充相关资料。感谢您对本网站的支持！