在本教程中，将学习如何在Angular应用程序中添加路由，并使用Angular Material组件来美化用户界面。路由允许将特定的URL路径映射到应用程序的不同视图。将使用Angular Material组件来创建一个专业且有吸引力的用户界面。
在这一步中，将学习如何在示例应用程序中添加路由。这将允许将主页和关于页面组件映射到特定的URL路径，例如 "/home" 和 "/about"。这将使能够创建具有多个视图的应用程序。幸运的是，当项目生成时，AngularCLI已经为设置了路由。如果查看项目文件夹，将找到src/app/app-routing.module.ts文件，其中包含一个空的routes数组。需要做的就是简单地将路由添加到组件中的routes数组中。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在路由对象中，设置了path、pathMatch、redirectTo和component属性：
在示例中，将主页路径与HomeComponent关联，将关于页面与AboutComponent关联，并且添加了一个重定向路由，将空路径重定向到主页路径。这样，当用户首次通过主URL访问应用程序时，他们将被重定向到主页视图，在那里他们可以找到一些有用的信息。
在这一步中，将学习如何在项目中设置Angular Material，并使用Material Design组件构建应用程序UI。返回到命令行界面，运行以下命令：
$ ng add @angular/material
确保命令是从项目的根文件夹执行的，而不是子文件夹。命令将提示选择一个主题，简单地选择Indigo/Pink。还将被提示是否设置HammerJS进行手势识别，以及是否设置AngularMaterial的浏览器动画 - 只需选择默认答案即可。等待命令从npm安装必要的依赖项，并在项目中设置Angular Material。
导入Material组件：MatToolbar、MatIcon、MatCard、MatButton和MatProgressSpinner。在可以使用任何Material Design组件之前，需要将其导入到项目中。这可以通过创建一个单独的模块并导入所需的Material组件来实现，然后需要将该模块本身导入到应用程序的主模块中。或者，也可以直接将组件导入到应用程序模块中，这对于小型示例来说是可以的！让选择第二种选择！
import { MatToolbarModule, MatIconModule, MatCardModule, MatButtonModule, MatProgressSpinnerModule } from '@angular/material';
接下来，需要在@NgModule的imports数组中包含这些模块：
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatCardModule,
MatProgressSpinnerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
通过导入这些模块，将能够使用以下Material Design组件：
接下来，转到src/app/app.component.html文件，这是根应用程序组件的模板所在的位置，并更新如下：
<mat-toolbar color="primary">
<h1>My First Angular App</h1>
<button mat-button routerLink="/">Home</button>
<button mat-button routerLink="/about">About</button>
</mat-toolbar>
<router-outlet></router-outlet>