启动（startup）：

<!doctype html>

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>

  </head>

  <body>

    <p ng-init=" name='World' ">Hello {{name}}!</p>

  </body>

</html>
  1. 浏览器载入HTML，然后把它解析成DOM树。
  2. 浏览器载入angular.js脚本。
  3. AngularJS等到DOMContentLoaded事件触发执行。
  4. AngularJS寻找ng-app指令，这个指令指示了应用程序的边界。
  5. 使用ng-app中指定的模块来配置注入器($injector)。
  6. 注入器($injector)是用来创建“编译服务($compile service)”和“根作用域($rootScope)”的。
  7. 编译服务($compile service)是用来编译DOM树并把它链接到根作用域($rootScope)的，这里的根作用域就是html。
  8. ng-init指令将“World”赋给作用域里的name这个变量。
  9. 作用域中的name与页面上的{{name}}绑定，整个表达式变成了“Hello World”。

执行（runtime）：

浏览器的事件机制：

  1. 浏览器的Event loop等待事件的触发。所谓事件包括用户的交互操作、定时事件、或者网络事件(服务器的响应)。
  2. 事件触发后，如果有绑定事件回调函数，那么此函数就会被执行。此时会进入Javascript上下文。通常回调用来修改DOM结构。
  3. 一旦回调执行完毕，浏览器就会离开Javascript上下文，并且根据DOM的修改重新渲染视图。

而AngularJS通过使用自己的Event loop，改变了传统的Javascript工作流。这使得Javascript的执行被分成原生部分和拥有AngularJS执行上下文的部分。只有在AngularJS执行上下文中运行的操作，才能享受到AngularJS提供的数据绑定，异常处理，资源管理等功能和服务。你可以使用 $apply()方法，从普通Javascript上下文进入AngularJS执行上下文。记住，大部分情况下（如在控制器，服务中），$apply都已经被执行过了。只有当你使用自定义的事件回调或者是使用第三方类库的回调时，才需要自己执行$apply。

<!doctype html>

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>

  </head>

  <body>

    <input ng-model="name">

    <p>Hello {{name}}!</p>

  </body>

</html>　

在编译阶段：
　　input元素上的ng-model指令会给<input>输入框绑定keydown事件；
　　{{name}}这个变量替换表达式建立了一个 $watch ，来接受 name 变量改变的通知。
在执行期阶段：
　　按下任何一个键(以X键为例)，都会触发一个 input 输入框的keydown事件；
　　input 上的指令捕捉到 input 内容的改变，然后调用 $apply("name = 'X';")来更新处于AngularJS执行上下文中的模型；
　　AngularJS将 name='X'应用到模型上；
　　$digest 循环开始；这个循环是由两个小循环组成的，这两个小循环用来处理$evalAsync队列和$watch列表。这个$digest循环直到模型“稳定”前会一直迭代。这个稳定具体指的是$evalAsync列表为空，并且$watch列表中检测不到任何改变了。这个$evalAsync队列是用来管理那些“视图渲染前需要在当前栈外执行的操作”。这通常使用 setTimeout(0)来完成的。并且，因为浏览器会根据事件队列按顺序渲染视图，这时还会造成视图的抖动。$watch列表是一个表达式的集合，这些表达式可能是自上次迭代后发生了改变的。如果检测到了有改变，那么$watch函数就会被调用，它通常会把新的值更新到DOM中。

　　$watch 列表检测到了name值的变化，然后通知 {{name}}变量替换的表达式，这个表达式负责将DOM进行更新；
　　AngularJS退出执行上下文，然后退出Javascript上下文中的keydown事件；
　　浏览器以更新的文本重新渲染视图。

