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 相关文章推荐
js读写(删除)Cookie实例详解
Apr 17 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
详解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
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
原生JS实现瀑布流插件
2018/02/06 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python中的随机函数小结
2018/01/27 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
教师实习自我鉴定
2013/12/18 职场文书
狼和鹿教学反思
2014/02/05 职场文书
中学教师自我鉴定
2014/02/07 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2015年调度员工作总结
2015/04/30 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers