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

一、理解angular双向数据绑定

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

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

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

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

而双向绑定则是增加了一条反向的路。在用户操作页面(比如在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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

awk第二课

使用方法:awk ‘{pattern + action}’ {filenames} 尽管操作可能会很复杂,但语法总是这样,其中 pattern 表示 AWK 在...

35510
来自专栏猿人谷

内存泄露

1.简介       在计算机科学中,内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况。内存泄漏并非指内存在物理...

2248
来自专栏企鹅号快讯

python-IDLE清屏和标记行数,其他推荐

——python—— 自定义IDLE清屏键 将网上下载的ClearWindow.py,放到python安装路径的lib\idlelib文件夹中,然后在这个文件夹...

2707
来自专栏西枫里博客

thinkPHP5模版页面volist循环offset不能使用变量

有这样一个应用场景:当volist循环需要排除前面几个数据的时候,我们通常使用offset来操作。而假设前面要排除的数据是根据当前页面占位符来确定的,而需要排除...

842
来自专栏Petrichor的专栏

python: py2下 中文 的 文件读写 及 打印

  读写中文文件时,不需要考虑编码的情况。此时虽然可以正常从文件中读取中文,也可以正常地将中文写入文件中,但是无法正常打印中文字段到屏幕上:

2662
来自专栏一“技”之长

iOS代码运行的磨刀石-预编译指令 原

所谓预编译,就是程序代码在编译之前,开发工具为我们预先做的一些工作。不要小瞧这些指令,没有它们,我们的代码可能寸步难行。

982
来自专栏WD学习记录

8-21Android 学习ing

(2)Tomcat服务器默认采用的是ISO8859-1编码得到的参数值,这种编码不支持中文,也会导致乱码

1013
来自专栏我是攻城师

给Java字节码加上”翅膀“的JIT编译器

上面文章在介绍Java的内存模型的时候,提到过由于编译器的优化会导致重排序的问题,其中一个比较重要的点地方就是关于JIT编译器的功能。JIT的英文单词是Just...

1205
来自专栏性能与架构

console.log() 之外的调试技巧

console.log( ) 是JS开发时常用的小工具,输出一些信息来辅助调试,console 还有很多有用的方法,下面介绍几个方便调试的用法 跟踪堆栈 例如想...

3709
来自专栏Python攻城狮

Redis的安装及基本使用1.Redis2.Redis安装3.redis常见配置4.redis数据操作5.redis发布订阅6.主从双备

Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。它支持多种类型的数据结构,如 字符串(strings), ...

671

扫码关注云+社区

领取腾讯云代金券