statup - 依旧是hello world...改为Hello Kitty!
runtime - 介绍angular的runtime
scope - view与contorller的纽带(神马glue...胶)
controller - app的行为(application behavior)
model - app的数据
view - 用户所看到的东东
directives - HTML的语法扩展
filters - 根据用户的本地格式,格式化数据
injector - 加载我们的app(依赖管理之类)
module - 配置injector
$ - angular的命名空间(namespace)
二、启动(Startup)
下面描述angular是如何启动的(参考图表与下面的例子):
1. 浏览器加载HTML,将HTML标签转换为DOM对象;
2. 浏览器加载angular.js的脚本;
3. Angular等待DOMContentLoaded事件;
4. Angular寻找ng-app这个用于指定应用边界范围的directive;
5. 如果ng-app有指定module(也许是ng-app=”SomeApp”),将被用作配置$injector;
6. $injector用于创建$compile服务(service)以及$rootScope;
7. $compile服务用作“编译”(有点像遍历,然后做一点神秘的事情)DOM,并将其与对应的$rootScope连接。
8. ng-init 这个directive在对应的scope中创建name属性并对其赋予”Kitty”值;
9. 将“{{name}}”的值插入(interpolates)到表达式中,最终显示”Hello Kitty!”。
<!DOCTYPE html> <html lang="zh-cn" ng-app> <head> <meta charset="UTF-8"> <title>Hello Kitty!</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <div ng-init="name='Kitty'">Hello {{name}}!</div> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> </body> </html>
由于今晚跟别人讨论一些东西,所以进度缓慢。。。又是那句。。。现在已经是夜深了。。。Angular,广告之后见!
==============================================
广告完毕。。。继续
三、Runtime
这图表和后面的例子,描述了angular如何通过浏览器event-loop(所有的时间处理函数,以及timer执行的函数,会排在一个queue结构中,利用一个无限的循环,不断从queue中取出函数来执行,这个就是event-loop。来自)来进行交互。
1. 浏览器event-loop等待事件到来。事件来自于用户交互(DOM events)、timer事件(setTimeout)、network事件(服务端响应,XHR之类);
2. 事件回调函数开始执行。这里进入javascript上下文(context)。这回调函数可以修改DOM结构。
3. 当回调函数执行完毕后,浏览器退出javascript context,根据DOM的改变来重绘视图。
Angular通过创建自己的事件处理循环(event processing loop),修改了一般的javascript流(flow)。这将Javascript分割成传统的和Angular的执行上下文(execution context)。只要是在Angular execution context 里面执行的操作,都拥有angular data-binding、异常处理(exception handling)、属性监视(property watching)等能力。我们可以通过在javascript使用$apply(),进入Angular execution context。但要记住一点,在大多数(angular的)地方(如controllers、services),处理事件的directive会为你调用$apply。手动调用$apply的场景,一般是当你实现自定义事件处理函数,或者处理第三方库的回调的时候。
1. 通过调用scope.$apply(stimulusFn)进入angular execution context。stimulusFn就是我们想在angular execution context中执行的函数(含scope作为参数)或者angular合法的表达式。
2. Angular执行stimulusFn,这通常会改变应用的状态(application state)。
3. Angular进入$digest loop。这个loop由一个处理$evalAsync queue 和处理$watch list两个更小的循环组成。$digest loop会在model稳定之前保持迭代,即$evalAsync queue为空,而且$watch list没有检测到任何变化。
4. $evalAsync queue被用作安排必须跳出当前堆栈帧(堆栈帧指的是在堆栈中为当前正在运行的函数分配的区域(或空间)。传入的参数、返回地址(当这个函数结束后必须跳转到该返回地址。译注:即主调函数的断点处)以及函数所用的内部存储单元(即函数存储在堆栈上的局部变量)都在堆栈帧中。 C.1.1 堆栈帧)之外,但在浏览器视图绘制之前的工作。这通常是通过使用setTimeout(0)来实现。但setTimeout(0)这方法,会导致缓慢,或者在每个事件处理完毕后,浏览器绘制视图时,出现视图闪烁(angular有没有去解决这个问题?如何解决?)。