AngularJS执行流程详解


Posted in Javascript onFebruary 17, 2017

一.启动阶段

浏览器解析HTML页面,读取到angular.js的<script>标签后会停止解析后面的DOM节点,开始执行angular.js,与此同时,Angular会设置一个事件监听器来监听DOMContentLoaded事件,当Angular监听到这个事件后,Angular就启动了。

二.初始化阶段

Angular启动后,它会查找ng-app指令,然后初始化一系列必要的组件(即$injector、$compile服务以及$rootScope),接着继续解析DOM。

三.编译、链接阶段

1.Angular使用$compile服务通过遍历DOM树的方式查找带有指令的DOM元素,然后根据指令的priority优先级对这些查找到的指令进行排序。

2.之后使用$injector服务查找和收集每个指令下面的compile函数,并执行它。

3.每个节点的compile方法运行之后,$compile服务就会调用链接函数。这个链接函数为绑定了封闭作用域的指令设置监控。这一行为会创建实时视图。

4.以上所有完成后,Angular启动完成

四.运行阶段

Angular提供了自己的事件循环。指令自身会注册事件监听器,因此当事件被触发时,指令函数就会运行在AngularJS的$digest循环中。$digest循环会等待$watch表达式列表,当检测到模型变化后,就会调用$watch函数,然后再次查看$watch列表以确保没有模型被改变。一旦$digest循环稳定下来,并且检测到没有潜在的变化了,执行过程就会离开Angular上下文并且通常会回到浏览器中。

AngularJS执行流程详解

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
利用vue实现模态框组件
Dec 19 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 #Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 #Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 #Javascript
jQuery实现弹幕效果
Feb 17 #Javascript
Ajax基础知识详解
Feb 17 #Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 #Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python利用字典破解WIFI密码的方法
2019/02/27 Python
用django设置session过期时间的方法解析
2019/08/05 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
优秀干部获奖感言
2014/01/31 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
企业务虚会发言材料
2014/10/20 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
小学教师读书笔记
2015/07/01 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript