向绑定是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中,您使用模型进行数据绑定。视图受到约束:
实质上,在ASP.NET MVC中,您将数据绑定到模型类。另一方面,在WPF中,您可以使用数据绑定模式。您可以在XAML中设置数据绑定的模式,如下所示:
如果您遵循MVVM模式,那么您可能正在使用INotifyPropertyChanged接口来实现双向数据绑定。因此,在.NET世界中有很多方法可以实现数据绑定。
然而,Angular中的数据绑定要简单得多。
如果您对Angular非常陌生,那么让我向您介绍组件。在Angular应用程序中,您在浏览器(或其他地方)中看到的是一个组件。组件由以下部分组成:
在Angular中,数据绑定决定了数据 在组件类和组件模板之间的流动方式。
Angular为我们提供了三种类型的数据绑定。它们如下:
让我们逐一看一下。
Angular为您提供这三种绑定。在事件绑定中,数据从模板流向类,并且在属性绑定和插值中,数据从类流向模板。
Angular没有内置的双向数据绑定,但是,通过组合属性绑定和事件绑定,可以实现双向数据绑定。
Angular为我们提供了一个指令, ngModel实现双向数据绑定,并且它非常易于使用。
作为.NET开发人员,您可能已经意识到Angular中的数据绑定要简单得多,您需要知道的只有四种语法。我希望你发现这篇文章很有用,在后面的文章中,我们将介绍其他Angular主题。
*请认真填写需求信息,我们会在24小时内与您取得联系。