Angular 入门：向您的第一个应用程序添加路由

1. 什么是 Angular?

Angular 是 Google 推出的一个前端开发框架，用于提供一个基于组件化、模块化的MVC/MVVM模式应用程序的结构。Angular 是一个完全的框架，用于构建单页面应用程序。它具有以下特点:

跨平台 - 可以在 Web、移动端和桌面端应用程序中使用。

现代化 - 基于 TypeScript 语言，支持 ES6 及以上版本。

高可维护性 - 模块化、组件化开发结构，易于维护。

高度可测试性 - 可以轻松进行单元测试、端到端测试以及集成测试。

2. Angular 中的路由

在 Angular 应用程序中，路由是一个非常重要的概念。路由用于确定在单页应用程序中如何导航到不同的视图。当 URL 发生变化时，路由用代码控制模板的渲染。

2.1. 路由的基本组成部分

路由在 Angular 中是一种重要的概念，由以下几个组成部分组成:

路由器 - 帮助应用程序根据 URL 映射路由到不同的组件和视图。

路由配置 - 在应用程序中配置路由所需的相关信息，如 URL 模式、导航顺序等。

路由导航 - 实现了路由导航生命周期钩子的组件或指令，用于管理路由导航。

路由守卫 - 用户控制路由的进入或退出。

2.2. 在Angular中添加路由

在 Angular 应用程序中添加路由是相对简单的，只需遵循以下步骤:

使用 CLI 创建新的组件。

在路由模块中配置路由。

在 app.module.ts 模块中引入 RouterModule 导入路由模块。

添加 RouterOutlet 指令到应用程序模板。

2.3. 添加新路由并显示

下面将逐步介绍如何在 Angular 中配置和使用路由。

2.3.1. 生成一个新的组件

使用 Angular CLI 生成一个新的组件。

ng generate component cats

该命令将创建一个名为 cats 的组件，并在 src/app/cats 下生成以下文件:

cats.component.css - 组件的 CSS 样式文件。

cats.component.html - 组件的 HTML 模板文件。

cats.component.spec.ts - 组件的单元测试文件。

cats.component.ts - 组件的 TypeScript 代码文件。

2.3.2. 创建路由模块

创建路由模块并配置路由。

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

import { Routes, RouterModule } from '@angular/router';
import { CatsComponent } from './cats/cats.component';
const routes: Routes = [
  { path: 'cats', component: CatsComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

该代码片段创建了一个基本的路由模块并配置了一个路由。定义了一个路由 '[cats]'，当用户在浏览器地址栏输入/cat/时，会加载 cats 组件。注意：在路由模块中导入需要使用的组件以及 RouterModule，并在 @NgModule 装饰器中的 imports 数组中指定 RouterModule。

2.3.3. 让 App 模块使用路由

在 app.module.ts 模块中添加对 'AppRoutingModule' 的引用。

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

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CatsComponent } from './cats/cats.component';
@NgModule({
  declarations: [
    AppComponent,
    CatsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：要在 imports 数组中导入 AppRoutingModule。

2.3.4. 在模板中添加路由链接

在你希望用户点击并导航到其他组件的位置添加链接。

<nav>

  <a routerLink="/cats" routerLinkActive="active">Cats</a>
</nav>
<router-outlet></router-outlet>

此代码片段内的 <nav> 包含 RouterLink 一个指令，该指令允许用户使用路由器。'routerLink'指定的路由路径即：路径至 " cats "，用户点击链接时 Angular 路由器会告诉它在这里找到它。+' routerLinkActive="active"'则表示该链接被激活时使用某个类名，这里表示为"active"。

3. 总结

Angular 中的路由对于开发人员来说是一个重要概念。路由可帮助应用程序根据 URL 映射到不同的组件和视图。 Angular CLI 提供了快速生成组件，并可以轻松配置路由。 Angular 的路由功能还包括诸如路由守卫之类的其他重要部分，在更复杂的应用程序中很有用。