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实现动态编译添加到dom中的方法,结合实例形式分析了AngularJS动态编辑构建模板的相关操作技巧,需要的朋友可以参考下2016-11-11
本文给大家介绍angularjs验证重复密码的两种方法，每种方法都有各自的优缺点，大家可以根据需要选择一种方法，具体内容详情大家通过本文详细了解下吧2016-11-11
这篇文章主要介绍了angular强制更新ui视图的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本篇文章主要介绍了详解如何构建Angular项目目录结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
使用ngView配合AngularJS应用实现动画效果的方法
这篇文章主要介绍了使用ngView配合AngularJS应用实现动画效果的方法,AngularJS是十分热门的JavaScript库,需要的朋友可以参考下2015-06-06
本篇文章主要介绍了强大的 Angular 表单验证功能详细介绍，使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求，有兴趣的可以了解一下2017-05-05
今天小编就为大家分享一篇Angularjs之ngModel中的值验证绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家介绍了Angular ViewChild组件间通信demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
AngularJS基础 ng-keypress 指令简单示例
本文主要介绍AngularJS ng-keypress 指令,这里对ng-keypress指令的基础资料整理,并附有实例代码,需要的小伙伴参考下2016-08-08
最新评论