Utilisation du routeur dans Angular 12 pour parcourir les vues

La création d'applications à page unique (SPA) est amusant, en particulier lorsque vous débutez avec Angular, et dans cet article, vous apprendrez l’une des façons dont Angular a rendu cela très facile à réaliser avec un minimum d’efforts.

Prérequis

Pour pouvoir suivre la démonstration de cet article, vous devriez avoir:

• Un environnement de développement intégré (IDE) 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 Node)
• Angular CLI version 8.0 ou supérieure
• Dernière version d'Angular (version 12):

 version ng

Confirmez que vous utilisez la version 12, et mettez à jour à 12 si vous ne l'êtes pas.

D'autres choses qui vous seront utiles sont:

• Connaissance pratique du framework Angular à un niveau débutant

] Naviguer entre les vues?

L'une des choses étonnantes à propos de la création de SPA (applications à une seule page) est la possibilité d'y avoir plusieurs vues. L'utilisation d'Angular rend cela très facile car vous pouvez afficher dynamiquement plusieurs vues dans un composant grâce aux outils de navigation. Vous pouvez passer d'une page d'accueil à une page «À propos» à une page «Contactez-nous» dans un seul composant.

Pourquoi le routage est important

Imaginez un scénario où vous passez d'une vue à une autre dans votre SPA mais l'URL ne change pas du tout. Comme si vous cliquez sur le bouton «À propos de nous» et que la page apparaît dans le DOM, mais l'URL indique toujours «newapp.com» au lieu de «newapp.com/abouttreet». La première est la suivante: Comment pouvez-vous ajouter un signet à la vue particulière, en voyant que les signets enregistrent des URL et non des vues d'applications? D'autres défis incluent le fonctionnement du concept d'actualisation d'une page puisque l'URL est fondamentalement statique et la façon dont vous partagez même un lien avec d'autres personnes.

Le routage garantit que l'URL correspond à la vue affichée afin que vous puissiez facilement séparer les vues , maintenez l'état et ayez même des expériences Web intuitives.

Qu'est-ce que le routeur angulaire?

Le routeur angulaire est un routeur JavaScript construit et maintenu par l'équipe angulaire. Il dispose d'un package de routage complet qui vous permet de définir exactement la chaîne d'URL que vous souhaitez attribuer à une vue. Vous pouvez avoir plusieurs sorties de routeur, une correspondance de chemin et même des gardes de route. C'est une partie si importante d'Angular qui garantit que les SPA peuvent être construits facilement en utilisant le framework.

Ce que nous construisons

Nous allons créer une petite application de télévision musicale qui affiche deux vues lorsque vous cliquez sur les boutons qui connectez-les, comme indiqué ci-dessous:

Configuration

Pour commencez, ouvrez VS Code et dans le terminal, créez une nouvelle application angulaire avec la commande ci-dessous:

 ng new newap --routing

L'ajout de l'indicateur de routage crée automatiquement une nouvelle application Angular appelée newapp avec un routage pré-configuré prêt à l'emploi.

Maintenant, changez de répertoire. Accédez au dossier racine de l'application avec cette commande:

 cd newapp

Les deux composants

La prochaine chose à faire est de générer les nouveaux composants qui hébergeraient les deux vues que nous prévoyons d'alterner.

 ng generate component Artists -it -is
ng générer des enregistrements de composants -it -is

Ces deux commandes créent de nouveaux dossiers à l’intérieur du dossier d’application de la source, appelés Artistes et enregistrements, avec des styles et des modèles intégrés, tout comme Vue.js par défaut. La prochaine chose à faire est de configurer les routes en fonction de nos besoins.

Configuration des routes

Pour configurer le routeur, copiez le bloc de code ci-dessous dans votre fichier app-routing.module.ts:

 import [19659038] { NgModule }   from   '@ angular / core' ; 
 import   { Routes  RouterModule  ]}   de   '@ angular / router' ; 
 import   { ArtistsComponent }   from   './ Artists / Artists.component "; 
 import   { RecordsComponent }   from  " ./ records / records.component "; 
  const [19659058] routes :  Routes  =   [
   { path :  'Artists'  component :  ArtistsComponent } 
   { chemin :  'records' [19659041] composant :  RecordsComponent } 
] ; 
 @  NgModule  ( {
  importations :   [ RouterModule .  forRoot  ( routes ) ] 
  exportations :   [ RouterModule ] 
} ) 
 export   class   AppRoutingModule   { } 
 export [19659039] const  ArrayOfComponents  =   [ ArtistsComponent  RecordsComponent ] 

