[Angular Material完全攻略] Day 02 - 环境设定 & 安装 ＆ Hello World

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

image.png

另外这4个佈景的样式也可以再Angular Material官方文件首页的上半部作切换

image.png

以下是这4个样式在官方首页的样式，提供参考

• indigo-pink.css

image.png

• deeppurple-amber.css

image.png

• pink-bluegrey.css

image.png

• purple-green.css

image.png

未来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：

实际写点东西来看看吧！

上述的步骤已经把所有Angular Material相关的套件及设定都完成了，同时我们也练习载入了MatButtonModule，既然都已经载入了，我们就直接来写一个Button来看看吧！

在app.component.html中先写一个简单到不行的button

Hello World！

这时候的按钮随著作业系统、浏览器的不同会有不同的显示方式。接著我们来让它变成一个充满Material Design样式的按钮吧！

在Angular Material中使用了原生的按钮，但是加上了directive让按钮有了Material Design的样式，最简单的directive就是mat-button

Hello World！

来看看结果：

image

可以看到整个按钮的样式变得不一样了，同时点选下去也有清楚的wave特效，这让我们的按钮从此活了起来！画面更加丰富！！

在之后的文章我们会在对MatButton有更熟悉的理解，不过在这裡我们还是手痒稍微修改一下按钮的样式，让按钮能有不一样的呈现方式

Hello World！

我们改用了mat-raised-button，让按钮变成有有层次的阴影，同时加上color="primary"，为按钮加上了主题色的主要颜色，看看结果：

image

可以发现按钮变成了蓝色的背景，而且也有了些阴影，这可以让画面更佳的有立体感，颜色也更加鲜明；在所有的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