參考https://material.angular.io/guide/getting-started
先確認(rèn)本地安裝好了AngularCLI,需要了解關(guān)于AngularCLI的知識(shí)，請瀏覽《AngularCLI》文集中《AngularCLI安裝與升級》這篇文章。
進(jìn)入正文

第一步：安裝Angular Material

npm install --save @angular/material

第二步：動(dòng)畫

部分angular material組件需要依賴Angular animations模塊做高級轉(zhuǎn)場動(dòng)畫處理，這就需要項(xiàng)目先安裝@angular/animations模塊并在項(xiàng)目中引入BrowserAnimationsModule

npm install --save @angular/animations

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

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

或者選擇引入NoopAnimationsModule

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

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

BrowserAnimationsModule與NoopAnimationsModule的區(qū)別：
noop是no operation的縮寫，意識(shí)這NoopAnimationsModule這是模擬，沒有真正的運(yùn)行動(dòng)畫，適用于測試。

第三步：引入組件模塊

可以用一個(gè)共享模塊引入組件，在需要用到的模塊中import該模塊即可

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }
Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you'd like to use the components.

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

第四步：引入主題

引入主題對于渲染應(yīng)用是有必要的，在index.html中引入css文件即可

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

或者在style.css中Import

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

可選主題

1. deeppurple-amber.css
2. indigo-pink.css
3. pink-bluegrey.css
4. purple-green.css

自定義主題

這里是官方自定義主題指南：theming guide
關(guān)于自定義主題，我整理了一片文章，篇幅比較長，附上地址：
AngularCLI集成material design自定義主題

第五步：滑動(dòng)支持

如果需要用到md-slider(可拖動(dòng)的進(jìn)度條)和md-slide-toggle(帶滑動(dòng)動(dòng)畫的開關(guān)),還需要安裝HammerJS
先下載依賴

npm install --save hammerjs

在根模塊中引入

import 'hammerjs';

第六步：添加Material Icons

在index.html中加載icon font ，使項(xiàng)目支持使用Material Icons Guide中的md-icon組件

<link  rel="stylesheet">

可換成中科大的鏡像

<link  rel="stylesheet">

md-icon支持任務(wù)字體與svg按鈕圖標(biāo)，給你很多種選擇

最后是參照https://material.angular.io/components的api reference引入相應(yīng)的模塊，就可以在項(xiàng)目中使用相應(yīng)的組件了