对angular.js的一点理解

2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏编辑

最近一直在学习angular.js。不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几乎纯粹的dom 绑定没有一个架构一样的东西。而angular.js 则有dom 绑定还有mvc 架构的支持。
一 angular.js 和以前的js 框架有的区别:
    1 传统的前端开发思维:
       以jquery 为例,它是以dom 为中心的,是dom 元素的操作,更多的是关注dom 的变化和用户的操作。
    2 新一代的前端开发思维
       以angular.js 为例,它是以data 为中心的,关心的是数据的变化。
   比如如果要实现一个三级联动的下拉框:


jquery 的实现是:

1 分别监听省市县的下拉框的change 事件。
2 在事件中,根据当前的值来实现下级的联动。
3 查询符合上级的下级数据。
4 如此循环 更新下级的下级。
代码量估计得有一百行左右吧。

angular.js 的实现是:

1 定义上级的数据源和model。
2 定义下级的数据源的model。
3 定义下下级的数据源和model。
4 在$watch 中更新model 即可。

代码量 十行搞定。

再比如要实现一个表格(分页,排序,过滤,编辑):


jquery 的实现思路 :

1 获取数值。
2 根据返回的值,来进行dom 的操作。
3 动态生成一些控件,然后绑定控件的事件。
4 在事件里面再进行dom 的操作以及数据的交互。
这个代码量应该也不少。

angular.js 实现思路:

1 ngRepeat渲染
2 filter过滤器过滤
3 orderBy排序
4 paging分页

代码量几十行左右。

如果写惯了jquery 代码的话再写angualr.js 的话会有一点不适应。但是熟悉之后会感觉非常的爽。angular.js 除了Directive之外其他地方绝对不能使用dom 操作,切记。

二 理解angular.js 框架

如图所示为 angular.js 启动过程:

1 浏览器载入HTML,解析成DOM。
2 加载Angular类库。
3 DOMContentLoaded事件中开始bootstrap。
4 寻找 ng-app, 注入服务。
5 编译DOM并链接到对于的scope数据。

angular.js 执行过程:

1 浏览器等待用户事件触发(用户交互,定时器,网络事件)。
2 浏览器执行事件回调,进入Javascript上下文。
3 Angular在$apply中接管了JS的执行部分。
4 Angular进入$digest循环。
5 Angular进行脏数据检查。
6 批量更新DOM,$digest结束。
7 浏览器开始渲染。

以如下代码为例 :

 1 <div ng-app="mymodule">
2 <div ng-controller="mycontroller">
3 <input ng-model="name"/>
4 <p>{{name}}</p>
5 </div>
6 </div>
7
8 <script src="~/Scripts/angular.min.js"></script>
9 <script type="text/javascript">
10
11 var mymodule = angular.module('mymodule', []);
12
13 mymodule.controller('mycontroller', function ($scope) {
14
15 $scope.name = "hello angular";
16
17 });
18
19 </script>

编译期
1 解析ng-model并为input绑定key事件。
2 为{{name}}建立$watch表达式,进行监听。

执行期
1 用户在input输入按键,触发了浏览器的key事件。
2 事件回调, 进入Javascript上下文。
3 angular接管,在$apply中修改scope的name取值。
4 触发$digest流程。
5 脏数据检测,发现$watch列表中的name值变更。
6 通知对应的处理函数, 更新DOM。
7 Angular退出执行上下文,退出Javascript的事件处理函数。

angular.js 的学习是一个长期的过程,光学理论还是不够的,重要的是实践。多看,多写。

angular.js的一点理解的更多相关文章

  1. 对angular.js的一点理解

    最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...

  2. angular js module 的理解

    module其实就是一个容器,里面可以装controller,service,directive,filter等, 官网的解释是:Module :A container for the differe ...

  3. angular js的Inline Array Annotation的理解

    inline Array annotation的形式是: someModule.controller('MyController', ['$scope', 'greeter', function($s ...

  4. angular js jquery中post请求的一点小区别

    这也是最近遇到的坑,还是之前那个项目,现在要实现登录功能. 背景:注册功能之前已经跑通了.前端用的是jquery后台是springMVC.鉴于注册和登录有些接口功能是类似的(比如注册确保邮箱是没有注册 ...

  5. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  6. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  7. (翻译)Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  8. Angular指令渗透式理解

    通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...

  9. Angular js 之一些简单的js操作

    1.<div ng-if()> </div> 括号里面是布尔值  如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...

随机推荐

  1. 使用js在新窗口中POST数据

    最近在做自己的博客,写文章的时候有一个预览功能,当时使用的是弹出框来进行预览,感觉体验不是很好. 然后想到了写邮件时候的新窗口预览,查了下126邮箱和qq邮箱的预览实现效果,以及各种谷歌百度stack ...

  2. target-action传值

    Target-Action传值 实质就是:A页面要给B页面传值,A就提供接口出去,抓A到B内部来,A间接调用自己内部方法(相当于,A把自己内部需                     要操作的方法, ...

  3. 我的第一次windows规划

    #include <windows.h>   LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ; //WinMain功能被分配一 ...

  4. Kinect开发笔记之二Kinect for Windows 2.0新功能

    这是本博客翻译文档的第一篇文章.笔者已经苦逼的竭尽全力的在翻译了.但无奈英语水平也是非常有限.不正确或者不妥当不准确的地方必定会有,还恳请大家留言或者邮件我以批评指正.我会虚心接受. 谢谢大家.   ...

  5. Android SystemUI源代码分析和修改

    1.在导航栏中添加音量加减button 一些Android音量调节button.或者从保护实体按键的角度考虑,就须要在导航栏的虚拟按键中加入音量加减调节按键. 效果例如以下图所看到的: 实现步骤例如以 ...

  6. jvm在存储区域

    当区域执行的数据  JVM存储器的管理分为几个时间之后的数据区的实施:程序计数器.JavaVM栈.本地方法栈.Java堆.方法区(包括常量池的实现).   程序计数器 较小的内存空间,能够看作是当前线 ...

  7. 3.Swift翻译教程系列——Swift基础知识

    英语PDF下载链接http://download.csdn.net/detail/tsingheng/7480427 Swift是用来开发iOS和OS X应用的新语言,可是很多地方用起来跟C或者OC是 ...

  8. JavaEE(13) - JPA属性映射

    1. 映射实体的属性 #1. 使用@Transient修饰不想持久保存的Field #2. 使用@Enumerated修饰枚举类型的Field #3. 使用@Lob, @Basic修饰枚举类型的Fie ...

  9. linux下一个Oracle11g RAC建立(四)

    linux下一个Oracle11g RAC建立(四) 三.配置共享存储 配置ASM管理准备 1)OCRDISK :存储CRS资源配置信息 2)VOTEDISK:仲裁盘.记录节点状态 3)DataDis ...

  10. HTML5分析实战WebSockets一个简短的引论

    HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...