Angular 教程：為英雄之旅添加路由支持-里程碑 1：起步

里程碑 1：起步

開始本應(yīng)用的一個簡版，它在兩個空路由之間導(dǎo)航。

創(chuàng)建一個范例應(yīng)用

1. 創(chuàng)建一個新的 Angular 項目 angular-router-tour-of-heroes。

ng new angular-router-tour-of-heroes

當系統(tǒng)提示 ?Would you like to add Angular routing?? 時，選擇 ?N?。

當系統(tǒng)提示 ?Which stylesheet format would you like to use?? 時，選擇 ?CSS?。

片刻之后，一個新項目 ?angular-router-tour-of-heroes? 已準備就緒。

2. 從你的終端，導(dǎo)航到 ?angular-router-tour-of-heroes? 目錄。
3. 運行 ?ng serve? 來驗證新應(yīng)用是否正常運行。

ng serve

4. 打開瀏覽器訪問 ?http://localhost:4200?。

你會發(fā)現(xiàn)本應(yīng)用正運行在瀏覽器中。

定義路由

路由器必須用“路由定義”的列表進行配置。

每個定義都被翻譯成了一個Route對象。該對象有一個 ?path ?字段，表示該路由中的 URL 路徑部分，和一個 ?component ?字段，表示與該路由相關(guān)聯(lián)的組件。

當瀏覽器的 URL 變化時或在代碼中告訴路由器導(dǎo)航到一個路徑時，路由器就會翻出它用來保存這些路由定義的注冊表。

第一個路由執(zhí)行以下操作：

• 當瀏覽器地址欄的 URL 變化時，如果它匹配上了路徑部分 ?/crisis-center?，路由器就會激活一個 ?CrisisListComponent ?的實例，并顯示它的視圖。
• 當應(yīng)用程序請求導(dǎo)航到路徑 ?/crisis-center? 時，路由器激活一個 ?CrisisListComponent ?的實例，顯示它的視圖，并將該路徑更新到瀏覽器地址欄和歷史。

第一個配置定義了由兩個路由構(gòu)成的數(shù)組，它們用最短路徑指向了 ?CrisisListComponent ?和 ?HeroListComponent?。

生成 ?CrisisList ?和 ?HeroList ?組件，以便路由器能夠渲染它們。

ng generate component crisis-list

ng generate component hero-list

把每個組件的內(nèi)容都替換成下列范例 HTML。

• src/app/crisis-list/crisis-list.component.html

<h2>CRISIS CENTER</h2>
<p>Get your crisis here</p>

• src/app/hero-list/hero-list.component.html

<h2>HEROES</h2>
<p>Get your heroes here</p>

注冊 Router 和 Routes

為了使用 ?Router?，你必須注冊來自 ?@angular/router? 包中的 ?RouterModule?。定義一個路由數(shù)組 ?appRoutes?，并把它傳給 ?RouterModule.forRoot()? 方法。?RouterModule.forRoot()? 方法會返回一個模塊，其中包含配置好的 ?Router ?服務(wù)提供者，以及路由庫所需的其它提供者。一旦啟動了應(yīng)用，?Router ?就會根據(jù)當前的瀏覽器 URL 進行首次導(dǎo)航。

注意：
?RouterModule.forRoot()? 方法是用于注冊全應(yīng)用級提供者的編碼模式。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

對于最小化的路由配置，把配置好的 ?RouterModule ?添加到 ?AppModule ?中就足夠了。但是，隨著應(yīng)用的成長，你將需要將路由配置重構(gòu)到單獨的文件中，并創(chuàng)建路由模塊，路由模塊是一種特殊的、專做路由的服務(wù)模塊。

把 ?RouterModule.forRoot()? 注冊到 ?AppModule ?的 ?imports ?數(shù)組中，能讓該 ?Router ?服務(wù)在應(yīng)用的任何地方都能使用。

添加路由出口

根組件 ?AppComponent ?是本應(yīng)用的殼。它在頂部有一個標題、一個帶兩個鏈接的導(dǎo)航條，在底部有一個路由器出口，路由器會在它所指定的位置上渲染各個組件。

路由出口扮演一個占位符的角色，表示路由組件將會渲染到哪里。

該組件所對應(yīng)的模板是這樣的：

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
</nav>
<router-outlet></router-outlet>

定義通配符路由

你以前在應(yīng)用中創(chuàng)建過兩個路由，一個是 ?/crisis-center?，另一個是 ?/heroes?。所有其它 URL 都會導(dǎo)致路由器拋出錯誤，并讓應(yīng)用崩潰。

可以添加一個通配符路由來攔截所有無效的 URL，并優(yōu)雅的處理它們。 通配符路由的 ?path ?是兩個星號（?**?），它會匹配任何 URL。 而當路由器匹配不上以前定義的那些路由時，它就會選擇這個通配符路由。 通配符路由可以導(dǎo)航到自定義的“404 Not Found”組件，也可以重定向到一個現(xiàn)有路由。

路由器會使用先到先得的策略來選擇路由。由于通配符路由是最不具體的那個，因此務(wù)必確保它是路由配置中的最后一個路由。

要測試本特性，請往 ?HeroListComponent ?的模板中添加一個帶 ?RouterLink ?的按鈕，并且把它的鏈接設(shè)置為一個不存在的路由 ?"/sidekicks"?。

