Router Link en Angular

Nous allons introduire la méthode routerLink dans Angular et utiliser cette méthode pour la navigation.

Router Link en Angular

La navigation est l’une des parties les plus importantes de toute application Web ou site Web. Même lors de la création d’une application à page unique (SPA) avec une seule page, nous utilisons toujours la navigation pour passer d’une section à l’autre.

La navigation permet aux utilisateurs de trouver facilement ce qu’ils recherchent dans les applications Web. Nous pouvons rendre notre application conviviale et facile à utiliser en offrant une navigation simple et facile à comprendre.

Angular fournit de nombreuses méthodes de navigation pour réaliser facilement un routage simple à complexe. Angular fournit un module séparé, RouterModule, pour configurer la navigation dans notre application Web.

Une application à page unique (SPA) n’a pas de pages différentes vers lesquelles établir un lien, mais elle affiche différentes vues. Normalement, nous affichons un lien en HTML comme ci-dessous.

# angular
<a href="/link">
  Example link in HTML.
</a>

Angular nous fournit une directive, routerLink, qui peut être utilisée à la place de href comme indiqué ci-dessous.

# angular
<a routerLink="/home">
  Link Name.
</a>

Il y a 2 façons d’utiliser routerLink, l’une est utilisée comme chaîne et l’autre comme tableau, comme indiqué ci-dessous.

# angular
<a routerLink="/home">
  Link used as a string.
</a>
<a [routerLink]="['/', 'user', 'fakhar']">
  Link used as an array.
</a>

Le [routerLink] est utilisé lorsque nous voulons passer des paramètres dans un lien, tandis que nous utilisons [routerLink] lorsque nous voulons un lien. Nous allons passer par un exemple dans lequel nous allons naviguer à travers différents composants à l’aide de routerLink.

Créons donc une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Nous allons générer des composants à l’aide de commandes. Dans un premier temps, nous allons générer notre composant home.

# angular
ng generate component home

Une fois que nous aurons généré notre composant home, nous générerons notre composant about.

# angular
ng generate component about

Enfin, nous générons notre composant services à l’aide de la commande suivante.

# angular
ng generate component services

Après avoir généré nos composants, nous aurons trois composants dans des dossiers séparés avec 3 fichiers.

Production:

Une fois que nous aurons généré nos composants, nous créerons des vues. Tout d’abord, nous allons ouvrir about.component.html à partir du dossier about et ajouter le code suivant.

# angular
<div class="container" >
  <h1> This is about Component </h1>
  <h3> Try navigating to other components </h3>
</div>

Nous allons ouvrir le fichier home.component.html du dossier home et ajouter le code suivant.

# angular
<div class="container">
 <h1> This is home component </h1>
 <h3> Try navigating to other components </h3>
</div>

Nous allons ouvrir le fichier services.component.html du dossier services et ajouter le code suivant.

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

Une fois que nous aurons nos composants et nos vues prêts, nous définirons nos routes dans app-routing.module.ts. Nous allons importer ngModule.

Nous importerons également Routes et RouterModule à partir de router et importerons nos composants créés.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

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

Une fois que nous aurons tout importé, nous définirons les routes vers nos composants, comme indiqué ci-dessous.

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

Nous allons créer notre menu de navigation dans app.component.html. Nous utiliserons routerLink pour obtenir les liens des routes que nous venons de définir et utiliserons router-outlet pour afficher le contenu de nos composants.

<ul class="nav navbar-nav">
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/about">About</a>
  </li>
  <li>
    <a routerLink="/services">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

Production:

L’exemple ci-dessus montre que nous pouvons facilement naviguer d’un composant à un autre en utilisant routerLink et en définissant des routes.

Ainsi, dans ce didacticiel, nous avons appris à créer des composants et à définir des routes, à utiliser routerLink pour naviguer facilement entre les composants et à utiliser routerLink et [routerLink].

Démo ici