AngularJS的主要组成部分是：

启动

我们通过一个例子来讲解启动这个部分

?

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

Hello {{name}}!

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”。

执行期

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

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

下面通过一个例子来讲解如何实现“将用户输入绑定到视图上”的效果。

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

Hello {{name}}!

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

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

作用域(Scope)

作用域是用来检测模型的改变和为表达式提供执行上下文的。它是分层组织起来的，并且层级关系是紧跟着DOM的结构的。

下面这个例子演示了{{name}}表达式在不同的作用域下被解析成了不同的值

?

?
? ? <script src="http://code.angularjs.org/angular-1.1.0.min.js">
? ? <script>
? ? ? ? function GreetCtrl($scope) {
? 　　　　　　$scope.name = 'World';
　　　　 }

　　　　 function ListCtrl($scope) {
? 　　　　　　$scope.names = ['Igor', 'Misko', 'Vojta'];
　　　　 }
? ?
?
?
? ?

?

在GreetCtrl控制器中的name等于'World'。在ListCtrl控制器中的name等于'Igor', 'Misko', 'Vojta'。因为它们的作用域不一样。

控制器

视图背后的控制代码就是控制器。它的主要工作内容是构造模型和回调方法，并把模型和回调方法一起发送到视图。 视图可以看做是作用域在模板(HTML)上的投影。而作用域是一个中间地带，它把模型整理好传递给视图，把浏览器事件传递给控制器。控制器和视图的分离非常重要，因为：

（1）控制器是由java script写的。java script是命令式的，命令式的语言适合用来编写应用的行为。控制器不应该包含任何关于渲染代码（DOM引用或者片段）。
（2）视图模板是用HTML写的。HTML是声明是的，声明式的语言适合用来编写UI。视图不应该包含任何行为。
（3）因为控制器和视图没有直接的调用关系，所以可以使多个视图对应同一个控制器。这对“换肤(re-skinning)”、适配不同设备（比如移动设备和台式机）、测试，都非常重要。

模型

模型就是用来和模板结合生成视图的数据。模型在作用域中可以被引用，这样才能被渲染生成视图。和其他框架不一样的是，Angularjs对模型本身没有任何限制和要求。你不需要继承任何类也不需要实现指定的方法。 模型可以是哈希形式的原生对象，也可以是完整对象类型。简而言之，模型可以是原生的java script对象。

视图

所谓视图，就是指用户所看见的。 视图的生命周期由作为一个模板开始，它将和模型合并，并最终渲染到浏览器的DOM中。与其他模板系统不同的是，AngularJS使用一种独特的形式来渲染视图。