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 技术开发人员的 ...
随机推荐
- oracle自动冷备份脚本
根据自己网上的资料和自己的需求,写的oracle冷备份脚本. 整体思路: 1.停止服务 2.文件拷贝 3.启动服务 保存以为文件为BAT格式,点击可以用下. rem ----------------- ...
- 完全卸载MySQL数据库，实现重装
一.在控制面板,卸载MySQL的所有组件 控制面板——>所有控制面板项——>程序和功能,卸载所有和MySQL有关的程序 二.找到你的MysQL安装路径,看还有没有和MySQL有关的文件夹, ...
- 帝国CMS站点迁移
1.重新安装xmapp环境 安装包地址 链接:https://pan.baidu.com/s/1OSwlP90G9VMAZYVXMG245Q 提取码:gnfr 2.安装后启动 3.复制数据库信息 将旧 ...
- vue--slot插槽的使用方式
slot 插槽可以在子组件中为父组件要传递的标签占位置 能够有效的减少代码冗余 使代码更加有逼格 第一个例子 <body> <div class="app"& ...
- React学习（一）
一. 允许HTML和JavaScript代码混写,使用JSX语法:遇到HTML标签就用HTML规则解析,遇到{}的代码块就用js解析 var names = ['Alice', 'Emily', 'K ...
- html-表单标签
表单标签 * 可以提交数据到**网站上的服务器,这个过程可以使用表单标签实现 * <form></form>:定义一个表单的范围 - 属性 ** action:提交到地址,默认 ...
- python面试题之基础2
2.3 考虑以下 Python 代码,如果运行结束,命令行中的运行结果是什么? 两者用法相同,不同的是 range 返回的结果是一个列表,而 xrange 的结果是一个生成器,前者是 直接开辟一块内存 ...
- day1-exercise
""" Day1 作业 Isabelle/刘佳赐 October 22, 2018 """ """ 1. 变量 ...
- 常见的Content-Type类型
Content-Type说明 MediaType,即是Internet Media Type,互联网媒体类型:也叫做MIME类型, 在Http协议消息头中,使用Content-Type来表示具体请求中 ...
- 利用“海底捞算法”在MongoDB中优雅地存储一棵树
目前常见的树形结构数据库存储方案有以下四种,但是在处理无限深度.海量数据的树结构时,都存在一些问题: 1)Adjacency List(邻接表):每个节点仅记录父节点主键.优点是简单,缺点是访问子树需 ...