AngularJS：应用的启动和执行过程

转载于 2021-04-28 10:58:27 发布 · 893 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_30787531/article/details/95214486

Angular 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了AngularJS应用的启动和执行过程。从浏览器加载HTML、解析DOM，到AngularJS初始化、编译服务创建及数据绑定，再到运行时的事件处理和数据模型更新，深入剖析了AngularJS的内部工作机制。同时，阐述了AngularJS如何通过$apply方法管理和协调JavaScript执行上下文，确保数据绑定和视图同步。

启动（startup）：

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
  </head>
  <body>
    <p ng-init=" name='World' ">Hello {{name}}!</p>
  </body>
</html>

1、浏览器载入HTML，然后把它解析成DOM树。
2、浏览器载入angular.js脚本。
3、AngularJS等到DOMContentLoaded事件触发执行。
4、AngularJS寻找ng-app指令，这个指令指示了应用程序的边界。
5、使用ng-app中指定的模块来配置注入器($injector)。
6、注入器( $i n j e c t o r) 是用来创建 “ 编译服务 ($ compile service)”和“根作用域($rootScope)”的。
7、编译服务( $c o m p i l e s e r v i c e) 是用来编译 D O M 树并把它链接到根作用域 ($ rootScope)的，这里的根作用域就是html。
8、ng-init指令将“World”赋给作用域里的name这个变量。
9、作用域中的name与页面上的{{name}}绑定，整个表达式变成了“Hello World”。

执行（runtime）：

浏览器的事件机制：

1、浏览器的Event loop等待事件的触发。所谓事件包括用户的交互操作、定时事件、或者网络事件(服务器的响应)。
2、事件触发后，如果有绑定事件回调函数，那么此函数就会被执行。此时会进入Javascript上下文。通常回调用来修改DOM结构。
3、一旦回调执行完毕，浏览器就会离开Javascript上下文，并且根据DOM的修改重新渲染视图。

而AngularJS通过使用自己的Event loop，改变了传统的Javascript工作流。这使得Javascript的执行被分成原生部分和拥有AngularJS执行上下文的部分。只有在AngularJS执行上下文中运行的操作，才能享受到AngularJS提供的数据绑定，异常处理，资源管理等功能和服务。你可以使用 $a p p l y () 方法，从普通 J a v a s c r i p t 上下文进入 A n g u l a r J S 执行上下文。记住，大部分情况下（如在控制器，服务中），$ apply都已经被执行过了。只有当你使用自定义的事件回调或者是使用第三方类库的回调时，才需要自己执行$apply。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
  </head>
  <body>
    <input ng-model="name">
    <p>Hello {{name}}!</p>
  </body>
</html>

在编译阶段：
　　input元素上的ng-model指令会给输入框绑定keydown事件；
　　{{name}}这个变量替换表达式建立了一个 $watch ，来接受 name 变量改变的通知。
　　
在执行期阶段：
　　按下任何一个键(以X键为例)，都会触发一个 input 输入框的keydown事件；
　　input 上的指令捕捉到 input 内容的改变，然后调用 $a p p l y (" n a m e =^{'} X^{'}; ") 来更新处于 A n g u l a r J S 执行上下文中的模型； A n g u l a r J S 将 n a m e =^{'} X^{'} 应用到模型上；$ digest 循环开始；这个循环是由两个小循环组成的，这两个小循环用来处理 $e v a l A s y n c 队列和$ watch列表。这个 $d i g e s t 循环直到模型 “ 稳定 ” 前会一直迭代。这个稳定具体指的是$ evalAsync列表为空，并且 $w a t c h 列表中检测不到任何改变了。这个$ evalAsync队列是用来管理那些“视图渲染前需要在当前栈外执行的操作”。这通常使用 setTimeout(0)来完成的。并且，因为浏览器会根据事件队列按顺序渲染视图，这时还会造成视图的抖动。 $w a t c h 列表是一个表达式的集合，这些表达式可能是自上次迭代后发生了改变的。如果检测到了有改变，那么$ watch函数就会被调用，它通常会把新的值更新到DOM中。