Angular7 - Routage

Le routage signifie essentiellement naviguer entre les pages. Vous avez vu de nombreux sites avec des liens qui vous dirigent vers une nouvelle page. Ceci peut être réalisé en utilisant le routage. Ici, les pages auxquelles nous nous référons seront sous forme de composants. Nous avons déjà vu comment créer un composant. Créons maintenant un composant et voyons comment utiliser le routage avec lui.

Lors de la configuration du projet, nous avons déjà inclus le module de routage et le même est disponible dans app.module.ts comme indiqué ci-dessous -

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule est ajouté comme indiqué ci-dessus et inclus dans le tableau des importations.

Détails du fichier de app-routing.module sont donnés ci-dessous -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

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

Ici, il faut noter que ce fichier est généré par défaut lorsque le routage est ajouté lors de la configuration du projet. S'ils ne sont pas ajoutés, les fichiers ci-dessus doivent être ajoutés manuellement.

Donc, dans le fichier ci-dessus, nous avons importé des Routes et RouterModule depuis @ angular / router.

Il y a un const routesdéfini qui est de type Routes. C'est un tableau qui contient toutes les routes dont nous avons besoin dans notre projet.

Les routes const sont données au RouterModule comme indiqué dans @NgModule. Pour afficher les détails du routage à l'utilisateur, nous devons ajouter la directive <router-outlet> là où nous voulons que la vue soit affichée.

Le même est ajouté dans app.component.html comme indiqué ci-dessous -

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

Créons maintenant 2 composants appelés Home et Contact Us et naviguez entre eux en utilisant le routage.

Accueil des composants

Tout d'abord, nous discuterons de la maison. Voici la syntaxe de Component Home -

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

Composant Contactez-nous

Voici la syntaxe pour Composant Contactez-nous -

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

Nous en avons terminé avec la création de composants chez nous et contactez-nous. Vous trouverez ci-dessous les détails des composants dans app.module.ts -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Maintenant, ajoutons les détails des itinéraires dans app-routing.module.ts comme indiqué ci-dessous -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

Le tableau routes contient les détails du composant avec le chemin et le composant. Le composant requis est importé comme indiqué ci-dessus.

Ici, nous devons noter que les composants dont nous avons besoin pour le routage sont importés dans app.module.ts et également dans app-routing.module.ts. Importons-les en un seul endroit, c'est-à-dire dans app-routing.module.ts.

Nous allons donc créer un tableau de composants à utiliser pour le routage et exporter le tableau dans app-routing.module.ts et l'importer à nouveau dans app.module.ts. Nous avons donc tous les composants à utiliser pour le routage dans app-routing.module.ts.

Voici comment nous l'avons fait app-routing.module.ts -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

Le tableau de composants, c'est-à-dire RoutingComponent, est importé dans app.module.ts comme suit -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe,
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Nous en avons donc terminé avec la définition des itinéraires. Nous devons afficher la même chose à l'utilisateur, alors ajoutons deux boutons, Accueil et Contactez-nous dans app.component.html et en cliquant sur les boutons respectifs, il affichera la vue du composant à l'intérieur de la directive <router-outlet> que nous ont ajouté dans add.component.html.

Créez un bouton dans app.component.html et indiquez le chemin des routes créées.

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

Dans .html, nous avons ajouté des liens d'ancrage, Accueil et Contactez-nous et utilisé routerLink pour donner le chemin vers les routes que nous avons créées dans app-routing.module.ts.

Testons maintenant la même chose dans le navigateur -

C'est ainsi que nous l'obtenons dans le navigateur. Ajoutons du style pour que les liens soient bons.

Nous avons ajouté le css suivant dans app.component.css -

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

C'est l'affichage des liens dans le navigateur -

Cliquez sur le lien Accueil, pour voir les détails des composants de la maison comme indiqué ci-dessous -

Cliquez sur Contactez-nous, pour voir les détails de ses composants comme indiqué ci-dessous -

Lorsque vous cliquez sur le lien, vous verrez également l'URL de la page changer dans la barre d'adresse. Il ajoute les détails du chemin à la fin de la page, comme indiqué dans la capture d'écran ci-dessus.

↰ Previous page Next page ↱

Angular7 - Routage

Accueil des composants

Composant Contactez-nous

Tutoriel Angular7