AngularJS学习笔记3——AngularJS的工作原理

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

当你用浏览器去访问index.html的时候,浏览器依次做了如下一些事情:
加载html,然后解析成DOM;加载.js脚本;等待事件的触发;寻找ng-app指令,根据这个指令确定应用程序的边界;使用ng-app中指定的模块配置$;使用$创建$服务和$;使用$服务编译DOM并把它链接到$上;ng-init指令对scope里面的变量name进行赋值;对表达式{{name}}进行替换,于是乎,显示为“Hello World!”
整个过程可以用这张图来表示:

AngularJS学习笔记3——AngularJS的工作原理

文章插图
Hello {{name}}!

这段代码和上一段代码唯一的区别就是有了一个input来接收用户的输入 。在用浏览器去访问这个html文件的时候,input上的ng-model指令会给input绑上事件,并且会给name变量建议一个$watch来接收变量值改变的通知 。在交互阶段主要会发生以下一系列事件:
1. 当用户按下键盘上的某一个键的时候(比如说A),触发input上的事件;
2. input上的指令察觉到input里值的变化,调用$apply(“name=‘A’”)更新处于的中的model;
3. 将’A’赋值给name;
4. $循环开始,$watch列表检测到name值的变化,然后通知{{name}}表达式,更新DOM;
5. 退出的,然后退出的中的事件;
6. 浏览器重新渲染视图 。
【AngularJS学习笔记3——AngularJS的工作原理】最后,希望这篇博客能帮助大家更好的理解在背后干的事情 。如有不确切的地方,请指正!