今天我們將開始正式邁入Angular Material的世界杜秸，要學(xué)習(xí)使用Angular Material打造高品質(zhì)及高質(zhì)感的網(wǎng)頁峻村，當(dāng)然要從安裝Angular Material套件開始，本篇文章就來介紹基本的Angular Material安裝步驟，并簡(jiǎn)單加入一個(gè)元件來體驗(yàn)一下有質(zhì)感是怎樣的一個(gè)感覺！
基本環(huán)境
本篇文章需要在電腦上安裝node.js，并透過npm安裝相關(guān)的套件(或是你想用yarn也沒有問題)盗迟，同時(shí)，你也必須安裝Angular CLI熙含。
雖然本系列文章假設(shè)讀者已經(jīng)有基本的Angular知識(shí)及會(huì)使用Angular CLI罚缕，但還是簡(jiǎn)單說明一下安裝Angular CLI的方式(畢竟不是每個(gè)開發(fā)人員都會(huì)去使用Angular CLI來建立程式，只是使用Angular CLI比較方便而已)怎静，透過npm安裝Angular CLI很簡(jiǎn)單邮弹，只要簡(jiǎn)單一行指令就可以了
npm install -g @angular/cli
再寫這篇文章時(shí)黔衡，筆者的電腦中使用的Angular CLI版本為1.6.0。
建立新的專案
使用Angular CLI來建立新的專案也是簡(jiǎn)單到不行腌乡，使用ng new指令一行搞定：
ng new it-ironman-demo-angular-material --routing
由于之后還要開發(fā)其他的頁面盟劫，所以加上了--routing，這會(huì)在專案中增加一個(gè)app-routing.module.ts的檔案与纽，方便未來增加模組以及頁面連結(jié)時(shí)作設(shè)定侣签。
接下來我們就要正式把Angular Material相關(guān)的套件裝進(jìn)來并且進(jìn)行設(shè)定啦！
步驟1. 安裝@angular/material和@angular/cdk
首先第一步我們先把套件裝進(jìn)來再說急迂，進(jìn)入專案目錄(以上面的例子來說專案目錄是it-ironman-demo-angular-material)
npm install --save @angular/material @angular/cdk
如果你喜歡嚐鮮影所，也可以安裝最新非穩(wěn)定的版本，Angular Material也提供了一個(gè)snapshot build僚碎，當(dāng)然這不建議在真正的production環(huán)境上使用猴娩。
npm install --save angular/material2-builds angular/cdk-builds
步驟2. 安裝@angular/animations
Angular Material運(yùn)用了不少動(dòng)畫特效來讓元件顯示更加生動(dòng)，這都多虧了@angular/animations這個(gè)套件听盖，如果希望能在頁面上看到這些動(dòng)畫效果胀溺，需要安裝@angular/animations：
npm install --save @angular/animations
接著在我們的AppModule中的imports裡面加入BrowserAnimationsModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [
...
BrowserAnimationsModule
],
...
})
export class AppModule { }
雖然動(dòng)畫效果會(huì)讓畫面更加豐富，但也有可能會(huì)有效能問題皆看，且不是每個(gè)人都喜歡那麼多的特效仓坞，想要取消特效的話，可以改加入NoopAnimationsModule
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [
...
NoopAnimationsModule
],
...
})
export class AppModule { }
關(guān)于@angular/animations的支援度
@angular/animations使用了WebAnimation API腰吟，但不是所有瀏覽器都有支援无埃，如果你希望盡可能讓所有瀏覽器都支援，可以安裝web-animations.js套件毛雇。
npm install --save web-animations-js
接著打開src/pollyills.ts檔案嫉称，找到import 'web-animations-js'這一行，并且把它取消注解掉灵疮，如果找不到這一行织阅，也可以直接手動(dòng)加入就好。
步驟3. 匯入想要顯示的元件模組
Angular Material將所有的主要元件都都方入對(duì)應(yīng)的模組之中(MatXXXModule)震捣，讓我們只有需要使用到某一群元件時(shí)荔棉，匯入相關(guān)模組就好，避免匯入過多不必要的元件蒿赢。
在要使用的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
另外一種方式是，建立一個(gè)SharedModule羡棵，將常用的MatXXXModule先import壹若，再export出來，在其他Module中就只要import這個(gè)SharedModule就好，這在較複雜的SPA程式中會(huì)非常實(shí)用店展。當(dāng)然這個(gè)SharedModule只是個(gè)概念养篓，實(shí)際上我們可以用這個(gè)概念分類出不同的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中匯入即可，唯一要注意的是睡腿，這個(gè)SharedMaterialModule一定要放在BrowserModule之后！
import { SharedMaterialModule } from './shared-material/shared-material.module';
@NgModule({
...
imports: [
BrowserModule,
...
SharedMaterialModule
],
...
})
export class AppModule {}
關(guān)于SharedModule的概念峻贮，可以參考官方文件的介紹席怪。
步驟4. 加入theme設(shè)定
Material Design是極具質(zhì)感的設(shè)計(jì)樣式，因此Angular Material自然也少不了基本的CSS樣式纤控，目前(5.0.0-rc)Angular Material包含了4種內(nèi)建的樣式挂捻，在@angular/material/prebuilt-themes/，可以找到這4個(gè)css檔船万。
另外這4個(gè)佈景的樣式也可以再Angular Material官方文件首頁的上半部作切換
以下是這4個(gè)樣式在官方首頁的樣式刻撒，提供參考
- indigo-pink.css
- deeppurple-amber.css
- pink-bluegrey.css
- purple-green.css
未來Angular Material也會(huì)持續(xù)增加不同的配色；當(dāng)然耿导，我們也可以自己設(shè)計(jì)自己想要的樣式声怔，在Angular Material要產(chǎn)生客製化的樣式非常簡(jiǎn)單，只需要簡(jiǎn)單設(shè)定要搭配的顏色即可舱呻，在后續(xù)的文章會(huì)介紹如何自訂自己的Angular Material Theme醋火。在這裡我們只要先選擇內(nèi)建的theme就好，我們可以把這個(gè)theme的css加到styles.css中箱吕。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
之后用到的Angular Material元件就會(huì)自動(dòng)套上這樣的樣式蘿芥驳。
步驟5. 手勢(shì)支援
在某些元件中，會(huì)依照瀏覽的裝置不同而有不同的互動(dòng)茬高，例如tooltip在一般PC上只要滑鼠游標(biāo)移過去就會(huì)顯示兆旬，但在行動(dòng)裝置中，則需要長(zhǎng)按才會(huì)出現(xiàn)怎栽，這部分Angular Material搭配了HammerJS丽猬，為UI加上行動(dòng)裝置的手勢(shì)支援，如果開發(fā)的網(wǎng)頁需要在行動(dòng)裝置上也能達(dá)到最好的體驗(yàn)婚瓜，就必須在程式中載入HammerJS宝鼓。
有萬能的npm，這些套件都只是一行指令的問題而已
npm install --save hammerjs
安裝完HammerJS后巴刻，還需要在程式中載入愚铡，我們可以直接在程式的進(jìn)入點(diǎn)src/main.ts中加入
import 'hammerjs';
步驟6. 加入Material Icons
Material Icons是搭配Material Design出來的一系列icon set，在Angular Material中，我們也可以透過MatIcon來統(tǒng)一顯示icon的邏輯沥寥，以現(xiàn)代化網(wǎng)頁設(shè)計(jì)來說碍舍，想要使用Material Icons最簡(jiǎn)單的方式，就是直接在index.html中加入相關(guān)Icon Font的CDN：
<link rel="stylesheet">
實(shí)際寫點(diǎn)東西來看看吧邑雅！
上述的步驟已經(jīng)把所有Angular Material相關(guān)的套件及設(shè)定都完成了片橡，同時(shí)我們也練習(xí)載入了MatButtonModule，既然都已經(jīng)載入了淮野，我們就直接來寫一個(gè)Button來看看吧捧书！
在app.component.html中先寫一個(gè)簡(jiǎn)單到不行的button
<button>Hello World！</button>
這時(shí)候的按鈕隨著作業(yè)系統(tǒng)骤星、瀏覽器的不同會(huì)有不同的顯示方式经瓷。接著我們來讓它變成一個(gè)充滿Material Design樣式的按鈕吧！
在Angular Material中使用了原生的按鈕洞难，但是加上了directive讓按鈕有了Material Design的樣式舆吮，最簡(jiǎn)單的directive就是mat-button
<button mat-button>Hello World！</button>
來看看結(jié)果：
可以看到整個(gè)按鈕的樣式變得不一樣了队贱，同時(shí)點(diǎn)選下去也有清楚的wave特效色冀，這讓我們的按鈕從此活了起來！畫面更加豐富Ｖ印锋恬！
在之后的文章我們會(huì)在對(duì)MatButton有更熟悉的理解，不過在這裡我們還是手癢稍微修改一下按鈕的樣式编丘，讓按鈕能有不一樣的呈現(xiàn)方式
<button mat-raised-button color="primary">Hello World伶氢！</button>
我們改用了mat-raised-button，讓按鈕變成有有層次的陰影瘪吏，同時(shí)加上color="primary"癣防，為按鈕加上了主題色的主要顏色，看看結(jié)果：
可以發(fā)現(xiàn)按鈕變成了藍(lán)色的背景掌眠，而且也有了些陰影蕾盯，這可以讓畫面更佳的有立體感，顏色也更加鮮明蓝丙；在所有的Angular Material的元件都有類似的立體效果及配色级遭，讓整個(gè)畫面呈現(xiàn)能夠更加的層次分明，是不是對(duì)于Material Design的設(shè)計(jì)有了更多的期待啦渺尘！
關(guān)于安裝Angular Material的小補(bǔ)充
如果有使用SystemJS的方式載入模組挫鸽，官方文件也有說明該如何使用，可以參考看看
https://material.angular.io/guide/getting-started#appendix-configuring-systemjs
關(guān)于Angular Material文件的補(bǔ)充
如果你已經(jīng)迫不及待要去Angular Material的文件上看看有什麼好玩的元件可以用了鸥跟，在這邊做一點(diǎn)小提醒丢郊，由于文件目前還沒有完全更新盔沫，有些程式碼可能會(huì)是錯(cuò)的，最主要的部分是當(dāng)看到mdXxxx或md-xxxx時(shí)枫匾，都是舊版的寫法架诞，Angular Material 5之后統(tǒng)一都改成matXxxx或mat-xxxx的寫法，因此當(dāng)你複製程式時(shí)干茉，別忘了看一下是不是舊版的寫法谴忧，可能會(huì)導(dǎo)致跑不出結(jié)果喔！
本日小結(jié)
今天我們介紹了將Angular Material加入Angular專案的方法角虫，雖然不算複雜沾谓，但也有些細(xì)節(jié)需要注意，并且也理解到Angular Material需要相依一些套件戳鹅，才能發(fā)揮出全部的威力搏屑，盡管沒有這些相依套件，也不會(huì)影響到主要的操作粉楚，但如果可以的話，還是建議把這些套件都加進(jìn)來亮垫，讓前端畫面能夠更加豐富模软！
安裝完Angular Material后，我們也實(shí)際用按鈕當(dāng)作案例饮潦，建立了一個(gè)充滿Material Design風(fēng)格的按鈕元件燃异，讓按鈕不再是死板板的按鈕，還要擔(dān)心作業(yè)系統(tǒng)和瀏覽器不同而有不同的顯示方式继蜡，讓呈現(xiàn)更加一致回俐，也更加的生動(dòng)。
明天即將開始進(jìn)入正戲稀并，介紹Angular Material的元件啦仅颇！
本日的程式碼GitHub：https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-02-prepare-installation (分枝：day-02-prepare-installation)
