Guide du débutant du routeur angulaire

La navigation que l'application effectue pour vous proposer une vue différente s'appelle le routage. Acquérons une solide compréhension du routage dans Angular.

Aujourd'hui, nous allons examiner l'une des nombreuses fonctionnalités intéressantes de tout framework frontal, le routage, et comment cela se fait dans Angular.

Avant de commencer

Ceci post est adapté à tous les niveaux de développeurs frontaux qui utilisent Angular, il n'est donc pas supposé d'être familiarisé avec les concepts et les processus d'installation pour débutants. Voici quelques prérequis que vous devriez avoir pour pouvoir suivre la démonstration de cet article :

• Un environnement de développement intégré comme VS Code
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• Une version récente d'Angular (cette démo utilise Angular 12)

D'autres avantages incluent :

• Connaissances pratiques du framework Angular à un niveau débutant

Qu'est-ce que le routage ?

Lors de la création d'une application monopage (SPA) à l'aide d'Angular, vous devez être en mesure de vous assurer que vous vous occupez de la navigation et vous pouvez servir différentes vues pour vos utilisateurs selon les besoins.

Une bonne illustration est que lorsque vous ouvrez un site Web d'entreprise aujourd'hui, vous verrez la page d'accueil, la page Contact, la page À propos, etc. Si vous continuez à cliquer sur la page À propos, vous voyez toujours tous les éléments de la navigation, mais le reste de la vue passe à la page À propos. La même chose se produit lorsque vous cliquez sur la page Contact ou sur toute autre page.

La navigation que l'application effectue pour vous proposer une vue différente s'appelle le routage.

Routage dans Angular

Angular possède un package de bibliothèque appelé le Angular Router (@angular/router) qui s'occupe du routage dans vos projets Angular. Si vous configurez le routeur et définissez des routes, vous pouvez saisir une URL et Angular vous dirigera vers la vue correspondante. Vous pouvez cliquer sur un lien ou un bouton et également naviguer, ou vous pouvez également utiliser les boutons Précédent et Suivant du navigateur pour déclencher l'utilisation du routeur. concept de routage dans Angular. Nous allons le construire manuellement au lieu d'utiliser la CLI angulaire afin que vous puissiez comprendre ce qui se passe dans le travail que fait la CLI lorsque vous l'utilisez. ces noms dans la navigation » title= »angular-routing »/>

Configuration

Créez un nouveau dossier à l'emplacement de votre choix sur votre machine et ouvrez-le avec VS Code. Ouvrez le terminal et exécutez la commande ci-dessous :

 nouveau routeur

Lorsque l'invite de la CLI angulaire vous demande si vous souhaitez ajouter un routage, choisissez Non et terminez la configuration de votre projet. Maintenant, installons bootstrap pour ne pas avoir à styliser nous-mêmes le composant Navbar.

 npm install bootstrap

Après cela, ouvrez votre fichier angular.json et assurez-vous que les styles sont définis comme ceci :

"styles" : [
"node_modules/bootstrap/dist/css/bootstrap.min[1945]. ”,
"src/styles.css"
]

Création de composants

Nous souhaitons maintenant générer les composants about et contact.

ng generate component about
ng générer un contact de composant

Vous pouvez voir que les fichiers ont été créés et que le fichier du module d'application est mis à jour. Dans le fichier app component.html, remplacez le contenu par le bloc de code ci-dessous :

<ul class="nav justifier-content-center" >
  <li class="nav-item">[43]<196590]>[43]<196590 ]a class="nav-link active" aria-current="page"  href="/">Accueil</a </li>
  <li class="nav-item">[49]>[49]>[49] <a class="nav-link" href="/environ/environ/environ ">À propos</a[19659036]>
  </li>
  <li class="élément de navigation"[19459] 19659036]>
    <une classe="nav-link" href=[39659035]=
href=[39659035]=
 ]/contact">Contact</a>
  </li>
