1
00:00:00,000 --> 00:00:04,974
[MUSIC]

2
00:00:04,974 --> 00:00:08,004
Commençons maintenant à parler du routage angulaire.

3
00:00:08,004 --> 00:00:11,348
Est-ce du routage ou est-ce de l'enracinement ?

4
00:00:11,348 --> 00:00:13,806
Je vais être enraciné pour le routage.

5
00:00:13,806 --> 00:00:18,397
Donc, dorénavant, je prononcerai tous ces routage, routes

6
00:00:18,397 --> 00:00:21,400
, routeur et ainsi de suite.

7
00:00:21,400 --> 00:00:25,630
Si vous venez d'une région où en anglais vous le prononcez comme route ou routeur

8
00:00:25,630 --> 00:00:27,060
, veuillez m'en tenir.

9
00:00:28,200 --> 00:00:33,610
Alors, qu'est-ce que le routage angulaire exactement et comment cela nous aide ?

10
00:00:33,610 --> 00:00:37,290
En termes de l'application Angular que nous avons vu jusqu'à

11
00:00:37,290 --> 00:00:41,310
loin, nous n'avons jamais vu l'utilisation pour le routage.

12
00:00:41,310 --> 00:00:44,913
Nous avons vu que nous pouvons développer une application angulaire avec

13
00:00:44,913 --> 00:00:49,235
plusieurs composants, puis les utiliser l'un à l'intérieur de l'autre, et

14
00:00:49,235 --> 00:00:53,794
développer toute une application Angular sans même parler de routage.

15
00:00:53,794 --> 00:00:58,116
Supposons maintenant que vous avez plusieurs composants et

16
00:00:58,116 --> 00:01:03,233
que vous voulez pouvoir naviguer parmi les composants de

17
00:01:03,233 --> 00:01:08,350
d'une manière que vous pouvez provoquer cette navigation à travers, par exemple,

18
00:01:08,350 --> 00:01:13,352
, en cliquant sur des liens ou des boutons dans votre interface utilisateur et

19
00:01:13,352 --> 00:01:19,720
être capable de rendre différentes vues dans l'écran de votre application,

20
00:01:19,720 --> 00:01:23,959
puis Le routage angulaire vient à votre secours.

21
00:01:23,959 --> 00:01:28,633
Nous verrons comment nous pouvons utiliser le routage pour développer quelque chose appelé des applications de page

22
00:01:28,633 --> 00:01:30,120
unique.

23
00:01:30,120 --> 00:01:34,390
Nous parlerons des applications d'une seule page dans la prochaine leçon.

24
00:01:34,390 --> 00:01:38,540
Mais pour le moment, concentrons-nous sur le routage angulaire et

25
00:01:38,540 --> 00:01:42,350
spécifiquement sur l'itinéraire un module qui est disponible en Angular.

26
00:01:43,610 --> 00:01:48,150
Le module de routeur lui-même est séparé du module de noyau angulaire, donc

27
00:01:48,150 --> 00:01:53,220
il est disponible en tant que module séparé et vous devrez l'importer explicitement

28
00:01:53,220 --> 00:01:59,170
dans votre application Angular afin d'utiliser le modèle de routeur angulaire

29
00:01:59,170 --> 00:02:04,360
pris en charge vous permet de naviguer parmi le rayon

30
00:02:04,360 --> 00:02:09,440
sur les composants de rayon qui font partie de votre prédation angulaire.

31
00:02:10,460 --> 00:02:14,820
Donc, dans le cadre de l'exercice, nous allons ajouter plusieurs composants et

32
00:02:14,820 --> 00:02:21,060
nous verrons comment nous pouvons naviguer parmi eux en utilisant le routeur angulaire.

33
00:02:23,020 --> 00:02:26,800
Donc, comme je l'ai déjà mentionné, le routeur angulaire

34
00:02:26,800 --> 00:02:30,280
permet la navigation entre diverses vues.

35
00:02:30,280 --> 00:02:35,660
De telle sorte que vous pouvez inclure cette navigation dans

36
00:02:35,660 --> 00:02:40,870
les liens ou les boutons basés sur la barre d'outils et

37
00:02:40,870 --> 00:02:45,610
de sorte que vous pouvez inclure dans l'interface utilisateur de votre application Angular et

38
00:02:45,610 --> 00:02:49,810
alors vous pouvez déclencher la navigation d'une vue à une autre vue

39
00:02:49,810 --> 00:02:54,320
en cliquant sur le lien ou le bouton dans votre interface utilisateur.

40
00:02:55,360 --> 00:03:00,611
C'est là que le Routeur Angular profite de l'URL du navigateur et

41
00:03:00,611 --> 00:03:04,018
utilise l'URL du navigateur comme instruction pour

42
00:03:04,018 --> 00:03:08,179
il naviguer parmi les vues générées par le client rayon.

43
00:03:08,179 --> 00:03:12,857
Ces vues sont généralement prises en charge par les multiples composants

44
00:03:12,857 --> 00:03:15,982
qui forment dur de votre application Angular.

45
00:03:15,982 --> 00:03:19,289
Maintenant, lorsque vous naviguez d'une vue à une autre,

46
00:03:19,289 --> 00:03:22,906
vous pouvez également transmettre des paramètres optionnels à ces vues.

47
00:03:22,906 --> 00:03:26,307
Comme nous l'avons appris dans cette diapositive précédente,

48
00:03:26,307 --> 00:03:31,305
le Routeur Angulaire profite de l'URL afin de

49
00:03:31,305 --> 00:03:36,856
lui permettre de reconnaître la nécessité de naviguer entre le milieu.

50
00:03:36,856 --> 00:03:40,775
Donc, c'est là que Angular Router tire parti de ce que

51
00:03:40,775 --> 00:03:44,704
est déjà pris en charge en HTML5 via l'API d'historique ?

52
00:03:44,704 --> 00:03:47,990
Alors, qu'est-ce que l'API d'histoire nous permet de faire ?

53
00:03:47,990 --> 00:03:52,156
Il donne aux développeurs la possibilité de modifier

54
00:03:52,156 --> 00:03:56,766
l'URL d'un site Web sans provoquer une actualisation de la page.

55
00:03:56,766 --> 00:04:03,806
Maintenant, si vous êtes habitué à visiter divers sites web dans votre navigateur,

56
00:04:03,806 --> 00:04:10,078
vous allez normalement cliquer sur la barre de signet ou

57
00:04:10,078 --> 00:04:15,198
sur un lien dans une page ou vous tapez explicitement

58
00:04:15,198 --> 00:04:20,063
l'URL dans la barre d'adresse de votre navigateur.

59
00:04:20,063 --> 00:04:25,310
Maintenant, lorsque vous faites cela, vous spécifiez explicitement l'URL là.

60
00:04:25,310 --> 00:04:27,152
Maintenant, lorsque vous spécifiez une URL,

61
00:04:27,152 --> 00:04:31,470
vous déclenchez votre navigateur pour aller automatiquement sur un serveur et

62
00:04:31,470 --> 00:04:37,070
récupérer cette nouvelle page et rendre la page dans la fenêtre du navigateur.

63
00:04:37,070 --> 00:04:43,180
Maintenant, si elle peut supprimer ce besoin d'aller sur un serveur et récupérer des informations, mais

64
00:04:43,180 --> 00:04:49,280
plutôt changer l'URL sans provoquer cette actualisation de page,

65
00:04:49,280 --> 00:04:54,450
alors nous pouvons profiter de cela pour nous permettre de naviguer

66
00:04:54,450 --> 00:04:59,620
parmi les vues qui font partie d'une seule application et

67
00:04:59,620 --> 00:05:03,890
c'est là que nous prenons avantage du HTML5.

68
00:05:03,890 --> 00:05:09,034
History API qui prend en charge des méthodes comme PushState et ReplaceState.

69
00:05:09,034 --> 00:05:13,662
Donc, le PushState vous permet d'ajouter une entrée d'historique dans l'historique de votre navigateur

70
00:05:13,662 --> 00:05:18,494
sans provoquer réellement une actualisation de la page.

71
00:05:18,494 --> 00:05:21,938
De même, un ReplaceState modifiera

72
00:05:21,938 --> 00:05:26,810
l'entrée d'historique existante dans l'historique de votre navigateur.

73
00:05:26,810 --> 00:05:30,551
Ainsi, vous pouvez même utiliser le bouton Précédent et

74
00:05:30,551 --> 00:05:35,724
de votre navigateur pour être en mesure de revenir et

75
00:05:35,724 --> 00:05:41,030
en arrière parmi les URL sans provoquer une actualisation de la page.

76
00:05:41,030 --> 00:05:45,905
Maintenant, c'est là que vous devez spécifier quelque chose dans votre index HTML

77
00:05:45,905 --> 00:05:47,458
page appelé la base.

78
00:05:47,458 --> 00:05:52,489
Donc, lorsque l'API d'historique HTML utilise ces méthodes,

79
00:05:52,489 --> 00:05:57,307
puis pour la modification, vous devez spécifier une base

80
00:05:57,307 --> 00:06:02,875
à partir de laquelle vous spécifiez les parties supplémentaires

81
00:06:02,875 --> 00:06:07,930
de votre chemin d'URL qui n'entraîneront pas d'actualisation de la page.

82
00:06:07,930 --> 00:06:10,580
Donc, dans ce cas, pour notre application Angular,

83
00:06:10,580 --> 00:06:12,378
cela commence toujours à la racine.

84
00:06:12,378 --> 00:06:17,829
Donc, c'est pourquoi nous spécifions la base comme href= »/ ».

85
00:06:17,829 --> 00:06:22,581
Tout le reste qui vient après cela dans l'URL sera

86
00:06:22,581 --> 00:06:27,750
traité dans votre application Angular comme quelque chose que

87
00:06:27,750 --> 00:06:33,228
déclenche la navigation qui est gérée par le routeur Angular lui-même

88
00:06:33,228 --> 00:06:39,080
sans que votre navigateur ait besoin d'une actualisation à partir d'un serveur.

89
00:06:39,080 --> 00:06:44,240
Donc, c'est ainsi que le routeur angulaire tire parti de l'API d'historique HTML5.

90
00:06:45,300 --> 00:06:47,766
Maintenant, si vous n'avez pas l'API d'historique,

91
00:06:47,766 --> 00:06:51,295
l'autre façon de faire la navigation est d'utiliser des hashtags.

92
00:06:51,295 --> 00:06:56,558
Vous savez déjà qu'en HTML, si vous spécifiez un lien commençant

93
00:06:56,558 --> 00:07:01,543
par un hashtag, cela fait référence à un lien dans la même page.

94
00:07:01,543 --> 00:07:05,782
Donc, lorsque vous cliquez sur de tels liens, cela ne provoquera pas d'actualisation de la page.

95
00:07:05,782 --> 00:07:09,944
Au lieu de cela, il vous redirigera vers un autre emplacement dans la même page.

96
00:07:09,944 --> 00:07:12,256
Donc, c'est une autre façon de faire les choses.

97
00:07:12,256 --> 00:07:17,030
Mais pour un rendu propre, l'API HTML5 prend en charge cette API d'historique

98
00:07:17,030 --> 00:07:22,012
qui vous permet de manipuler l'historique de

99
00:07:22,012 --> 00:07:26,087
votre navigateur sans provoquer une actualisation de page.

100
00:07:26,087 --> 00:07:28,616
Après cette longue explication sinueuse,

101
00:07:28,616 --> 00:07:33,049
prenons un exemple pour nous aider à comprendre cela encore plus loin.

102
00:07:33,049 --> 00:07:39,752
Supposons que vous définissiez votre URL comme ceci, par exemple, exemple.abc.com/home.

103
00:07:39,752 --> 00:07:43,325
Maintenant, avec l'API d'historique HTML5,

104
00:07:43,325 --> 00:07:48,301
vous pouvez simplement prendre cette dernière partie de l'URL et

105
00:07:48,301 --> 00:07:56,988
la modifier à une autre URL comme je l'avais montré ici avec exemple.abc.com/menu.

106
00:07:56,988 --> 00:08:03,054
Vous voyez donc que l'URL a maintenant été modifiée de la barre oblique au menu barre oblique,

107
00:08:03,054 --> 00:08:08,624
ce changement peut être déclenché en utilisant une méthode d'état push de l'API d'historique HTML5

108
00:08:08,624 --> 00:08:14,216
sans comme je l'ai mentionné, sans recharger la page.

109
00:08:14,216 --> 00:08:18,533
Au lieu de cela, ce sera un déclencheur interne pour la navigation

110
00:08:18,533 --> 00:08:24,842
que le Routeur Angular tire explicitement avantage pour

111
00:08:24,842 --> 00:08:32,161
supportant la navigation parmi les différentes vues de votre application Angular.

112
00:08:32,161 --> 00:08:36,828
Maintenant, évidemment, vous devez être intéressé par la façon dont le Routeur Angulaire profite

113
00:08:36,828 --> 00:08:37,376
de cela.

114
00:08:37,376 --> 00:08:42,868
C'est donc là que le Routeur Angular exploite la manipulation de l'historique

115
00:08:42,868 --> 00:08:47,917
pour modifier l'URL du navigateur sans déclencher une actualisation de la page.

116
00:08:47,917 --> 00:08:49,485
Prenons un exemple.

117
00:08:49,485 --> 00:08:56,933
Supposons que votre application Angular réside à cette URL particulière.

118
00:08:56,933 --> 00:09:01,809
Maintenant, il se trouve que l'application Angular sur laquelle vous travaillez

119
00:09:01,809 --> 00:09:06,784
est rendue au navigateur en y accédant à cette URL particulière.

120
00:09:06,784 --> 00:09:13,430
Donc, cela nous aidera à comprendre rapidement ce que le Routeur Angulaire nous permet de faire.

121
00:09:13,430 --> 00:09:19,790
Donc, dans ce cas, lorsque vous tapez ceci dans l'URL de votre navigateur,

122
00:09:19,790 --> 00:09:24,160
, vous Angular Router peut facilement être configuré pour vous rediriger

123
00:09:24,160 --> 00:09:29,210
vers un emplacement par défaut dans votre application angulaire.

124
00:09:29,210 --> 00:09:33,433
Typiquement, rappelle-moi que quelque chose comme chez soi.

125
00:09:33,433 --> 00:09:38,606
Donc cela vous mènera au point d'entrée par défaut pour

126
00:09:38,606 --> 00:09:48,109
votre application angulaire qui, par souci de compréhension facile, je l'étiquetterai comme /home.

127
00:09:48,109 --> 00:09:53,175
Donc, si votre URL contient localhost:4200/home,

128
00:09:53,175 --> 00:09:58,249
cela signifie que vous êtes à votre emplacement d'origine par défaut.

129
00:09:58,249 --> 00:10:01,519
Maintenant, lorsque cette navigation est déclenchée,

130
00:10:01,519 --> 00:10:07,384
vous pouvez laisser votre Routeur Angulaire vous emmener automatiquement à la vue,

131
00:10:07,384 --> 00:10:12,017
par exemple, qui est supportée par ce composant home.

132
00:10:12,017 --> 00:10:16,963
Ainsi, lorsque l'URL devient localhost:4200/home,

133
00:10:16,963 --> 00:10:24,605
, vous afficherez automatiquement la vue du composant home dans l'écran du navigateur.

134
00:10:24,605 --> 00:10:30,601
Très exactement quand vous placez la vue que nous allons regarder dans la diapositive suivante et

135
00:10:30,601 --> 00:10:33,086
dans l'exercice qui suit.

136
00:10:33,086 --> 00:10:37,903
De même, vous pouvez avoir d'autres vues dans votre application Angular

137
00:10:37,903 --> 00:10:42,821
qui peuvent également être prises en charge par d'autres URL

138
00:10:42,821 --> 00:10:47,153
qui sont des extensions à localhost:4200.

139
00:10:47,153 --> 00:10:53,354
Donc, par exemple, si l'URL est localhost:4200/aboutus, alors cette

140
00:10:53,354 --> 00:11:00,410
peut vous conduire à voir la vue qui est rendue par le composant aboutComponent.

141
00:11:00,410 --> 00:11:05,070
Et de même, le menu vous montrera le MenuComponent et ainsi de suite.

142
00:11:06,320 --> 00:11:09,088
Donc, ce que cela nous permet de faire est,

143
00:11:09,088 --> 00:11:14,624
selon ce que l'URL utilisée dans votre navigateur

144
00:11:14,624 --> 00:11:19,956
vous utiliserez cela pour naviguer automatiquement parmi les différentes vues

145
00:11:19,956 --> 00:11:25,515
de vos différents composants de votre application Angular.

146
00:11:25,515 --> 00:11:27,968
Maintenant, vous n'avez pas à vous en soucier explicitement.

147
00:11:27,968 --> 00:11:33,200
Si vous configurez le Routeur Angulaire pour s'occuper de tout cela, alors le routeur

148
00:11:33,200 --> 00:11:38,273
prendra automatiquement soin de vous fournir la navigation parmi ces composants

149
00:11:38,273 --> 00:11:43,957
comme nous le verrions dans l'exercice qui suit cette conférence particulière.

150
00:11:43,957 --> 00:11:48,407
Maintenant, avant de procéder à l'exercice où nous allons en apprendre plus sur

151
00:11:48,407 --> 00:11:53,017
le routeur angulaire, permettez-moi d'attirer rapidement votre attention sur quelques termes

152
00:11:53,017 --> 00:11:57,945
dans le routeur angulaire que vous rencontrerez pendant l'exercice et

153
00:11:57,945 --> 00:12:01,759
Je voudrais que vous accordiez une attention particulière à ces termes,

154
00:12:01,759 --> 00:12:07,357
parce qu'ils sont cruciaux pour comprendre comment fonctionne réellement le Routeur Angulaire.

155
00:12:07,357 --> 00:12:13,205
Donc, vous verrez d'abord que lorsque nous concevons le Routeur Angulaire,

156
00:12:13,205 --> 00:12:18,042
nous prendrons cette aide du module de routeur qui

157
00:12:18,042 --> 00:12:22,669
fait partie de la bibliothèque de routeur oblique angulaire.

158
00:12:22,669 --> 00:12:28,094
Donc, nous allons importer le module de routeur dans ou l'application angulaire

159
00:12:28,094 --> 00:12:32,690
dans le module d'application et ensuite nous allons également importer les routes.

160
00:12:32,690 --> 00:12:37,716
Ainsi, les routes nous permettent de définir les différentes routes que notre application Angular

161
00:12:37,716 --> 00:12:43,335
utilise ou que le Routeur Angulaire utilise.

162
00:12:43,335 --> 00:12:49,047
Donc, dans ce cas, nous spécifierions les routes sous la forme d'un chemin et

163
00:12:49,047 --> 00:12:51,585
le composant correspondant.

164
00:12:51,585 --> 00:12:56,299
Ainsi, comme vous l'avez vu dans la diapositive précédente, vous avez vu que chacune de ces extensions URL

165
00:12:56,299 --> 00:13:00,951
était mappée à la vue d'un composant particulier.

166
00:13:00,951 --> 00:13:05,729
Donc, ce genre d'informations est fourni à ce routeur angulaire

167
00:13:05,729 --> 00:13:09,885
via des routes et ces routes sont toutes spécifiées en utilisant

168
00:13:09,885 --> 00:13:14,139
un objet JavaScript comme ce chemin avec deux propriétés.

169
00:13:14,139 --> 00:13:18,470
Chemin et composant et quelques propriétés supplémentaires que nous ne rencontrerons pas

