整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Angular 2-数据绑定

向绑定是Angular JS中的功能,但已从Angular 2.x及更高版本中删除。但是现在,由于发生了Angular 2中的类事件,我们可以绑定到AngularJS类中的属性。

假设您有一个带有类名的类,则该类具有一个类型和值。

export class className {
   property: propertytype = value;
}

然后,您可以将html标记的属性绑定到该类的属性。

<html tag htmlproperty = 'property'>

然后将属性的值分配给html的htmlproperty。

让我们看一个如何实现数据绑定的示例。在我们的示例中,我们将看显示图像,其中图像源将来自我们类的属性。以下是实现此目的的步骤。

步骤1-下载任何2张图像。对于此示例,我们将下载下面显示的一些简单图像。

步骤2-将这些图像存储在app目录中名为Images的文件夹中。如果图像文件夹不存在,请创建它。

步骤3-在app.component.ts中添加以下内容,如下所示。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

步骤4-如下所示,在app.component.html中添加以下内容。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

在上面的app.component.html文件中,我们正在从类中的属性访问图像。

输出量

上面程序的输出应该是这样的-

、什么是AngularJS

AngularJS是Google开源的一款JavaScript MVC框架,诞生于2009年,由Misko Hevery 等人创建,是一款优秀的前端JS框架,已经被用于Google的多款产品当中,并且有一个全职的开发团队继续开发和维护这个库。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。该文章有源码时代H5学科讲师提供。

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。并通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:

Ø 使用双大括号{{}}语法进行数据绑定;

Ø 使用DOM控制结构来实现迭代或者隐藏DOM片段;

Ø 支持表单和表单的验证;

Ø 能将逻辑代码关联到相关的DOM元素上;

Ø 能将HTML分组成可重用的组件。

既然AngularJS如此优秀,那我们今天就来简单的认识一下,用一个小demo来揭开它神秘的面纱。

二、搭建AngularJS环境

下载库文件:

和其他库文件一样,在使用之前我们得将他下载下来,存放在我们工程项目的根目录下,如下图解

进入官网https://angularjs.org/下载AngularJS库文件

弹出对话框:

然后点击dowload下载

将下载下来的库文件保存在工程文件夹下的js文件夹里面以被后续引用。

三、开始编写一个简单的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>

感谢源码时代H5学科讲师提供此文章!

本文中,我们将学习Angular中的数据绑定。幸运的是,Angular中的数据绑定比.NET简单得多。

数据绑定

在我的工作中,我有机会与许多想要学习Angular的.NET开发人员交流。通常,我已经看到他们带来了他们的.NET技能并努力帮助他们学习Angular。虽然努力和学习的驱动力在那里,但Angular并不是.NET。

由于Angular是一个纯JavaScript框架,因此我将在本系列中简化Angular for .NET开发人员的基本但重要的概念。

在本文中,我们将学习Angular中的数据绑定。幸运的是,Angular中的数据绑定比.NET简单得多。

首先,让我们修改.NET中的一些数据绑定技术。例如,在ASP.NET MVC中,您使用模型进行数据绑定。视图受到约束:

  1. 到一个对象。
  2. 一个复杂的对象。
  3. 到一组对象。

实质上,在ASP.NET MVC中,您将数据绑定到模型类。另一方面,在WPF中,您可以使用数据绑定模式。您可以在XAML中设置数据绑定的模式,如下所示:

  1. 单向数据绑定。
  2. 双向数据绑定。
  3. 一次性数据绑定。
  4. 单向源数据绑定。

如果您遵循MVVM模式,那么您可能正在使用INotifyPropertyChanged接口来实现双向数据绑定。因此,在.NET世界中有很多方法可以实现数据绑定。

然而,Angular中的数据绑定要简单得多。

如果您对Angular非常陌生,那么让我向您介绍组件。在Angular应用程序中,您在浏览器(或其他地方)中看到的是一个组件。组件由以下部分组成:

  1. TypeScript类,称为组件 类。
  2. 一个称为组件模板的HTML文件。
  3. 用于组件样式的可选CSS文件。

在Angular中,数据绑定决定了数据 在组件类和组件模板之间的流动方式。

Angular为我们提供了三种类型的数据绑定。它们如下:

  1. 插值。
  2. 财产约束。
  3. 事件绑定。

让我们逐一看一下。

Angular为您提供这三种绑定。在事件绑定中,数据从模板流向类,并且在属性绑定和插值中,数据从类流向模板。

双向数据绑定

Angular没有内置的双向数据绑定,但是,通过组合属性绑定和事件绑定,可以实现双向数据绑定。

Angular为我们提供了一个指令, ngModel实现双向数据绑定,并且它非常易于使用。

作为.NET开发人员,您可能已经意识到Angular中的数据绑定要简单得多,您需要知道的只有四种语法。我希望你发现这篇文章很有用,在后面的文章中,我们将介绍其他Angular主题。