Jalon 2 : Module de routage

Dans la configuration initiale de l'itinéraire, vous avez fourni une configuration simple avec deux itinéraires utilisés pour configurer l'application pour l'acheminement. C'est parfaitement bien pour un routage simple. Au fur et à mesure que l'application grandit et que vous utilisez davantage de Routerfonctionnalités, telles que les gardes, les résolveurs et le routage enfant, vous souhaiterez naturellement refactoriser la configuration du routage dans son propre fichier. Nous vous recommandons de déplacer les informations de routage dans un module spécifique appelé module de routage.

Le module de routage a plusieurs caractéristiques :

• Sépare les problèmes d'acheminement des autres problèmes liés aux applications.
• Fournit un module à remplacer ou à supprimer lors du test de l'application.
• Fournit un emplacement bien connu pour les fournisseurs de services de routage, notamment les gardes et les résolveurs.
• Ne déclare pas de composants.

Intégrez le routage à votre application

L'exemple d'application de routage n'inclut pas le routage par défaut. Lorsque vous utilisez l' interface de ligne de commande angulaire pour créer un projet qui utilisera le routage, définissez l' --routingoption pour le projet ou l'application et pour chaque NgModule. Lorsque vous créez ou initialisez un nouveau projet (à l'aide de la ng newcommande CLI ) ou une nouvelle application (à l'aide de la ng generate appcommande), spécifiez l' --routingoption. Cela indique à la CLI d'inclure le @angular/routerpackage npm et de créer un fichier nommé app-routing.module.ts. Vous pouvez ensuite utiliser le routage dans n'importe quel NgModule que vous ajoutez au projet ou à l'application.

Par exemple, la commande suivante génère un NgModule pouvant utiliser le routage.

Cela crée un fichier séparé nommé my-module-routing.module.tspour stocker les itinéraires du NgModule. Le fichier comprend un Routesobjet vide que vous pouvez remplir avec des itinéraires vers différents composants et NgModules.

Refactoriser la configuration de routage dans un module de routage

Créez un AppRoutingmodule dans le /appdossier pour contenir la configuration de routage.

Importez le CrisisListComponent, HeroListComponentet les PageNotFoundComponentsymboles comme vous l'avez fait dans le fichier app.module.ts. Déplacez ensuite les Routerimportations et la configuration de routage, y compris RouterModule.forRoot, dans ce module de routage.

Ré-exportez l'angulaire RouterModuleen l'ajoutant au exportstableau de modules. En réexportant le RouterModuleici, les composants déclarés dans AppModuleauront accès aux directives de routeur telles que RouterLinket RouterOutlet.

Après ces étapes, le fichier devrait ressembler à ceci.

src/app/app-routing.module.ts

Ensuite, mettez à jour le app.module.tsfichier RouterModule.forRooten le supprimant du importstableau.

src/app/app.module.ts

Plus loin dans ce guide, vous allez créer plusieurs modules de routage et découvrir que vous devez importer ces modules de routage dans le bon ordre .

L'application continue de fonctionner de la même manière et vous pouvez l'utiliser AppRoutingModulecomme emplacement central pour conserver la configuration de routage future.

Avez-vous besoin d'un module de routage ?

Le module de routage remplace la configuration de routage dans le module racine ou fonctionnel. Soit configurer des routes dans le module de routage ou dans le module lui - même , mais pas dans les deux.

Le module de routage est un choix de conception dont la valeur est plus évidente lorsque la configuration est complexe et comprend des services spécialisés de garde et de résolution. Cela peut sembler excessif lorsque la configuration actuelle est extrêmement simple.

Certains développeurs ignorent le module de routage (par exemple, AppRoutingModule) lorsque la configuration est simple et fusionnent la configuration de routage directement dans le module compagnon (par exemple, AppModule).

Choisissez un modèle ou l'autre et suivez ce modèle de manière cohérente.

La plupart des développeurs devraient toujours implémenter un module de routage dans un souci de cohérence. Il garde le code propre lorsque la configuration devient complexe. Cela facilite le test du module de fonctionnalités. Son existence attire l'attention sur le fait qu'un module est routé. C'est là que les développeurs s'attendent à trouver et à développer la configuration de routage.