[MUSIC]
Dans cet exercice, nous allons voir comment nous pouvons tirer parti du module de routage
d'Angular pour pouvoir prendre en charge plusieurs composants, et
être en mesure de naviguer vers l'un de ces composants dans notre application Angular.
Jetez un coup d'œil à l'état de notre application.
A la fin du dernier exercice,
nous avons déjà remarqué que dans cette application, dans l'en-tête,
nous avons des liens vers quatre citation différentes, uncitation pages ici.
Maintenant, en termes angulaires, cela serait supporté en utilisant
différents composants, comme nous le verrons dans cet exercice.
Donc, nous voyons ici que lorsque nous cliquons sur la page d'accueil,
nous voulons pouvoir voir les détails de ce qui devrait être présent dans la page d'accueil.
Et de même, le À propos et le Menu bien sûr vous le voyez déjà là,
puis le Contact, affiche probablement quelques informations sur le contenu de
ce restaurant particulier.
Alors, comment vont-ils soutenir quelque chose comme ça ?
Tout d'abord, en y regardant rapidement, nous voyons que le Menu est déjà pris en charge par l'affichage des informations sur le menu ici, et
cela est déjà facilité avec l'utilisation du composant Menu.
Donc, nous voyons que le composant Menu est juxtaposé entre l'en-tête et
le pied de page et est capable d'afficher les informations juste là.
Maintenant, comment pouvons-nous tirer parti de l'utilisation du module de routeur angulaire pour permettre à
de prendre en charge ces multiples composants et de pouvoir naviguer entre eux.
Maintenant, pour commencer, d'abord, bien sûr, nous avons besoin de plusieurs composants,
chacun montrant leur vue respective afin que nous puissions naviguer entre les vues.
Alors ajoutons trois autres composants à notre application Angular,
the Home, the About et the Contact.
Vous savez déjà comment faire cela, alors passons à cette étape suivante.
À l'invite, tapez ng g component
home pour créer le composant home.
De même générer
le composant environ et
aussi alors que nous y sommes
le composant de contact.
Donc maintenant, nous avons trois composants ajoutés avec le nouveau composant que nous
avons déjà.
Le composant de détail du disque est déjà utilisé dans les composants du menu, donc
nous ne le considérons pas pour le moment.
Mais nous avons maintenant des composants à la maison, à propos, contact et menu, et
nous avons besoin d'un moyen de passer entre eux.
Alors, comment pouvons-nous faire ça ?
C'est donc là que je fais usage du module de routeur angulaire.
Pour commencer à utiliser le module routeur pour nous permettre de naviguer
parmi ces composants, ajoutons un nouveau module Angular.
Maintenant, ce modèle d'utilisation du module de routeur est quelque chose qui est suggéré pour
applications Angular légèrement plus complexes, mais
si nous faisons cela comme une pratique standard, cela va beaucoup pour nous aider à l'avenir.
Donc, je commence même l'application simple avec
mettant le module routeur dans son propre module séparé.
Cela englobe donc tous nos besoins de routage dans un module séparé.
Pour commencer, nous utilisons à nouveau l'interface de ligne de commande angulaire pour
créer un autre module, et nous appellerons ce module comme routage d'application.
Donc, ce module de routage d'application que nous allons créer va tirer parti de
le module de rainage angulaire pour fournir des fonctionnalités de routage pour notre application.
Et puis nous allons utiliser cela dans notre module d'application pour activer le routage.
Pour créer un nouveau module appelé routage d'application,
à l'invite tapez ng g module app-routage,
et cela devrait créer un module de routage d'application et
mettre un fichier app-routing.module.ts dans ce dossier particulier.
Maintenant, ce module de routage d'applications est juste là.
Nous devons explicitement inclure cela dans notre module d'application,
afin qu'il puisse en faire usage.
En allant à l'éditeur, nous voyons maintenant que nous avons maintenant un autre dossier ici
appelé app-routage et à l'intérieur que nous avons un ApapproutingModule ici,
nous choisissons un module Angular générique que l'Angular CLI a généré pour nous.
Cela n'a rien de spécifique sur le routage en tant que tel pour le moment,
mais nous allons ajouter ces fonctionnalités.
Mais, avant de faire cela, utilisons ce ApapproutingModule dans notre app.module,
le module racine de notre application Angular.
Pour ce faire, ouvrez app.module, et
pendant que nous sommes ici, laissez-moi faire un peu de nettoyage ici.
J'ai tendance à ne pas aimer le code désorganisé, donc
Je vais juste déplacer tout ce code pour
les composants ensemble au même endroit et
alors j'ai mes services étant requis ci-dessous.
Maintenant, nous avons un nouveau module que nous obtenons
du ApapproutingModule,
que nous venons de créer et
alors je vais exiger que
ApapproutingModule dans mon,
Module Route ou l'AppModule ici.
Donc, j'inclut le ApapproutingModule en l'important d'abord là-bas.
Et puis après cela, dans les importations, je vais dans et
puis ajouter dans le ApapproutingModule.
Juste là, ApapproutingModule.
Donc, avec cela, mon module d'application,
le module racine, est maintenant corrigé pour utiliser le ApapproutingModule.
Maintenant, cela me donne la liberté de développer ma partie de routage dans
mon AppraistingModule en toute confiance qu'elle sera utilisée par mon module d'application.
Alors sauvegardons les changements dans le module de l'application, et
, puis nous allons revenir en arrière et ouvrir le ApapproutingModule ici.
Et ici, nous allons utiliser
le module de routeur que Angular nous fournit.
Donc, ici, permettez-moi d'importer le,
RouterModule ici, et aussi le module compagnon
Routes qui est disponible à partir d'Angular.
Et puis je vais importer cela à partir d'Angular,
et ensuite, RouterModule ici.
Donc, à partir de la bibliothèque de routeurs angulaires, j'importe à la fois le RouterModule et
le module Routes.
Donc, une fois que je fais cela, évidemment, je dois être capable d'inclure le RouterModule ici.
Donc, en plus du CommonModule que j'ai importé là-bas,
je dois également utiliser le RouterModule ici.
Maintenant, je vais le laisser à ce stade.
Nous allons développer les routes pour notre application Angular et
puis revenir et corriger cela un peu plus tard.
Donc, avec cela, laissez-moi enregistrer les changements dans le module de routage de l'application.
Et ce que je vais faire est, juste pour garder mon code propre et
organisé, je vais définir toutes les routes pour mon application dans un autre fichier.
Mais je vais créer dans le dossier app-routing et
puis je le nommerai routes.ts5.
Maintenant, à l'intérieur de ce fichier, je vais créer toutes les routes dont j'ai besoin.
Donc ici, je vais importer,
Les Routes de, @angular /router,
et ensuite l'utiliser pour construire les routes pour mon application.
Maintenant, de plus, je dois pouvoir importer tous les composants
que j'ai dans mon application.
Parce que je veux pouvoir naviguer vers tous les composants.
Alors, où dois-je avoir la liste de tous les composants ?
Je les ai dans l'app_module.
Alors laissez-moi aller à l'app_module.
J'essaie de ne pas taper les choses autant que possible pour garder les choses sous contrôle.
Donc, je vais aller à l'app_module, puis je copie dans tous les composants que j'ai.
Je n'ai pas besoin de l'AppComponent car je ne naviguerai pas directement vers cela dans mon application
, mais les autres dont j'aurai besoin.
Donc, je vais simplement copier tout cela et
puis les inclure dans mon fichier de routes, ici.
Alors maintenant j'ai le MenuComponent, le Dishdetail, En-tête, Pied.
En fait, je n'ai pas besoin non plus de l'en-tête et du footerComponent.
Je n'aurai pas besoin de l'en-tête et
FooterComponent parce que je ne vais pas naviguer vers eux en utilisant des routes.
Alors laissez-moi supprimer les composants d'en-tête et de pied de page.
J'ai seulement besoin du Menu, Accueil, À propos, Contacts.
J'ai inclus le Dishdetail, nous en viendrons dans l'un des exercices ultérieurs.
Alors maintenant que nous avons inclus tous ces éléments, la prochaine étape est que
me définisse les différentes routes qui sont disponibles ici.
Je vais définir une constante ici
routes nommées du type Routes.
Alors maintenant vous voyez pourquoi j'ai des routes importantes du routeur Angular là-bas.
Donc, cela me permettra de définir un tableau spécifiant
les différentes routes qui font partie de mon application.
Ici, permettez-moi de préciser toutes les routes ici.
Maintenant, lorsque vous spécifiez des itinéraires dans votre application Angular
, vous spécifiez le chemin.
Que je vais commencer avec le HomeComponent,
et quand je navigue vers le chemin de la maison,
le composant correspondant est le HomeComponent.
Donc, quand mon URL inclut home,
alors je naviguerai vers HomeComponent.
Dans la conférence précédente, nous avons déjà vu comment nous utilisons le HTML
pushState () pour reconnaître la navigation interne
, en utilisant le support HTML pour le pushState ().
C'est donc ce que je tire parti ici pour définir ces différentes routes ici.
Donc, quand je dis localhost:4200/home,
alors cela pointe vers le HomeComponent, ici.
C'est ainsi que je naviguerai vers le HomeComponent.
De même, nous pouvons définir pour les autres composants de notre application.
Le chemin suivant que je vais définir est vers le MenuComponent.
Pour cet exercice, je ne vais définir que ces deux-là.
Les autres seront remplis dans la partie
de certains des exercices ultérieurs et de l'affectation qui suit.
Nous avons donc deux d'entre eux mis en place, Accueil et Menu.
Maintenant, je devrais également fournir la route par défaut ici.
Donc, lorsque l'utilisateur accède à localhost:4200,
, vous finirez dans l'emplacement par défaut.
Donc, dans ce cas, je vais simplement rediriger l'utilisateur vers le HomeComponent,
qui est ce qui sera affiché dans l'application Angular.
Donc, pour ce faire, je vais taper la propriété ReDirectTo.
Et puis définissez cela pour être /home.
Signifiant que lorsque vous naviguez sans fournir un chemin d'URL là-bas,
alors vous naviguerez automatiquement vers le HomeComponent,
et cela devrait correspondre complet ici.
Donc ces trois, je vais fournir pour les routes ici, pour le moment.
Les autres,
comme je l'ai dit, seront ajoutés dans le reste des exercices.
Maintenant, évidemment, vous voyez ces lignes rouges squiggly
là parce qu'elles sont toutes dans
../Alors laissez-moi les réparer.
Alors maintenant, à partir du fichier routes.ts,
, nous préparons cette constante Routes ici et
puis la rendons disponible.
Alors maintenant que c'est prêt pour nous, nous reviendrons à l'app-routing.module.
Et dans l'app-routing.module,
, je vais importer la constante des routes,
la constante des routes.
Si vous voulez dire cela en tant que routes, routes constantes, et utilisez-le ici.
Maintenant, comment puis-je en faire usage ici ?
Maintenant, le RouterModule prend comme
un paramètre pour le ForRoot,
Le paramètre est la configuration des routes.
Donc, je vais fournir les routes comme paramètre pour cela, le RouterModule.
Ok, donc cela corrige notre configuration de routage pour notre application.
Un dernier changement que nous devons corriger est que depuis l'app-routing.module,
, nous voulons pouvoir exporter le RouterModule vers notre app-module afin
qu'il puisse aussi en faire usage.
C'est donc là que nous utilisons la propriété export
dans notre décorateur NgModule.
Et rendre notre RouterModule disponible pour l'AppModule.
Alors sauvegardons les changements jusqu'à présent aussi.
Maintenant, lorsque vous routez vers l'une de ces parties,
quelle que soit la vue affichée pour le composant particulier.
Nous n'avons rien en ce moment dans notre candidature.
Lorsque vous regardez le fichier AppComponent.html.
Ici, par défaut, nous n'avons que l'app-header, app-menu,
et le app-footer ici.
Maintenant heureusement,
le RouterModule Angular nous fournit
une directive appelée router-outlet.
Donc, chaque fois que vous spécifiez cette directive comme,
La balise dans votre fichier de modèle.
Ensuite, votre application Angular utilisera automatiquement
cela comme l'endroit où la vue correspondante doit être insérée dans.
Donc, en spécifiant le routeur-outlet dans le fichier de modèle de mon AppComponent.
Maintenant, je vais pouvoir afficher n'importe laquelle de ces informations dans cet endroit particulier.
Nous avons donc apporté des modifications au module de routage de l'application,
le fichier AppComponent.html, où nous avons ajouté le routeur-outlet.
Nous avons défini les routes dans le fichier Routes.ts et
, puis nous avons l'AppModule où nous avons ajouté dans ApapproutingModule
comme l'une des importations là-bas, après l'avoir importé ici.
Donc, après tous ces changements, allons et
jeter un oeil à ce que nos applications Angular montrent dans le navigateur.
En allant sur notre navigateur, nous pouvons maintenant voir que dans notre navigateur
la chose par défaut qui a été montrée ici est la maison fonctionne.
De votre connaissance du fonctionnement du composant généré par Angular CLI.
Vous reconnaissez déjà que cela doit être dans le modèle pour le composant home.
Aussi, jetez un oeil à l'URL dans la partie adresse du navigateur.
Vous voyez qu'il est dit localhost:4200/home.
Si je tape simplement localhost:4200,
, cela se redirigera automatiquement vers localhost:4200/home.
Parce que nous configurons cette route particulière dans notre configuration de routes ici.
Maintenant, nous n'avons aucun moyen d'aller aux modules restants, alors
comment fournir la liaison afin que nous puissions naviguer vers le module restant.
Donc, pour remplir cela, nous devons aller et être en mesure d'ajouter des informations
supplémentaires dans les fichiers de modèles de composants d'en-tête afin
qu'il puisse naviguer parmi ces différents composants.
En revenant à notre éditeur, permettez-moi d'ouvrir le fichier HeaderComponent.html.
Dans ce fichier HeaderComponent, nous voyons que nous avons ces boutons
ici qui devraient nous permettre de naviguer vers ces composants particuliers là-bas.
Donc, ici, nous prenons l'aide d'une autre directive d'attribut que
le module de routage nous fournit appelé RouterLink.
Donc à ceux-ci, nous allons fournir
RouterLink comme /home.
Ce qui signifie que pour ce bouton particulier,
le lien d'accueil dans notre barre d'outils.
Lorsque nous cliquons dessus, cela devrait me diriger automatiquement vers la maison.
Donc, de cette façon, mon application Angular sait où m'envoyer à ce stade.
Donc c'est pour la maison là-bas.
Maintenant de même, permettez-moi d'en ajouter un pour le menu ici.
Pour le menu, quand je clique sur le lien de menu là,
qui devrait m'amener au composant de menu.
Donc, la directive attributaire RouterLink me permet de spécifier, comme vous voyez
ici une chaîne où je peux spécifier le chemin à ajouter.
Sauvegardons également ces changements, puis maintenant jeter un coup d'œil à notre application.
En allant à notre application, nous voyons maintenant qu'un composant Home est affiché ici.
Lorsque nous cliquons sur le composant Menu, nous sommes au menu.
Alors remarquez comment mon application naviguait automatiquement vers
le composant de menu pour afficher la vue avec le menu ici.
Et en regardant aussi la barre d'adresse,
remarquez comment la barre d'adresse affiche maintenant localhost:4200/menu.
Encore une fois, nous pouvons naviguer vers le composant home et le composant menu,
d'avant en arrière.
Donc, cela montre comment en ajoutant ce routage à notre application,
nous sommes en mesure de naviguer et de montrer différentes vues au sein de notre application.
Maintenant, le sujet et le contact, nous allons le faire dans le cadre de
un autre exercice et de la mission qui suit plus tard.
Ceci complète cet exercice où nous avons utilisé le module de routeur angulaire et
puis configuré notre application Angular pour utiliser diverses routes
pour montrer les différentes vues.
C'est le bon moment pour
vous de faire un commit Git avec le message de base du routeur angulaire.
[MUSIQUE]