Angulaire 2 - Routage

Le routage aide à diriger les utilisateurs vers différentes pages en fonction de l'option qu'ils choisissent sur la page principale. Par conséquent, en fonction de l'option choisie, le composant angulaire requis sera rendu à l'utilisateur.

Voyons les étapes nécessaires pour voir comment nous pouvons implémenter le routage dans une application Angular 2.

Step 1 - Ajoutez la balise de référence de base dans le fichier index.html.

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- Créez deux routes pour l'application. Pour cela, créez 2 fichiers appelésInventory.component.ts et product.component.ts

Step 3 - Placez le code suivant dans le fichier product.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - Placez le code suivant dans le fichier Inventory.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

Les deux composants ne font rien d'extraordinaire, ils affichent simplement les mots-clés en fonction du composant. Ainsi, pour le composant Inventaire, il affichera le mot clé Inventaire à l'utilisateur. Et pour le composant produits, il affichera le mot-clé produit à l'utilisateur.

Step 5 - Dans le fichier app.module.ts, ajoutez le code suivant -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

Les points suivants doivent être notés à propos du programme ci-dessus -

Les appRoutes contiennent 2 routes, l'une est le composant Appproduct et l'autre est le composant AppInventory.
Assurez-vous de déclarer les deux composants.
Le RouterModule.forRoot s'assure d'ajouter les routes à l'application.

Step 6 - Dans le fichier app.component.ts, ajoutez le code suivant.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

Le point suivant doit être noté à propos du programme ci-dessus -

<router-outlet> </router-outlet> est l'espace réservé pour rendre le composant en fonction de l'option choisie par l'utilisateur.

Maintenant, enregistrez tout le code et exécutez l'application en utilisant npm. Allez dans le navigateur, vous verrez la sortie suivante.

Maintenant, si vous cliquez sur le lien Inventaire, vous obtiendrez la sortie suivante.

Ajout d'une route d'erreur

Dans le routage, on peut également ajouter une route d'erreur. Cela peut se produire si l'utilisateur accède à une page qui n'existe pas dans l'application.

Voyons comment nous pouvons mettre en œuvre cela.

Step 1 - Ajoutez un composant PageNotFound en tant que NotFound.component.ts comme indiqué ci-dessous -

Step 2 - Ajoutez le code suivant au nouveau fichier.

import { Component } from '@angular/core';

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - Ajoutez le code suivant au fichier app.module.ts.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

Le point suivant doit être noté à propos du programme ci-dessus -

Nous avons maintenant une route supplémentaire appelée chemin: '**', composant: PageNotFoundComponent. Par conséquent, ** est pour toute route qui ne correspond pas à la route par défaut. Ils seront dirigés vers le composant PageNotFoundComponent.

Maintenant, enregistrez tout le code et exécutez l'application en utilisant npm. Accédez à votre navigateur et vous verrez la sortie suivante. Maintenant, lorsque vous accédez à un mauvais lien, vous obtiendrez le résultat suivant.