整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
向綁定是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小時內與您取得聯系。
