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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
javascript实现导航栏分页效果
Jun 27 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
原生JS实现无缝轮播图片
Jun 24 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+mysql保存和输出文件
2006/10/09 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
js中开关变量使用实例
2017/02/24 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python字符串的修改方法实例
2019/12/19 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
用 python 进行微信好友信息分析
2020/11/28 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
实习医生自我评价
2013/09/22 职场文书
应届生煤化工求职信
2013/10/21 职场文书
有关打架的检讨书
2014/01/25 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
社区义诊活动总结
2014/04/30 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL