Liens de routeur et routage générique dans Angular

Jetons un autre regard sur le routage dans Angular : cette fois, comment vous pouvez utiliser le lien du routeur pour configurer des caractères génériques, afin que des URL inexistantes fassent apparaître une page 404 ou redirigent les utilisateurs vers une autre page.

Dans cet article, nous allons examinez plus de choses que vous pouvez faire avec le lien de routeur du routeur angulaire dans votre modèle. Cela fait suite au travail que nous avons effectué dans l'article précédent.

Avant de commencer

Ce message convient à tous les niveaux de développeurs frontaux qui utilisent Angular. pas assumé. Voici quelques prérequis que vous devriez avoir pour 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 (ce message utilise la version 12)

D'autres avantages incluent :

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

Qu'est-ce que le routage ?

Dans le dernier article, nous avons vu comment Angular facilite l'intégration de la navigation dans votre application via le module routeur. Nous avons également vu comment le routage peut être configuré facilement dans Angular. Maintenant que nous avons configuré le routage, nous pouvons faire quelques autres choses avec le module de routage. ) et une page générique pour guider les utilisateurs chaque fois qu'ils entrent une URL erronée. Nous allons continuer à partir du dernier article, alors téléchargez le fichier source d'ici dans votre machine.

Configuration

Ouvrez le nouveau fichier dans VS Code et dans le terminal, exécutez la commande ci-dessous :

installation npm

Cela garantit que tous les modules de nœud et les dépendances nécessaires au projet sont correctement installés. Votre dossier doit avoir un composant d'application avec deux composants enfants : à propos et contact. Le fichier app component.html devrait ressembler à ceci :

<div class="container">
< ul classe="nav justifier-content-center">
  <li classe[229 ]="nav-item">
    <a class="nav-link active " aria-current="page" href="[194590] ]">Accueil</a>
  </li>
  <li[21] class="nav-item">
    <a class="""" -link" href=" /à propos">À propos de</a>
  </li>
  <[19459] li class="nav-item">
    <a class=[39]"690 lien de navigation" href="/contact">Contact[047]</1965 a>
  </li>
</ul>
<routeur-prise>[469 ]</routeur-sortie>
</div>

Vous pouvez enregistrer votre travail et exécuter le serveur de développement pour voir que tout fonctionne bien dans le navigateur sur localhost : 4200.

ng serve

Applications à page unique (SPA)

Une application Web à page unique est une application qui n'a pas besoin d'être rechargée lorsque vous interagissez avec elle et naviguez d'une vue à l'autre. Elle affiche plutôt dynamiquement les vues demandées. La première chose que vous remarquez avec l'application que nous avons maintenant est que chaque nouveau clic recharge l'intégralité de l'application, donc ce n'est pas un SPA.

Les liens de routeur sont des propriétés d'élément fournies par le module de routeur qui fait qu'un lien initie la navigation. Vous pouvez l'assimiler à href pour les balises d'ancrage, donc dans notre cas, nous remplaçons les balises href par des liens de routeur. ]">
<ul classe="nav justifier-content-center">[19659030]<li class="nav-item">
<[21296595]a[1965]a[1965]a[1965] ]="nav-link active" aria-current="page"[1965[9021]href 19659022]="/">Accueil</a>
</[4]li[1945900]>
<li classe="élément de navigation">
<[214590659a[194]0 classe="lien de navigation" routerLink="/environ">À propos</a[196>59023]0 </li>
<li classe="élément de navigation">

>>> <a class="nav-link" routerLink="/5926/5926/5926contact ">Contactez</a>
  </li>
</ul[1965902] >
<prise-routeur></prise-routeur>
</div>

Wildcards

Maintenant que nous avons configuré les routes, que se passe-t-il si un utilisateur saisit la mauvaise URL ? Une bonne application doit toujours gérer avec élégance des scénarios comme celui-ci, où un utilisateur entre une URL qui n'existe pas. Angular vous aide à le faire facilement. Vous pouvez configurer une route générique à cet effet.

Une fois que vous avez configuré une route générique, il indique simplement au routeur de sélectionner cette route chaque fois qu'une URL demandée ne correspond pas aux routes spécifiées dans le module d'application. La syntaxe pour définir une route générique ressemble à ceci :

{ path : '**', component : Composant générique}

Voyons-le en action avec notre application. Générez un nouveau composant et appelez-le Page404.

ng génère le composant page404

Maintenant que vous avez créé votre composant générique, clarifions les choses. Ouvrez le fichier page404 component.html et modifiez le contenu du paragraphe à l'intérieur du fichier html de "page404 fonctionne" à "Cette URL que vous venez de saisir est incorrecte, veuillez réessayer". ]Cette URL que vous venez de saisir est incorrecte, veuillez réessayer.</p>

Ouvrez le fichier du module d'application et copiez le bloc de code ci-dessous :

import { BrowserModule } from '@angular/platform-browser'[19659023] ;
import { NgModule } from '@angular/core' ;
import { RouterModule , Routes } from '@angular/router';
import { AppComponent } from from  ./app.component';
import { AboutComponent } from './about/about.component';
import  { ContactComponent } from './contact/contact.component';
import { Page404Component [1945}1926] ]from './page404/page404.component';
const routes : Routes = [
  {path :'about', component : AboutComponent[194591365]}09 ],
  {chemin :'contact', composant : ContactComponent},{19659227] ]chemin :'**', composant : Page404Composant}
] ;
@NgModule({
  déclarations : [
    Composant d'application,
    À propos du composant,
    Composant de contact,
    Page404Composant
  ],
  importations : [
    Module de navigation,
    Module de routeur.pourRoot(routes)
  ],
  fournisseurs : [],
  bootstrap : [AppComponent]
})
export class AppModule 0{ }{ }

Maintenant, si vous essayez de saisir une URL erronée, voici ce que vous obtenez :

Redirection des routes

En plus de créer un composant générique séparé comme nous l'avons fait, vous pouvez simplement rediriger la route pour aller vers une autre route comme la page d'accueil ou la page de contact chaque fois qu'un utilisateur entre une URL incorrecte .

import { BrowserModule } from '@angular/platform-browser' ;
import {[1945g9004] ]} de '@angular/core' ;
importer { Module de routeur, Routes } de  '@angular/routeur';
import { AppComponent } from './app.component';
import[916591 ]{ À propos du composant } de './about/about.component';
import { ContactComponent } de[19659193]' /contact/contact.component';
import { Page404Composant } from './page404/page404.component';
 const routes : Routes = [
  {path :'about', composant[269] : AboutComponent},
  {path :'contact', component :Component },
  { chemin : '**', redirectTo : '/contact'}
 ];
@NgModule({
  déclarations : [
    Composant d'application,
    À propos du composant,
    Composant de contact,
    Page404Composant
  ],
  importations : [
    Module de navigation,
    Module de routeur.pourRoot(routes)
  ],
  fournisseurs : [],
  bootstrap : [AppComponent]
})
export class AppModule 0{ }{ }

Maintenant, lorsque vous enregistrez les fichiers, vous verrez que chaque URL incorrecte redirige vers la page de contact.

Conclusion

Dans cet article, nous avons examiné de plus près quelques éléments de routage qui rendent l'expérience de navigation encore plus mieux pour nos utilisateurs. Nous avons vu le lien du routeur et son utilisation, et nous avons également vu comment créer des routes génériques pour gérer avec élégance les utilisateurs qui saisissent des URL incorrectes.