Angular经过多年的发展，每个版本都不断增加了令人兴奋的新功能。 改进之一是材料设计，它带有新的组件。 本教程将研究Angular Material以及如何将其合并到Angular 6项目中。

什么是材料设计？

Material Design是Google在2014年开发的用于Web和移动应用程序的设计语言。MaterialDesign使开发人员可以轻松自定义其UI，同时仍保持用户满意的外观美观的应用程序界面。 借助Material Design，您可以获得井井有条的格式，并可以灵活地表达自己的品牌和风格。

有关Material Design的示例，请查看Houzz，这是一款家庭设计应用程序，该应用程序在2016年获得了Google Play奖。该应用程序利用Material Design将其许多功能融入有限的移动设备领域。 通过让用户查看和导航应用程序而不会感到不知所措，这为用户提供了良好的体验。 它确实是最好的Material Design应用程序之一。

这篇文章与材料设计无关，因此我们将不讨论所有细节。 如果您想了解更多信息，请在Envato博客上找到有关Material Design的出色教程 。

角材料介绍

Angular Material由一组预建的Angular组件组成。 与Bootstrap不同，它为您提供了可以随意设置样式的组件，而Angular Material致力于提供增强的，一致的用户体验。 同时，它使您能够控制不同组件的行为。

就像Angular一样，自最初发布以来，Angular Material有了很大的改进，并进行了重大改进和错误修复。

如何在项目中添加角材料

为了将Angular Material添加到项目中，我们将使用ng add命令，该命令用于向Angular项目添加新功能。 该命令恰巧是Angular 6中的一个新功能，它很简单：

ng add @angular/material

此命令会将库添加到现有项目中，并在angular.json中引入主题CSS。 它还将在index.html中添加脚本并更新AppModule 。

Angular 6的另一个功能是ng update ，当发布新版本时会更新npm依赖项。 它还会更新您的RxJS代码和Material Design代码以利用新的API。

依赖关系和组成部分

角材料由几个设计组件组成，这些组件属于以下类别：

• 表单控件
• 按钮和指示灯
• 导航和布局
• 弹出窗口和模式
• 数据表

您可以使用ng update命令生成启动器组件。 通过此命令可用的一些原理图是：

• 导航
• 仪表板
• 表

这些示意图可以使用ng generate命令轻松安装，如下所示：

• ng generate @angular/material:material-table --name <component-name> ：生成一个显示带有数据表的数据的组件
  
• ng generate @angular/material:material-nav --name <component-name> ：生成带有侧面导航和工具栏的组件

• ng generate @angular/material:material-dashboard --name <component-name> ：生成一个包含卡片动态网格列表的组件。

建立Angular 6材质应用程序

首先，您将需要Angular CLI。 如果您没有安装Angular CLI，只需发出以下命令即可安装它。

npm install -g @angular/cli

接下来，我们将需要初始化一个新的Angular项目。 为此，发出以下命令，其中Material-ng是我们Angular项目的名称。

ng new Material-ng

此命令为您的项目创建多个Angular模板文件，并安装必要的启动程序依赖项。

进入项目目录，然后将Angular Material添加到项目中。

cd MaterialApp
ng add @angular/material

接下来，我们将添加许多应用程序通用的组件，例如导航。

添加导航栏

要添加导航栏，只需发出：

ng generate @angular/material:material-nav --name myNav

此命令添加了可折叠的侧面导航和抽屉组件。 您应该获得以下输出，其中包含为我们生成的四个文件，即my-nav.component.css ， my-nav.component.html ， my-nav.component.spec.ts和my-nav.component.ts 。

CREATE src/app/my-nav/my-nav.component.css (129 bytes)
CREATE src/app/my-nav/my-nav.component.html (958 bytes)
CREATE src/app/my-nav/my-nav.component.spec.ts (699 bytes)
CREATE src/app/my-nav/my-nav.component.ts (580 bytes)
UPDATE src/app/app.module.ts (795 bytes)

现在打开my-nav.component.html ，您应该看到为我们生成的导航的所有HTML代码。

<mat-sidenav-container class="sidenav-container"><mat-sidenav#drawerclass="sidenav"fixedInViewport="true"[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"[mode]="(isHandset$ | async) ? 'over' : 'side'"[opened]="!(isHandset$ | async)"><mat-toolbar color="primary">Menu</mat-toolbar><mat-nav-list><a mat-list-item href="#">Link 1</a><a mat-list-item href="#">Link 2</a><a mat-list-item href="#">Link 3</a></mat-nav-list></mat-sidenav><mat-sidenav-content><mat-toolbar color="primary"><buttontype="button"aria-label="Toggle sidenav"mat-icon-button(click)="drawer.toggle()"*ngIf="isHandset$ | async"><mat-icon aria-label="Side nav toggle icon">menu</mat-icon></button><span>Material-ng</span></mat-toolbar><!-- Add Content Here --></mat-sidenav-content>
</mat-sidenav-container>

默认情况下，初始Angular项目将提供默认页面，但是我们希望能够看到Material Design的魔力！ 为了利用我们生成的Material Design导航组件，请打开app.component.html并将所有代码替换为：

<my-nav></my-nav>

现在，当您运行该应用程序时，您将看到导航栏。

您还应该注意，我们添加的导航组件已导入到主模块中，如下所示：

#app.module.tsimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { MyNavComponent } from './my-nav/my-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';@NgModule({declarations: [AppComponent,MyNavComponent],imports: [BrowserModule,BrowserAnimationsModule,LayoutModule,MatToolbarModule,MatButtonModule,MatSidenavModule,MatIconModule,MatListModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

在my-nav.component.html中 ，我们也对菜单列表进行一些更改：

<mat-toolbar color="primary">Home</mat-toolbar><mat-nav-list><a mat-list-item href="#">Form controls</a><a mat-list-item href="#">Navigation</a><a mat-list-item href="#">Layout</a><a mat-list-item href="#">Buttons and Indicators</a><a mat-list-item href="#">Popups & Modals</a><a mat-list-item href="#">Data table</a></mat-nav-list>

现在，您可以通过运行以下命令启动开发服务器：

ng server –open

结果应如下所示：

如您所见，Angular Material提供了一种简单的方法来启动和运行您的应用程序。 仅需几个命令和几行代码，我们就可以在我们的Angular应用程序中整合Material Design！

请访问我们的GitHub存储库，以获取此示例应用程序的完整源代码 。

结论

我希望本教程可以帮助您了解如何在顶级UI中使用Material Design的功能。 有关Angular 6中Material Design的更多信息，请查看包含即用型模板的官方文档 。 这是学习Angular的好地方。 您也可以在Envato Tuts +上查看我们的Angular教程和课程 ！

翻译自: https://code.tutsplus.com/tutorials/how-to-use-material-design-in-angular-6--cms-31671