Angular Material

在 Angular Taiwan論壇筆記 中有提到 Angualr Material ，但是筆者沒有多加深入說明，今天來進一步聊聊 Angualr Material ，藉由初步的撰寫程式碼來建構一個註冊頁面元件讓讀者們對於 Angular Material 有基本的認識。

初步認識

在開始之前當然是要介紹一下甚麼是 Angular Material 了， Angular Material 是 Angular 的一個附屬套件，其內容包含許多 UI 介面例如基礎的 Form、Button、Edit Box… 等等的，還有進一步的 Navigation、Tab… 之類的原件，簡單講就是 UI 需要用到元件應該囊括在內了，有了這個套件在開發網頁時等於有人把很多東西都做好了等你來使用，可以讓開發的速度大大的提升。

講完 Material 不能不提 The Component Dev Kit (CDK) ，它們兩個的關係就像是皮與骨， CDK 是骨，所有的UI互動都是由 CDK 實作，而 Material 則是包覆骨的皮， Material 中包含一些風格提供開發人員使用，所以運用上可以直接使用 Material 搭配套件所附的主題使用，或是直接使用 CDK 來客製化專屬元件。

今天先來談談 Material 的初體驗，所以先不深入說明，以下開始進入主題，透過 Angular Material 來建構一個註冊頁面元件。

安裝必要套件

這部分要請各位先安裝 Angular CLI ，當然首先要先安裝 nodejs 了，各位可以由官網下載安裝，待安裝完 nodejs 後透過執行下列指令安裝 Angular CLI：

$ npm install -g @angular/cli

安裝完 Angular CLI 後可以使用 cli 產生一個新的專案，請輸入以下指令：

$ ng new new-project

這時 cli 會詢問一些關於新專案的內容，例如是否要使用 router 之類的，這部分都使用預設值即可，相關內容待之後有專門介紹 angular 的系列文章再來為大家說明。待新專案建立好之後執行下列指令來安裝 Angular Material：

$ ng add @angular/material

透過以上步驟可以安裝好相關的套件，接下來說明一下如何設定專案相關設定。

設定專案內容

首先依據瀏覽器所需內容來 import 相關元件，首先在 module 內設定相關內容，如下列步驟所示：

設定動畫模組

首先先 import 動畫模組進來：

import {BrowserAnimationsModule} from 
    '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

設定相依模組

這邊就所需模組 import 進來即可，沒用到的就不需要 import 如此可以在 build production 時將 package 最小化，這裡我們用到的元件有 Button、FormField、Datepicker、Icon、Input 幾項：

import {
  MatButtonModule,
  MatFormFieldModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatIconModule,
  MatInputModule
} from '@angular/material';

@NgModule({
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatInputModule
  ],
  ...
})

設定相關css

這邊我們選擇 indigo-pink 這個主題，這部分有幾個方式可以設定這內容，這邊選擇在 angular.json 這個設定黨設定這主題，所以先找到 styles 的區段加入以下內容：

...
"styles": [
   "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "src/styles.css"
],
...

最後由於我們有使用到 Material Icon 所以要 import 相關 css ，這部分在 index.html 內加入以下設定即可：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

到此就完成我們所需的相關設定，接下來要告訴大家怎麼使用這些元件。

使用相關元件

這部分有個要領，就是需要用的甚麼元件再到 官方網站 參閱相關api說明文件即可，今天已註冊頁面為例子來展示一下如何使用。

input

這個是使用者輸入的基本元件，主要在html內輸入下列語法即可：

<input matInput placeholder="Name">

form-field

如果要輸入的內容不只一項，可以透過 form-field 把相關 input 組合起來，例如下列語法所示：

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Name">
  </mat-form-field>

icon

要使用 icon 的樣式輸入下列語法即可：

<mat-icon matDatepickerToggleIcon>
    keyboard_arrow_down
</mat-icon>

這裡的重點在於 keyboard_arrow_down 這代表 icon 的樣式， matDatepickerToggleIcon 下列 datepicker 會加以說明。

datepicker

如果要輸入日期，用下列語法準沒錯：

<mat-form-field class="example-full-width">
    <input matInput 
        [matDatepicker]="picker" 
        placeholder="Birthday">
    <mat-datepicker-toggle 
        matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>
            keyboard_arrow_down
        </mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker>
    </mat-datepicker>
</mat-form-field>

這裡的關鍵在於 mat-datepicker-toggle 以及 mat-datepicker ，當選擇完日期後會把日期放到 matInput 內，而 matDatepickerToggleIcon 當點擊時會觸發選擇日期的視窗出現。

button

最後說明的是按鈕的部分，輸入下列語法即可呈現按鈕：

<button mat-raised-button color="primary">Signin</button>

其中mat-raised-button是按鈕的樣式。

透過上述說明，相信讀者不難完成一個註冊的頁面元件。

結語

今天先跟大家簡單介紹一下 Angular Material 的相關內容，希望透過一個簡單的說明讓大家可以快速上手，接下來讀者再搭配官方 api 文件應該不難完成一個前端網頁。