AngularJS 工作原理详解

前端之家收集整理的这篇文章主要介绍了AngularJS 工作原理详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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 工作原理的资料整理,后续继续补充相关资料,谢谢大家对本站的支持

原文链接:https://www.f2er.com/js/46503.html

猜你在找的JavaScript相关文章