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实现DIV的一些简单控制
Jun 04 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 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 token使用与验证示例【测试可用】
2017/08/30 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
javascript实现小型区块链功能
2019/04/03 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python如何根据时间序列数据作图
2020/05/12 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
党员创先争优公开承诺书
2014/03/28 职场文书
大学生村官承诺书
2014/03/28 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2016年元旦主持词
2015/07/06 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
大队委员竞选稿
2015/11/20 职场文书