Mettre en place un routage avec plusieurs pages - Découvrir angular–Mon premier projet

Nous souhaitons mettre en place un site avec plusieurs pages. En effet, il nous faut pouvoir consulter chaque clone, pour avoir le détail de leur état de santé, de leur fatigue, …

Or, actuellement, nous n’avons qu’une seule page : celle qui liste les clones.

Comment réussir à naviguer d’une page à l’autre ? Comment créer de nouvelles pages ?

 

A priori il s’agit d’avoir des composants pour gérer les routes ?

 

Première étape : ajout d’un nouveau composant fils, du composant AppComponent

more-detail-pokemon.component.ts :

class MoreDetailCloneComponent

 

Classe que nous allons importer, et référencer dans le AppModule, pour être reconnue par Angular.

import {MoreDetailCloneComponent} from « ./more-detail-clone.component »;

 

@NgModule({

imports: [

BrowserModule

],

declarations: [

AppComponent,

MoreDetailCloneComponent,

HighlightDirective

],

bootstrap: [

AppComponent//moduleracineaudémarrage

]

})

export class AppModule {

}

 

Pensons tout de suite à ajouter à notre composant une Vue :

@Component({

selector: « detail-clone »,

templateUrl: « ./app/more-detail-clone.component.html »

})

export class MoreDetailCloneComponent implements OnInit{

ngOnInit(): void {

throw new Error(« Method not implemented. »);

}

}

 

Pour pouvoir gérer les routes, et utiliser les paramètres de la route, nous avons besoin d’importer de nouveaux éléments :

ActivateRoute, Router, et Params.

import { Router, ActivatedRoute, Params} from « @angular/router »;

 

Ainsi, dans ce nouveau composant, nous allons pouvoir agir de deux façons :

1. Pouvoir récupérer l’id du clone, passé en paramètre de l’url (par exemple : /clone/2)
2. Pouvoir retourner à la liste

 

Par contre, il vous faudra les récupérer depuis le constructeur :

constructor(private _route: ActivatedRoute, private _router: Router) {

}

Ici, nous récupérer deux variables, qui ont été injectées depuis le AppModule.

Grâce au private nous en profitons pour les déclarer attributs de notre classe.

 

Récupérer l’id en paramètre de l’url

Pour récupérer l’id dans l’url, et être sûr de le récupérer, nous appelons les params, avec un snapshot (forcer la récupération) de l’objet ActivatedRoute.

+this._route.snapshot.params[« id »]

 

Retourner à la page de listing

Enfin, grâce au Router, nous allons pouvoir naviguer vers la route (qui aura été auparavant définie dans AppModule) de listing des Clones.

goBack() {

this._router.navigate([« ./clones »]);

}

NOTE: vous devez toujours retourner un tableau, dans le navigate.

 

Il nous restera, dans la Vue, à ajouter un bouton appelant cette méthode :

<button (click)= »goBack »>Retour à la liste des clones</button>

 

Aller vers la page de détail depuis le composant de listing des clones

Actuellement, nous avons :

• Un AppComponent
• Un MoreDetailCloneComponent : pour afficher les détails d’un Clone.

 

Je vous invite à créer un CloneListComponent qui deviendra un composant dédié à l’affichage des clones.
Ainsi, tout le code qui a été mis dans AppComponent et dans le fichier app.component.html devra être déporté dans le CloneListComponent et le clone-list.component.html.

 

Gérer le clic vers un clone

Pour rediriger vers les détails d’un clone, nous devons mettre en place une méthode qui va permettre de nous rediriger vers le bon Clone, donc vers le Composant MoreDetailComponent, en lui passant l’identifiant du clone sélectionné.

 

Ce qui nous donne :

selectOne(clone: Clone) {

console.log(‘Hey ‘ + (clone != null ? clone.name : « empty »));

let url = [« /clone », clone.id];

this._router.navigate(url);

}

 

Le tableau contient deux paramètres : l’url définie dans le moteur de route d’Angular, et l’id du clone. C’est la méthode navigate qui va s’occuper de faire la bonne redirection avec la bonne url.

 

La balise Router-Outlet

La balise <router-outlet></router-outlet> va être déposée maintenant dans le app.component.html, puisque le composant AppComponent n’a plus le rôle d’afficheur des clones, mais bien d’organiseur des sous composants : Le listing, et le Detail d’un clone.

 

Cette balise permet d’injecter le bon template (la bonne Vue) directement là où est la balise.

 

Important : base href

Pour que tout fonctionne bien, et que les urls soient bien construites :

vous devez ajouter <base href= »/ »> dans le html initial (dans index.html), dans le head.

 

Gestion des routes : on crée un module dédié

Pour gérer toutes les urls du site : créons un module ManageRouteModule

 

Mais pourquoi s’embêter à tout créer : il existe dans Visual Code un snippet (extrait de code) qui fait le boulot pour nous : ng-router-appmodule (avec l’extension Angular installée, bien entendu) !

Et ca nous génère presque tout bien :

 

import { NgModule } from ‘@angular/core’;

import { RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [

{ path:  », component: HomeComponent },

{ path: ‘path’, component: FeatureComponent },

{ path: ‘**’, component: PageNotFoundComponent },

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {}

 

A nous d’adapter les routes, avec les composants que l’on a !

 

NOTE: le exports ici est extrêmement important, sans lui, les autres modules ne peuvent pas le connaître !

NOTE: RouterModule.forRoot(), permet d’attribuer au RouterModule (méthode statique) une liste de routes (celles que l’on configurées au-dessus). De base, le RouterModule n’a pas de routes !

 

Bien penser à importer et déclarer notre module de route dans le Module parent

Une fois créé, le AppModule, le module parent, doit connaître et utiliser le Module de routes que l’on a créé.

Nous devons donc l’importer, puis le déclarer.

import {RouteConfigModule} from ‘./route-config/route-config.module’;

 

@NgModule({

imports: [

BrowserModule,

RouteConfigModule

],

declarations: [

AppComponent,

MoreDetailCloneComponent,

HighlightDirective,

CloneListComponent

],

bootstrap: [

AppComponent//moduleracineaudémarrage

]

})

export class AppModule {

}

 

NOTE: les modules s’importent, les composants se déclarent.

 

And voila :

 

 

Créer des liens avec gestion des routes par Angular

Ah avant de quitter la lecture, vous savez comment écrite un lien a href qui gère tout seul la bonne url ?

 

<a [routerLink]=”[‘clones’]”>Retour pages accueil</a>

Enfin rediriger toutes les urls non reconnues par le moteur de route

Vous pouvez, en créant un nouveau Composant NotFoundExceptionComponent dédié, rediriger les urls non pris en charge vers une page dédiée.

Pour ce faire, très important : mettez en dernier dans la collection de route :