2. 程式人生 > >Angular2學習筆記.2、繫結、ngFor和ngIf指令、MVVM分離、DisplayingData

Angular2學習筆記.2、繫結、ngFor和ngIf指令、MVVM分離、DisplayingData

阿新 • • 發佈：2019-02-16

本篇概述

本片為Anguar2學習筆記的第二篇文章，將會講述Angular2的資料繫結功能（僅涉及單向），ngFor、ngIf指令的使用以及如果分離MVVM。
本片內容參照官方文件DisplayingData。
工程演示

工程結構

這次我們來建立一個新的工程DisplayData。
本篇筆記結束後，目錄結構應該是這個樣子，你不需要提前建立這個目錄結構，在需要的時候我會說明。
關於環境搭建和基礎目錄結構請參照第一篇筆記。

/  
|-package.json  
|-index.html  
|-node_modules/  
  |-libraries  
  |-...  
 

|-DisplayData/
  |-index.html
  |-app/
    |-DisplayComponent.js
    |-main.js
    |-template/
      |-DisplayData.template

正文

資料繫結（僅涉及單向）

在Angular中，你可以為HTML模板繫結資料，這樣Angular就會在資料變化時自動更新UI所顯示的內容。
在這個工程中將會建立一個DisplayComponent的元件，這個元件的相關屬性會實時的顯示在模板上，例如： 

DisplayComponent.myName="Alice";
<div
 
>
    {{myName}}
</div>

那麼在執行時，<div>中的內容會顯示為Alice，當Alice變為Jane時，<div>中的內容也會隨之改變。

Directive（指令）

Directive的概念在Angular 1.x就存在了，我對它的認識比較模糊，所以直接通過一些例子來說明。Angular提供的內建執行有很多，這次使用兩個：ngFor、ngIf。
先來說說Directive能實現什麼，現在我們想在一個頁面上顯示人名單，人名存在一個數組中。在PHP中我們可能要通過程式碼控制頁面的輸出，或者使用模板引擎。在Angular中同樣是很方便的，我們可以把這個遍歷輸出HTML的過程宣告式的寫入模板中。
例如：

  <ul>
    <li *ngFor="#name of names">
        {{ name }}
    </li>
  </ul>

可以看到<ul>中寫入了一個<li>元素，但是這個<li>元素中存在ngFor指令，其含義是將陣列names中的每個元素進行遍歷，根據name輸出多個<li>。
其結果類似：

  <ul>
    <li>
        name1
    </li>
     <li>
        name2
    </li>
     <li>
        name3
    </li>
      <li>
        nameN
    </li>
  </ul>

其中{name}的作用如前面單向繫結中所說，顯示為變數name的內容，name依次迭代names中的元素。

ngFor

ngFOr指令為iterable（可迭代的）物件的每一個元素建立一個DOM元素。Angular會自動把你對names陣列所做的改動對映到DOM，例如新增、刪除、排序。

  <ul>
    <li *ngFor="#name of names">
        {{ name }}
    </li>
  </ul>

‘#name’：通過此變數引用可迭代物件的每一個值。
‘of names’：使用當前控制器（元件）的陣列names作為可迭代物件。

ngIf

ngIf指令通過判斷你該出的表示式從而新增或刪除DOM元素，它同樣是實時的。

  <p *ngIf="names.length > 3">
    You have many friends!
  </p>

當names的長度大於3時顯示<p>及其內容。

template、component和data的分離

MVVM（與MVC）

Angular採用MVVM架構，關於MVC、MVVM之類的探討在網路上有很多，但是大多數看完後仍然一頭霧水。我大概說一下我的看法供大家參考。
MVC架構將工程分為模型、檢視、控制器，他們彼此分離便於調整。C起到MV的粘合劑的作用，它將資料拿出來，整合，並且包含了業務邏輯。MVC架構是對稱的，C對MV的作用是同等的，它處在MV的中間。
MVVM就是Model View View-Model，顯而易見，C不見了，因為C的作用被改變（或削弱）了。在Angular中主要體現在資料的自動繫結，傳統的C不再需要操心如何將資料傳送到View中，它主要做好與Model的互動和業務邏輯就好了。如果說MVC是平衡的，現在MVVM重心向M傾斜（這是從開發做所做的工作量來看，實際上它們最後完成了同樣的工作，並沒有什麼區別）。從字面上開，我將VM解釋為“view的model”。
在一個部落格的場景中：
Model有分類、文章、評論這三個部分。
View有首頁、分類頁、文章頁（評論和文章在一起）。
View-Model根據View有首頁、分類頁、文章頁，但是他們主要由資料和業務邏輯組成，首頁VM從M拿過來所有的分類、熱門的文章（摘要而不是全文）以及熱門評論。分類頁VM從Model拿來所有分類，文章頁VM拿來某一篇文章的全文、推薦文章的摘要、文章的評論。他們還要負責諸如訪問統計、發表刪除文章及評論的業務邏輯。他們不用擔心和View的互動，因為這變得自動（透明）了。所以說我認為VM是“view的model”，外加業務邏輯。

