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用户自定义类的类名称的代码
Mar 08 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery使用方法
Feb 04 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Python 通过pip安装Django详细介绍
2017/04/28 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
python分析作业提交情况
2017/11/22 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
年级组长自我鉴定
2014/02/22 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
师范生见习自我总结
2015/06/23 职场文书
关于五一放假的通知
2015/08/18 职场文书
九年级化学教学反思
2016/02/22 职场文书
Python语言中的数据类型-序列
2022/02/24 Python