使用Angular Material Design组件创建UI
在本教程中，我将向您介绍Angular中的Material Design，然后我们将研究如何使用由各种Angular Material组件构建的UI创建一个简单的Angular应用程序。
基于组件的框架（例如Angular，React和Vue.js）的广泛采用已经看到越来越多的预构建UI组件集合可用。 使用此类集合可以帮助开发人员快速创建具有专业外观的应用程序。
什么是材料设计？
材料设计（代号为Quantum Paper ）是一种视觉语言，可用于创建数字体验。 这是一套跨平台和设备的交互性，运动性和组件性原则和指南，可简化团队设计其产品的设计工作流程。
通过Material组件，您可以创建具有强大的模块化，主题化和自定义功能的专业UI。
角材料介绍
Angular Material是Angular的材料设计原则和准则的实现。 它包含各种UI组件，例如：
- 表单控件（输入，选择，复选框，日期选择器和滑块等），
- 导航模式（菜单，sidenav和工具栏）
- 布局组件（网格，卡片，选项卡和列表）
- 纽扣
- 指标（进度条和微调器）
- 弹出窗口和模态
- 带有标题和分页等的数据表
要求
在继续本教程之前，您需要确保已安装有Node（6.9.0+）和NPM（3+）的开发机器。
您还需要安装Angular CLI。 如果不是这种情况，只需在终端或命令提示符中运行以下命令：
npm install -g @angular/cli
使用Angular CLI创建项目
现在，让我们使用Angular CLI创建Angular项目。 只需运行以下命令：
ng new angularmaterialdemo
然后，您可以通过运行以下命令来服务您的应用程序：
cd angularmaterialdemo
ng serve
该应用程序将在http://localhost:4200 。
由于我们将演示不同的Angular Material组件，因此我们需要为一个简单的演示应用程序创建一些Angular组件和路由配置，因此请继续使用CLI生成组件：
ng g component login
ng g component CustomerList
ng g component CustomerCreate
接下来，打开src/app/app.module.ts并添加路由器配置：
/*...*/
import { RouterModule, Routes } from '@angular/router';
/*...*/
const appRoutes: Routes = [
{ path: 'customer-list', component: CustomerListComponent },
{ path: 'customer-create', component: CustomerCreateComponent },
{
path: 'login',
component: LoginComponent
},
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
];
角材料入门
现在，我们有了一个基本的应用程序，让我们开始安装Angular Material及其不同的依赖项，以启用手势和动画等不同的功能。
安装Angular材质和Angular CDK
首先从npm安装Angular Material和Angular CDK。
回到您的终端并运行以下命令：
npm install --save @angular/material @angular/cdk
添加HammerJS进行手势支持
诸如mat-slide-toggle ， mat-slider和matTooltip都需要HammerJS库提供手势支持，因此您需要安装它才能获得这些组件的全部功能。 只需在终端中运行以下命令：
npm install --save hammerjs
接下来，打开src/main.js （应用程序的入口）并导入hammerjs
import 'hammerjs';
添加主题
Angular Material有很多预先构建的主题。 要使用主题，只需将其导入styles.css ：
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
您可以在本指南中找到有关主题的更多信息。
添加角度材质图标
Angular Material带有用于图标的mat-icon组件，因此您需要先加载图标字体，然后才能使用它。
将以下标记添加到index.html文件：
将动画与角度材质组件一起使用
最后一件事是启用动画。 一些组件依赖于Angular动画模块进行高级过渡，因此您需要安装@angular/animations模块，并在应用程序模块配置中包含BrowserAnimationsModule 。
首先，回到您的终端并运行以下命令：
npm install --save @angular/animations
接下来，打开src/app/app.module.ts并添加以下代码：
/* ... */
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
/*...*/
imports: [
BrowserModule,
BrowserAnimationsModule,
],
})
export class AppModule { }
导入角材料零部件
在使用任何Angular Material组件之前，您必须导入其模块。 每个组件都有其自己的模块，因此您可以仅包含要使用的组件。
另一种方法是创建一个单独的模块并导入您需要使用的所有Angular Material组件，然后将该模块简单地包含在您的应用程序模块中。
因此，继续创建src/app/material.module.ts文件，然后添加以下内容：
import { NgModule } from '@angular/core';
import {MatNativeDateModule,MatSnackBarModule,MatIconModule,MatDialogModule, MatButtonModule, MatTableModule, MatPaginatorModule , MatSortModule,MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCard, MatCardModule, MatFormField, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule } from '@angular/material';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatDividerModule} from '@angular/material/divider';
@NgModule({
imports: [MatTabsModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatNativeDateModule,MatDatepickerModule,MatSnackBarModule,MatIconModule,MatDialogModule,MatProgressSpinnerModule,MatButtonModule,MatSortModule,MatTableModule,MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatPaginatorModule],
exports: [MatTabsModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatNativeDateModule,MatDatepickerModule,MatSnackBarModule,MatIconModule,MatDialogModule,MatProgressSpinnerModule,MatButtonModule,MatSortModule, MatCheckboxModule, MatToolbarModule, MatCardModule,MatTableModule,MatTabsModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatPaginatorModule],
})
export class MyMaterialModule { }
接下来，将此模块包含在src/app/app.module.ts ：
import { MyMaterialModule } from './material.module';
/*...*/
@NgModule({
/*...*/
imports: [
/*...*/
MyMaterialModule,
],
/*...*/
})
export class AppModule { }
就是这样：您现在可以在Angular应用程序中使用导入的Angular Material组件。
为应用程序创建UI
您先前已经创建了应用程序组件并添加了路由器配置。 现在，让我们使用Angular Material组件为不同的组件构建UI。
构建AppComponent的UI
继续打开src/app/app.component.html ，然后添加：
- 一个Material工具栏，带有三个Material按钮（
mat-button），用于链接到应用程序组件 - 路由器出口
这是组件的HTML代码：
Customers
Create Customer
Login
通过添加一些样式，这是工具栏的外观：
要创建工具栏，请使用
请注意，我们已导入MatToolbarModule和MatButtonModule模块从@angular/material在material.module.ts 。
您还可以使用其他导航组件，例如菜单和边栏 。
为登录组件构建UI
在为应用程序的根组件创建UI之后，让我们为登录组件创建UI。
打开src/app/login/login.component.html并添加以下HTML代码。 添加一个Angular Material卡以包含登录表单：
Login
接下来，在卡片的内容部分中，添加HTML表单：
现在，我们添加两个输入来获取用户的用户名和密码凭据：
许多Angular Material组件需要包裹在一个 组件具有常见的文本字段样式，例如下划线，浮动标签和提示消息。
这些是设计为包装在
-
和最后，为客户电子邮件创建一个输入字段：
Email 我们使用
创建输入字段，并使用