创建你的第一个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.tsHomeComponent

类中的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文件包含应用于模板文件中元素的不同规则。

在本教程中，我们将在我们的应用程序中实现路由。这样，用户将能够轻松地从一个组件导航到另一个组件。

修改应用程序外壳

现在，我们只需要对应用程序外壳进行更改，我们的应用程序就可以开始工作了。该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 指令用于提供指向应用程序不同部分或页面的链接。routerLink Angular 在指令的帮助下确定它需要显示的组件 。渲染这些组件的位置使用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 需要为特定的路由或路径渲染哪些组件。app-routing.module.ts在目录中创建一个名为的文件src/app，并将以下代码放入其中：

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，我们将 在文件内的标签 AllCountriesComponent之后渲染以显示所有***/地区的列表。router-outletapp.component.html

我们 routerLink在模板中使用了该指令， AllCountriesComponent并HomeComponent提供了一个链接，用户可以单击该链接以阅读有关任何***/地区的更多信息。在这些模板中呈现的每个***/地区的值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文件进行两项更改。首先，我们必须从我们在上一节中创建AppRoutingModule的文件中导入类。app-routing.module.ts其次，将类添加到@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 应用程序。仅在我们完成上一个教程后，该应用程序才开始正常运行。这是故意的，因为我想避免在相同的文件之间来回移动，从而进行需要在以后的教程中覆盖的更改。这对于初学者来说可能会非常混乱，所以我们只是一次对文件进行了所有更改。