今天我們將開始正式邁入Angular Material的世界，要學習使用Angular Material打造高品質及高質感的網頁，當然要從安裝Angular Material套件開始，本篇文章就來介紹基本的Angular Material安裝步驟，並簡單加入一個元件來體驗一下有質感是怎樣的一個感覺！

基本環境

本篇文章需要在電腦上安裝node.js，並透過npm安裝相關的套件(或是你想用yarn也沒有問題)，同時，你也必須安裝Angular CLI。

雖然本系列文章假設讀者已經有基本的Angular知識及會使用Angular CLI，但還是簡單說明一下安裝Angular CLI的方式(畢竟不是每個開發人員都會去使用Angular CLI來建立程式，只是使用Angular CLI比較方便而已)，透過npm安裝Angular CLI很簡單，只要簡單一行指令就可以了

npm install -g @angular/cli

再寫這篇文章時，筆者的電腦中使用的Angular CLI版本為1.6.0。

建立新的專案

使用Angular CLI來建立新的專案也是簡單到不行，使用ng new指令一行搞定：

ng new it-ironman-demo-angular-material --routing

由於之後還要開發其他的頁面，所以加上了--routing，這會在專案中增加一個app-routing.module.ts的檔案，方便未來增加模組以及頁面連結時作設定。

接下來我們就要正式把Angular Material相關的套件裝進來並且進行設定啦！

步驟1. 安裝@angular/material和@angular/cdk

首先第一步我們先把套件裝進來再說，進入專案目錄(以上面的例子來說專案目錄是it-ironman-demo-angular-material)

npm install --save @angular/material @angular/cdk

如果你喜歡嚐鮮，也可以安裝最新非穩定的版本，Angular Material也提供了一個snapshot build，當然這不建議在真正的production環境上使用。

npm install --save angular/material2-builds angular/cdk-builds

步驟2. 安裝@angular/animations

Angular Material運用了不少動畫特效來讓元件顯示更加生動，這都多虧了@angular/animations這個套件，如果希望能在頁面上看到這些動畫效果，需要安裝@angular/animations：

npm install --save @angular/animations

接著在我們的AppModule中的imports裡面加入BrowserAnimationsModule

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

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

雖然動畫效果會讓畫面更加豐富，但也有可能會有效能問題，且不是每個人都喜歡那麼多的特效，想要取消特效的話，可以改加入NoopAnimationsModule

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

@NgModule({
  ...
  imports: [
    ...
    NoopAnimationsModule
  ],
  ...
})
export class AppModule { }

關於@angular/animations的支援度

@angular/animations使用了WebAnimation API，但不是所有瀏覽器都有支援，如果你希望盡可能讓所有瀏覽器都支援，可以安裝web-animations.js套件。

npm install --save web-animations-js

接著打開src/pollyills.ts檔案，找到import 'web-animations-js'這一行，並且把它取消註解掉，如果找不到這一行，也可以直接手動加入就好。

步驟3. 匯入想要顯示的元件模組

Angular Material將所有的主要元件都都方入對應的模組之中(MatXXXModule)，讓我們只有需要使用到某一群元件時，匯入相關模組就好，避免匯入過多不必要的元件。

在要使用的Module中匯入MatXXXModule

假如我們要使用Angular Material的button特性，可以匯入MatButtonModule

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

@NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule, 
    MatButtonModule
  ],
  ...
})
export class AppModule {}

利用SharedModule先整理出常用的MatXXXModule

另外一種方式是**，建立一個SharedModule，將常用的MatXXXModule先import，再export出來**，在其他Module中就只要import這個SharedModule就好，這在較複雜的SPA程式中會非常實用。當然這個SharedModule只是個概念，實際上我們可以用這個概念分類出不同的Modules，例如專門放常用的Angular Material Components的Module我們就取名叫做SharedMaterialModule吧！

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule], // 先import
  exports: [MatButtonModule] // 在export
})
export class SharedMaterialModule {}

如果Module裡面沒有其他需要使用到Angular Material的元件，也可以直接export就好

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
  exports: [MatButtonModule] // 直接export
})
export class SharedMaterialModule {}

然後在使用到的Module中匯入即可，唯一要注意的是，這個SharedMaterialModule一定要放在BrowserModule之後！

import { SharedMaterialModule } from './shared-material/shared-material.module';

@NgModule({
  ...
  imports: [
    BrowserModule,
    ...
    SharedMaterialModule
  ],
  ...
})
export class AppModule {}

關於SharedModule的概念，可以參考官方文件的介紹。

步驟4. 加入theme設定

Material Design是極具質感的設計樣式，因此Angular Material自然也少不了基本的CSS樣式，目前(5.0.0-rc)Angular Material包含了4種內建的樣式，在@angular/material/prebuilt-themes/，可以找到這4個css檔。

另外這4個佈景的樣式也可以再Angular Material官方文件首頁的上半部作切換

