Mise en route

Commencez avec une version simple de l'application qui navigue entre deux vues vides.


Générez un exemple d'application pour suivre la procédure pas à pas.

Définir les itinéraires

Un routeur doit être configuré avec une liste de définitions de route.

Chaque définition est traduite en un objet Route qui a deux choses: a path, le segment de chemin d'URL pour cette route; et a component, le composant associé à cette route.

Le routeur utilise son registre de définitions lorsque l'URL du navigateur change ou lorsque le code de l'application demande au routeur de naviguer le long d'un chemin de route.

En termes plus simples, vous pourriez dire ceci du premier itinéraire:

• Lorsque l'URL de localisation du navigateur change pour correspondre au segment de chemin d'accès /crisis-center, le routeur active une instance de CrisisListComponentet affiche sa vue.
• Lorsque l'application demande la navigation vers le chemin /crisis-center, le routeur active une instance de CrisisListComponent, affiche sa vue et met à jour l'emplacement de l'adresse du navigateur et son historique avec l'URL de ce chemin.

La première configuration définit un tableau de deux itinéraires avec des chemins simples menant au CrisisListComponentet HeroListComponent. Générez les composants CrisisListet HeroList.
Remplacez le contenu de chaque composant par l'exemple HTML ci-dessous.

crisis-list.component.html

liste des héros.component.html

Enregistrer un routeur et des itinéraires

Pour utiliser le routeur, vous devez d'abord enregistrer le fichier à RouterModulepartir du @angular/routerpackage. Définissez un tableau d'itinéraires appRouteset transmettez-les à la méthode RouterModule.forRoot(). Il retourne un module contenant le Routerfournisseur de services configuré, ainsi que d'autres fournisseurs requis par la bibliothèque de routage. Une fois l'application démarrée, la Routernavigation initiale est effectuée en fonction de l'URL du navigateur actuel.

Remarque: La méthode RouterModule.forRoot est un modèle utilisé pour enregistrer les fournisseurs à l'échelle de l'application. Pour en savoir plus sur les fournisseurs d'applications, consultez le guide des services Singleton.
première configuration

L'ajout de configuré RouterModuleà AppModuleest suffisant pour des configurations de route simples. Au fur et à mesure que l'application grandit, vous souhaiterez refactoriser la configuration du routage dans un fichier séparé et créer un module de routage, un type spécial de Service Moduledédié au routage dans les modules de fonctions.

L'enregistrement de RouterModule.forRoot() dans les AppModuleimportations rend le Routerservice disponible partout dans l'application.

Ajouter la sortie du routeur

La racine AppComponentest le shell de l'application. Il comporte un titre, une barre de navigation avec deux liens et une prise de routeur sur laquelle le routeur échange des composants sur la page. Voici ce que vous obtenez :


La sortie du routeur sert d'espace réservé lorsque les composants routés seront rendus en dessous.

Le modèle de composant correspondant ressemble à ceci:
app.component.html

Définir un itinéraire générique

Jusqu'à présent, vous avez créé deux itinéraires dans l'application, l'un vers /crisis-centerl'autre /heroes. Toute autre URL amène le routeur à générer une erreur et à bloquer l'application.

Ajoutez une route générique pour intercepter les URL non valides et les gérer avec élégance. Un itinéraire générique a un chemin composé de deux astérisques. Cela correspond à toutes les URL. Le routeur sélectionnera cette route si elle ne peut pas correspondre à une route plus tôt dans la configuration. Un itinéraire générique peut accéder à un composant personnalisé "404 non trouvé" ou être redirigé vers un itinéraire existant.

Le routeur sélectionne l'itinéraire avec un premier match gagnant en stratégie. Les itinéraires génériques sont les itinéraires les moins spécifiques dans la configuration de l'itinéraire. Assurez-vous que c'est le dernier itinéraire de la configuration.

Pour tester cette fonctionnalité, ajoutez un bouton avec un modèle RouterLinkau HeroListComponentmodèle et définissez le lien sur "/sidekicks".

liste des héros.component.html (extrait)

L'application échouera si l'utilisateur clique sur ce bouton car vous n'avez pas encore défini d' "/sidekicks"itinéraire.

