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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
Vuex简单入门
Apr 19 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
PHP反射API示例分享
2016/10/08 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
python实现月食效果实例代码
2019/06/18 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
简历中自我评价分享
2013/10/09 职场文书
教师绩效工资方案
2014/02/01 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
会计系毕业求职信
2014/08/07 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python