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 相关文章推荐
随窗体滑动的小插件sticky源码
Jun 21 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
JavaScript流程控制(分支)
Dec 06 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 判断变量类型实现代码
2009/10/23 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python 错误处理 assert详解
2020/04/20 Python
基于FME使用Python过程图解
2020/05/13 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
早恋主题班会
2015/08/14 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
详解redis分布式锁的这些坑
2021/05/19 Redis
Vue监视数据的原理详解
2022/02/24 Vue.js
oracle重置序列从0开始递增1
2022/02/28 Oracle
Python借助with语句实现代码段只执行有限次
2022/03/23 Python