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

赞 (0)

相关推荐

  • AngularJS入门教程之数据绑定原理详解

    本文实例讲述了AngularJS数据绑定原理.分享给大家供大家参考,具体如下: 注 这篇文章主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人.如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码. Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-checking...它们是什么?它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我

  • 深入浅析AngularJS中的一次性数据绑定 (bindonce)

    一.理解双向数据绑定和监听器 为了实现双向数据绑定,AngularJS使用了$watch API来观察期作用域中的模型变化.具体的作用域取决于你的代码如何编写.如果你没有创建一个自作用域,就是说没有使用ngController指令在你的DOM和你的控制器代码之间创建一个关联,你可能处理的是跟作用域$rootScope,这个作用域由ngApp自动创建,并且是应用中所有作用域的父作用域,当然,如果你选择手动启动AngularJS,那情况就另当别论了.每当你创建了一个数据绑定时,AngularJS就会

  • Angularjs中数据绑定的实例详解

    Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head

  • AngularJS1.X学习笔记2-数据绑定详解

    AngularJS1.X学习笔记2-数据绑定详解

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了数据绑定才能将模型层和视图层分离,实现MVC.Angular的数据绑定比较特别,它支持双向数据绑定. 1.ng-bind <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> &

  • angularjs学习笔记之双向数据绑定

    这次我们来详细讲解angular的双向数据绑定. 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实现了数据双向绑定. 二.取值表达式与ng-bind的使用 我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现"{{greeting.text}} {{text

  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同

  • AngularJS实践之使用NgModelController进行数据绑定

    AngularJS实践之使用NgModelController进行数据绑定

    前言 在Angular应用中,ng-model指令时不可缺少的一个部分,它用来将视图绑定到数据,是双向绑定魔法中重要的一环.ngModelController则是ng-model指令中所定义的controller.这个controller包含了一些用于数据绑定,验证,CSS更新,以及数值格式化和解析的服务.它不用来进行DOM渲染或者监听DOM事件.与DOM相关的逻辑都应该包含在其他的指令中,然后让这些指令来试用ngModelController中的数据绑定功能. 注意:本篇文章不是对NgMode

  • AngularJS入门教程之数据绑定用法示例

    AngularJS入门教程之数据绑定用法示例

    本文实例讲述了AngularJS数据绑定用法.分享给大家供大家参考,具体如下: 数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.

  • 详谈AngularJs 控制器、数据绑定、作用域

    详谈AngularJs 控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1.x升级到2.x难度很大,甚至可以说重构,就向我们公司现在还在用1.x版本,所以我还是决定把这系列写完,也给自己一个整理的过程.本人现在也正在学习Angular4.0版本的学习,但是4.0用typescript及nodejs集成比较大,还有学习angular-cli脚手架的学习,所以等我学会以后准备在

  • AngularJS 双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl

随机推荐