Angular1
来源:互联网 发布:羊羔绒卫衣男淘宝网 编辑:程序博客网 时间:2024/06/05 01:04
AngularJS是如何渲染页面的?
当你用浏览器去访问index.html的时候,浏览器依次做了如下一些事情: - 加载html,然后解析成DOM; - 加载angular.js脚本; - AngularJS等待DOMContentLoaded事件的触发; - AngularJS寻找ng-app指令,根据这个指令确定应用程序的边界; - 使用ng-app中指定的模块配置$injector; - 使用injector创建injector创建compile服务和$rootScope; - 使用compile服务编译DOM并把它链接到compile服务编译DOM并把它链接到rootScope上; - ng-init指令对scope里面的变量name进行赋值; 对表达式{{name}}进行替换,于是乎,显示为“Hello World!”
那么问题来了
1.$injector 是神马东西
这里写代码片
Angular如何和浏览器的事件回路来交互
主要分为三个阶段:
1. 浏览器的事件回路一直等待着事件的触发,事件包括用户的交互操作、定时事件或者网络事件(如服务器的响应等);
2. 一旦有事件触发,就会进入到Javascript的context中,一般通过回调函数来修改DOM;
3. 等到回调函数执行完毕之后,浏览器又根据新的DOM来渲染新的页面。
正如下面一张图所示,交互过程主要由几个循环组成:
AngularJS修改了一般的Javascript工作流,并且提供了它自己的事件处理机制。这样就把Javascript的context分隔成两部分,一部分是原生的Javascript的context,另一部分是AngularJS的context。只有处在AngularJS的context中的操作才能享受到Angular的data-binding、exception handling、property watching等服务,但是对于外来者(如原生的Javascript操作、自定义的事件回调、第三方的库等)Angular也不是一概不接见,可以使用AngularJS提供的$apply()函数将这些外来者包进AngularJS的context中,让Angular感知到他们产生的变化。 接下来,让我们一起来看看交互过程中的这几个循环是怎么工作的?
1. 首先,浏览器会一直处于监听状态,一旦有事件被触发,就会被加到一个event queue中,event queue中的事件会一个一个的执行。
2. event queue中的事件如果是被
5. 一旦AngularJS的$digest循环结束,整个执行就会离开AngularJS和Javascript的context,紧接着浏览器就会把数据改变后的视图重新渲染出来。
接下来,我们还是结合代码来解析一下:
复制代码
<!doctype html><html ng-app> <head> <script src="angular.js"></script> </head> <body> <input ng-model="name"> <p>Hello {{name}}!</p> </body> </html>
复制代码
这段代码和上一段代码唯一的区别就是有了一个input来接收用户的输入。在用浏览器去访问这个html文件的时候,input上的ng-model指令会给input绑上keydown事件,并且会给name变量建议一个
3. AngularJS将’A’赋值给name;
4. digest循环开始,digest循环开始,watch列表检测到name值的变化,然后通知{{name}}表达式,更新DOM;
5. 退出AngularJS的context,然后退出Javascript的context中的keydown事件;
6. 浏览器重新渲染视图。
最后,希望这篇博客能帮助大家更好的理解AngularJS在背后干的事情。如有不确切的地方,请指正!
http://www.cnblogs.com/penghongwei/p/3444601.html
- Angular1
- angular1
- angular1基础
- angular1资源
- Angular1 笔记
- angular1 之 动画篇
- angular1 执行流程
- angular1 ui-router使用
- angular1的使用
- 从无到有构建angular1框架
- Angular1创建自定义指令
- Angular1.x规范
- 简化angular1依赖注入
- Angular1中的超时处理
- angular1 事件委托
- 学习angular1还是angular2
- angular1.x的directive
- angular1环境配置
- linux——git安装使用
- 一次内存泄露问题的排查
- Git使用教程与基本原理和Sourcetree基本使用探微
- windows下sublime插件ctags的安装与使用
- 创建数据库的时候报错,错误提示为“datatype notmach”,说明数据类型不匹配
- Angular1
- 关于FastJson bean中首字母大写与二层bean的问题。
- Xshell命令大全
- make[] install: Command not found
- 数据库分库分表策略的具体实现方案(转载)
- Android 单点触控(放大、缩小、旋转、位移)
- R语言编程艺术读书笔记4----矩阵和数组(2)
- http4次挥手
- C Primer Plus学习笔记----第三章数据和C