</ul>
Il s'agit d'une liste HTML avec trois éléments de liste : Accueil, À propos et Contact. C'est ce que nous voulons connecter au routeur angulaire afin de pouvoir proposer différentes vues pour chaque nouvelle page vers laquelle nous naviguons.
 Affichage du contenu
 Pour afficher le contenu d'un composant enfant, vous devez indiquer à Angular où exactement dans le modèle que vous voulez que l'affichage soit. Dans le fichier app component.html, ajoutez ces nouvelles lignes :
<div class="container">[19659054]
<ul class="nav justifier-content-center">
  <li[39 ]class="nav-item">
    <a class="0[149036]"0 lien de navigation actif" aria-current="page" href="0 ]/">Accueil</a>
  </li>
  <[19459]<[19459] li class="nav-item">
    <a class"690 lien de navigation" href="/à propos de">à propos de[1965] a>
  </li>
  <li classe[1 9659035]="élément de navigation">
    <a classe=""" " href="/contacter">Contacter</[4]a ]>
  </li>
</ul>
<app-about></app-about>
<app-contact></app-contact>
</div>
 Maintenant, lorsque vous enregistrez votre travail, exécutez le serveur de développement et ouvrez le navigateur sur localhost : 4200. Vous devriez voir ceci :
Configuration du routeur
Les itinéraires sont toujours définis dans le module d'application. Ouvrez le fichier du module d'application et remplacez le contenu par le bloc de code ci-dessous :
import { BrowserModule } from '@angular/platform-browser' ; 
import { NgModule } from '@angular/core' ;
import { RouterModule[149,590] Routes } de '@angular/router';
import { AppComponent } de[1965appcomponent';
import { AboutComponent } from './about/about.component';
import[1965902]{ ContactComponent } from './contact/contact.component';
const routes : Routes =  [
  {chemin :'à propos de', composant : À propos du composant},
  {chemin :'contact', composant :Composant de contact[24]Composant de contact[24] 19659222]];
@NgModule({
  déclarations : [
    Composant d'application,
    À propos du composant,
    Composant de contact
  ],
  importations : [
    Module de navigation,
    Module de routeur.pourRoot(routes)
  ],
  fournisseurs : [],
  bootstrap : [AppComponent]
})
export class AppModule { }{ }
Ici, nous avons apporté trois modifications : nous avons d'abord importé le module de routage d'Angular, puis nous avons créé les routes dans un tableau, et enfin nous l'avons déclaré en l'ajoutant aux importations ci-dessous.
 Voici comment configurer des itinéraires dans Angular. Vous pouvez définir les navigations et toutes les vues exactement comme vous le souhaitez ici.
Utilisation de Router Outlet
Si vous enregistrez votre projet à ce stade, vous verrez que rien n'a vraiment changé dans les vues que vous servez. Ceci parce que nous avons toujours app-about et app-contact affichant le contenu de leur composant parent.
 Pour changer cela, Angular fournit la prise de routeur à utiliser dans le modèle. Il dit essentiellement à Angular de vérifier les itinéraires définis et de servir les vues uniquement selon ces définitions. 19659036]>
 <ul class="nav justifier-content-center">
 <li[39 ]class="nav-item">
 <a class="0[149036]"0 lien de navigation actif" aria-current="page" href="0 ]/">Accueil</a>
 </li>
 <[19459]<[19459] li class="nav-item">
 <a class"690 lien de navigation" href="/à propos de">à propos de[1965] a>
 </li>
 <li classe[1 9659035]="élément de navigation">
 <a classe=""" " href="/contacter">Contacter</[4]a ]>
 </li>
 </ul>
 <routeur-prise></routeur-prise>
 </div>
 
Si vous enregistrez le projet, vous verrez que tout fonctionne comme prévu.
Conclusion
Ceci a été une introduction rapide au routage dans Angular. Nous avons appris à quel point la navigation est importante et comment Angular la gère avec le routage. Nous avons vu comment mettre en place un routage d'un composant à un autre facilement grâce au module routeur. Bon piratage !