创建您的第一个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.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文件包含应用于模板文件中元素的不同规则。

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

修改应用程序外壳

现在，我们只需要更改应用程序外壳即可使我们的应用程序开始工作。 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文件现在应具有以下代码：

{{title}}

  Go Back to Homepage
  List of all Countries

之前，我们只是显示应用程序的标题。 现在，我们还向模板添加了导航。 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 ，我们将在app.component.html文件内的router-outlet标记之后呈现AllCountriesComponent ，以显示所有国家/地区的列表。

我们已经使用了routerLink内的模板指令AllCountriesComponent以及HomeComponent提供哪些用户可以点击阅读更多有关任何国家的链接。 在这些模板中呈现的每个国家/地区的routerLink值遵循格式routerLink="/detail/{{country.name}}" 。 用于渲染CountryDetailComponent的path属性的值已指定为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市场中可用的资源 。

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

翻译自: https://code.tutsplus.com/tutorials/creating-your-first-angular-app-implement-routing--cms-30161