170
00:13:18,470 --> 00:13:22,970
en ce moment, mais nous verrons dans certains des exercices ultérieurs.

171
00:13:24,610 --> 00:13:28,531
Aussi, la deuxième question que vous vous demandez est où cette vue serait-elle rendue

172
00:13:28,531 --> 00:13:30,657
dans votre application Angular ?

173
00:13:30,657 --> 00:13:35,863
C'est là que, dans notre modèle de composant d'application,

174
00:13:35,863 --> 00:13:43,286
, nous inclurons une directive appelée RouterOutlet qui est spécifiée comme vous

175
00:13:43,286 --> 00:13:48,628
voyez comme <router-outlet> et </router-outlet>.

176
00:13:48,628 --> 00:13:54,890
Ceci sera inclus dans le fichier de modèle de composant d'application,

177
00:13:54,890 --> 00:13:59,188
maintenant, alors votre Routeur Angular navigue vers

178
00:13:59,188 --> 00:14:04,484
les différentes vues des différents composants.

179
00:14:04,484 --> 00:14:08,899
La vue correspondante du composant sera incluse dans votre vue des applications

180
00:14:08,899 --> 00:14:13,633
partout où vous spécifiez cette prise de routeur particulière.

181
00:14:13,633 --> 00:14:17,773
Alors, faites attention à cela dans l'exercice qui suit.

182
00:14:17,773 --> 00:14:22,752
De plus, pour déclencher la navigation, vous verrez que

183
00:14:22,752 --> 00:14:27,743
avec beaucoup des balises a qui sont utilisées dans l'application.

184
00:14:27,743 --> 00:14:32,429
Donc, par exemple, j'inclurais une configuration des balises avec le composant de matériau angulaire du bouton MD

185
00:14:32,429 --> 00:14:36,820
dans la barre d'outils,

186
00:14:36,820 --> 00:14:41,327
dans le composant d'en-tête de notre application Angular.

187
00:14:41,327 --> 00:14:44,635
J'associerais les balises a à une autre directive,

188
00:14:44,635 --> 00:14:47,437
une directive attributaire appelée RouterLink.

189
00:14:47,437 --> 00:14:53,260
Le RouterLink est une directive réelle que le module routeur nous fournit.

190
00:14:53,260 --> 00:14:57,966
Ce lien de routeur nous permet de spécifier le chemin comme, par exemple,

191
00:14:57,966 --> 00:15:00,783
codes écrits, je peux voir un « /menu ».

192
00:15:00,783 --> 00:15:05,677
Vous pouvez avoir plus de détails que cela pour le RouterLink.

193
00:15:05,677 --> 00:15:11,646
Mais pour l'exercice, nous allons commencer par un exemple simple où nous aurions,

194
00:15:11,646 --> 00:15:15,806
par exemple, /menu slash home slash nous contacter et donc

195
00:15:15,806 --> 00:15:19,976
sur spécifié en utilisant l'attribut routerLink direct.

196
00:15:19,976 --> 00:15:25,212
Donc, lorsque vous cliquez sur un lien comme celui-ci dans votre barre d'outils,

197
00:15:25,212 --> 00:15:31,281
alors cela déclenchera le Routeur Angulaire pour provoquer une modification ou

198
00:15:31,281 --> 00:15:39,502
une navigation vers une vue particulière qui est prise en charge par le module Routeur Angulaire.

199
00:15:39,502 --> 00:15:45,391
Donc, le mappage entre ce lien et les composants correspondants

200
00:15:45,391 --> 00:15:51,800
est déjà spécifié dans la route que nous donnons à notre application Angular.

201
00:15:51,800 --> 00:15:56,715
Alors, faites attention à toutes ces choses pendant que vous faites l'exercice.

202
00:15:56,715 --> 00:16:00,895
Je vais expliquer certaines de ces choses et la raison pour laquelle

203
00:16:00,895 --> 00:16:07,366
les fait pendant que nous faisons les étapes de l'exercice qui suit cette leçon.

204
00:16:07,366 --> 00:16:11,099
[MUSIQUE]