AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
本文实例讲述了AngularJS框架双向数据绑定机制。分享给大家供大家参考,具体如下:
之前写的一篇《AngularJS入门示例之Hello World详解》 ,介绍ng-model的时候提到:使用AngularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能。现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的。越是感受到框架功能的强大,越是能够激发学习的兴趣和动力。
假如我们有一个学生信息列表,包含学生的姓名、地址和年龄信息。假如这个数据源信息保存在data.js文件中。
var g_phones = [ <span style="white-space:pre"> </span>{ "name": "wang xx", "address": "shanghai", "age": 20 }, { "name": "li xx", "address": "beijing & shanghai", "age": 10 }, { "name": "qian xx", "address": "xian", "age": 30 }, ];
现在要求实现以下功能:
1、学生信息列表,默认全部显示,显示顺序跟数组顺序一致。
2、提供一个搜索框,能够进行模糊搜索。只要某个学生的name、address、age有一个符号搜索条件,就可以显示。
3、提供一个选择框,能够按照name或者age对学生信息进行排序。
效果图如下:
使用angularJS实现上述效果的代码如下:
<!--ng-app和ng-controller都是angularJS框架的语法--> <html ng-app ng-controller="RootController"> <head> <!-- 加载数据文件--> <script src="data.js"></script> <script src="angular-1.2.25.js"></script> <script> // angular中的控制器,即MVC模式中的C角色 function RootController($scope) { //读取数据源,保存到angular的scope中 $scope.students = g_students; // 搜索字段(默认无条件,用空字符表示) $scope.queryProp = ''; // 排序字段(默认无排序,用空字符表示) $scope.orderProp = ''; } </script> </head> <body> <!--ng-model实现数据的双向绑定--> Search: <input ng-model="queryProp"> Sort by: <select ng-model="orderProp"> <option value="name">name</option> <option value="age">age</option> </select> <!--遍历students,对每个项stu,进行filter和orderBy--> <ul> <li ng-repeat="stu in students | filter:queryProp | orderBy:orderProp"> <p>{{stu.name}}</p> <p>{{stu.address}}</p> <p>{{stu.age}}</p> </li> </ul> </body> </html>
可以看到,实现上述功能,需要的所有HTML/JS代码加起来不到40行,代码是很简洁的,很清晰。
如果不使用angularJS,我们使用JavaScript和jQuery来完成上述功能,我们必须要做的事情如下:
1、给search和sort 这2个控件,绑定事件处理函数。当搜索条件或者排序改变的时候,能够实时刷新学生信息列表。
2、由于有排序,所以必须要编写选择排序或冒泡等排序算法,需要考虑字符串比较和数字比较这2种情况。
3、在JS中,通过字符串拼接的方式将<li>插入到DOM中。写过这种代码的都知道,JS中进行HTML字符串的拼接,非常的复杂。
可以看到使用传统的JS开发方式,有很多重复繁琐的劳动,如事件处理函数的绑定、复杂的html字符串拼接等。通过这个例子,很明显可以看到使用angularJS开发效率远远高于JQuery和javascript这种传统的开发方式。如果你还没有感受到angularJS的强大和吸引力,那么我们再看一下关于angular的产生背景。下面是来自 大漠穷秋译作《用AngularJS开发下一代Web应用》的前言。
“关于Angular 的起源,我可以追溯到2009 年的Google Feedback 项目。当时,对于项目的开发速度以及如何编写可测试代码的问题,我们已经经受了几个月的折磨。6 个月时,我们开发了差不多17000 行前端代码。这时候,团队中的一个成员Misko Hevery 做出了一个大胆的宣言:利用他自己业余时间所开发的一个开源库,他可以在两周之内把目前所有东西重写一遍。
我当时想,两周的时间并不会给我们造成太大的影响,同时我们也接受了Misko 努力构建一些东西的想法。然而Misko 最终还是估算错了时间,他用了三个星期。但是,我们所有人还是被他深深地震撼了,更让我们感到震撼的是,他所开发的新应用的代码量从原来的17000 行压缩到了1500 行。看起来,Misko 的东西值得深入推广。Misko 和我决定,围绕他所提倡的理念组建一个团队,这个简单的理念就是:简化对web 开发者的经验要求。”
通过上面的背景介绍,可以看到angular确实能够极大的减少代码量,提高开发效率。行文至此,如果还是没有激起您对angularJS的兴趣和好奇,那么是我语言组织和表达能力不行,不是angular不行。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
- (八)简单了解下angularJS框架中NB的双向数据绑定机制,大大减少需要重复的开发代码量
- 使用AngularJS开发商城-(使用AngularJS的双向数据绑定机制)
- angularjs深入理解向指令传递数据,双向绑定机制
- 详解JavaScript的AngularJS框架中的作用域与数据绑定
- Android中的数据绑定框架DataBinding(对比AngularJS双向数据绑定很好理解)
- 深入理解Angularjs向指令传递数据双向绑定机制
- 实例剖析AngularJS框架中数据的双向绑定运用
- 详解JavaScript的AngularJS框架中的作用域与数据绑定
- 浅谈AngularJs 双向绑定原理(数据绑定机制)
- 使用angularjs1.x构建前台开发框架(十一)——数据双向绑定
- AngularJS 双向数据绑定详解简单实例
- JS学习笔记——AngularJS 1.x双向数据绑定机制
- 实例剖析AngularJS框架中数据的双向绑定运用
- 深入学习AngularJS中数据的双向绑定机制
- 从一段.html代码说起谈谈AngularJs中的双向数据绑定
- 深入学习AngularJS中数据的双向绑定机制
- angularjs的双向数据绑定
- AngularJS入门心得2——何为双向数据绑定
- AngularJS的数据双向绑定是怎么实现的?