AngularCLI集成material design指南

参考https://material.angular.io/guide/getting-started
先确认本地安装好了AngularCLI,需要了解关于AngularCLI的知识，请浏览《AngularCLI》文集中《AngularCLI安装与升级》这篇文章。
进入正文

第一步：安装Angular Material

npm install --save @angular/material

第二步：动画

部分angular material组件需要依赖Angular animations模块做高级转场动画处理，这就需要项目先安装@angular/animations模块并在项目中引入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的区别：
noop是no operation的缩写，意识这NoopAnimationsModule这是模拟，没有真正的运行动画，适用于测试。

第三步：引入组件模块

可以用一个共享模块引入组件，在需要用到的模块中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 { }

第四步：引入主题

引入主题对于渲染应用是有必要的，在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
关于自定义主题，我整理了一片文章，篇幅比较长，附上地址：
AngularCLI集成material design自定义主题

第五步：滑动支持

如果需要用到md-slider(可拖动的进度条)和md-slide-toggle(带滑动动画的开关),还需要安装HammerJS
先下载依赖

npm install --save hammerjs

在根模块中引入

import 'hammerjs';

第六步：添加Material Icons

在index.html中加载icon font ，使项目支持使用Material Icons Guide中的md-icon组件

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

可换成中科大的镜像

<link href="//fonts.lug.ustc.edu.cn/icon?family=Material+Icons" rel="stylesheet">

md-icon支持任务字体与svg按钮图标，给你很多种选择

最后是参照https://material.angular.io/components的api reference引入相应的模块，就可以在项目中使用相应的组件了