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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
详解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
一个简单计数器的源代码
2006/10/09 PHP
php生成shtml类用法实例
2014/12/09 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
Open and Print a Word Document
2007/06/15 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python读写csv文件方法详细总结
2019/07/05 Python
python3将变量输入的简单实例
2020/08/19 Python
python map比for循环快在哪
2020/09/21 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
教育学专业毕业生的自我评价
2013/11/21 职场文书
实习生的自我评价
2014/01/08 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
皇城相府导游词
2015/02/06 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android