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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue键盘事件点击事件加native操作
Jul 27 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
什么是.net
2015/08/03 面试题
春节超市活动方案
2014/08/14 职场文书
解放思想演讲稿
2014/09/11 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript