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

半指温柔乐

发布于 2018-09-11 09:32:02

3.6K0

发布于 2018-09-11 09:32:02

文章被收录于专栏：前端知识分享

一、理解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很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分

1 // 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块
2 var app = angular.module(“MyApp”, []);//app是MyApp模块的实例

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

2、Module.controller() 控制器

1 var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例
2 app.controller(“userCtrl” ,function($scope){ 
3 //userCtrl是控制器的名字
4 $scope.name= “赵敏”; //$scope用来保存数据，定义方法
5 });

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

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

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

1 // 监视购物车内容变化，计算最新结果
2 $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的强大与魅力。

附：代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 7 </head>
 8 <body>
 9 <div ng-app="myApp" ng-controller="myCtrl">
10 名: <input type="text" ng-model="firstName"><br>
11 姓: <input type="text" ng-model="lastName"><br>
12 <br>
13 姓名: {{firstName + " " + lastName}}
14 </div>
15 </body>
16 <script>
17 var app = angular.module('myApp', []);
18 app.controller('myCtrl', function($scope) {
19 $scope.firstName = "王";
20 $scope.lastName = "二狗";
21 });
22 </script>
23 </html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-04-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度