以下是這4個樣式在官方首頁的樣式，提供參考

• indigo-pink.css

• deeppurple-amber.css

• pink-bluegrey.css

• purple-green.css

未來Angular Material也會持續增加不同的配色；當然，我們也可以自己設計自己想要的樣式，在Angular Material要產生客製化的樣式非常簡單，只需要簡單設定要搭配的顏色即可，在後續的文章會介紹如何自訂自己的Angular Material Theme。在這裡我們只要先選擇內建的theme就好，我們可以把這個theme的css加到styles.css中。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

之後用到的Angular Material元件就會自動套上這樣的樣式囉。

步驟5. 手勢支援

在某些元件中，會依照瀏覽的裝置不同而有不同的互動，例如tooltip在一般PC上只要滑鼠游標移過去就會顯示，但在行動裝置中，則需要長按才會出現，這部分Angular Material搭配了HammerJS，為UI加上行動裝置的手勢支援，如果開發的網頁需要在行動裝置上也能達到最好的體驗，就必須在程式中載入HammerJS。

有萬能的npm，這些套件都只是一行指令的問題而已

npm install --save hammerjs

安裝完HammerJS後，還需要在程式中載入，我們可以直接在程式的進入點src/main.ts中加入

import 'hammerjs';

步驟6. 加入Material Icons

Material Icons是搭配Material Design出來的一系列icon set，在Angular Material中，我們也可以透過MatIcon來統一顯示icon的邏輯，以現代化網頁設計來說，想要使用Material Icons最簡單的方式，就是直接在index.html中加入相關Icon Font的CDN：

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

實際寫點東西來看看吧！

上述的步驟已經把所有Angular Material相關的套件及設定都完成了，同時我們也練習載入了MatButtonModule，既然都已經載入了，我們就直接來寫一個Button來看看吧！

在app.component.html中先寫一個簡單到不行的button

<button>Hello World！</button>

這時候的按鈕隨著作業系統、瀏覽器的不同會有不同的顯示方式。接著我們來讓它變成一個充滿Material Design樣式的按鈕吧！

在Angular Material中使用了原生的按鈕，但是加上了directive讓按鈕有了Material Design的樣式，最簡單的directive就是mat-button

<button mat-button>Hello World！</button>

來看看結果：

可以看到整個按鈕的樣式變得不一樣了，同時點選下去也有清楚的wave特效，這讓我們的按鈕從此活了起來！畫面更加豐富！！

在之後的文章我們會在對MatButton有更熟悉的理解，不過在這裡我們還是手癢稍微修改一下按鈕的樣式，讓按鈕能有不一樣的呈現方式

<button mat-raised-button color="primary">Hello World！</button>

我們改用了mat-raised-button，讓按鈕變成有有層次的陰影，同時加上color="primary"，為按鈕加上了主題色的主要顏色，看看結果：

可以發現按鈕變成了藍色的背景，而且也有了些陰影，這可以讓畫面更佳的有立體感，顏色也更加鮮明；在所有的Angular Material的元件都有類似的立體效果及配色，讓整個畫面呈現能夠更加的層次分明，是不是對於Material Design的設計有了更多的期待啦！

關於安裝Angular Material的小補充

如果有使用SystemJS的方式載入模組，官方文件也有說明該如何使用，可以參考看看

https://material.angular.io/guide/getting-started#appendix-configuring-systemjs

關於Angular Material文件的補充

如果你已經迫不及待要去Angular Material的文件上看看有什麼好玩的元件可以用了，在這邊做一點小提醒，由於文件目前還沒有完全更新，有些程式碼可能會是錯的，最主要的部分是當看到mdXxxx或md-xxxx時，都是舊版的寫法，Angular Material 5之後統一都改成matXxxx或mat-xxxx的寫法，因此當你複製程式時，別忘了看一下是不是舊版的寫法，可能會導致跑不出結果喔！

本日小結

今天我們介紹了將Angular Material加入Angular專案的方法，雖然不算複雜，但也有些細節需要注意，並且也理解到Angular Material需要相依一些套件，才能發揮出全部的威力，盡管沒有這些相依套件，也不會影響到主要的操作，但如果可以的話，還是建議把這些套件都加進來，讓前端畫面能夠更加豐富！

安裝完Angular Material後，我們也實際用按鈕當作案例，建立了一個充滿Material Design風格的按鈕元件，讓按鈕不再是死板板的按鈕，還要擔心作業系統和瀏覽器不同而有不同的顯示方式，讓呈現更加一致，也更加的生動。

明天即將開始進入正戲，介紹Angular Material的元件啦！

本日的程式碼GitHub：https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-02-prepare-installation (分枝：day-02-prepare-installation)

相關資源：

• Getting Started - Angular Material

本文章同步發表於: https://wellwind.idv.tw/blog/2017/12/20/angular-material-02-installation/