今天我们将开始正式迈入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)
