Chapitre-3-Routage.pdf

Chapitre-3-Routage.pdf
Chapitre 3 Routage Angular Routing Ahlem ELHAJ Multimédia et Développement Web – 2ème année – Semestre 1 ISET de Sousse Développement Framework Coté Client - Angular
Introduction  Application Web Monopage (Single Web Application) ◼ Accessible via une page web unique, ◼ Pas de chargement de nouvelle page lors de la navigation, ◼ Contenu affiché dynamiquement en fonction des actions de l’utilisateur, ◼ Permet de fluidifier l’expérience de l’utilisateur.  Une SPA requiert un système de routage (routing),  Rôle du routing : permettre aux utilisateurs de garder leurs habitudes de navigation : ◼ utiliser l'historique de leur navigateur (e.g. boutons back et next), ◼ copier les liens, ◼ ajouter une vue à leurs favoris, ◼ ouvrir une vue dans une nouvelle fenêtre via le menu contextuel 2
Fonctionnement du routeur  Pour gérer la navigation entre les vues, Angular utilise un Routeur.  Pour assurer la navigation, le routeur interprète une adresse URL comme étant un ordre de changement de vue.  Pour charger une vue donnée, il faut charger le composant responsable de l’affichage de cette vue dans la page unique de l’application (index.html). ◼ La vue associée au composant racine est toujours chargée (pour toutes les URL). ◼ Les autres vues de l’application sont chargées sur demande.  Pour inclure un lien, le développeur doit faire appel au routeur (routerLink) à la place de <a href="adresse"> 3
Module principal de routage AppRoutingModule  Il est vivement recommandé d’utiliser des modules (NgModule) dédiés au routage au lieu de définir les routes dans les modules de fonctionnalités,  Pour générer le Module principal de routage (AppRoutingModule) à la création de l’application : ng new myApp --routing  Le développeur peut définir des routes dans ce module  Définition d’une route : ◼ {path : 'chemin', component : CompComponent} ◼ C’est une association entre un chemin (chaine de caractères représentant une portion (segment) d’adresse URL) et un composant Angular. 4
Exemple (1) Définition des routes : app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { Comp1Component } from './comp1/comp1.component'; import { Comp2Component } from './comp2/comp2.component'; const routes: Routes = [ {path : 'chemin1', component : Comp1Component}, {path :'chemin2', component : Comp2Component} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 5
Exemple (2) Chargement des composants : <router-outlet>  <router-outlet> : balise html utilisée pour mettre à jour la vue de l’application en chargeant le composant associé à la route sélectionnée :  Le composant AppComponent est toujours chargé dans la page de l’application : le sélecteur <app-root> de AppComponent figure dans le <body> de index.html  <router-outlet> est placée dans l’endroit dans lequel le routeur doit charger le reste des composants selon les URLs visitées. 6  <h1> Ceci est le contenu de appComponent</h1> <router-outlet></router-outlet>
Exemple (3) Vue initiale 7
Exemple (4) Chemin1 (comp1) 8
Exemple (5) Chemin2 (comp2) 9
Exemple (6) Chemins inexistants 10 URL inexistante (erronée) ➔ redirection vers la page initiale
Exemple (7) Chemins inexistants (2)  Dans le fichier : app-routing.module.ts ajouter une route :  '**’ : correspond à la route joker (toute URL correspond à la route joker).  Si une URL ne correspond à aucune des routes précédentes (chemin1 et chemin2), alors le composant PageNoteFoundComponent est chargé.  Problème : la page initiale correspond à la route joker : PageNotFoundComponent se charge initialement ! 11 const routes: Routes = [ {path : 'chemin1', component : Comp1Component}, {path :'chemin2', component : Comp2Component}, {path : '**', component : PageNotFoundComponent} ];
Exemple (8) Redirection page d’accueil  Dans le fichier : app-routing.module.ts ajouter une route :  Page d’accueil redirigée vers chemin1,  Les vues accessibles à travers chemin1 et chemin2 restent inchangées,  Les autres chemins (chemins erronés) permettent de charger PageNotFoundComponent,  Attention ! Très important : il faut que la route joker (**) soit la dernière (toute route placée après la route joker n’est pas accessible). 12 const routes: Routes = [ {path : 'chemin1', component : Comp1Component}, {path :'chemin2', component : Comp2Component}, {path :'', redirectTo : 'chemin1', pathMatch:'full'}, {path : '**', component : PageNotFoundComponent} ];
Exemple (9) Liens  routerLink : attribut html utilisé pour créer des liens dans les templates des composants vers des chemins définis par le routage (remplace href) 13  <h1> Ceci est le contenu de appComponent</h1> <nav> <ul> <li><a routerLink="chemin1">Lien vers cmp1</a></li> <li><a routerLink="chemin2">Lien vers cmp2</a></li> </ul> </nav> <router-outlet></router-outlet>
Routage modulaire  Il est conseillé de ne pas mettre toutes les routes dans le module de routage principal, mais dans les modules de routage additionnels associés aux modules de fonctionnalités.  Pour créer un module ‘mod1’ (Mod1Module) et un module de routage qui lui est associé (Mod1RoutingModule) : ng generate module mod1 --routing 14 //fichier : mod1-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; //Tableau à remplir par des routes @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class Mod1RoutingModule { }
Routage imbriqué (1) Nested routing - présentation  Objectif : rendre les routes qui chargent certains composants relatives à un composant autre que le composant racine AppComponent,  Notion de route fille (child route),  Exemple. On se propose d’établir la hiérarchie des URLs suivante: / (AppComponent) site (ClientComponent) home about (HomeComponent) (AboutComponent) Remarque. Sur le serveur de développement, ceci correspond aux adresses : http://localhost:4200/ http://localhost:4200/site http://localhost:4200/site/home http://localhost:4200/site/home 15
Routage imbriqué (2) Nested routing - définition de route imbriquée 16 const routes: Routes = [ { path: 'site', component: ClientComponent, children: [ { path: 'home', component: HomeComponent, }, { path: 'about', component: AboutComponent, }, ], }, ];
Routage imbriqué (3) Nested routing - template du parent 17 <h2>Composant client</h2> <nav><ul> <li><a routerLink="home">HOME</a></li> <li><a routerLink="about">ABOUT</a></li> </ul></nav> <router-outlet></router-outlet>  Il faut utiliser la balise <router-outlet>: ◼ dans le template de AppComponent, ◼ mais aussi dans le template du composant ayant des composants « fils » (relation père-fils établie à travers le routage).  Template client.component.html :  Par exemple, l’URL /site/about correspond au chargement de AppComponent, ClientComponent et AboutComponent.  Dans home.component.ts, lien vers /site/about : <a routerLink="../about">ABOUT</a>
Conclusion  Une application angular a un seul fichier index.html dans lequel l'application entière est chargée.  Le point d'entrée de l'application est le composant AppComponent.  Le template de AppComponent est utilisé pour afficher les parties fixes de l'application (par exemple une barre d'en- tête).  La balise <router-outlet> d’angular est utilisée pour afficher les vues associées à l’URL actuelle.  Il est possible de définir des routes imbriquées (hiérarchiques) grâce au nested routing. 18

Check these out next

Chapitre-3-Routage.pdf

Recomendados

Más contenido relacionado

Similar a Chapitre-3-Routage.pdf(8)

Más de BoubakerMedanas(7)

Último(20)

Chapitre-3-Routage.pdf