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的工作原理的更多相关文章

  1. AngularJS的工作原理1

    AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...

  2. AngularJS学习笔记3——AngularJS的工作原理

    个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析 ...

  3. AngularJS_简介、特性及基本使用_及其工作原理

    转自:angularJS 的工作原理 转自:通过<script>标签引入到 HTML 中,那么此时 Angular 就做为一个普通的 DOM 节点等待浏览器解析 当浏览器解析到这个节点时, ...

  4. 谈谈Angular关于$watch，$apply 以及 $digest的工作原理

    这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定(data-binding)是怎么工作的, 如果你已经熟悉如何使用angularjs了,我强烈建议你不用阅读了. angularjs使 ...

  5. JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

    原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十章. 网络 ...

  6. Salesforce学习之路（十）Aura组件工作原理

    很喜欢曾经看到的一句话:以输出倒逼输入.以输出的形式强制自己学习,确实是高效的学习方式,真的很棒.以下仅为个人学习理解,如有错误,欢迎指出,共同学习. 1. 什么是Lightning Componen ...

  7. 菜鸟学Struts2——Struts工作原理

    在完成Struts2的HelloWorld后,对Struts2的工作原理进行学习.Struts2框架可以按照模块来划分为Servlet Filters,Struts核心模块,拦截器和用户实现部分,其中 ...

  8. 【夯实Nginx基础】Nginx工作原理和优化、漏洞

    本文地址 原文地址 本文提纲: 1.  Nginx的模块与工作原理    2.  Nginx的进程模型    3 . NginxFastCGI运行原理        3.1 什么是 FastCGI   ...

  9. HashMap的工作原理

    HashMap的工作原理   HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间 ...

随机推荐

  1. 大数据系列修炼-Scala课程06

    关于Scala中的正则表达式与模式匹配结合的正则表达式Reg 正则表达式的实现:正则表达式的定义与其它语言差不多,只需在表达式后加一个.r,并且可以遍历相应的表达式进行匹配 //定义的正则表达式 va ...

  2. 大数据系列修炼-Scala课程02

    Scala数组操作实战详解 接着昨天的课程,下面我们继续学习关于Scala数组操作详解.Scala数组的定义 //数组定义 //定长数组格式 /** * val arrayName = new Arr ...

  3. background-position 具体的使用说明

    语法: background-position : length || length background-position : position || position 值: length  : ...

  4. 【高德地图API】如何获得行政区域？如何制作行政规划图？

    原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap ...

  5. java编程接口(5) ------ button和button组

    这篇文章是由自己的学习笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 了解了布局管理器和Swing事件模型,那么剩下的就是Swing 的各个组件了 ...

  6. Entity Framework查询原理

    Entity Framework查询原理 前言 Entity Framework的全称是ADO.NET Entity Framework,是微软开发的基于ADO.NET的ORM(Object/Rela ...

  7. JQ优化性能

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); / ...

  8. AngularJS + CoffeeScript

    AngularJS + CoffeeScript 前端开发环境配置详解 AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全 ...

  9. Mvc 下载文件

    你如何将文件传送给用户取决于你最开始如何存储它,如果你将文件存入数据库,你会用流的方式将文件返还给用户,如果你将文件存在硬盘中,你只需要提供一个超链接即可,或者也可以以流的方式.每当你需要以流的方式将 ...

  10. C# & WPF 随手小记之一 ——初探async await 实现多线程处理

    嗯...我也是在园子待了不短时间的人了,一直以来汲取着园友的知识,感觉需要回馈什么. 于是以后有空我都会把一些小技巧小知识写下来,有时候可能会很短甚至很简单,但希望能帮到大家咯. 第一篇文章来说说as ...