第二課:Angular成員屬性與迴圈指令

Angular應用以模組 (module) 為單位，每一個應用至少有一根模組 (root module)，應用執行時，便由根模組展開。模組則由元件 (component)與服務 (service)所組成。元件負責HTML內容的呈現，而服務則是提供內容或是應用的執行邏輯。模組、元件與服務都必須寫成類別。官網文件附圖便非常清楚呈現Angular應用架構：

圖1. Angular應用架構(圖片來源)

成員屬性(properties)宣告
Angular元件負責呈現HTML內容，因此，可在元件類別內宣告成員屬性 (properties)，包括物件 (object) 或是陣列 (array)，以便透過雙向繫結 (two-way binding) 機制，管理HTML模板內容的呈現。以ng new產生的TypeScript範例專案為例：

ng new MyWeb

MyWeb專案產生的元件app.component.ts內便可宣告成員屬性，進而用於對應的模板檔app.component.html內：

• 第5行：templateUrl設定對應的HTML模板檔案。
• 第9-12行：定義屬性，名為site，類型則為物件，且此物件有兩個屬性title與img_file。TypeScript物件以{}定義之，格式與JSON相同。
• 第13行：定義名為menu的屬性，為陣列形式。陣列以[]定義之。
• 屬性若要定義「資料型別」則於屬性名稱後加上":型別"，例如：

  title: string;
  count: number = 1;
  flag: boolean = false;
  score: number[];
  

如此一來，app.component.ts裡定義好AppComponet的成員屬性，由於雙向繫結之故，在模板檔app.component.html，便可以

{{屬性名稱}}

的方式，呈現屬性內容。因此，對應上例所定義的成員屬性，app.component.html可以如下使用之：

• 第2-3行：在app.component.ts定義了site物件，該物件有兩個屬性：title與img_file，因此分別以 {{ site.title }} 與 {{ site.img_file }} 顯示內容。
• 第7-8行：由於menu屬性是陣列，因此此處用了Angular的迴圈指令 (directive) *ngFor。

迴圈指令 *ngFor

*ngFor用於template檔，用法是在要重複列出的標籤內設定*ngFor指令，以上例的<li>而言:

*ngFor = "let 迴圈變數 of 成員屬性陣列"

因此，

<li *ngfor="let menuitem of menu">
  {{ menuitem }}
</li>

裡的menuitem便是迴圈變數，而menu則是AppComponent內定義的陣列。至於<li></li>會隨迴圈執行而逐一列出menu陣列內的元素。

範例檔案置於GitHub：https://github.com/leuowang/Angular/tree/master/MyWeb。下載後執行方式可參考README.md的說明。