AngularJS 工作原理详解

个人觉得，要很好的理解AngularJS的运行机制，才能尽可能避免掉到坑里面去。在这篇文章中，我将根据网上的资料和自己的理解对AngularJS的在启动后，每一步都做了些什么，做一个比较清楚详细的解析。
     首先上一小段代码（index.html），结合代码我们来看看，angular一步一步都做了些什么。

<!doctype html>
<html ng-app>
 <head>
 <script src="angular.js"></script>
 </head>
 <body>
 <png-init=" name='World' ">Hello {{name}}!</p>
 </body>
</html>

当你用浏览器去访问index.html的时候，浏览器依次做了如下一些事情：

  1. 加载html，然后解析成DOM；
  2. 加载angular.js脚本；
  3. AngularJS等待DOMContentLoaded事件的触发；
  4. AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界；
  5. 使用ng-app中指定的模块配置$injector；
  6. 使用$injector创建$compile服务和$rootScope；
  7. 使用$compile服务编译DOM并把它链接到$rootScope上；
  8. ng-init指令对scope里面的变量name进行赋值；
  9. 对表达式{{name}}进行替换，于是乎，显示为“Hello World!”    

　　整个过程可以用这张图来表示：

好了，通过上面的例子我们清楚了AngularJS是怎样一步一步渲染出一个页面的。那么它又是如何和浏览器的事件回路来交互的呢？或者说是如何跟用户来交互的呢？粗略来讲，主要分为三个阶段：

　　1.  浏览器的事件回路一直等待着事件的触发，事件包括用户的交互操作、定时事件或者网络事件（如服务器的响应等）；

　　2.  一旦有事件触发，就会进入到Javascript的context中，一般通过回调函数来修改DOM；

　　3.  等到回调函数执行完毕之后，浏览器又根据新的DOM来渲染新的页面。

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

AngularJS修改了一般的Javascript工作流，并且提供了它自己的事件处理机制。这样就把Javascript的context分隔成两部分，一部分是原生的Javascript的context，另一部分是AngularJS的context。只有处在AngularJS的context中的操作才能享受到Angular的data-binding、exception handling、property watching等服务，但是对于外来者（如原生的Javascript操作、自定义的事件回调、第三方的库等）Angular也不是一概不接见，可以使用AngularJS提供的$apply()函数将这些外来者包进AngularJS的context中，让Angular感知到他们产生的变化。

接下来，让我们一起来看看交互过程中的这几个循环是怎么工作的？

　　1.  首先，浏览器会一直处于监听状态，一旦有事件被触发，就会被加到一个event queue中，event queue中的事件会一个一个的执行。

　　2.  event queue中的事件如果是被$apply()包起来的话，就会进入到AngularJS的context中，这里的fn()是我们希望在AngularJS的context中执行的函数。

　　3.  AngularJS将执行fn()函数，通常情况下，这个函数会改变应用的某些状态。

　　4.  然后AngularJS会进入到由两个小循环组成的$digest循环中，一个循环是用来处理$evalAsync队列（用来schedule一些需要在渲染视图之前处理的操作，通常通过setTimeout(0)实现，速度会比较慢，可能会出现视图抖动的问题）的，一个循环是处理$watch列表（是一些表达式的集合，一旦有改变发生，那么$watch函数就会被调用）的。$digest循环会一直迭代知道$evalAsync队列为空并且$watch列表也为空的时候，即model不再有任何变化。

　　5.  一旦AngularJS的$digest循环结束，整个执行就会离开AngularJS和Javascript的context，紧接着浏览器就会把数据改变后的视图重新渲染出来。

接下来，我们还是结合代码来解析一下：

<!doctype html>
<html ng-app>
 <head>
 <script src="angular.js"></script>
 </head>
 <body>
 <input ng-model="name">
 <p>Hello {{name}}!</p>
 </body>
</html>

这段代码和上一段代码唯一的区别就是有了一个input来接收用户的输入。在用浏览器去访问这个html文件的时候，input上的ng-model指令会给input绑上keydown事件，并且会给name变量建议一个$watch来接收变量值改变的通知。在交互阶段主要会发生以下一系列事件：

　　1.  当用户按下键盘上的某一个键的时候（比如说A），触发input上的keydown事件；

　　2.  input上的指令察觉到input里值的变化，调用$apply(“name=‘A'”)更新处于AngularJS的context中的model；

　　3.  AngularJS将'A'赋值给name；

　　4.  $digest循环开始，$watch列表检测到name值的变化，然后通知{{name}}表达式，更新DOM；

　　5.  退出AngularJS的context，然后退出Javascript的context中的keydown事件；

　　6.  浏览器重新渲染视图。

以上就是对AngularJS 工作原理的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS入门教程之AngularJS 模板

    AngularJS入门教程之AngularJS 模板

    是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

  • Angularjs结合Bootstrap制作的一个TODO List

    Angularjs结合Bootstrap制作的一个TODO List

    看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用).为了增强理解,下面写了一篇文章,用以复习巩固. 准备 Angularjs下载 说是下载,其实只要能在我们的页面中引用到Angularjs即可.可以有如下方式. CDN加速 使用国内的CDN加速服务也是可以的. 复制代码 代码如下: <script src="http://code.angularjs.org/angular-1.0.

  • AngularJS入门教程之迭代器过滤详解

    AngularJS入门教程之迭代器过滤详解

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

  • AngularJS 整理一些优化的小技巧

    关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

  • AngularJS入门教程之链接与图片模板详解

    这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用.接下来你会使用这些链接来分类显示手机的额外信息. 请重置工作目录: git checkout -f step-6 现在你应该能够看到列表里面手机的图片和链接了. 步骤5和步骤6之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接.这些url现在指向app/img/phones/目录. app/phones/phones.js

  • AngularJS入门教程引导程序

    AngularJS入门教程引导程序

    我们现在开始准备编写AngularJS应用--phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s

  • AngularJS入门教程之双向绑定详解

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

  • AngularJS入门教程之静态模板详解

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html <ul> <li> <span>

  • AngularJS之依赖注入模拟实现

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的. 下面,我们看看AngularJS中常用的实现方式. 方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例. 如下: //方法一:推断式注入声明,假定参数名称就是依赖

  • AngularJS入门教程之XHR和依赖注入详解

    AngularJS入门教程之XHR和依赖注入详解

    到现在为止,我们使用是硬编码的三条手机记录数据集.现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集.我们将使用AngularJS的依赖注入(dependency injection (DI))功能来为PhoneListCtrl控制器提供这个AngularJS服务. 请重置工作目录: git checkout -f step-5 刷新浏览器,你现在应该能看到一个20部手机的列表. 步骤4和步骤5之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数

随机推荐