Routing Angular
Dans une application à page unique SPA, vous modifiez ce que l'utilisateur voit en affichant ou
en masquant des parties de l'écran correspondant à des composants particuliers, plutôt qu'en
allant chercher une nouvelle page sur le serveur.
Pour gérer la navigation d'une vue à l'autre, on utilise le routeur Angular 'Router'. Le routeur
permet la navigation en interprétant l'URL du navigateur comme une instruction de changement
de vue. Pour utiliser le routeur Angular, une application doit avoir au moins deux composants
afin de pouvoir naviguer de l'un à l'autre.
1. Configuration basique des routes
La création des routes repose sur trois éléments fondamentaux.
1.1. Activer le routage dans l'application
Pour activer et configurer le routage dans une application Angular, il faut importer les routes
dans le fichier '[Link]' et ajoutez-les à la fonction provideRouter.
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
};
1.2. Définition des routes
Les routes de l'application sont définies dans le tableau routes du fichier '[Link]'.
Chaque route est un objet javascript contenant deux propriétés. La première définit le chemin
(url) de la route et la deuxième définit le composant à utiliser pour cet url.
const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
];
1.3. Ajout des routes dans l'application (liens)
Une fois on définit les routes, il faut prévoir dans l'application des liens permettant de naviguer
vers ces routes. Ces liens sont ajoutés avec l'attribut 'routerLink' dans la valeur correspond
au chemin (url) de la route.
Ensuite, il faut inclure dans le template la balise '<router-outlet></ router-outlet >'.
Cet élément indique à Angular de mettre à jour la vue de l'application avec le composant
correspondant à la route sélectionnée.
<nav>
<ul>
<li><a routerLink="/first-component">First Component</a></li>
<li><a routerLink="/second-component">Second Component</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
Il faut importer RouterLink et RouterOutlet au tableau des importations de composant
contenant les liens de navigation.
1.4. Ordre des routes
L'ordre des routes dans le tableau est important car le routeur utilise une stratégie de première
réponse gagnante lors de la recherche des routes, de sorte que les routes plus spécifiques doivent
être placés au-dessus des routes moins spécifiques.
Lister les routes avec un chemin statique en premier, suivi d'un chemin vide, qui correspond à
la route par défaut (racine). La route générique vient en dernier car il correspond à toutes les
URL et le routeur ne le sélectionne que si aucun autre itinéraire ne correspond au premier.
1.5. Route générique
Une application qui fonctionne bien doit gérer de manière élégante les cas où les utilisateurs
tentent de naviguer vers une partie de l'application qui n'existe pas. Pour ajouter cette
fonctionnalité à votre application, vous mettez en place une route générique. Le routeur
Angular sélectionne cette route chaque fois que l'URL demandée ne correspond à aucun chemin
du routeur.
Pour mettre en place une route générique, ajoutez le code suivant à votre définition de routes.
{ path : '**', component : PageNotFoundComponent }
Les deux astérisques, **, indiquent à Angular que cette définition de route est une route
générique. Pour la propriété component, vous pouvez définir n'importe quel composant de votre
application. Les choix courants incluent un composant PageNotFoundComponent spécifique à
l'application, que vous pouvez définir pour afficher une page 404 à vos utilisateurs, ou une
redirection vers le composant principal de votre application.
Une route générique est la dernière route car elle correspond à n'importe quelle URL.
1.6. Redirection
Pour mettre en place une redirection, configurez une route avec le chemin à partir duquel vous
voulez rediriger, le composant vers lequel vous voulez rediriger et une valeur pathMatch qui
indique au routeur comment faire correspondre l'URL.
const routes: Routes = [
………
{path: '', redirectTo: '/home-component', pathMatch: 'full'},
];
On peut aussi effectuer une redirection à partir de la classe 'ts' du composant en injectant le
service 'Router' et utiliser sa méthode navigate.
export class LoginComponent {
constructor(private router: Router, …) {}
………
login(){
// logique pour connecter un utilisateur
[Link](['home']);
}
}
1.7. Titre des pages
Chaque page de votre application doit avoir un titre unique afin de pouvoir être identifiée dans
l'historique du navigateur. Le routeur définit le titre du document à l'aide de la propriété
'title' dans la configuration de la route.
const routes: Routes = [
{ path: 'first-component',
component: FirstComponent ,
title : 'My First Page',
},
……………
];
2. Routes imbriquées
Au fur et à mesure que l'application se complexifie, il se peut qu'on souhaite créer des routes
relatives à un composant autre que le composant racine. Ces types de routes imbriquées sont
appelées routes enfants (Child routes). Cela signifie qu'on ajoute un deuxième <router-
outlet> au composant parent de ces routes enfants.
Une route enfant est comme n'importe quelle autre route, en ce sens qu'elle a besoin d'un chemin
et d'un composant. La seule différence est que les routes enfants sont placées dans un tableau
d'enfants à l'intérieur de la route parente.
const routes: Routes = [
{
path: 'first-component',
component: FirstComponent,
children: [
{ path: 'child-a', component: ChildAComponent },
{ path: 'child-b', component: ChildBComponent },
],
},
];
Il faut prévoir des liens permettant de naviguer vers ces routes enfants, et une balise <router-
outlet> dans le template du composant parent.
<h2>First Component</h2>
<nav>
<ul>
<li><a routerLink="child-a">Child A</a></li>
<li><a routerLink="child-b">Child B</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
3. Accès aux paramètres d'une route
Souvent, lorsqu'un utilisateur navigue dans l'application, on souhaite transmettre des
informations d'un composant à l'autre.
Par exemple, une application qui affiche une liste de produits dans ProductsListComponent.
Chaque article de la liste possède un identifiant unique. Pour afficher un produit, les utilisateurs
cliquent sur un bouton ou l'image du produit dans la liste, qui ouvre un autre composant
DisplayProductComponent en passant l'identifiant du produit comme paramètre de la route.
On souhaite que ce composant récupère l'identifiant du produit exprimé dans la route afin
d'afficher les bonnes informations à l'utilisateur.
On crée tout d'abord la route paramétrée dans le tableau des routes :
const routes: Routes = [
{ path: 'produits', component: ProductsListComponent},
{ path: 'produit/:id', component: DisplayProductComponent },
];
Il faut récupérer le paramètre 'id' dans le composant DisplayProductComponent :
export class DisplayProductComponent {
productid? : number;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
[Link]((params) => {
[Link] = Number([Link]('id'));
});
}
4. Chargement paresseux (Lazy Loading)
On peut configurer les routes pour qu'elles chargent les composants ou les modules
paresseusement, ce qui signifie qu'Angular ne charge les composants (loadComponent) ou les
modules (loadChildren) qu'en cas de besoin, plutôt que de charger tous les composants ou
modules au lancement de l'application.
Pour un chargement paresseux d'un composant (standalone) :
const routes: Routes = [
{
path: 'produits',
loadComponent: () =>
import('./products-list/[Link]')
.then((m) => m. ProductsListComponent
),
},
];
Pour un chargement paresseux d'un module :
const routes: Routes = [
{
path: users,
loadChildren: () =>
import('./users/[Link]')
.then((m) => m. UsersModule
),
},
];