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实现拖拽网页内元素的方法
Apr 15 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
Vue.js用法详解
Nov 13 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
Paypal支付不完全指北
Jun 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
js对象的比较
2011/02/26 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
表彰先进集体通报
2014/01/12 职场文书
小学生安全保证书
2014/02/01 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
交通文明倡议书
2014/05/16 职场文书
授权委托书
2014/07/31 职场文书
招标授权委托书样本
2014/09/23 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
义诊活动通知
2015/04/24 职场文书
外出学习心得体会范文
2016/01/18 职场文书