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 24 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
详解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
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
angular.bind使用心得
2015/10/26 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
财务会计人员求职的自我评价
2014/01/13 职场文书
美术专业个人自我评价
2014/01/18 职场文书
2014庆六一活动方案
2014/03/02 职场文书
个人培训自我鉴定
2014/03/28 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
实习推荐信格式模板
2015/03/27 职场文书
首次购房证明
2015/06/19 职场文书
检讨书格式
2019/04/25 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
Redis特殊数据类型bitmap位图
2022/06/01 Redis