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

简介: 一、理解angular双向数据绑定双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。那么什么是双向绑定,下面简单进行讲解。

一、理解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>

 

相关文章
|
4月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
70 0
|
7月前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
113 0
|
JavaScript
Angular4总结(四)—— 数据绑定,响应式,管道
数据绑定 angular4中默认的数据绑定都是单向的。可分为: 插值表达式形式(Dom属性绑定) <p>{{test}}<p> Dom 属性绑定流程: 控制器中定义了一个属性,值发生了改变 对应的dom的value被附上改变了的值 渲染后的页面上也会出现刚刚的值 这一切操作都和html属性不发生任何关系 html属性绑定,使用中括号 <img [src]="imgUrl"/> //如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式 基本Html属性绑定 CSS属性绑定 这种形式是全有或者全无的。
1407 0
|
4月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
63 0
|
4月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
57 0
|
4月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
123 0
|
4月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
50 0