整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          Angular 2-數(shù)據(jù)綁定

          向綁定是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)單得多。

          數(shù)據(jù)綁定

          在我的工作中,我有機(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ù)綁定。視圖受到約束:

          1. 到一個(gè)對(duì)象。
          2. 一個(gè)復(fù)雜的對(duì)象。
          3. 到一組對(duì)象。

          實(shí)質(zhì)上,在ASP.NET MVC中,您將數(shù)據(jù)綁定到模型類。另一方面,在WPF中,您可以使用數(shù)據(jù)綁定模式。您可以在XAML中設(shè)置數(shù)據(jù)綁定的模式,如下所示:

          1. 單向數(shù)據(jù)綁定。
          2. 雙向數(shù)據(jù)綁定。
          3. 一次性數(shù)據(jù)綁定。
          4. 單向源數(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è)組件。組件由以下部分組成:

          1. TypeScript類,稱為組件 類。
          2. 一個(gè)稱為組件模板的HTML文件。
          3. 用于組件樣式的可選CSS文件。

          在Angular中,數(shù)據(jù)綁定決定了數(shù)據(jù) 在組件類和組件模板之間的流動(dòng)方式。

          Angular為我們提供了三種類型的數(shù)據(jù)綁定。它們?nèi)缦拢?/p>

          1. 插值。
          2. 財(cái)產(chǎn)約束。
          3. 事件綁定。

          讓我們逐一看一下。

          Angular為您提供這三種綁定。在事件綁定中,數(shù)據(jù)從模板流向類,并且在屬性綁定和插值中,數(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主題。


          主站蜘蛛池模板: 亚洲一区二区三区在线观看蜜桃| 亚洲第一区视频在线观看| 国产品无码一区二区三区在线蜜桃 | 亚洲综合无码一区二区| 人妻精品无码一区二区三区| 中文字幕一区二区三区精华液| 正在播放国产一区| 久久蜜桃精品一区二区三区| 精品无码一区二区三区爱欲| 激情一区二区三区| 国产在线一区二区三区| 曰韩精品无码一区二区三区| 亚洲第一区精品日韩在线播放| 国产精品视频无圣光一区| 伊人久久一区二区三区无码 | 精品在线视频一区| 国产精品日韩一区二区三区| 日韩成人一区ftp在线播放| 91精品乱码一区二区三区| 国产精品一区二区久久精品| 91福利视频一区| 亚洲AV无码一区二区乱子仑 | 人妻夜夜爽天天爽爽一区| 久久无码人妻一区二区三区| 麻豆文化传媒精品一区二区 | 国产精品无码一区二区在线| 国产成人无码aa精品一区| 卡通动漫中文字幕第一区| 精品一区中文字幕| 中文字幕精品一区二区三区视频| 上原亚衣一区二区在线观看| 亚洲av午夜福利精品一区人妖| 香蕉久久av一区二区三区| 亚洲欧洲精品一区二区三区| 久久久久久人妻一区二区三区| 免费在线视频一区| 精品久久一区二区三区| 亚洲AV无码国产一区二区三区| 夜夜精品无码一区二区三区| 少妇人妻偷人精品一区二区| 精品一区二区三区免费毛片爱 |