AngularJS应用的启动和执行过程的更多相关文章

  1. AngularJS 启动执行过程

    一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...

  2. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  3. 第8章4节《MonkeyRunner源代码剖析》MonkeyRunner启动执行过程-启动AndroidDebugBridge

    上一节我们看到在启动AndroidDebugBridge的过程中会调用其start方法,而该方法会做2个基本的事情: 715行startAdb:开启AndroidDebugBridge 722-723 ...

  4. 第8章2节《MonkeyRunner源代码剖析》MonkeyRunner启动执行过程-解析处理命令行參数

    MonkeyRunnerStarter是MonkeyRunner启动时的入口类,由于它里面包括了main方法.它的整个启动过程主要做了以下几件事情: 解析用户启动MonkeyRunner时从命令行传输 ...

  5. 《Linux内核分析》第八周 进程的切换和系统的一般执行过程

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK EIGHT ...

  6. 自制操作系统 （三） 从启动区执行操作系统并进入C世界

    qq:992591601 欢迎交流 2016.04.03 2016.05.31 2016.06.29 这一章是有些复杂的,我不太懂作者为什么要把这么多内容都放进一天. 1读入了十个柱面 2从启动区执行 ...

  7. Linux内核设计第八周 ——进程的切换和系统的一般执行过程

    Linux内核设计第八周 ——进程的切换和系统的一般执行过程 第一部分 知识点总结 第二部分 实验部分 1.配置实验环境,确保menu内核可以正常启动 2.进入gdb调试,在shedule和conte ...

  8. 小觑数据库(SqlServer)查询语句执行过程

    近年来,越来越多的NoSql产品不断的以技术革命的者的身份跳出来:“你看哥是多么的快,你们关型型数据库真是战五渣阿”.是的,高性能的场景下NoSql真的很出彩.而我们关系型数据库只能在墙角哭泣&quo ...

  9. Android系统在新进程中启动自定义服务过程（startService）的原理分析

    在编写Android应用程序时,我们一般将一些计算型的逻辑放在一个独立的进程来处理,这样主进程仍然可以流畅地响应界面事件,提高用户体验.Android系统为我们提供了一个Service类,我们可以实现 ...

随机推荐

  1. Android下so注入和hook

    一.前言 总结一下这两天学习的Android注入so文件,通过遍历got表hook函数调用 1.注入so文件 2.so文件中遍历got表hook函数 二.注入so文件 1)注入进程 1.编程思路分为以 ...

  2. python中lambda,map,reduce,filter,zip函数

    函数式编程 函数式编程(Functional Programming)或者函数程序设计,又称泛函编程,是一种编程范型,它将计算机运算视为数学上的函数计算,并且避免使用程序状态以及易变对象.简单来讲,函 ...

  3. leetcode_173【二叉搜索树迭代器】

    实现一个二叉搜索树迭代器.你将使用二叉搜索树的根节点初始化迭代器. 调用 next() 将返回二叉搜索树中的下一个最小的数. 示例: BSTIterator iterator = new BSTIte ...

  4. Codeforces 156 A——Message——————【思维题】

    A. Message time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  5. Linux下ffmpeg添加Facebook/transform代码块实现将全景视频的球模型转换成立方体模型

    Facebook事实上已开始在平台中支持360度全景视频的流播,但公司对此并不满足.其工程师更是基于锥体几何学设计出了一套全新的视频编码,号称最高能将全景视频的文件大小减少80%.(VR最新突破:全景 ...

  6. spring中使用quartz时注入时出现的错误

    错误1: 配置文件: <!-- 任务执行器的线程池 --> <bean id="taskExecutor" class="org.springframe ...

  7. 前端渲染模板（一）：Thymeleaf

    一.使用 本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法. 1 资源文件的约定目录结构  Maven的资源文件目录:/src/java/resources spring-boot ...

  8. [转]微信小程序联盟 跳坑《一百八十一》设置API：wx.openSetting使用说明

    本文转自:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4066 这个API解决了过去一个长久以来无法解决的问题,如何让用户重 ...

  9. Linux常用命令语法+示例

    原文出自:https://blog.csdn.net/seesun2012 Linux常用命令:Linux查看日志命令总结:Tomcat相关:Linux配置网卡,连接外网:Linux下安装JDK:Li ...

  10. Java生成验证码（一）

    一.为什么要使用验证码     我们要通过验证码,由用户肉眼识别其中的验证码信息,从而区分用户是人还是计算机.    二.什么是验证码     验证码:是一种区分用户是计算机还是人的公共全自动程序. ...