AngularJS应用的启动和执行过程

启动(startup):

Highlighter">
rush:csharp;gutter:true;">

  
    
  
  
    Hello {{name}}!

 

在编译阶段:  input元素上的ng-model指令会给输入框绑定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事件;  浏览器以更新的文本重新渲染视图。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...