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 :
- Pouvoir récupérer l’id du clone, passé en paramètre de l’url (par exemple : /clone/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 :