angular工作原理
来源:互联网 发布:在国外买淘宝的软件 编辑:程序博客网 时间:2024/06/16 18:17
我们知道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的异步刷新一样。
阅读全文
0 0
- angular工作原理
- angular工作原理
- Angular关于$watch,$apply 以及 $digest的工作原理及相关知识点
- Angular指令编译原理
- angular 双向绑定原理
- VueJS、Angular、React原理
- Angular 1.2 原理分析
- angular依赖注入:angular 依赖注入原理
- 工作原理
- Angular双向数据绑定原理
- angular原理及模块简介
- angular的双向绑定原理
- 第三章 angular是怎么工作的
- struts2工作原理 工作流程
- angular监听模型数据改变的原理
- angular 双向绑定的实现原理
- 浅谈angular原理(个人见解)
- 防火墙的工作原理
- Monolog:PHP 日志记录工具
- Qt中的多线程技术
- C++ vector的resize和reverve
- HDU 3641 Treasure Hunting
- C++最简洁的单例模式
- angular工作原理
- IO流——基本数据类型的流对象DataStream
- 基础二:ContextMenu,Option Menu和PopupMenu
- Java 并发工具包 java.util.concurrent 用户指南
- android四大组建之Service
- 如何向外人解释:频繁更改需求确实会让程序员炸毛?
- Vue.js框架路由练习
- angular2或4部署到tomcat中,让他跑起来
- 0809 OpenJ_bailian#2945 拦截导弹