Angular的工作原理
来源：https://www.cnblogs.com/moriah/p/6096998.html
<!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. 浏览器重新渲染视图。
Angular的工作原理的更多相关文章
- 谈谈Angular关于$watch，$apply 以及 $digest的工作原理
这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定(data-binding)是怎么工作的, 如果你已经熟悉如何使用angularjs了,我强烈建议你不用阅读了. angularjs使 ...
- AngularJS的工作原理1
AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...
- AngularJS的工作原理
AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...
- AngularJS_简介、特性及基本使用_及其工作原理
转自:angularJS 的工作原理 转自:通过<script>标签引入到 HTML 中,那么此时 Angular 就做为一个普通的 DOM 节点等待浏览器解析 当浏览器解析到这个节点时, ...
- [转]ionic工作原理
本文转自:https://segmentfault.com/a/1190000011495654 1.Ionic的工作原理 Ionic通过cordova把一个Web应用嵌入原生应用 用户打开一个ion ...
- web前端入坑第五篇：秒懂Vuejs、Angular、React原理和前端发展历史
秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...
- 菜鸟学Struts2——Struts工作原理
在完成Struts2的HelloWorld后,对Struts2的工作原理进行学习.Struts2框架可以按照模块来划分为Servlet Filters,Struts核心模块,拦截器和用户实现部分,其中 ...
- 【夯实Nginx基础】Nginx工作原理和优化、漏洞
本文地址 原文地址 本文提纲: 1. Nginx的模块与工作原理 2. Nginx的进程模型 3 . NginxFastCGI运行原理 3.1 什么是 FastCGI ...
- HashMap的工作原理
HashMap的工作原理 HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间 ...
随机推荐
- dedecms织梦的安全问题解决办法
很多新手用户在使用织梦CMS程序过程中,难免会碰到挂马中毒现象,所以事先我们要对网站及服务器安全做好预防备份处理. 织梦作为国内第一大开源免费CMS程序,无疑是很多HACK研究的对象,在本身不安全的互 ...
- jvm系列三垃圾回收
三.垃圾回收 1.如何判断对象可以回收 引用计数法 弊端:循环引用时,两个对象的计数都为1,导致两个对象都无法被释放 可达性分析算法 JVM中的垃圾回收器通过可达性分析来探索所有存活的对象 扫描堆中的 ...
- Ubuntu18.04系统设置为中文语言
1.选择右上角设置按钮 2.管理已安装的语言 3.安装简体中文 安装好后是这样的 会发现汉语中文那一块是灰色的,怎么点都点不亮 4.拖拽 汉语(中国) 到最顶边 然后应用 5.重启 然后就出现这个画面 ...
- 【算法】数据结构与算法基础总览（中）——刷Leetcode等算法题时一些很实用的jdk辅助方法锦集
最近重新学习数据结构与算法以及刷leetcode算法题时,发现不少jdk自带的方法可以提升刷题的效率.这些小技巧不仅仅对刷算法题带来便利,对我们平时开发也是很有帮助的.本文以java语言为基础,记录了 ...
- windows10与linux进行ftp遇到550 Failed to change directory及553 Could not creat file
第一个原因: 没有权限,可以使用带有l参数的ls命令来看文件或者目录的权限 ls -l 解决:给本地用户添加一个可写权限 chmod +w /home/student ##给对应的本地用户添加一个可写 ...
- Codeforces 1355 C. Count Triangles
传送门:C - Count Triangles 题意:给你四个数A,B,C,D,求有多少个三边为x,y,z (A ≤ x ≤ B ≤ y ≤ C ≤ z ≤ D)的三角形. 题解:枚举 x=A~B, ...
- Codeforces Round #673 (Div. 2) B. Two Arrays (贪心)
题意:给你一组数\(a\)和一个数\(T\),将这组数分为两组\(c\)和\(d\),定义\(f(x)\)为数组\(x\)中任意两个不同元素的和为\(T\)的个数,问为了使\(min(f(c)+f(d ...
- Java基础（第一期）
Java基础 1.注释 Java中注释有三种: 单行注释 // 多行注释 /* */ 文本注释(用的较少) /** */ 书写注释是一个非常好的习惯 BAT 平时写代码一定要注意规范 //有趣的代码注 ...
- 大数据去重（data deduplication）方案
数据去重(data deduplication)是大数据领域司空见惯的问题了.除了统计UV等传统用法之外,去重的意义更在于消除不可靠数据源产生的脏数据--即重复上报数据或重复投递数据的影响,使计算产生 ...
- CF1463-D. Pairs
CF1463-D. Pairs 题意: 有从\(1\)到\(2n\)一共\(2n\)个数字,让你将这\(2n\)个数字分成\(n\)组,每组有两个数字.对于这\(n\)组数字,你可以从中挑选\(x\) ...