整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
向綁定是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)系。
