美文网首页
AngularJS执行流程

AngularJS执行流程

作者: codeice | 来源:发表于2016-09-01 17:45 被阅读262次

一个Angular APP其实就是一个Angular Module,通常可以包含若干Controller、Service以及Directive。

Angular App的初始化过程

1. 启动阶段
浏览器解析DOM树,加载angular库
启动Angular应用
2. 初始化阶段
查找ng-app指令,
初始化必要组件创建injector
开始解析DOM树
3. 编译阶段
遍历DOM树,搜集指令
执行每个指令的Compile函数,处理DOM转换,编译模板
调用链接函数生成实时视图
4. 运行阶段
等待事件触发,执行$digest循环
检测到变化,调用$watch函数,再次执行$digest循环,直到没有变化

流程图:

ng-init.png

Angular APP 的启动

  1. 自动启动
    大部分情况下通过ng-app指令来进行自动引导启动
<body ng-app="helloApp" ng-cloak>
  1. 手动启动
    同一个页面中可以包含多于一个的APP,但不能嵌套。同一页面中有多于一个APP时AngularJS不会自动帮你启动APP,你需要手动启动这些APP
//手动启动
angular.bootstrap(document, ['helloApp']);

相关文章

  • AngularJS执行流程

    一个Angular APP其实就是一个Angular Module,通常可以包含若干Controller、Serv...

  • AngularJS基础(下)

    1.AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集...

  • AngularJs中,如何在render完成之后,执行Js脚本

    2017/3/9原文出处:AngularJs中,如何在render完成之后,执行Js脚本 AngularJs是Go...

  • Angular JS 仿拉勾网 WebApp 开发移动端单页应用

    第1章 课程介绍 讲解课程开发内容和开发流程。前端主流开发框架与AngularJS对比。介绍AngularJS的基...

  • Angularjs执行过程

    之前总结的 angularJS权威教程24 准备阶段当浏览器触发DOMContentLoaded事件时,Angul...

  • AngularJS 指令执行顺序

    今天在做一个小demo时遇到了一个问题,开始还以为是作用域的问题,后来发现是因为指令执行顺序导致的。 1、遇到的问...

  • C语言基础继续讲讲(循环语句-数组)

    C语言基础 三大执行流程 顺序执行流程 条件执行流程if语句if(条件){ 语句体}如果条件成立,就执行{}...

  • yield执行流程

    yield 执行流程 上面的执行流程将会如何输出呢? 说明了,generator的执行流程为 g() 实际不会执行...

  • 执行流程

    基础群裂变: 在文章末尾加上自己的二维码,让感兴趣的客户加自己的微信。 将加了自己微信的客户拽入活动,进行维护。 ...

  • 执行流程

    基础群裂变: 在文章末尾加上自己的二维码,让感兴趣的客户加自己的微信。 将加了自己微信的客户拽入活动,进行维护。 ...

网友评论

      本文标题:AngularJS执行流程

      本文链接:https://www.haomeiwen.com/subject/dlxhettx.html