<h2>HEROES</h2>
<p>Get your heroes here</p>

<button type="button" routerLink="/sidekicks">Go to sidekicks</button>

當用戶點擊該按鈕時，應(yīng)用就會失敗，因為你尚未定義過 ?"/sidekicks"? 路由。

不要添加 ?"/sidekicks"? 路由，而是定義一個“通配符”路由，讓它導(dǎo)航到 ?PageNotFoundComponent ?組件。

{ path: '**', component: PageNotFoundComponent }

創(chuàng)建 ?PageNotFoundComponent?，以便在用戶訪問無效網(wǎng)址時顯示它。

ng generate component page-not-found

<h2>Page not found</h2>

現(xiàn)在，當用戶訪問 ?/sidekicks? 或任何無效的 URL 時，瀏覽器就會顯示“Page not found”。瀏覽器的地址欄仍指向無效的 URL。

設(shè)置跳轉(zhuǎn)

應(yīng)用啟動時，瀏覽器地址欄中的初始 URL 默認是這樣的：

localhost:4200

它不能匹配上任何硬編碼進來的路由，于是就會走到通配符路由中去，并且顯示 ?PageNotFoundComponent?。

這個應(yīng)用需要一個有效的默認路由，在這里應(yīng)該用英雄列表作為默認頁。當用戶點擊"Heroes"鏈接或把 ?localhost:4200/heroes? 粘貼到地址欄時，它應(yīng)該導(dǎo)航到列表頁。

添加一個 ?redirect ?路由，把最初的相對 URL（?''?）轉(zhuǎn)換成所需的默認路徑（?/heroes?）。

在通配符路由上方添加一個默認路由。在下方的代碼片段中，它出現(xiàn)在通配符路由的緊上方，展示了這個里程碑的完整 ?appRoutes?。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

瀏覽器的地址欄會顯示 ?.../heroes?，好像你直接在那里導(dǎo)航一樣。

重定向路由需要一個 ?pathMatch ?屬性，來告訴路由器如何用 URL 去匹配路由的路徑。在本應(yīng)用中，路由器應(yīng)該只有在完整的 URL等于 ?''? 時才選擇 ?HeroListComponent ?組件，因此要把 ?pathMatch ?設(shè)置為 ?'full'?。

聚焦 PATHMATCH
從技術(shù)角度看，?pathMatch = 'full'? 會導(dǎo)致 URL 中剩下的、未匹配的部分必須等于 ?''?。在這個例子中，跳轉(zhuǎn)路由在一個頂層路由中，因此剩下的URL 和完整的URL 是一樣的。
?pathMatch ?的另一個可能的值是 ?'prefix'?，它會告訴路由器：當剩下的URL 以這個跳轉(zhuǎn)路由中的 ?prefix ?值開頭時，就會匹配上這個跳轉(zhuǎn)路由。但這不適用于此示例應(yīng)用，因為如果 ?pathMatch ?值是 ?'prefix'?，那么每個 URL 都會匹配 ?''?。
嘗試把它設(shè)置為 ?'prefix'?，并點擊 ?Go to sidekicks? 按鈕。這是因為它是一個無效 URL，本應(yīng)顯示“Page not found”頁。但是，你仍然在“英雄列表”頁中。在地址欄中輸入一個無效的 URL，你又被路由到了 ?/heroes?。每一個 URL，無論有效與否，都會匹配上這個路由定義。
默認路由應(yīng)該只有在整個 URL 等于 ?''? 時才重定向到 ?HeroListComponent?，別忘了把重定向路由設(shè)置為 ?pathMatch = 'full'?。

里程碑 1 小結(jié)

當用戶單擊某個鏈接時，該示例應(yīng)用可以在兩個視圖之間切換。

里程碑 1 涵蓋了以下幾點的做法：

• 加載路由庫
• 往殼組件的模板中添加一個導(dǎo)航條，導(dǎo)航條中有一些 A 標簽、?routerLink ?指令和 ?routerLinkActive ?指令
• 往殼組件的模板中添加一個 ?router-outlet? 指令，視圖將會被顯示在那里
• 用 ?RouterModule.forRoot()? 配置路由器模塊
• 設(shè)置路由器，使其合成 HTML5 模式的瀏覽器 URL
• 使用通配符路由來處理無效路由
• 當應(yīng)用在空路徑下啟動時，導(dǎo)航到默認路由

這個初學(xué)者應(yīng)用的結(jié)構(gòu)是這樣的：

下面是本里程碑中的文件列表。

• app.component.html

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
</nav>
<router-outlet></router-outlet>

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent },

  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

• hero-list/hero-list.component.html

<h2>HEROES</h2>
<p>Get your heroes here</p>

<button type="button" routerLink="/sidekicks">Go to sidekicks</button>

• crisis-list/crisis-list.component.html

<h2>CRISIS CENTER</h2>
<p>Get your crisis here</p>

• page-not-found/page-not-found.component.html

<h2>Page not found</h2>

• index.html

<html lang="en">
  <head>
    <!-- Set the base href -->
    <base href="/">
    <title>Angular Router</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <app-root></app-root>
  </body>

</html>