Premiers pas avec Angular : ajout de routes à votre première application

Avant de continuer ce tutoriel, c'est une bonne idée de résumer tout ce que nous avons fait jusqu'à présent pour éviter toute confusion et erreur. Si vous avez manqué des étapes dans les trois derniers didacticiels, c'est une bonne idée de revenir en arrière et d'apporter les modifications nécessaires.

Dans le deuxième tutoriel, nous avons créé trois fichiers différents nommés country.ts、country-data.ts 和 country.service。 ts。 country.ts 文件用于存储 Country 类定义，以便我们可以将其导入到不同的文件中。 country-data.ts 文件用于存储名为 COUNTRIES tableaux.

Ce tableau stocke tous les objets pays que nous souhaitons afficher dans l'application. Les méthodes de la classe country.service.ts 文件用于定义 CountryService 类，其中包含我们将用于在一个地方访问不同国家/地区信息的所有方法。 CountryService sont utilisées pour obtenir les meilleurs pays en fonction de critères tels que la population et la superficie, ou pour trouver des informations sur un pays portant un nom donné.

Dans le troisième tutoriel, nous avons créé la définition d'une classe HomeComponent。这是在名为 home.component.ts、home.component.html 和 home.component.css 的三个不同文件的帮助下完成的。 home.component.ts 文件包含 HomeComponent pour notre application qui possède différentes méthodes et propriétés pour accéder et stocker des informations sur tous les pays.

HomeComponent 类中的方法依赖于 country.service.ts 中定义的方法来获取所有数据。 home.component.html 文件用于存储模板，该模板将在显示通过 home.component.ts 文件中定义的方法访问的所有数据时使用。 home.component.css les fichiers sont utilisés pour fournir différentes règles de style qui contrôleront l'apparence des différents éléments dans le modèle.

Dans le quatrième tutoriel, nous créons deux autres composants pour notre application. Pour 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, les fichiers contiennent différentes règles qui s'appliquent aux éléments du fichier modèle.

Dans ce tutoriel, nous allons implémenter le routage dans notre application. De cette façon, les utilisateurs pourront naviguer facilement d’un composant à un autre.

Modifier le shell de l'application

Il ne nous reste plus qu'à apporter des modifications au shell de l'application pour que notre application fonctionne. app.component.ts Le fichier sera exactement le même que dans le premier tutoriel.

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';
}

Cependant, nous apporterons des modifications au fichier app.component.html. Le fichier HTML devrait maintenant contenir le code suivant :

<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>

Auparavant, nous affichions uniquement le titre de l'application. Maintenant, nous avons également ajouté la navigation au modèle. routerLink 指令用于提供指向应用程序不同部分或页面的链接。 Angular 在 routerLink 指令的帮助下确定需要显示的组件。这些组件的渲染位置是使用 routerOutlets 控制的。这些组件在 router-outlet Rendu après marquage.

Après avoir créé le fichier modèle, nous ajoutons le CSS suivant à app.component.css pour styliser les liens de navigation et les en-têtes :

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;
}

Nous allons maintenant indiquer à Angular quels composants doivent être rendus pour un itinéraire ou un chemin spécifique. déposez src/app 目录中创建一个名为 app-routing.module.ts et mettez-y le code suivant :

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 中提供的资源。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!