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注册协议倒计时的小例子
Jun 24 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 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将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python如何发送与接收大型数组
2020/08/07 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
干部鉴定材料
2014/05/18 职场文书
给老师的一封感谢信
2015/01/20 职场文书
2015年度物流工作总结
2015/04/30 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers