AngularJS 执行流程详细介绍


Posted in Javascript onAugust 18, 2016

一、启动阶段

        大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点。我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOMContentLoaded事件。当Angular监听到这个事件时,就会启动Angular应用。

        二、初始化阶段

        Angular开始启动后,它会查找ng-app指令,然后初始化一系列必要的组件(即$injector、$compile服务以及$rootScope),接着重新开始解析DOM树。

        三、编译、链接

        $compile服务通过遍历DOM树的方式查找有声明指令的DOM元素。当碰到带有一个或多个指令的DOM元素时,它会排序这些指令(基于指令的priority优先级),然后使用$injector服务查找和收集指令的compile函数并执行它。

        每个节点的编译方法运行之后,$compile服务就会调用链接函数。这个链接函数为绑定了封闭作用域的指令设置监控。这一行为会创建实时视图。

        最后,在$compile服务完成后,AngularJS运行时就准备好了。

        四、运行阶段

        Angular提供了自己的事件循环。指令自身会注册事件监听器,因此当事件被触发时,指令函数就会运行在AngularJS的$digest循环中。$digest循环会等待$watch表达式列表,当检测到模型变化后,就会调用$watch函数,然后再次查看$watch列表以确保没有模型被改变。

        一旦$digest循环稳定下来,并且检测到没有潜在的变化了,执行过程就会离开Angular上下文并且通常会回到浏览器中,DOM将会被渲染到这里。

        将以上过程的关键步骤绘制成一张图,如下:

AngularJS 执行流程详细介绍

以上就是AngularJS 执行流程的详细介绍,后续继续整理相关资料,谢谢大家对本站的支持。

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
AngularJS国际化详解及示例代码
Aug 18 #Javascript
ECMAScript6轮播图实践知识总结
Aug 17 #Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 #Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 #Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 #Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 #Javascript
深入理解jQuery layui分页控件的使用
Aug 17 #Javascript
You might like
php 购物车的例子
2009/05/04 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python虚拟环境迁移方法
2019/01/03 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
商场促销活动总结
2014/07/10 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis