iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

Angular 深入淺出三十天系列 第 8

[Angular 深入淺出三十天] Day 07 - 基礎結構說明(二)

「原來如此!這樣有比較看得懂了!基本上裝飾器就是決定類別要扮演的角色,中繼資料則是把這個角色需要的資料傳入,然後 Angular 就會幫忙把其他的事情處理好的意思。」Wayne 喃喃說道。

「大致上是這樣沒錯!然後我跟你說...」


Template 語法

還記得我們在 MRTStationList 的 Template 是怎麼寫的嗎?

<table>
  <thead>
    <tr>
      <th></th>
      <th>列車進入月台車站之站名</th>
      <th>行駛目的地</th>
      <th>資料更新日期</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of list; index as i">
      <td>{{ i + 1 }}</td>
      <td>{{ item.Station }}</td>
      <td>{{ item.Destination }}</td>
      <td>{{ item.UpdateTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
    </tr>
  </tbody>
</table>

相信大家早就知道,Angular 的 Template 是由 HTML 再加上一些 Angular 特有的符號或屬性組成的。而這樣些特殊的符號或屬性,我們稱其為 Template 語法

以上述的例子來說:

  • *ngFor-它就像一般程式裡常用到的 for-loop 一樣,當我們將資料交給它時,它就會將它所在的 HTML 元素的位置跟資料筆數逐筆產生出來。

  • {{ }}-之前有提到過,這是一種資料綁定的方式。

  • date: 'yyyy-MM-dd HH:mm:ss'-這之前也有提到過,這叫做 pipe (管道) 。可以將其想像成,當資料經過這個管道流出來之後,會變成另一種資料或資料格式。

當然還有其他的 Template 語法,不過就留待我們之後用到時再一併解說吧!


資料綁定

想想我們以前在使用 jQuery 的時候,如果要寫一個互動式的頁面,我們要自己寫程式操作 DOM,把資料取出來處理之後再更新回去。但這樣的程式碼既冗長又無趣、容易出錯又難以閱讀。好在現在有 Angular 的資料綁定幫我們處理這些事。

在 Angular 中,資料綁定的方式大致上可以分成以下四種:

Imgur

第一種是最簡單的插值表達式。箭頭由右到左代表資料的流向是將 Component 裡的資料放到 DOM 裡;而只有一個箭頭則代表單向綁定。

第二種方式我們稱之為屬性綁定。箭頭一樣是由右至左,且只有一個箭頭。這個方式是透過在 HTML 的元素上加上 [propertyName] 來達成資料綁定的目的。

第三種方式叫做事件綁定。箭頭由左到右,表示資料是從 DOM 流向 Component;只有一個箭頭,一樣是單向綁定。從圖中其實就看得出來,此方式是透過 event 與 handler 來達到資料傳遞的目的,只要在 HTML 的元素上加上 (event)="handler($event)" 即可在 Component 裡取得傳回來的資料。

最後一種綁定方式比較特別,兩個箭頭表示這個綁定方式是雙向綁定,其主要是透過 Angular 裡的一個叫做 Template-Driven Form 的方式來達成雙向綁定的效果。使用方式是在 HTML 元素上加上 [(ngModel)]="property" 即可從 Component 將資料綁定進去,且在使用者有修改其值時,即時將資料設定回去。

值得一提的是,其實雙向綁定的原理是透過屬性綁定與事件綁定達成。為什麼?因為它其實可以拆開來,像是這樣:

<!-- 雙向綁定 -->
<input [(ngModel)]="property">

<!-- 屬性綁定 -->
<input [ngModel]="property">

<!-- 事件綁定 -->
<input (ngModelChange)="handler($event)">

不過如果是較單純的情況,還是寫成 [(ngModle)]="property" 比較適合。

隔壁棚的「Angular 大師之路」也有提到,點我學更多!

我們來整理一下資料的流向:

Imgur

Component 透過屬性綁定的方式將資料傳進 Template 裡;Template 則是透過事件綁定的方式將資料傳回 Component。

Imgur

不單單只有 Component 跟 Template 之間可以用這樣的方式來做資料的處理,父層 Component 跟子層 Component 之間其實也是透過這樣的方式來做資料上的傳遞。


上一篇
[Angular 深入淺出三十天] Day 06 - 基礎結構說明(一)
下一篇
[Angular 深入淺出三十天] Day 08 - 基礎結構說明(三)
系列文
Angular 深入淺出三十天33

尚未有邦友留言

立即登入留言