在继续本教程之前，最好总结一下我们迄今为止所做的一切，以避免任何混乱和错误。如果您错过了最后三个教程中的任何步骤，最好返回并进行必要的更改。
在第二个教程中，我们创建了三个不同的文件，分别名为 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，我们将在 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 入门：向您的第一个应用程序添加路由的详细内容。