AngularJS的主要组成部分是:
启动(startup) - 展示“hello world!”
执行期(runtime) - AngularJS 执行期概览
作用域(scope) - 视图和控制器的集合区
控制器(controller) - 应用的行为
模型(model) - 应用的数据
视图(view) - 用户能看到的
指令(directives) - 扩展HTML语法
过滤器(filters) - 数据本地化
注入器(injector) - 聚合你的应用
模块(module) - 配置注入器
$ - AngularJS的命名空间(namespace)
启动
我们通过一个例子来讲解启动这个部分
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/angular-1.1.0.min.js"></script>
</head>
<body>
<p ng-init=" ">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”。
执行期
浏览器的事件机制:
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="https://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将应用到模型上;
$digest 循环开始;这个循环是由两个小循环组成的,这两个小循环用来处理$evalAsync队列和$watch列表。这个$digest循环直到模型“稳定”前会一直迭代。这个稳定具体指的是$evalAsync列表为空,并且$watch列表中检测不到任何改变了。这个$evalAsync队列是用来管理那些“视图渲染前需要在当前栈外执行的操作”。这通常使用 setTimeout(0)来完成的。并且,因为浏览器会根据事件队列按顺序渲染视图,这时还会造成视图的抖动。$watch列表是一个表达式的集合,这些表达式可能是自上次迭代后发生了改变的。如果检测到了有改变,那么$watch函数就会被调用,它通常会把新的值更新到DOM中。
$watch 列表检测到了name值的变化,然后通知 {{name}}变量替换的表达式,这个表达式负责将DOM进行更新;
AngularJS退出执行上下文,然后退出Javascript上下文中的keydown事件;
浏览器以更新的文本重新渲染视图。
作用域(Scope)
作用域是用来检测模型的改变和为表达式提供执行上下文的。它是分层组织起来的,并且层级关系是紧跟着DOM的结构的。
下面这个例子演示了{{name}}表达式在不同的作用域下被解析成了不同的值