Au lieu d'ajouter la "/sidekicks"route, définissez une wildcardroute et faites-la naviguer de manière simple PageNotFoundComponent.

app.module.ts (caractère générique)

Créez le PageNotFoundComponentà afficher lorsque les utilisateurs visitent des URL non valides.


page-not-found.component.html (composant 404)

Désormais, lorsque l'utilisateur visite /sidekicksou toute autre URL non valide, le navigateur affiche "Page introuvable". La barre d'adresse du navigateur continue de pointer sur l'URL non valide.

Mettre en place des redirections

Lorsque l'application est lancée, l'URL initiale dans la barre de navigation ressemble à ceci:

Cela ne correspond à aucune des routes configurées de manière concrète, ce qui signifie que le routeur passe à la route générique et affiche l'icône PageNotFoundComponent.

L'application a besoin d'une route par défaut vers une page valide. La page par défaut pour cette application est la liste des héros. L'application doit y accéder comme si l'utilisateur cliquait sur le lien "Héros" ou était collé localhost:4200/heroesdans la barre d'adresse.

La solution recommandée consiste à ajouter un redirectitinéraire traduisant l'URL relative initiale ( '') en chemin par défaut souhaité ( /heroes). La barre d'adresse du navigateur indique .../heroesque vous y aviez navigué directement.

Ajoutez la route par défaut quelque part au - dessus de la route générique. C'est juste au-dessus de la route générique dans l'extrait suivant montrant la complète appRoutespour ce jalon.

app-routing.module.ts (appRoutes)

Une route de redirection nécessite une pathMatchpropriété indiquant au routeur comment faire correspondre une URL au chemin d'une route. Le routeur génère une erreur si vous ne le faites pas. Dans cette application, le routeur doit sélectionner la route à la HeroListComponentseule lorsque l' URL complète correspond '', pour définir la pathMatchvaleur .'full'

Techniquement, un itinéraire est touché lorsque les segments restants de l'URL non appariés correspondent. Dans cet exemple, la redirection se trouve dans une route de niveau supérieur, de sorte que l' URL restante et l' URL complète sont identiques.pathMatch = 'full'''

L'autre pathMatchvaleur possible est celle 'prefix'qui indique au routeur de faire correspondre la route de redirection lorsque l' URL restante commence par le chemin de préfixe de la route de redirection.

Ne fais pas ça ici. Si la pathMatchvaleur était 'prefix', chaque URL correspondrait ''.

Essayez de le configurer pour 'prefix'cliquer ensuite sur le Go to sidekicksbouton. Rappelez-vous que c'est une mauvaise URL et vous devriez voir la page "Page introuvable". Au lieu de cela, vous êtes toujours sur la page "Heroes". Entrez une mauvaise URL dans la barre d'adresse du navigateur. Vous êtes instantanément redirigé vers /heroes. Chaque URL, bonne ou mauvaise, qui correspond à cette définition de route sera une correspondance.

La route par défaut doit être redirigé vers le HeroListComponent seul lorsque l' URL complète est ''. N'oubliez pas de restaurer la redirection vers .pathMatch = 'full'

Les bases se terminent

Vous disposez d'une application de navigation très basique, qui permet de basculer entre deux vues lorsque l'utilisateur clique sur un lien.

Vous avez appris à faire ce qui suit :

• Chargez la bibliothèque du routeur.
• Ajoutez une barre de navigation au modèle de coque avec des balises d'ancrage routerLink et des routerLinkActivedirectives.
• Ajoutez un router-outletau modèle de shell où les vues seront affichées.
• Configurez le module de routeur avec RouterModule.forRoot.
• Configurez le routeur pour qu'il compose les URL du navigateur HTML5.
• gérer des itinéraires non valides avec un wildcarditinéraire.
• accédez à l'itinéraire par défaut lorsque l'application démarre avec un chemin vide.

La structure de l'application de démarrage ressemble à ceci:


Voici les fichiers discutés dans ce jalon.

app.component.html

app.module.ts

hero-list / hero-list.component.html

liste de crises / liste de crises.component.html

page-not-found / page-not-found.component.html

index.html