第217天：深入理解Angular双向数据绑定的原理

一、理解angular双向数据绑定

双向绑定是新的前端框架中频繁出现的一个新词汇，也是mvvm的核心原理。angularjs五条核心信念中的数据驱动，便是由双向绑定进行完成。

那么什么是双向绑定，下面简单进行讲解。

首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新页面（get请求），而是通过向后端请求相关数据，并通过无刷新加载的方式进行更新页面（post请求）。那么数据进行更新后，页面上相应的位置也能自动做出对应的修改，便是数据绑定。

在以前的开发模式中，这一步一般通过jq操作DOM结构，从而进行更新页面。但这样带来的是大量的代码和大量的操作。如果能在开始的时候，便已经确定好从后端获取的数据到页面上需要进行的操作，当数据发生改变，页面的相关内容也自动发生变化，这样便能极大地方便前端工程师的开发。在新的框架中（angualr，react，vue等）,通过对数据的监视，发现变化便根据已经写好的规则进行修改页面，便实现了数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。

而双向绑定则是增加了一条反向的路。在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。这样便实现了V——M——VM——V的一个双向绑定。

具体的代码实现通常用到以下几个ng指令：

ng-model:将一个DOM节点的值与一个angular中的变量进行绑定，当DOM节点值发生修改的时候变量也会随之修改。

ng-bind:将angular中的变量显示到页面中。

{{}}:与ng-bind功能相同，区别在于页面未完全渲染完之前模板语言会直接显示在页面中，可通过在html标签中加上ng-cloak解决这一问题。

二、模块化

1、AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分

 // 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块

 var app = angular.module(“MyApp”, []);//app是MyApp模块的实例

也可以将重复使用的指令或过滤器之类的做成模块便于复用
注意必须指定第二个参数，[]是个空数组，表示不需要其他模块

2、Module.controller() 控制器

 var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例

 app.controller(“userCtrl” ,function($scope){

 //userCtrl是控制器的名字

 $scope.name= “赵敏”; //$scope用来保存数据，定义方法

 });

第二行代码创建了一个名为userCtrl的控制器，以及一个控制器函数
控制器函数接受一个名为$scope的参数

3、Controller 控制器控制器的三种主要职责：

为应用中的模型设置初始状态，初始化$scope对象
通过$scope对象把数据模型或函数行为暴露给视图
使用$watch方法监视模型的变化，做出相应的动作

 // 监视购物车内容变化，计算最新结果

 $scope.$watch(‘totalCart’, calculateDiscount);

4、$scope（上下文模型）

视图和控制器之间的桥梁
用于在视图和控制器之间传递数据
利用$scope暴露数据模型（数据，行为）

5、单向绑定和双向绑定

单向绑定：

模型变化过后，自动同步到界面上；
一般纯展示型的数据会用到单项数据绑定；使用表达式的方式都是单向的

双向绑定：

两个方向的数据自动同步：
模型发生变化自动同步到视图上；
视图上的数据发生变化过后自动同步到模型上；

三、开始编写一个简单的AngularJS demo

在写代码之前我们先来认识以下这几条指令：

1.ng-app = “modulename ”

申明：ng-app 指令用于告诉 AngularJS 应用，当前这个元素是根元素。

必要性：所有 AngularJS 应用都必须要有一个根元素。

唯一性：HTML 文档中只允许有一个 ng-app 指令，如果有多个ng-app指令，则只有第一个会被使用。

总之：这条指令定义了AngularJS的应用程序及使用范围。

其中modulename：模块的名称，编码者自定义。

2.ng-controller = “控制器名”

ng-controller 指令用于为你的应用添加控制器。

在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

3.ng-model = “eparator”

ng-model指令用于建立数据模型，在模型中对应有一个变量username用来存放input元素的value值从而绑定了输入框的值到 scope (应用程序)变量中。

eparator：你想要绑定到表单域的属性名。

<input>, <select>, <textarea> 元素支持该指令。

4.$scope

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

5.双大括号{{变量}}

用双重大括号来获取变量的值。当在控制器中添加 $scope对象时，视图 (HTML)可以获取了这些属性。

HTML中，你不需要添加$scope前缀，只需要添加属性名即可，如：{{username}}。

6.angular.module('name', requires);

使用angular.module()方法来声明模块。

参数说明：

第一个name是模块的名称，字符串变量。

第二个requires是依赖列表，也就是可以被注入到模块中的对象列表。

了解了以上指令，下面进行demo演示：

代码块如下：

然后用浏览器打开这个文件

结果如图：

尝试改变一下input中的值你会发现 “姓名”中的值也自动发生了变化，是不是很神奇？比jquery来操作dom是不是简单很多？

代码详解：

当网页加载完毕，AngularJS 自动开启。

ng-app指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。ng-controller ="myCtrl"，为应用添加控制器，接下来 ng-model 指令建立数据模型，将input元素的value值绑定到 scope (应用程序)变量中。最后用双重花括号{{firstName + " " + lastName}}来获取$scope对象中变量firstName和lastName的值，并且{{ firstName }}{{ lastName }} 通过 ng-model="firstName"和ng-model="lastName"进行同步。

概括地说，AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。input元素的value发生变化，自动同步到model的 firstName 变量中，{{ firstName }}}是从模型中读 firstName 的值，因此下面姓名中元素的内容跟着变了。

通过以上实例，我们很容易就得到了用户输入的动态值，这是原生及其他框架难以实现的功能，当然，AngularJS除了数据的双向绑定以外，还有其他很多优秀的功能，希望读者通过这个简单的例子能敲开AngularJS学习的大门，去领悟AngularJS的强大与魅力。

附：代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title></title>

 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

 </head>

 <body>

 <div ng-app="myApp" ng-controller="myCtrl">

 名: <input type="text" ng-model="firstName"><br>

 姓: <input type="text" ng-model="lastName"><br>

 <br>

 姓名: {{firstName + " " + lastName}}

 </div>

 </body>

 <script>

 var app = angular.module('myApp', []);

 app.controller('myCtrl', function($scope) {

 $scope.firstName = "王";

 $scope.lastName = "二狗";

 });

 </script>

 </html>