向綁定是Angular JS中的功能,但已從Angular 2.x及更高版本中刪除。但是現(xiàn)在,由于發(fā)生了Angular 2中的類事件,我們可以綁定到AngularJS類中的屬性。
假設(shè)您有一個(gè)帶有類名的類,則該類具有一個(gè)類型和值。
export class className {
property: propertytype = value;
}
然后,您可以將html標(biāo)記的屬性綁定到該類的屬性。
<html tag htmlproperty = 'property'>
然后將屬性的值分配給html的htmlproperty。
讓我們看一個(gè)如何實(shí)現(xiàn)數(shù)據(jù)綁定的示例。在我們的示例中,我們將看顯示圖像,其中圖像源將來自我們類的屬性。以下是實(shí)現(xiàn)此目的的步驟。
步驟1-下載任何2張圖像。對(duì)于此示例,我們將下載下面顯示的一些簡(jiǎn)單圖像。
步驟2-將這些圖像存儲(chǔ)在app目錄中名為Images的文件夾中。如果圖像文件夾不存在,請(qǐng)創(chuàng)建它。
步驟3-在app.component.ts中添加以下內(nèi)容,如下所示。
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中添加以下內(nèi)容。
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>
在上面的app.component.html文件中,我們正在從類中的屬性訪問圖像。
上面程序的輸出應(yīng)該是這樣的-
、什么是AngularJS AngularJS是Google開源的一款JavaScript MVC框架,誕生于2009年,由Misko Hevery 等人創(chuàng)建,是一款優(yōu)秀的前端JS框架,已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中,并且有一個(gè)全職的開發(fā)團(tuán)隊(duì)繼續(xù)開發(fā)和維護(hù)這個(gè)庫。AngularJS有著諸多特性,最為核心的是:MVC、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。該文章有源碼時(shí)代H5學(xué)科講師提供。 AngularJS使用了不同的方法,它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷。并通過使用我們稱為指令(directives)的結(jié)構(gòu),讓瀏覽器能夠識(shí)別新的語法。例如: ? 使用雙大括號(hào){{}}語法進(jìn)行數(shù)據(jù)綁定; ? 使用DOM控制結(jié)構(gòu)來實(shí)現(xiàn)迭代或者隱藏DOM片段; ? 支持表單和表單的驗(yàn)證; ? 能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上; ? 能將HTML分組成可重用的組件。 既然AngularJS如此優(yōu)秀,那我們今天就來簡(jiǎn)單的認(rèn)識(shí)一下,用一個(gè)小demo來揭開它神秘的面紗。 二、搭建AngularJS環(huán)境 下載庫文件: 和其他庫文件一樣,在使用之前我們得將他下載下來,存放在我們工程項(xiàng)目的根目錄下,如下圖解 進(jìn)入官網(wǎng)https://angularjs.org/下載AngularJS庫文件 |
彈出對(duì)話框: |
然后點(diǎn)擊dowload下載 將下載下來的庫文件保存在工程文件夾下的js文件夾里面以被后續(xù)引用。 三、開始編寫一個(gè)簡(jiǎn)單的AngularJS demo 在寫代碼之前我們先來認(rèn)識(shí)以下這幾條指令: 1.ng-app= “modulename ” 申明:ng-app 指令用于告訴 AngularJS 應(yīng)用,當(dāng)前這個(gè)元素是根元素。 必要性:所有 AngularJS 應(yīng)用 都必須要有一個(gè)根元素。 唯一性:HTML 文檔中只允許有一個(gè) ng-app 指令,如果有多個(gè)ng-app指令,則只有第一個(gè)會(huì)被使用。 總之:這條指令定義了AngularJS的應(yīng)用程序及使用范圍。 其中modulename:模塊的名稱,編碼者自定義。 2.ng-controller = “控制器名” ng-controller 指令用于為你的應(yīng)用添加控制器。 在控制器中,你可以編寫代碼,制作函數(shù)和變量,并使用 scope 對(duì)象來訪問。 3.ng-model = “eparator” ng-model指令用于建立數(shù)據(jù)模型,在模型中對(duì)應(yīng)有一個(gè)變量username用來存放input元素的value值從而綁定了輸入框的值到 scope (應(yīng)用程序)變量中。 eparator:你想要綁定到表單域的屬性名。 <input>, <select>, <textarea> 元素支持該指令。 4.$scope Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。 Scope 是一個(gè)對(duì)象,有可用的方法和屬性。 Scope 可應(yīng)用在視圖和控制器上。 5.雙大括號(hào){{變量}} 用雙重大括號(hào)來獲取變量的值。當(dāng)在控制器中添加 $scope對(duì)象時(shí),視圖 (HTML)可以獲取了這些屬性。 HTML中,你不需要添加$scope前綴,只需要添加屬性名即可,如:{{username}}。 6.angular.module('name', requires); 使用angular.module()方法來聲明模塊。 參數(shù)說明: 第一個(gè)name是模塊的名稱,字符串變量。 第二個(gè)requires是依賴列表,也就是可以被注入到模塊中的對(duì)象列表。 了解了以上指令,下面進(jìn)行demo演示: 代碼塊如下: |
然后用瀏覽器打開這個(gè)文件 結(jié)果如圖: |
嘗試改變一下input中的值你會(huì)發(fā)現(xiàn) “姓名”中的值也自動(dòng)發(fā)生了變化,是不是很神奇?比jquery來操作dom是不是簡(jiǎn)單很多? 代碼詳解: 當(dāng)網(wǎng)頁加載完畢,AngularJS 自動(dòng)開啟。 ng-app指令告訴 AngularJS,<div> 元素是 AngularJS 應(yīng)用程序的"所有者"。ng-controller ="myCtrl",為應(yīng)用添加控制器,接下來 ng-model 指令建立數(shù)據(jù)模型,將input元素的value值綁定到 scope (應(yīng)用程序)變量中。最后用雙重花括號(hào){{firstName + " " + lastName}}來獲取$scope對(duì)象中變量firstName和lastName的值,并且{{ firstName }}{{ lastName }} 通過 ng-model="firstName"和ng-model="lastName"進(jìn)行同步。 概括地說,AngularJS 中的數(shù)據(jù)綁定,同步了 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)。input元素的value發(fā)生變化,自動(dòng)同步到model的 firstName 變量中,{{ firstName }}}是從模型中讀 firstName 的值,因此下面姓名中元素的內(nèi)容跟著變了。 通過以上實(shí)例,我們很容易就得到了用戶輸入的動(dòng)態(tài)值,這是原生及其他框架難以實(shí)現(xiàn)的功能,當(dāng)然,AngularJS除了數(shù)據(jù)的雙向綁定以外,還有其他很多優(yōu)秀的功能,希望讀者通過這個(gè)簡(jiǎn)單的例子能敲開AngularJS學(xué)習(xí)的大門,去領(lǐng)悟AngularJS的強(qiáng)大與魅力。 附:代碼如下: <!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> 感謝源碼時(shí)代H5學(xué)科講師提供此文章! |
本文中,我們將學(xué)習(xí)Angular中的數(shù)據(jù)綁定。幸運(yùn)的是,Angular中的數(shù)據(jù)綁定比.NET簡(jiǎn)單得多。
在我的工作中,我有機(jī)會(huì)與許多想要學(xué)習(xí)Angular的.NET開發(fā)人員交流。通常,我已經(jīng)看到他們帶來了他們的.NET技能并努力幫助他們學(xué)習(xí)Angular。雖然努力和學(xué)習(xí)的驅(qū)動(dòng)力在那里,但Angular并不是.NET。
由于Angular是一個(gè)純JavaScript框架,因此我將在本系列中簡(jiǎn)化Angular for .NET開發(fā)人員的基本但重要的概念。
在本文中,我們將學(xué)習(xí)Angular中的數(shù)據(jù)綁定。幸運(yùn)的是,Angular中的數(shù)據(jù)綁定比.NET簡(jiǎn)單得多。
首先,讓我們修改.NET中的一些數(shù)據(jù)綁定技術(shù)。例如,在ASP.NET MVC中,您使用模型進(jìn)行數(shù)據(jù)綁定。視圖受到約束:
實(shí)質(zhì)上,在ASP.NET MVC中,您將數(shù)據(jù)綁定到模型類。另一方面,在WPF中,您可以使用數(shù)據(jù)綁定模式。您可以在XAML中設(shè)置數(shù)據(jù)綁定的模式,如下所示:
如果您遵循MVVM模式,那么您可能正在使用INotifyPropertyChanged接口來實(shí)現(xiàn)雙向數(shù)據(jù)綁定。因此,在.NET世界中有很多方法可以實(shí)現(xiàn)數(shù)據(jù)綁定。
然而,Angular中的數(shù)據(jù)綁定要簡(jiǎn)單得多。
如果您對(duì)Angular非常陌生,那么讓我向您介紹組件。在Angular應(yīng)用程序中,您在瀏覽器(或其他地方)中看到的是一個(gè)組件。組件由以下部分組成:
在Angular中,數(shù)據(jù)綁定決定了數(shù)據(jù) 在組件類和組件模板之間的流動(dòng)方式。
Angular為我們提供了三種類型的數(shù)據(jù)綁定。它們?nèi)缦拢?/p>
讓我們逐一看一下。
Angular為您提供這三種綁定。在事件綁定中,數(shù)據(jù)從模板流向類,并且在屬性綁定和插值中,數(shù)據(jù)從類流向模板。
Angular沒有內(nèi)置的雙向數(shù)據(jù)綁定,但是,通過組合屬性綁定和事件綁定,可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定。
Angular為我們提供了一個(gè)指令, ngModel實(shí)現(xiàn)雙向數(shù)據(jù)綁定,并且它非常易于使用。
作為.NET開發(fā)人員,您可能已經(jīng)意識(shí)到Angular中的數(shù)據(jù)綁定要簡(jiǎn)單得多,您需要知道的只有四種語法。我希望你發(fā)現(xiàn)這篇文章很有用,在后面的文章中,我們將介紹其他Angular主題。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。