[MUSIC]
Commençons maintenant à parler du routage angulaire.
Est-ce du routage ou est-ce de l'enracinement ?
Je vais être enraciné pour le routage.
Donc, dorénavant, je prononcerai tous ces routage, routes
, routeur et ainsi de suite.
Si vous venez d'une région où en anglais vous le prononcez comme route ou routeur
, veuillez m'en tenir.
Alors, qu'est-ce que le routage angulaire exactement et comment cela nous aide ?
En termes de l'application Angular que nous avons vu jusqu'à
loin, nous n'avons jamais vu l'utilisation pour le routage.
Nous avons vu que nous pouvons développer une application angulaire avec
plusieurs composants, puis les utiliser l'un à l'intérieur de l'autre, et
développer toute une application Angular sans même parler de routage.
Supposons maintenant que vous avez plusieurs composants et
que vous voulez pouvoir naviguer parmi les composants de
d'une manière que vous pouvez provoquer cette navigation à travers, par exemple,
, en cliquant sur des liens ou des boutons dans votre interface utilisateur et
être capable de rendre différentes vues dans l'écran de votre application,
puis Le routage angulaire vient à votre secours.
Nous verrons comment nous pouvons utiliser le routage pour développer quelque chose appelé des applications de page
unique.
Nous parlerons des applications d'une seule page dans la prochaine leçon.
Mais pour le moment, concentrons-nous sur le routage angulaire et
spécifiquement sur l'itinéraire un module qui est disponible en Angular.
Le module de routeur lui-même est séparé du module de noyau angulaire, donc
il est disponible en tant que module séparé et vous devrez l'importer explicitement
dans votre application Angular afin d'utiliser le modèle de routeur angulaire
pris en charge vous permet de naviguer parmi le rayon
sur les composants de rayon qui font partie de votre prédation angulaire.
Donc, dans le cadre de l'exercice, nous allons ajouter plusieurs composants et
nous verrons comment nous pouvons naviguer parmi eux en utilisant le routeur angulaire.
Donc, comme je l'ai déjà mentionné, le routeur angulaire
permet la navigation entre diverses vues.
De telle sorte que vous pouvez inclure cette navigation dans
les liens ou les boutons basés sur la barre d'outils et
de sorte que vous pouvez inclure dans l'interface utilisateur de votre application Angular et
alors vous pouvez déclencher la navigation d'une vue à une autre vue
en cliquant sur le lien ou le bouton dans votre interface utilisateur.
C'est là que le Routeur Angular profite de l'URL du navigateur et
utilise l'URL du navigateur comme instruction pour
il naviguer parmi les vues générées par le client rayon.
Ces vues sont généralement prises en charge par les multiples composants
qui forment dur de votre application Angular.
Maintenant, lorsque vous naviguez d'une vue à une autre,
vous pouvez également transmettre des paramètres optionnels à ces vues.
Comme nous l'avons appris dans cette diapositive précédente,
le Routeur Angulaire profite de l'URL afin de
lui permettre de reconnaître la nécessité de naviguer entre le milieu.
Donc, c'est là que Angular Router tire parti de ce que
est déjà pris en charge en HTML5 via l'API d'historique ?
Alors, qu'est-ce que l'API d'histoire nous permet de faire ?
Il donne aux développeurs la possibilité de modifier
l'URL d'un site Web sans provoquer une actualisation de la page.
Maintenant, si vous êtes habitué à visiter divers sites web dans votre navigateur,
vous allez normalement cliquer sur la barre de signet ou
sur un lien dans une page ou vous tapez explicitement
l'URL dans la barre d'adresse de votre navigateur.
Maintenant, lorsque vous faites cela, vous spécifiez explicitement l'URL là.
Maintenant, lorsque vous spécifiez une URL,
vous déclenchez votre navigateur pour aller automatiquement sur un serveur et
récupérer cette nouvelle page et rendre la page dans la fenêtre du navigateur.
Maintenant, si elle peut supprimer ce besoin d'aller sur un serveur et récupérer des informations, mais
plutôt changer l'URL sans provoquer cette actualisation de page,
alors nous pouvons profiter de cela pour nous permettre de naviguer
parmi les vues qui font partie d'une seule application et
c'est là que nous prenons avantage du HTML5.
History API qui prend en charge des méthodes comme PushState et ReplaceState.
Donc, le PushState vous permet d'ajouter une entrée d'historique dans l'historique de votre navigateur
sans provoquer réellement une actualisation de la page.
De même, un ReplaceState modifiera
l'entrée d'historique existante dans l'historique de votre navigateur.
Ainsi, vous pouvez même utiliser le bouton Précédent et
de votre navigateur pour être en mesure de revenir et
en arrière parmi les URL sans provoquer une actualisation de la page.
Maintenant, c'est là que vous devez spécifier quelque chose dans votre index HTML
page appelé la base.
Donc, lorsque l'API d'historique HTML utilise ces méthodes,
puis pour la modification, vous devez spécifier une base
à partir de laquelle vous spécifiez les parties supplémentaires
de votre chemin d'URL qui n'entraîneront pas d'actualisation de la page.
Donc, dans ce cas, pour notre application Angular,
cela commence toujours à la racine.
Donc, c'est pourquoi nous spécifions la base comme href= »/ ».
Tout le reste qui vient après cela dans l'URL sera
traité dans votre application Angular comme quelque chose que
déclenche la navigation qui est gérée par le routeur Angular lui-même
sans que votre navigateur ait besoin d'une actualisation à partir d'un serveur.
Donc, c'est ainsi que le routeur angulaire tire parti de l'API d'historique HTML5.
Maintenant, si vous n'avez pas l'API d'historique,
l'autre façon de faire la navigation est d'utiliser des hashtags.
Vous savez déjà qu'en HTML, si vous spécifiez un lien commençant
par un hashtag, cela fait référence à un lien dans la même page.
Donc, lorsque vous cliquez sur de tels liens, cela ne provoquera pas d'actualisation de la page.
Au lieu de cela, il vous redirigera vers un autre emplacement dans la même page.
Donc, c'est une autre façon de faire les choses.
Mais pour un rendu propre, l'API HTML5 prend en charge cette API d'historique
qui vous permet de manipuler l'historique de
votre navigateur sans provoquer une actualisation de page.
Après cette longue explication sinueuse,
prenons un exemple pour nous aider à comprendre cela encore plus loin.
Supposons que vous définissiez votre URL comme ceci, par exemple, exemple.abc.com/home.
Maintenant, avec l'API d'historique HTML5,
vous pouvez simplement prendre cette dernière partie de l'URL et
la modifier à une autre URL comme je l'avais montré ici avec exemple.abc.com/menu.
Vous voyez donc que l'URL a maintenant été modifiée de la barre oblique au menu barre oblique,
ce changement peut être déclenché en utilisant une méthode d'état push de l'API d'historique HTML5
sans comme je l'ai mentionné, sans recharger la page.
Au lieu de cela, ce sera un déclencheur interne pour la navigation
que le Routeur Angular tire explicitement avantage pour
supportant la navigation parmi les différentes vues de votre application Angular.
Maintenant, évidemment, vous devez être intéressé par la façon dont le Routeur Angulaire profite
de cela.
C'est donc là que le Routeur Angular exploite la manipulation de l'historique
pour modifier l'URL du navigateur sans déclencher une actualisation de la page.
Prenons un exemple.
Supposons que votre application Angular réside à cette URL particulière.
Maintenant, il se trouve que l'application Angular sur laquelle vous travaillez
est rendue au navigateur en y accédant à cette URL particulière.
Donc, cela nous aidera à comprendre rapidement ce que le Routeur Angulaire nous permet de faire.
Donc, dans ce cas, lorsque vous tapez ceci dans l'URL de votre navigateur,
, vous Angular Router peut facilement être configuré pour vous rediriger
vers un emplacement par défaut dans votre application angulaire.
Typiquement, rappelle-moi que quelque chose comme chez soi.
Donc cela vous mènera au point d'entrée par défaut pour
votre application angulaire qui, par souci de compréhension facile, je l'étiquetterai comme /home.
Donc, si votre URL contient localhost:4200/home,
cela signifie que vous êtes à votre emplacement d'origine par défaut.
Maintenant, lorsque cette navigation est déclenchée,
vous pouvez laisser votre Routeur Angulaire vous emmener automatiquement à la vue,
par exemple, qui est supportée par ce composant home.
Ainsi, lorsque l'URL devient localhost:4200/home,
, vous afficherez automatiquement la vue du composant home dans l'écran du navigateur.
Très exactement quand vous placez la vue que nous allons regarder dans la diapositive suivante et
dans l'exercice qui suit.
De même, vous pouvez avoir d'autres vues dans votre application Angular
qui peuvent également être prises en charge par d'autres URL
qui sont des extensions à localhost:4200.
Donc, par exemple, si l'URL est localhost:4200/aboutus, alors cette
peut vous conduire à voir la vue qui est rendue par le composant aboutComponent.
Et de même, le menu vous montrera le MenuComponent et ainsi de suite.
Donc, ce que cela nous permet de faire est,
selon ce que l'URL utilisée dans votre navigateur
vous utiliserez cela pour naviguer automatiquement parmi les différentes vues
de vos différents composants de votre application Angular.
Maintenant, vous n'avez pas à vous en soucier explicitement.
Si vous configurez le Routeur Angulaire pour s'occuper de tout cela, alors le routeur
prendra automatiquement soin de vous fournir la navigation parmi ces composants
comme nous le verrions dans l'exercice qui suit cette conférence particulière.
Maintenant, avant de procéder à l'exercice où nous allons en apprendre plus sur
le routeur angulaire, permettez-moi d'attirer rapidement votre attention sur quelques termes
dans le routeur angulaire que vous rencontrerez pendant l'exercice et
Je voudrais que vous accordiez une attention particulière à ces termes,
parce qu'ils sont cruciaux pour comprendre comment fonctionne réellement le Routeur Angulaire.
Donc, vous verrez d'abord que lorsque nous concevons le Routeur Angulaire,
nous prendrons cette aide du module de routeur qui
fait partie de la bibliothèque de routeur oblique angulaire.
Donc, nous allons importer le module de routeur dans ou l'application angulaire
dans le module d'application et ensuite nous allons également importer les routes.
Ainsi, les routes nous permettent de définir les différentes routes que notre application Angular
utilise ou que le Routeur Angulaire utilise.
Donc, dans ce cas, nous spécifierions les routes sous la forme d'un chemin et
le composant correspondant.
Ainsi, comme vous l'avez vu dans la diapositive précédente, vous avez vu que chacune de ces extensions URL
était mappée à la vue d'un composant particulier.
Donc, ce genre d'informations est fourni à ce routeur angulaire
via des routes et ces routes sont toutes spécifiées en utilisant
un objet JavaScript comme ce chemin avec deux propriétés.
Chemin et composant et quelques propriétés supplémentaires que nous ne rencontrerons pas
en ce moment, mais nous verrons dans certains des exercices ultérieurs.
Aussi, la deuxième question que vous vous demandez est où cette vue serait-elle rendue
dans votre application Angular ?
C'est là que, dans notre modèle de composant d'application,
, nous inclurons une directive appelée RouterOutlet qui est spécifiée comme vous
voyez comme et .
Ceci sera inclus dans le fichier de modèle de composant d'application,
maintenant, alors votre Routeur Angular navigue vers
les différentes vues des différents composants.
La vue correspondante du composant sera incluse dans votre vue des applications
partout où vous spécifiez cette prise de routeur particulière.
Alors, faites attention à cela dans l'exercice qui suit.
De plus, pour déclencher la navigation, vous verrez que
avec beaucoup des balises a qui sont utilisées dans l'application.
Donc, par exemple, j'inclurais une configuration des balises avec le composant de matériau angulaire du bouton MD
dans la barre d'outils,
dans le composant d'en-tête de notre application Angular.
J'associerais les balises a à une autre directive,
une directive attributaire appelée RouterLink.
Le RouterLink est une directive réelle que le module routeur nous fournit.
Ce lien de routeur nous permet de spécifier le chemin comme, par exemple,
codes écrits, je peux voir un « /menu ».
Vous pouvez avoir plus de détails que cela pour le RouterLink.
Mais pour l'exercice, nous allons commencer par un exemple simple où nous aurions,
par exemple, /menu slash home slash nous contacter et donc
sur spécifié en utilisant l'attribut routerLink direct.
Donc, lorsque vous cliquez sur un lien comme celui-ci dans votre barre d'outils,
alors cela déclenchera le Routeur Angulaire pour provoquer une modification ou
une navigation vers une vue particulière qui est prise en charge par le module Routeur Angulaire.
Donc, le mappage entre ce lien et les composants correspondants
est déjà spécifié dans la route que nous donnons à notre application Angular.
Alors, faites attention à toutes ces choses pendant que vous faites l'exercice.
Je vais expliquer certaines de ces choses et la raison pour laquelle
les fait pendant que nous faisons les étapes de l'exercice qui suit cette leçon.
[MUSIQUE]