angular工作原理

我们知道html在各个浏览器中的适应性良好，是因为各大浏览器厂商对html的支持，无论是任何第三方组件，只要能被浏览器适配解析，那么这个组件就能很好的适应于浏览器，angularjs也不例外，angularjs能很好的适应于各大浏览器是因为其指令封装的对象其实也是html的DOM元素。无论怎么封装，最后都会转为DOM元素，以被浏览器支持。那么我们就来看看angularjs是怎么样进行工作的。

1.angularjs工作原理

angularjs工作分为两个阶段：

• 编译阶段
• 连接阶段

1.1编译阶段

编译阶段分为这么两步：

• 首先，浏览器会用它的API将HTML解析成DOM，以适应于自己的浏览器。在这里我们需要注意的是，模板指令系统必须是可被解析的HTML，这也是angularjs和其他一些"以字符串为基础而非以DOM元素为基础的"模板系统的区别之处。
• DOM的编译是由 $compile 方法来执行的。 这个方法会遍历DOM并找到匹配的指令。一旦找到一个，它就会被加入一个指令列表中，这个列表是用来记录所有和当前DOM相关的指令的。 一旦所有的指令都被确定了，会按照优先级被排序，并且他们的 compile 方法会被调用。 指令的 $compile() 函数能修改DOM结构，并且要负责生成一个link函数（后面会提到）。$compile方法最后返回一个合并起来的链接函数，这时链接函数是每一个指令的compile函数返回的链接函数的集合。

1.2连接阶段

连接阶段可以分为这么几步：

• 在编译阶段，angularjs解析器会将所有的指令都解析成HTNL代码，这时连接函数会将模板和对应的作用域连接起来，同时为每一个数据绑定生成一个$watch监听器，记住是每一个模板绑定数据的匹配都会产生一个该监听器，同时加入到$switch队列中，用于监听绑定对象发生的变化，如果发生变化，那么就是实时的更新在页面。
• 绑定的对象可以使模板对象也可以是$scope对象。当我们创建一个定时器去实时改变该对象时就会发现页面绑定对象也会实时进行刷新，只是数据的刷新，就像ajax的异步刷新一样。