个人觉得，要很好的理解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在背后干的事情。如有不确切的地方，请指正！

AngularJS学习笔记3——AngularJS的工作原理的更多相关文章

  1. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  2. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  3. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  4. AngularJS学习笔记(1) - AngularJS入门

    什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScr ...

  5. 数电学习笔记之CMOS传输门工作原理

    CMOS 传输门从结构上看是由一个PMOS和一个NMOS管组成 先简单粗略讲讲PMOS管和NMOS管导通与截止吧 首先我们MOS管有三个极,源极(S:Source).漏极(D:Drain)和栅极(G: ...

  6. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  7. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  8. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. frameset的各个frame之间互相访问的方法

    工作中很少使用到frameset,对其了解也是十分有限,这里在网上找了点资料,摘抄了部分内容. (1)获得html页面上的frame window.frames可以获得本页面上所有frame集合,用法 ...

  2. mfc CFileFind查找类

    查找文件 CFileFind类 提取文件图标 显示大图标 显示小图标 一.查找文件 . CFileFind类 //c:\mydir\myfile.txt GetFileName 获取文件名 myfil ...

  3. LOJ#6354. 「CodePlus 2018 4 月赛」最短路[最短路优化建图]

    题意 一个 \(n\) 个点的完全图,两点之间的边权为 \((i\ xor\ j)*C\) ,同时有 \(m\) 条额外单向路径,问从 \(S\) 到 \(T\) 的最短路. \(n\leq 10^5 ...

  4. （3）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- Consul服务治理

    Consul是注册中心,服务提供者.服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离. 除了Consul之外,还有Eureka.Zookeeper等类似软件 ...

  5. C#_委托

    委托属于C#中的新名词,它的应用也非常广泛,例如事件就是委托最简单而又直接的例子. 那么首先说说什么是委托,其实委托在用过C或者C++的人看来就是函数指针,不过使用C#的大多数人都没有用过这两门语言, ...

  6. Git版本库的创建(Ubuntu)

    在Ubuntu上学习Git随笔. 一. git 仓库的安装 git 在终端用git命令查看Ubuntu是否安装git版本库,如果没有安装,最新版本(Ubuntu18.04)会提示用下面命令进行安装. ...

  7. opencv core组件进阶

    1.图像在内存中存储方式,图像矩阵的大小取决于颜色模型,取决于所有的通道数:还有重要的颜色空间缩减的概念:因为如果是RGB的话,使用uchar的话,就有256^3的结合方法.所以要用到颜色缩减的方法, ...

  8. Jenkins报表 代码 指标分析

    Jenkins报表 这表现在前面的章节中,也有可用最简单的一种是适用于 JUnit 测试报告的许多报表插件. 在生成后动作进行任何工作,你可以定义要创建的报告. 该构建已经完成,测试结果选项将可进一步 ...

  9. 科普贴 | 以太坊网络中的Gas Limit 和 Gas Price 是什么概念？

    接触以太坊的同学都听过 Gas/ Gas Price/ Gas Limit,那么这些词汇究竟是什么意思? 还有,为什么有时候你的ETH转账会很慢?如何提高ETH转账速度? Ethereum平台 Vit ...

  10. Git多人协作工作流程

    前言 之前一直把Git当做个人版本控制的工具使用,现在由于工作需要,需要多人协作维护文档,所以去简单了解了下Git多人协作的工作流程,发现还真的很多讲解的,而且大神也已经讲解得很清楚了,这里就做一个简 ...