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 相关文章推荐
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JavaScript反射与依赖注入实例详解
May 29 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
js星星评分效果
2014/07/24 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
解决vue 引入子组件报错的问题
2018/09/06 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
广告语设计及教案
2014/03/21 职场文书
课内比教学心得体会
2014/09/09 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android