AngularMaterial2入门

Angular Material 2 为 Angular 2+ 应用程序带来了 Material Design 组件。该项目的目标是构建完整的组件阵列，以便为移动和桌面构建 Material Design 界面变得非常容易。

Angular Material 的最新版本依赖于 Angular 4+

以下是如何开始使用 Angular Material 2：

1. npm 安装角材料和hammerjs

首先使用以下命令在您的项目中安装 Angular Material、Angular 动画和 Hammer.js：

npm install --save @angular/material @angular/animations @angular/cdk

npm install --save hammerjs

Hammer.js 是一个可选依赖项，有助于为一些组件提供触摸支持。

2. 角-cli.json

如果您决定使用 Hammer.js，并且已经使用 Angular CLI 启动项目，请将 angular-cli.json 文件修改为添加 Hammer.js 库。查找 Json *“scripts”* 数组并为hammer.js 添加以下路径：

角-cli.json

"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

您可能需要重新启动本地服务器才能使对 angular-cli.json 的更改生效。

3. 自定义材质模块

在 Angular Material 2 Beta 3 之前，可以在应用模块中导入全局 MaterialModule 以使组件可用。不利的一面是，摇树的效率不足以删除所有未使用的代码。

MaterialModule 因此已被弃用，取而代之的是定义一个项目特定的自定义材料模块，您可以在其中只导入和导出所需的组件。这是我们的模块的样子：

材料.module.ts

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

然后，您将在根应用程序模块中导入此模块。

4. 将 Angular Material 添加到您的应用模块

导入 MaterialModule 并将其添加到您的导入中。您还需要在模块中导入必要的动画。你的应用模块（例如：app.module.ts）看起来有点像这样：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 导入预建的主题和材质图标

Angular Material 会自动安装一些预构建的主题。这些设置颜色和基本样式。可用的主题有：靛蓝粉红色、深紫琥珀、紫绿和粉红蓝灰。

要导入主题，您可以在全局 styles.css 文件中添加如下内容：

样式.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

您还可以访问材料设计图标并将命名图标与零件。要将它们导入您的项目，您可以将其添加到项目根 index.html 文件的 head 部分：

索引.html

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

6. 角材料准备好了！

现在您可以开始在模板中使用可用的 Angular Material 组件了。例如，以下是示例应用程序模板的一些标记：

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

为此，我们只在全局 styles.css 中添加了以下 CSS：

样式.css

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}
mat-toolbar-row {
  justify-content: space-between;
}

这是我们的示例应用程序的外观：

了解更多

这里还有一些帖子可以帮助您入门：

资源和链接

Angular Material 2 项目：Website、Github repo。
这个 Angular Material 2 简单的应用程序：App demo、Github repo。
来自 Kara Erickson 的演讲：Talk on Youtube、Github repo。