Premièrement, nous avons importé les deux composants; puis nous avons configuré les routes. Remarquez comment nous avons défini la chaîne d'URL que nous voulions en tant qu'artistes et enregistrements et les avons mis en correspondance avec les deux composants. Afin de ne pas continuer à importer les composants partout où nous pourrions avoir besoin, nous avons créé un tableau de composants à la place.

Pour enregistrer ce nouveau développement, ouvrez votre fichier de module d'application et copiez-le dans le bloc de code ci-dessous:

 import [19659038] { BrowserModule }   from   '@ angular / platform-browser' ; 
 import   { NgModule }   from   '@ angular / core' ; 
 import   { AppRoutingModule  ArrayOfComponents }   from   './ app-routing .module '; 
 import   { AppComponent }   from  ' ./ app.component '; 
@  NgModule  ( {
  déclarations :   [
    AppComponent 
    ArrayOfComponents
  ] 
  importations :   [
    BrowserModule 
    AppRoutingModule
  ] 
  fournisseurs :   [] 
  bootstrap :   [ AppComponent ] 
} ) 
 export   class   AppModule   { } 

Ici, nous avons enregistré le nouveau tableau de composants. Comme vous pouvez le voir, nous n'avions plus besoin d'importer les deux composants à l'intérieur du tableau. C'est un excellent moyen de maintenir correctement votre code.

Liens de routeur

La prochaine chose à faire est de créer le modèle d'application lui-même, pour refléter tout ce que nous avons fait. Le lien du routeur fait partie du routeur angulaire utilisé pour indiquer les liens – il est essentiel à l'intérieur du modèle lorsque vous souhaitez pointer vers une vue. Dans le fichier HTML du composant de l'application, remplacez le contenu par le bloc de code ci-dessous:

 < div   class  =  " car "   > 
 < div   style  = " text-align :  center ;  "  > 
   < h1 > 
     Ceci est votre téléviseur musical
   </  h1 > 
 </  div > 
 < nav   style  = " text-align [19659041]:  centre ;   " > 
   < bouton   routerLink  =  ' / artistes  ' >  Artists  </  button > 
   < button   routerLink  = '  / records  ' >  Records  </  button > 
 </  nav > 
 < router-outlet >   </  router-outlet > 
 </  div > 

Vous pouvez maintenant voir que nous avons dit au routeur de changer la vue du composant Artistes lorsque le bouton «Artistes» est cliqué, et de faire de même lorsque le bouton «Enregistrements» est cliqué.

Touches de finition

Pour ajouter du style à l'application afin qu'elle se démarque, ouvrez le fichier CSS du composant de l'application et copiez-y les règles suivantes:

 .car   {
     top :   50% ; 
     text-align :  center ; 
     border-radius :   25  px ; 
     border  ]:   2  px solide  # 73AD21 ; 
     padding :   20  px ; 
     width : [19659187] 600  px ; 
     hauteur :   250  px ; 
     marge gauche :   25% ; [19659185] margin-bottom :   15  px ; 
  } 
  
   button  {
     to p :   50% ; 
     text-align :  center ; 
     border-radius :   15  px ; 
     border :   2  px solid  # 73AD21 ; 
     width :  fit-content ; [19659185] marge :   20  px ; 
     padding :   20  px ; 
  } 

Enregistrez tous ces fichiers et exécutez l'application sur le serveur de développement avec:

 ng serve

Vous verrez qu'il fonctionne exactement comme il a été montré ci-dessus.

Conclusion

Nous venons de jeter un oeil au routeur angulaire et pourquoi il est important dans votre flux de travail, en particulier lors de la construction de SPA. Nous avons vu comment il est utilisé et comment nous pouvons facilement naviguer entre les vues avec. J'espère que vous intégrez des routeurs dans votre flux de travail à l'avenir. Bon piratage!