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的时候，浏览器依次做了如下一些事情：
- 加载html，然后解析成DOM；
- 加载angular.js脚本；
- AngularJS等待DOMContentLoaded事件的触发；
- AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界；
- 使用ng-app中指定的模块配置$injector；
- 使用$injector创建$compile服务和$rootScope；
- 使用$compile服务编译DOM并把它链接到$rootScope上；
- ng-init指令对scope里面的变量name进行赋值；
- 对表达式{{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工作原理解析的更多相关文章
- jdk线程池ThreadPoolExecutor工作原理解析（自己动手实现线程池）（一）
jdk线程池ThreadPoolExecutor工作原理解析(自己动手实现线程池)(一) 线程池介绍 在日常开发中经常会遇到需要使用其它线程将大量任务异步处理的场景(异步化以及提升系统的吞吐量),而在 ...
- Servlet 工作原理解析
转自:http://www.ibm.com/developerworks/cn/java/j-lo-servlet/ Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 J ...
- [转]Servlet 工作原理解析
Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...
- USB Type-C工作原理解析
自从苹果发布了新MacBook,USB Type-C接口就成为了热议对象.我来从硬件角度解析下这个USB Type-C,以便大家更好的了解USB Type-C的工作原理. 特色 尺寸小,支持正反插,速 ...
- Servlet 工作原理解析--转载
原文:http://www.ibm.com/developerworks/cn/java/j-lo-servlet/index.html?ca=drs- Web 技术成为当今主流的互联网 Web 应用 ...
- 【Java】Servlet 工作原理解析
Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...
- servlet入门学习之工作原理解析
从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...
- Sevrlet 工作原理解析-转
从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...
- 【Tomcat】Servlet 工作原理解析
Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...
随机推荐
- Windows 安装 MySQL 8.0.11
下载并解压 从官方网站下载最新安装包 解压到目标安装目录 新建配置文件 在安装目录新建my.ini文件 添加如下内容(需修改为自己的配置) #----------------------------- ...
- PTA基础编程题目集6-6求单链表结点的阶乘和（函数题）
本题要求实现一个函数,求单链表L结点的阶乘和.这里默认所有结点的值非负,且题目保证结果在int范围内. 函数接口定义: int FactorialSum( List L ); 其中单链表List的定义 ...
- 20155307 实验四 Android程序设计
在安装as的过程中一路顺风,一点问题都没有,但是在编译的时候总是出现错误,无论是我用自己的手机还是虚拟的手机都不能成功. 但是我上网百度,发现错误原因为compileSdkVersion的版本出了问题 ...
- day 5 多态 类 静态
1.多态 执行的时候才知道调用谁 class Dog(object): def print_self(self): print("大家好,我是来自西安的小白") class Xia ...
- P3374 【模板】树状数组 1（单点增减，区间求和）
P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示 ...
- superset 安装测试，基于windows 和 centos7.x
1.刚开始在windows平台测试搭建,报各种问题,搭建可以参考官网https://superset.incubator.apache.org/installation.html#deeper-sql ...
- vue 与原生app的对接交互（混合开发）
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入 ...
- XAF-属性编辑器中的EditMask,DisplayFormat格式化字符串该如何设置
XAF项目中有个DisplayFormat和EditMask设置,其中: 任何地方看到的DisplayFormat都是用于显示时,即非修改状态的编辑器,显示值的格式. EditMask是指编辑时的格式 ...
- Android Studio 3.1.2 Device File Explorer nothing to show
Android Studio 3.1.2 Device File Explorer nothing to show 不显示 目录 ,空白 手持终端设备: Android 4.2.2 ,API1 ...
- Python中print函数中中逗号和加号的区别
strip()方法,去除字符串开头或者结尾的空格 s = " a b c " new_s = s.strip() print("-------->%s<--- ...