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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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日历程序
2006/12/06 PHP
又一个php 分页类实现代码
2009/12/03 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python中下标和切片的使用方法解析
2019/08/27 Python
手机被没收的检讨书
2014/10/04 职场文书
女儿满月酒致辞
2015/07/29 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
Python字符串格式化方式
2022/04/07 Python