• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS 执行流程详细介绍

AngularJS 执行流程详细介绍

作者:倪闯 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs介绍,angularjs,angularjs视频教程,angularjs开发框架,angularjs菜鸟教程等相关知识,倪闯 希望在学习及工作中可以帮助到您

一、启动阶段

        大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点。我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOMContentLoaded事件。当Angular监听到这个事件时,就会启动Angular应用。

        二、初始化阶段

        Angular开始启动后,它会查找ng-app指令,然后初始化一系列必要的组件(即$injector、$compile服务以及$rootScope),接着重新开始解析DOM树。

        三、编译、链接

        $compile服务通过遍历DOM树的方式查找有声明指令的DOM元素。当碰到带有一个或多个指令的DOM元素时,它会排序这些指令(基于指令的priority优先级),然后使用$injector服务查找和收集指令的compile函数并执行它。

        每个节点的编译方法运行之后,$compile服务就会调用链接函数。这个链接函数为绑定了封闭作用域的指令设置监控。这一行为会创建实时视图。

        最后,在$compile服务完成后,AngularJS运行时就准备好了。

        四、运行阶段

        Angular提供了自己的事件循环。指令自身会注册事件监听器,因此当事件被触发时,指令函数就会运行在AngularJS的$digest循环中。$digest循环会等待$watch表达式列表,当检测到模型变化后,就会调用$watch函数,然后再次查看$watch列表以确保没有模型被改变。

        一旦$digest循环稳定下来,并且检测到没有潜在的变化了,执行过程就会离开Angular上下文并且通常会回到浏览器中,DOM将会被渲染到这里。

        将以上过程的关键步骤绘制成一张图,如下:

以上就是AngularJS 执行流程的详细介绍,后续继续整理相关资料,谢谢大家对本站的支持。

</div>

您可能想查找下面的文章:

  • AngularJS 执行流程详细介绍
  • AngularJS中的包含详细介绍及实现示例

相关文章

  • 2017-05-30详解AngularJs HTTP响应拦截器实现登陆、权限校验
  • 2017-05-30AngularJS ng-app 指令实例详解
  • 2017-05-30详解AngularJS中的表单验证(推荐)
  • 2017-05-30ANGULARJS中用NG-BIND指令实现单向绑定的例子
  • 2017-05-30利用Angularjs实现幻灯片效果
  • 2017-05-30通过AngularJS实现图片上传及缩略图展示示例
  • 2017-05-30AngularJS实现根据不同条件显示不同控件
  • 2017-05-30angular实现IM聊天图片发送实例
  • 2017-05-30AngularJS 让人爱不释手的八种功能
  • 2017-05-30Javascript基础_标记文字的实现方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 基于Angular.js实现的触摸滑动动画实例代码
    • 详谈Angular路由与Nodejs路由的区别
    • AngularJS通过$sce输出html的方法
    • AngularJS 让人爱不释手的八种功能
    • 浅谈angularJS中的事件
    • AngularJs 60分钟入门基础教程
    • AngularJS 视图详解及示例代码
    • AngularJS使用ng-app自动加载bootstrap框架问题分析
    • 在 Angular 中实现搜索关键字高亮示例
    • Angular页面间切换及传值的4种方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有