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 写的一个简单的timer
Jul 30 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
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中上传大体积文件时需要的设置
2006/10/09 PHP
php 获取本地IP代码
2013/06/23 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php curl常用的5个经典例子
2017/01/20 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
ExpressJS入门实例
2015/01/14 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
详解Django中的form库的使用
2015/07/18 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Python内置函数及功能简介汇总
2020/10/13 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
总经理秘书工作职责
2013/12/26 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
土地转让协议书
2014/04/15 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
生物学专业求职信
2014/07/23 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
三峡人家导游词
2015/01/31 职场文书
语文教师个人工作总结
2015/02/06 职场文书
现场施工员岗位职责
2015/04/11 职场文书
房产电话营销开场白
2015/05/29 职场文书