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的滚动新闻列表
Jun 19 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
vue-cli 首屏加载优化问题
Nov 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/08/31 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python多继承原理与用法示例
2018/08/23 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
自我鉴定书面格式
2014/01/13 职场文书
简单的辞职信范文
2014/01/18 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
教学质量月活动总结
2015/05/11 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL