AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】


Posted in Javascript onJanuary 19, 2017

本文实例讲述了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框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

使用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程序设计有所帮助。

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue router 配置路由的方法
Jul 26 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 #Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 #Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 #Javascript
react.js 翻页插件实例代码
Jan 19 #Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 #Javascript
You might like
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
python实现rest请求api示例
2014/04/22 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
wxPython实现绘图小例子
2019/11/19 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
用python写PDF转换器的实现
2020/10/29 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
会计师职业生涯规划范文
2014/02/18 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
学校清明节活动总结
2014/07/04 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
关于vue-router-link选择样式设置
2022/04/30 Vue.js
如何使用python包中的sched事件调度器
2022/04/30 Python