Introduction
Angular les applications sont très courantes de nos jours. Elles sont construites sur le concept de Single Page Applications (SPA). Dans ces applications, le routage à travers les pages web est différent des sites web traditionnels car des composants sont utilisés. Dans Angular, vous devez utiliser RouterLink pour la navigation afin de s'orienter dans l'application. RouterLink est une directive, et elle fournit les méthodes Router.navigate et Router.navigateByURL pour naviguer à travers les classes de composants.
Dans ce tutoriel, nous allons examiner RouterLink, Router.navigate, et Router.navigateByURL ainsi que des exemples.
RouterLink
En HTML, un lien est normalement inséré à l'aide d'une balise d'ancrage <a> comme ci-dessous :
|
1 2 3 |
<a href="/sample"> Exemple de lien HTML. </a> |
Cet exemple de lien dirigera l'utilisateur vers la page /sample. Cependant, comme mentionné ci-dessus, une application monopage (SPA) n'a pas de pages différentes vers lesquelles lier. Au lieu de cela, elle a différentes vues ou composants à afficher à l'utilisateur.
Si vous devez permettre à un utilisateur de naviguer et de changer de vue, vous devrez utiliser la directive RouterLink au lieu de href:
|
1 2 3 |
<a routerLink="/users/example"> Lien qui utilise une chaîne de caractères. </a> |
Cet exemple RouterLink mènera l'utilisateur au composant situé à /users/example. Les différents segments d'URL peuvent également être passés dans un tableau comme dans l'exemple suivant :
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Un exemple d' un lien avec un tableau. </a> |
Ces deux exemples sont formatés d'une manière différente, mais mèneront toujours au même composant situé à /users/example.
-
Chemin relatif
Le RouterLink permet de spécifier des URL relatives. Nous pouvons utiliser ../ pour remonter vers les niveaux supérieurs de navigation. Voici comment nous pouvons y parvenir :
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Lien qui remonte d'un niveau. </a> |
Dans l'exemple ci-dessus, si l'utilisateur est à /users/posts, la navigation mènera l'utilisateur à /posts/parent. Vous pouvez également spécifier les URL de manière relative en utilisant ./, ../, ou même sans barre oblique de début si nécessaire.
-
Paramètres
Il peut y avoir des scénarios où vous devez transmettre des données entre les routes. Un exemple simple est lorsque l'utilisateur remplit le formulaire et que vous l'amenez à la partie suivante du formulaire pour plus de détails.
Pour passer les paramètres, un objet encapsulant les données est transmis dans la liste des segments d'URL :
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Lien avec paramètre. </a> |
Ci-dessus, le Router naviguera vers /users;display=sample/xyz.
-
Sorties nommées
Les sorties de routeur nommées sont simplement des sorties de routeur avec des noms. Regardons le code pour cela :
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Lien avec une sortie latérale. </a> |
Dans cet exemple, le segment xyz sera placé dans la sortie nommée side. Nous pouvons également spécifier plusieurs sorties nommées comme ci-dessous :
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Lien avec la première et la deuxième sortie. </a> |
Cela remplacera le segment first par abc et le segment second est remplacé par xyz.
Router
Dans Angular, le Router la classe est utilisée pour définir les routes et y naviguer. Ceci est réalisé par deux méthodes : Router.navigate et Router.navigateByUrl. Ces deux méthodes renvoient une promesse. Cette promesse peut avoir trois valeurs : true, false, ou null.
-
La valeur est true lorsque la navigation réussit.
-
La valeur est null lorsqu'il n'y a pas de navigation.
-
Et false si pour une raison quelconque la navigation échoue.
Si vous souhaitez que ces méthodes soient disponibles dans votre application, vous devez d'abord importer la classe Router dans la classe de votre composant :
|
1 |
import { Router } from '@angular/router'; |
Ensuite, vous devez injecter ce Router dans le constructeur pour les dépendances :
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Avec cette configuration, vous êtes prêt à utiliser les méthodes Router.navigate et Router.navigateByUrl dans votre application.
Router.navigate
La méthode Router.navigate accepte un tableau de segments d'URL. Regardons un exemple basique de code Router.navigate :
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Enfin, regardons Router.navigateByUrl. Cette méthode est similaire à Router.navigate mais au lieu d'accepter des segments d'URL, elle accepte une chaîne de caractères qui spécifie l'URL. Cette navigation doit être absolue et doit avoir / à son début :
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Le code ci-dessus dirigera l'utilisateur vers la page /users;all=true.
Conclusion
Dans ce tutoriel, nous avons vu comment naviguer dans les applications Angular à l'aide de RouterLink. Le routage dans les applications Angular est un peu différent de celui des applications web traditionnelles car elles sont de type Single-Page. Connaître RouterLink et ses fonctions peut aider les développeurs à créer un routage robuste.
Les applications Angular utilisent Node.js comme environnement d'exécution. Si vous souhaitez en savoir plus sur Node.js et sur la manière de déployer des applications Node.js, vous pouvez consulter les tutoriels suivants :
- Comment installer Node.js sur Ubuntu 18.04
- Configuration d'applications Node.js : comment effectuer des tâches de production sur Ubuntu 20.04 avec Node.js
- Comment déployer une application Node.js (Express.js) avec Docker sur Ubuntu 20.04
Bon développement !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.