Angular2 Material2 使用教程

环境：

Angular 4.0.0
Angular2 Material2 2.0.0-beta.3
node v7.4.0
npm 4.0.5

具体使用方法，查看官方教程：
https://material.angular.io

由于官方教程也是写得相当迷，不怎么清晰的，所以就结合了这几个教程一起看了：
https://github.com/angular/material2、https://www.npmjs.com/~angular2-material

它们的内容基本都相同的，但是排版上会比官方的好看多了... 主要还是要多看一下github的example，这样会容易懂一点。

1.设置开发环境

首先需要安装Node.js和npm。Mac的童鞋推荐使用安装nvm对node和nvm进行版本管理。
然后全局安装Angular-CLI

npm install -g @angular/cli

2.创建一个新的项目

ng new my-app

3.安装 Angular Material components

进入项目目录，然后安装Angular Material 组件

cd my-app
npm install --save @angular/material

4.安装Animation，并在app.module.ts导入

因为一些Angular Material组件是依赖于Angular animations模块的。而Angular4.0开始就将Animation独立出来使用，需要使用的时候需要另外安装。

npm install --save @angular/animations

// imports
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

5.在app.module.ts 导入 Angular Material 模块

1）统一将 Angular Material 所有模块引入

import{ MaterialModule } from'@angular/material';

// other imports
@NgModule({
  ...
  imports: [MaterialModule],
  ...
})
export class AppModule { }

2) 引入你需要使用的模块

方法一

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

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})

方法二：创建单独的NgModule模块引入需要使用的模块，方便你在任意地方使用组件

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

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

6.在所需模块中引入你所需要的模块，编写组件

比如Dialog。

import{MdDialog} from'@angular/material';
@Component({
...
})
export class DialogExample {
    constructor(publicdialog: MdDialog) { }
    openDialog() {
        this.dialog.open(DialogOverviewExampleDialog); 
    }
}

具体的使用方法，麻烦查看文档吧~

7.设置主题

1）使用自带的主题

Angular Material自带了几款主题，具体位置在：

/Users/leechingyin/Sites/NgMaterial2Custom/ng-material-app/node_modules/@angular/material/core/theming/prebuilt

在style.css中，引入相应的主题，就可以使用该主题

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

2）使用自定义主题

在scss文件中，引入主题文件，并对样式进行设置

@import '~@angular/material/theming';

@include mat-core();
$primary: mat-palette($mat-cyan, 500);
$accent: mat-palette($mat-cyan, 400);
$warn:    mat-palette($mat-cyan, 600);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

如果你是使用Angular-CLI创建项目的话，则在项目中添加相应的scss文件，并在 "styles" list in angular-cli.json 添加入口文件，这样就能使用到你自定义的主题文件了！

8.给你们设置主题教程的链接，并附带几个颜色工具，比较有用的

https://medium.com/covalent-ui/angular-material-2-theme-tutorial-2f7e6c344006

• Material Palette(web)— a simple web tool to quickly test a primary & accent color on an interface
• Material Colors(macOS) - macOS desktop app (React Nativeversion)
• Materialette(macOS/Windows/Linux) — toolbar app with hex/rgb
• MaterialUI(web) — hex/rgb/rgba web palette selection
• MaterialUIColors(web) — another web hex/rgb/rgba selection