AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯。最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉的。看过了大漠的视频,算是了解了AngularJS的一些优良特性。后来准备投身《AngularJS权威教程》,跟着它走,可是一来可能自己道行不够,二来,个人觉得这本书翻译的有些生硬以及一些瑕疵,比如:
(1)9.2节:在指令中适用自作用域
(2)9.2节:在指令中适用自作用域
当然,以上都是一些瑕疵,希望译著作者不要见怪哈^_^!
所以,在囫囵吞枣的看到第十章,我觉得先搁置至此,去ngnice看看。可能我还是需要一些概念上的输入,比如双向数据绑定、表达式、指令等等。
正文:今天主要介绍AngularJS双向数据绑定
1.理论介绍
什么是双向数据绑定?既然号称双向数据绑定,重点肯定在“双向”上了,显然,有双向必有单向,那两者有何区别,先看下面两幅图:
上图:单向绑定
它们将模板和数据合并起来加入到视图中去,如图表中所示。合并完成之后,从图中的流向可以看出,任何对数据模型或者相关内容的改变都不会自动反映到视图中去。而且用户对视图的任何改变也不会自动同步到数据模型中来。这意味着,开发者需要编写代码来保持视图与模板、模板与视图的同步,无疑增加了开发的工作量。
那么有没有可以自动实现这种双向机制的框架,有,请看:
下图:双向绑定
AngularJS的数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时,视图就能反映这种改变,反之亦然。
2. 代码演示
html:
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
js:
var myModule = angular.module('MyModule', []);
myModule .controller('HelloAngular', ['$scope',
$scope.greeting = {
text: 'Hello'
};
]);
运行结果:Hello,Angular
解读:这里的"{{}}"相当于"ng-model"指令,其实就是一种绑定,但是仅从这个例子,不能说实现了双向数据绑定。这里是将AngularJS的数据模型(Model)的值绑定到了视图(View)上了,如果html文件中没有引入
<script src="HelloAngular_MVC.js"></script>
则通过运行发现界面实现的是:{{greeting.text}},Angular
也就是说AngularJS的scope中的模型值没有绑定到前台界面html中。反之,引入了HelloAngular_MVC.js,则实现在前端界面中映射到了数据模型数据。
上面介绍的不能算是双向数据绑定,下面引出真正的双向绑定,那么双向数据绑定有何应用场景,什么样的情况需要数据模型与视图能够相互映射相互影响呢,可能是你没有察觉,现在很多的网站都能看到这种思想带来的极大便捷,比如说表单,在填写或提交表单时,界面上会根据用户的操作做出及时的相应,这就是一种双向数据绑定的最有力的应用场景。
html:
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngular">
<input ng-model="greeting.text"/>
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
js(还是上例中的js):
var myModule = angular.module('MyModule', []);
myModule .controller('HelloAngular', ['$scope',
$scope.greeting = {
text: 'Hello'
};
]);
运行结果:
注意:这个例子很好地诠释了什么是双向绑定。
首先在html中声明了两个标签:一个输入框<input>和一个段落标记<p>。
显然采用了两种绑定的方式:{{}}和ng-model,但是功能都是数据绑定,与js文件中控制器中的greeting.text进行了绑定。所以,通过js中greeting.text的赋值会使得前台Html中input和p同时显示“Hello”
这一步完成的是AngularJS的scope中的数据模型绑定了的前台View中,那么前台的数据变化是否会影响到数据模型,通过改变input中的值,我们得到结果:
在输入框中的任何输入都会及时的反应在下面的段落中,这也说明了在Html中改变数据也会及时的映射到后台数据模型,真正的实现了双向数据绑定。
本想在本篇再介绍下AngularJS的表达式,限于时间和篇幅,留在下篇吧,如果觉得有用,记得点赞,同时本文也会推送到公众号:JackieZheng,欢迎关注哈^_^
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。
- 大过年的,一起来用Seq2Seq来作对联吧!
- python3 下调用zabbix api 获取多个机房的IP
- TensorFlow从0到1 - 14 - 交叉熵损失函数——防止学习缓慢
- 用优雅的配色来缔造图表专业主义~
- python文件名与包名冲突
- python3 Zabbix监控-api的使用-python
- 安装python虚拟环境
- 各种排序算法的分析及java&python实现
- python3elk相关---根据Elasticsearch(es)日志处理,生成excel并定时邮箱发送附件
- python数据科学-数据预处理
- python3 邮箱相关邮箱的服务
- 谈一谈Python中str()和repr()的区别
- TensorFlow从0到1 - 15 - 重新思考神经网络初始化
- python2.7搬运--->TensorFlow - 深度学习破解验证码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【colab pytorch】数据处理
- requests+lxml+xpath爬取豆瓣电影
- python之子类继承父类时进行初始化的一些问题
- 【猫狗数据集】定义模型并进行训练模型
- springmvc之处理模型数据Map
- requests+lxml+xpath爬取电影天堂
- 【python-leetcode90-子集】子集Ⅱ
- 【colab pytorch】保存模型
- 【猫狗数据集】保存训练模型并加载进行继续训练
- django-URL匹配(二)
- opengl-球体的绘制
- 【python-leetcode46-子集】全排列
- 【python-leetcode784-子集】字母大小写全排列
- 悬挂引用是如何被Rust消灭的?
- python小例子(二)