如何分離

模板檔案

如果你不想將template直接寫在程式碼中，那麼可以將其單獨放入檔案：

(function(app){
    app.DisplayComponent = 
    ng.core.Component({
        selector:'display',
        templateUrl:'/DisplayData/app/template/DisplayData.template' 
    })
    .Class({
        constructor:function(friends){}
    });
})(window.app || (window.app = {}));

這類似於第一篇筆記中給介紹Component的內容，不同的是template變成了templateUrl。templateUrl的值為所引用模板檔案的URL。

data分離

將Model直接編碼在Controller裡是不恰當的，我們需要為Model建立一個新的類，並將它注入到控制器中：

function FriendsService() {
  this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
(function(app){
    app.DisplayComponent = 
    ng.core.Component({
        selector:'display',
        providers: [FriendsService],
        templateUrl:'/DisplayData/app/template/DisplayData.template' 
    })
    .Class({
        constructor:function(friends){
            this.names = friends.names;
        }
    });
    app.DisplayComponent.parameters = [[FriendsService]];
})(window.app || (window.app = {}));

這個Component（作為Controller）沒有將資料定義寫在Class中，而是放在了外面（或單獨的檔案中）。在需要建立Component例項的時候將data作為引數傳入。
此時（2016-2-19），官方文件中錯誤的將providers寫為appInjector，感謝M.Svrcek,Klas Mellbourn,Mark Rajcok。

構建工程

說了這麼多終於可以用於實踐了，之前沒有建立檔案進行實際操作是因為程式碼要改來改去以說明不同的內容，這樣多個版本反而不利於理解，現在我把本文所有內容糅合在一起。
建立/DisplayData/index.html:

<html>
  <head>
    <title>Display Data</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="/node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="/node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='/DisplayData/app/DisplayComponent.js'></script>
    <script src='/DisplayData/app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <display>Loading...</display>
  </body>

</html>

建立/DisplayData/app/DisplayComponent.js:

function FriendsService() {
  this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
(function(app){

    app.DisplayComponent = 
    ng.core.Component({
        selector:'display',
        providers: [FriendsService],
        templateUrl:'/DisplayData/app/template/DisplayData.template' 
    })
    .Class({
        constructor:function(friends){
            this.myName="Alice";
            this.names = friends.names;
        }
    });
    app.DisplayComponent.parameters = [[FriendsService]];
})(window.app || (window.app = {}));

建立/DisplayData/app/main.js:

(function(app){
    document.addEventListener('DOMContentLoaded',function(){
        ng.platform.browser.bootstrap(app.DisplayComponent);
    });
})(window.app || (window.app = {}));

建立/DisplayData/app/template/DisplayData.template:

<p>My name: {{ myName }}</p>
<p>Friends:</p>
<ul>
    <li *ngFor="#name of names">
        {{ name }}
    </li>
</ul>
<p *ngIf="names.length > 3">You have many friends!</p>

在/下執行npm start。
在這個工程中我沒有手動建立DisplayComponent的例項，Angular將在DOM和你定義的類結合的時候自動建立相關例項並將屬性和模板繫結。

相關推薦

Angular2學習筆記.2、繫結、ngFor和ngIf指令、MVVM分離、DisplayingData

本篇概述 本片為Anguar2學習筆記的第二篇文章，將會講述Angular2的資料繫結功能（僅涉及單向），ngFor、ngIf指令的使用以及如果分離MVVM。 本片內容參照官方文件DisplayingData。 工程演示 工程結構 這次我們來建

Python:GUI之tkinter學習筆記3事件繫結（轉載自https://www.cnblogs.com/progor/p/8505599.html） Python:GUI之tkinter學習筆記3事件繫結

Python:GUI之tkinter學習筆記3事件繫結   相關內容： command bind protocol   首發時間：2018-03-04 19:26   command:

jquery學習筆記之事件繫結on與事件解綁off用法

on()的多事件繫結 之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素繫結一個處理函式，所有這類事件都是屬於快捷處理。翻開原始碼其實可以看到，所有的快捷事件在底層的處理都是通過一個”on”方法來實現的。jQuery on()方法是官方推

PHP-學習筆記 延遲靜態繫結

<?php 使用場景 先來觀察以下程式碼: abstract class base { //do sth } class aClass extends base{ public static function create(){ return new aClass(

WPF學習筆記：資料繫結與DataContext

http://www.cnblogs.com/ceachy/archive/2012/10/30/Binding_DataContext.html 方法一： 　　1、如果沒有顯式設定上下文，那麼資料上下文就是介面； 　　例如下邊程式碼，textBox1繫結

Vue.js學習筆記：屬性繫結 v-bind

v-bind  主要用於屬性繫結，Vue官方提供了一個簡寫方式 :bind，例如： <!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"

Angular2學習筆記2

每個angular2應用程式預設使用app目錄來建立（可以自己制定，但是eclipse外掛生成的會自動使用app） 每個程式應當至少有一個angular模組即根模組。根模組使用@NgModule({}

vue.js學習筆記之屬性繫結 v-bind

vue.js中有許多的指令，其中屬性繫結的是v-bind。 v-bind可以繫結src,style,class 一、地址繫結 HTML程式碼： <body> <div id=

[OpenCV學習筆記2][Mat數據類型和操作]

寬度 返回 創建對象 由於 linux ocl total 中間 width [Mat數據類型和基本操作] ?.運行環境：Linux（RedHat+OpenCV3.0） 1.Mat的作用： Mat類用於表示一個多維的單通道或者多通道的稠密數組。能夠用來保存實數或復數的向量、

Docker學習筆記2-mysql鏡像的使用和外網訪問

雲計算 Docker 1. Pull mysql執行命令docker pull mysql2. 創建mysql容器docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql創建完成後，查看容器運行狀態可以看到m

angular2的ngfor和ngif指令巢狀

ng2 結構指令不能直接巢狀使用,可使用標籤來包裹指令 示例如下 <ul> <ng-container *ngFor="let item of lists"> <div

Angular2學習筆記.4、表單相關，雙向資料繫結，HeroForm

開始 本次我們將會學會如何用Angular建立表單、two-way data binding(雙向資料繫結)、change tracking(檢測變化)、validation(驗證) 和 error handling(錯誤處理)等功能以及ngModel、ngC

React 學習筆記 (一)（建立元件、繫結資料、繫結屬性、迴圈資料、引入圖片）

使用 create-react-app 快速構建 React 開發環境 $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start 建立元件、繫結資料、繫結屬性、迴圈資

【暑假學習筆記】之——JavaScript的自定義物件、繫結事件及處理機制

假期已經學了10天，但是事情一直比較多，馬上大三了，做你認為有意義的事！ 這是js學習的最後一部分： 自定義物件： 在Js中，除了Array、Date、Number等內建物件外，開發者可以通過Js程式碼建立自己的物件。它也稱為JSON物件。 自定義物件有三種建立方式：

36、我的C#學習筆記2

c#類是一種數據結構，它可以封裝數據成員、函數成員和其它的類。類是創建對象的模板。C#中所有語句都必須位於類內。因此，類是C#語言的核心和基本構成模塊。C#支持自定義類，使用C#編程就是編寫自己的類來描述實際需要解決的問題。類就好比是醫院的各個部門，如：內科、骨科、泌尿科、眼科等，在各科室中都有自己的工作方法

ElasticSearch學習筆記--2、ES相關配置

last 學習 -- code logs 相關數 clas 名稱 config 1、配置文件 ES的配置文件位置：config/elasticsearch.yml可以直接搜索elasticsearch.yml 2、配置遠程api訪問 network.host: 192

python自動化測試學習筆記-2-字典、元組、字符串方法

ima weight ict 常用 分享圖片 def 刪除列 設置 統計 一、字典 Python字典是另一種可變容器模型，且可存儲任意類型對象，如字符串、數字、元組等其他容器模型。 字典的每個鍵值(key=>value)對用冒號(:)分割，每個對之間用逗號(,)分割，

keras學習筆記2——Merge理解、GPU的設定方法，以及新手的注意事項

keras學習筆記2——Merge、GPU呼叫、快速開始及常見問題 參考資料：http://keras-cn.readthedocs.io/en/latest/ 1. Merge層 Merge層主要是用來合併多個model的，例子如下： from keras.layers impor

Ubuntu作業系統學習筆記2（vi文字編輯器、程序的基本狀態及其轉換）

文字編輯器是對純文字檔案進行編輯、檢視、修改等操作的應用程式。vi編輯器具有文字編輯的所有功能，並且執行速度快，具有強大的編輯功能，廣泛的適用性和靈活性。 一、vi文字編輯器 1、vi編輯器的啟動與退出 （1）啟動 格式：vi  [檔名] 檔名有以下情況： 未指定檔

花書學習筆記(2) 病態、梯度優化、約束優化

病態條件 條件數：是指函式相對於輸入的微小變化而變化的快慢程度。而微小的輸入變化導致劇烈的輸出變化時，方程存在病態。描述f(x)=A−1x的條件數定義為： maxi,j∣∣∣λ1λ2∣∣∣ 即最大