AngularJS 工作原理详解

个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去。在这文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析。 首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么。

rush:js;"> Hello {{name}}!

这段代码和上一段代码唯一的区别就是有了一个input来接收用户的输入。在用浏览器去访问这个html文件的时候,input上的ng-model指令会给input绑上keydown事件,并且会给name变量建议一个$watch来接收变量值改变的通知。在交互阶段主要会发生以下一系列事件:

  1. 当用户按下键盘上的某一个键的时候(比如说A),触发input上的keydown事件;

  2. input上的指令察觉到input里值的变化,调用$apply(“name=‘A'”)更新处于AngularJS的context中的model;

  3. AngularJS将'A'赋值给name;

  4. $digest循环开始,$watch列表检测到name值的变化,然后通知{{name}}表达式,更新DOM;

  5. 退出AngularJS的context,然后退出Javascript的context中的keydown事件;

  6. 浏览器重新渲染视图。

以上就是对AngularJS 工作原理的资料整理,后续继续补充相关资料,谢谢大家对本站的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...