Qu’est-ce qu’un routeur bootstrap ?
Le package `bootstrap` dans Angular implémente les capacités du routeur qui permettent la navigation entre les vues de l'application lorsque l'URL change. Les utilisateurs d'AngularJS trouveront le routage dans Angular très similaire au routeur AngularJS.
Cependant, une différence majeure est qu'Angular utilise des routes d'URL nommées plutôt que des routes de hachage. Cela signifie qu'au lieu d'utiliser un « # » dans une URL, Angular utilise un « / » pour désigner le début d'une route. Par exemple, voici un exemple d'URL pour le routeur Angular utilisant des routes nommées :
`https://www.example.com/home`
Cette URL mènerait à un composant appelé « home » qui existe dans l'application angulaire.
Démarrer avec le routeur angulaire
Pour démarrer avec le routeur Angular, vous devrez importer le `RouterModule` à partir du module `@angular/router`. Vous devrez ensuite utiliser la méthode `RouterModule.forRoot()` pour configurer les routes de votre application. La méthode `RouterModule.forRoot()` prend un tableau d'objets `Route`. Un objet `Route` a les propriétés suivantes :
- chemin : le modèle d'URL auquel cet itinéraire correspond.
- composant :Le composant que cette route doit charger lorsque l'URL correspond au chemin.
- enfants :Un tableau de routes enfants que cette route peut avoir.
- peutActiver :Un ensemble de gardes qui doivent être franchis avant que l'itinéraire puisse être chargé.
Voici un exemple de configuration simple d'un routeur angulaire :
```dactylographié
importer { RouterModule, Routes } depuis '@angular/router' ;
const routes :Routes =[
{ chemin :'home', composant :HomeComponent },
{ chemin :'à propos', composant :AboutComponent },
];
@NgModule({
importations :[RouterModule.forRoot(routes)],
exportations : [RouterModule]
})
classe d'exportation AppRoutingModule { }
```
Cette configuration définit deux routes, une pour le composant home et une pour le composant about. Lorsque l'URL correspond au chemin d'une route, le routeur chargera le composant associé.
Fonctionnalités supplémentaires du routeur angulaire
Le routeur Angular offre plusieurs fonctionnalités supplémentaires, notamment :
- Chargement paresseux :Le routeur angulaire peut être utilisé pour charger des composants paresseux, ce qui signifie qu'ils ne sont chargés que lorsqu'ils sont nécessaires. Cela peut améliorer les performances de votre application en réduisant le temps de chargement initial.
- Gardes :Les gardes sont des fonctions qui peuvent être utilisées pour empêcher le chargement d'un itinéraire. Cela peut être utile à des fins d'authentification, par exemple.
- Résolveurs :Les résolveurs sont des fonctions qui peuvent être utilisées pour récupérer des données avant le chargement d'une route. Cela peut être utile pour préextraire les données nécessaires au composant.
- Itinéraires enfants :Les routes enfants sont des routes qui peuvent être imbriquées dans d'autres routes. Cela peut être utile pour organiser votre candidature en différentes sections.
- Paramètres d'itinéraire :Les paramètres de route peuvent être utilisés pour transmettre des données entre les composants. Cela peut être utile pour transmettre des données à un composant chargé par une route.
- Paramètres de requête :les paramètres de requête peuvent être utilisés pour transmettre des données à une route. Cela peut être utile pour filtrer des données ou pour transmettre des données à un composant chargé par une route.
Pour plus d'informations sur le routeur Angular, veuillez vous référer à la documentation officielle.