Angular # 10 - 深入淺出 Angular [2]

前一篇提到了 Angular 大致上有五大 entity，今天將繼續針對這部份說明

Directives

• 在早期 javascript 剛問世的時候，有很多的 library，其中最有名氣而且目前也還活著的就是 jQuery，而它主要的功能就是把既有的 Tag 透過操作 DOM 來擴充既有 HTML 的功能
• Directive 主要有分三種類型:
  • 屬性類(attribute) - 主要針對外觀或是行為作處理
    • NgClass - 依條件是 truthy 或 falsy 套上不同的 CSS class
    • NgStyle - 同上，但是是直接套 style，也就是所謂的 inline css
  • 結構類(structural) - 主要針對 DOM tree 作異動
    • NgIf - 依條件顯示或不顯示某個 element
    • NgFor - 依資料內容(通常是一個陣列) 跑 for 迴圈載入內容
    • NgSwitch - 跟各種程式語言的 switch 用法差不多，詳細可以參照官網的範例
  • 元件(components) - 前面提了很多了

Pipes

• 用來轉換資料的顯示格式
  • 比方說資料是以 timestamp 的格式存在資料庫，但在畫面上要呈現的是年月日，這個時候就可以用 DatePipe

      {{user.registeredDate | date:'shortDate'}}

    • 先從右半邊看起，要針對這個 pipe 設定什麼選項是用分號區隔的，以上面的例子來看，DatePipe 收到的選項是 shortDate 這個字串
    • Pipe 使用上的語法是「左半邊的原始資料 + pipe(|) + 右半邊 pipe 的名稱 + pipe 的選項」
    • Pipe 並不會動到原始資料的值，而是會複製一份再作轉換
  • 常見的 Pipe 有 CurrencyPipe, PercentPipe, DatePipe,...etc.
  • 當任何資料的顯示格式需要被轉換的時候，都可以考慮定義 Pipe 來處理，如此便能降低 Controller 的負擔(e.g. i18n)

Services

• 可重覆使用的程式片斷

  • 像是向後端要資料的 gateway(透過 HttpClient)
  • 或是 helper (加解密, 加解編碼, 雜湊值的運算 ...etc.)
  • 資料存取的邏輯應該要放在 service 而非 Component，可以增加維護性及測試性

• Angular 有許多內建的 Service 像是 HttpClient

  • 舉例來說，以下的範例運用了 HttpClient 包裝了自己想要達到的功能

      import { Injectable } from '@angular/core';
      import { HttpClient } from '@angular/common/http';
    
      let service: string = 'https://angular2-in-action-api.herokuapp.com';
    
      @Injectable()
      export class StocksService {
          constructor(private http: HttpClient) {}
    
          load(symbols) {
              if (symbols) {
                  return this.http.get(service + '/stocks/snapshot?symbols=' + symbols.join());
              }
          }
      }

    • 首先引入了 Injectable 與 HttpClient
    • 要成為 service 的類別都必須掛上 @Injectable 這個 Decorator
    • 要使用別的 service 必須在 constructor 注入
      • 注入的方式就是宣告為 constructor 的參數
      • 此時 http 就是 StockService 的成員變數，且參考到 HttpClient 的 instance
      • load 這個方法接著使用 HttpClient 從某個後端 service 取得了資料

小結

• 這一篇將剩下的三大 entity 的概念作了簡單的說明
  • 應該有不少跟前幾篇重覆的部份，就當作是強化記憶復習內容
    • Directive 內建的就很夠用了
    • Pipes 則是視需求可以自定義一些(e.g. i18n)
    • Services 基本上，能符合 Single Responsibilty Principle 是最好的
  • 可以的話自行操作一下，有 local dev server 是可以很快看到結果的
• 下一篇將接著將針對 Angular 的重要機制作說明