Angular 入門：為您的第一個應用程式新增路由

在繼續本教學之前，最好先總結我們迄今為止所做的一切，以避免任何混亂和錯誤。如果您錯過了最後三個教程中的任何步驟，最好返回並進行必要的更改。

在第二個教學中，我們建立了三個不同的文件，分別名稱為country.ts、country-data.ts 和country.service 。 ts。 country.ts 檔案用於儲存 Country 類別定義，以便我們可以將其匯入到不同的檔案中。 country-data.ts 檔案用於儲存名為 COUNTRIES 的陣列。

該數組儲存我們想要在應用程式中顯示的所有國家/地區物件。 country.service.ts 檔案用於定義 CountryService 類，其​​中包含我們將用於在一個地方存取不同國家/地區資訊的所有方法。 CountryService 類別的方法用於根據人口和麵積等條件取得排名靠前的國家/地區，或尋找有關給定名稱的國家/地區的資訊。

在第三個教程中，我們為我們的應用程式創建了 HomeComponent。這是在名為home.component.ts、home.component.html 和home.component.css 的三個不同檔案的幫助下完成的。 home.component.ts 檔案包含 HomeComponent 類別的定義，該類別具有不同的方法和屬性來存取和儲存有關所有國家/地區的資訊。

HomeComponent 類別中的方法依賴 country.service.ts 中定義的方法來取得所有資料。 home.component.html 檔案用於儲存模板，該模板將在顯示透過 home.component.ts 檔案中定義的方法存取的所有資料時使用。 home.component.css 檔案用於提供不同的樣式規則，這些規則將控制模板內不同元素的外觀。

在第四個教程中，我們為我們的應用程式創建了另外兩個元件。對於AllCountries 元件，我們建立了名為all-countries.component.ts、all-countries.component.html 和all-countries. component.css。對於CountryDetail 元件，我們建立了名為country-detail.component.ts、country-detail.component.html 和country-detail. component.css。就像HomeComponent 一樣，.ts 檔案包含我們元件的邏輯，.html 檔案包含模板，而.css 檔案包含應用於範本文件中的元素的不同規則。

在本教程中，我們將在我們的應用程式中實作路由。這樣，用戶將能夠輕鬆地從一個元件導航到另一個元件。

修改應用程式外殼

現在，我們只需要對應用程式 shell 進行更改即可讓我們的應用程式開始工作。 app.component.ts 檔案將與第一個教學中的完全相同。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Fun Facts About Countries';
}

但是，我們將對 app.component.html 檔案進行更改。 HTML 檔案現在應包含以下程式碼：

<h1>{{title}}</h1>
<nav>
  <a routerLink="/home">Go Back to Homepage</a>
  <a routerLink="/all-countries">List of all Countries</a>
</nav>
<router-outlet></router-outlet>

之前，我們只顯示應用程式的標題。現在，我們也為模板添加了導航。 routerLink 指令用於提供指向應用程式不同部分或頁面的連結。 Angular 在 routerLink 指令的幫助下確定需要顯示的元件。這些元件的渲染位置是使用 routerOutlets 控制的。這些元件在 router-outlet 標記之後呈現。

建立範本檔案後，我們將以下 CSS 新增至 app.component.css 來設定導覽連結和標題的樣式：

nav {
  margin: 0px;
  text-align: center;
}

h1 {
  font-family: 'Lato';
  color: #999;
  text-align: center;
}

h2 {
  font-size: 2em;
  margin-top: 0;
  padding-top: 0;
}

nav a {
  padding: 10px;
  text-decoration: none;
  margin: 10px 0px;
  display: inline-block;
  background-color: black;
  color: white;
  border-radius: 5px;
  font-family: 'Lato';
}

nav a:hover {
  background-color: gray;
}

nav a.active {
  color: #039be5;
}

現在我們將告訴 Angular 需要為特定路線或路徑渲染哪些元件。在 src/app 目錄中建立一個名為 app-routing.module.ts 的文件，並將以下程式碼放入其中：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'detail/:name', component: CountryDetailComponent },
    { path: 'all-countries', component: AllCountriesComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

我们首先导入所有必要的依赖项，包括我们想要为不同路由渲染的组件。之后，我们指定不同的路径以及当用户访问这些路径时应呈现的组件。您还可以重定向路径，就像我们对此国家/地区信息应用程序所做的那样。每当用户访问 http://localhost:4200/ 时，他们都会被重定向到 http://localhost:4200/home。请记住，指定重定向路由需要您为 pathMatch 属性指定一个值，以告诉路由器如何将 URL 与任何路由的路径相匹配。

如果用户访问 http://localhost:4200/all-countries，我们将在 router-outlet 标记之后呈现 AllCountriesComponent >app.component.html 文件显示所有国家/地区的列表。

我们在 AllCountriesComponent 以及 HomeComponent 的模板中使用了 routerLink 指令来提供用户可以点击阅读的链接更多关于任何国家的信息。在这些模板中呈现的每个国家/地区的 routerLink 值遵循以下格式：routerLink="/detail/{{country.name}}"。用于渲染 path 属性的值 CountryDetailComponent 已指定为 detail/:name，保留 routerLink 记住指令。该路径中的 :name 部分用于标识国家/地区的名称。

更新 app.module.ts 文件

为了拥有一个功能齐全的 Angular 应用程序，我们需要做的最后一件事是更新 app.module.ts 文件。如果您在文本编辑器中打开此文件，您会注意到我们使用 Angular CLI 生成的所有三个组件都已导入到该文件中。在我们进行任何更改之前，您的 app.module.ts 文件应包含以下代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';
import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountriesComponent,
    CountryDetailComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})

export class AppModule { }

我们只需对 app.module.ts 文件进行两处更改。首先，我们必须从我们在上一节中创建的 app-routing.module.ts 文件中导入 AppRoutingModule 类。其次，将该类添加到 @NgModule.providers 数组中。进行这些更改后，您的 app.module.ts 文件应如下所示。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';
import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountriesComponent,
    CountryDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})

export class AppModule { }

如果您移动到项目目录并在控制台中键入以下命令，您的应用程序将加载并呈现 HomeComponent。

ng serve --open

您可以单击各个国家/地区块或导航链接来加载不同的组件。

最终想法

在本系列中，我想教以前从未使用过 Angular 的读者如何创建基本的 Angular 应用。仅在我们完成上一个教程后，该应用程序才开始正常运行。这是故意的，因为我想避免在相同的文件之间来回移动，进行需要在后续教程中覆盖的更改。这对于初学者来说可能会非常困惑，因此我们只是一次性对文件进行了所有更改。

为了练习，您可以尝试创建更多组件，以不同的格式显示有关国家/地区的信息。

此外，如果还不清楚的话，JavaScript 已经成为事实上的网络语言之一。正如 Angular 在本教程中所演示的那样，它并非没有学习曲线，并且有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato Market 中提供的资源。

如果您对本教程或本系列的任何其他教程有任何疑问，请随时发表评论。

以上是Angular 入門：為您的第一個應用程式新增路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！