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

2
00:00:04,965 --> 00:00:10,050
Dans cet exercice, nous allons voir comment nous pouvons tirer parti du module de routage

3
00:00:10,050 --> 00:00:14,397
d'Angular pour pouvoir prendre en charge plusieurs composants, et

4
00:00:14,397 --> 00:00:19,830
être en mesure de naviguer vers l'un de ces composants dans notre application Angular.

5
00:00:21,690 --> 00:00:26,280
Jetez un coup d'œil à l'état de notre application.

6
00:00:26,280 --> 00:00:29,647
A la fin du dernier exercice,

7
00:00:29,647 --> 00:00:36,135
nous avons déjà remarqué que dans cette application, dans l'en-tête,

8
00:00:36,135 --> 00:00:42,520
nous avons des liens vers quatre citation différentes, uncitation pages ici.

9
00:00:42,520 --> 00:00:47,334
Maintenant, en termes angulaires, cela serait supporté en utilisant

10
00:00:47,334 --> 00:00:52,371
différents composants, comme nous le verrons dans cet exercice.

11
00:00:52,371 --> 00:00:55,706
Donc, nous voyons ici que lorsque nous cliquons sur la page d'accueil,

12
00:00:55,706 --> 00:01:01,840
nous voulons pouvoir voir les détails de ce qui devrait être présent dans la page d'accueil.

13
00:01:01,840 --> 00:01:07,182
Et de même, le À propos et le Menu bien sûr vous le voyez déjà là,

14
00:01:07,182 --> 00:01:12,608
puis le Contact, affiche probablement quelques informations sur le contenu de

15
00:01:12,608 --> 00:01:15,040
ce restaurant particulier.

16
00:01:15,040 --> 00:01:18,450
Alors, comment vont-ils soutenir quelque chose comme ça ?

17
00:01:18,450 --> 00:01:23,490
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

18
00:01:23,490 --> 00:01:32,720
cela est déjà facilité avec l'utilisation du composant Menu.

19
00:01:32,720 --> 00:01:37,720
Donc, nous voyons que le composant Menu est juxtaposé entre l'en-tête et

20
00:01:37,720 --> 00:01:42,270
le pied de page et est capable d'afficher les informations juste là.

21
00:01:42,270 --> 00:01:48,270
Maintenant, comment pouvons-nous tirer parti de l'utilisation du module de routeur angulaire pour permettre à

22
00:01:48,270 --> 00:01:54,270
de prendre en charge ces multiples composants et de pouvoir naviguer entre eux.

23
00:01:54,270 --> 00:01:58,810
Maintenant, pour commencer, d'abord, bien sûr, nous avons besoin de plusieurs composants,

24
00:01:58,810 --> 00:02:04,370
chacun montrant leur vue respective afin que nous puissions naviguer entre les vues.

25
00:02:04,370 --> 00:02:09,390
Alors ajoutons trois autres composants à notre application Angular,

26
00:02:09,390 --> 00:02:13,300
the Home, the About et the Contact.

27
00:02:13,300 --> 00:02:17,500
Vous savez déjà comment faire cela, alors passons à cette étape suivante.

28
00:02:17,500 --> 00:02:22,959
À l'invite, tapez ng g component

29
00:02:22,959 --> 00:02:28,616
home pour créer le composant home.

30
00:02:28,616 --> 00:02:33,094
De même générer

31
00:02:33,094 --> 00:02:38,362
le composant environ et

32
00:02:38,362 --> 00:02:43,100
aussi alors que nous y sommes

33
00:02:43,100 --> 00:02:48,641
le composant de contact.

34
00:02:48,641 --> 00:02:53,031
Donc maintenant, nous avons trois composants ajoutés avec le nouveau composant que nous

35
00:02:53,031 --> 00:02:53,903
avons déjà.

36
00:02:53,903 --> 00:02:58,445
Le composant de détail du disque est déjà utilisé dans les composants du menu, donc

37
00:02:58,445 --> 00:03:00,833
nous ne le considérons pas pour le moment.

38
00:03:00,833 --> 00:03:05,652
Mais nous avons maintenant des composants à la maison, à propos, contact et menu, et

39
00:03:05,652 --> 00:03:08,339
nous avons besoin d'un moyen de passer entre eux.

40
00:03:08,339 --> 00:03:09,882
Alors, comment pouvons-nous faire ça ?

41
00:03:09,882 --> 00:03:14,806
C'est donc là que je fais usage du module de routeur angulaire.

42
00:03:14,806 --> 00:03:20,618
Pour commencer à utiliser le module routeur pour nous permettre de naviguer

43
00:03:20,618 --> 00:03:26,225
parmi ces composants, ajoutons un nouveau module Angular.

44
00:03:26,225 --> 00:03:32,012
Maintenant, ce modèle d'utilisation du module de routeur est quelque chose qui est suggéré pour

45
00:03:32,012 --> 00:03:35,841
applications Angular légèrement plus complexes, mais

46
00:03:35,841 --> 00:03:41,735
si nous faisons cela comme une pratique standard, cela va beaucoup pour nous aider à l'avenir.

47
00:03:41,735 --> 00:03:46,653
Donc, je commence même l'application simple avec

48
00:03:46,653 --> 00:03:52,032
mettant le module routeur dans son propre module séparé.

49
00:03:52,032 --> 00:03:58,470
Cela englobe donc tous nos besoins de routage dans un module séparé.

50
00:03:58,470 --> 00:04:04,170
Pour commencer, nous utilisons à nouveau l'interface de ligne de commande angulaire pour

51
00:04:04,170 --> 00:04:10,450
créer un autre module, et nous appellerons ce module comme routage d'application.

52
00:04:10,450 --> 00:04:15,237
Donc, ce module de routage d'application que nous allons créer va tirer parti de

53
00:04:15,237 --> 00:04:20,599
le module de rainage angulaire pour fournir des fonctionnalités de routage pour notre application.

54
00:04:20,599 --> 00:04:26,296
Et puis nous allons utiliser cela dans notre module d'application pour activer le routage.

55
00:04:26,296 --> 00:04:30,927
Pour créer un nouveau module appelé routage d'application,

56
00:04:30,927 --> 00:04:35,814
à l'invite tapez ng g module app-routage,

57
00:04:35,814 --> 00:04:40,960
et cela devrait créer un module de routage d'application et

58
00:04:40,960 --> 00:04:49,211
mettre un fichier app-routing.module.ts dans ce dossier particulier.

59
00:04:49,211 --> 00:04:52,635
Maintenant, ce module de routage d'applications est juste là.

60
00:04:52,635 --> 00:04:58,138
Nous devons explicitement inclure cela dans notre module d'application,

61
00:04:58,138 --> 00:05:01,662
afin qu'il puisse en faire usage.

62
00:05:01,662 --> 00:05:06,669
En allant à l'éditeur, nous voyons maintenant que nous avons maintenant un autre dossier ici

63
00:05:06,669 --> 00:05:12,328
appelé app-routage et à l'intérieur que nous avons un ApapproutingModule ici,

64
00:05:12,328 --> 00:05:18,374
nous choisissons un module Angular générique que l'Angular CLI a généré pour nous.

65
00:05:18,374 --> 00:05:22,034
Cela n'a rien de spécifique sur le routage en tant que tel pour le moment,

66
00:05:22,034 --> 00:05:24,737
mais nous allons ajouter ces fonctionnalités.

67
00:05:24,737 --> 00:05:30,633
Mais, avant de faire cela, utilisons ce ApapproutingModule dans notre app.module,

68
00:05:30,633 --> 00:05:34,028
le module racine de notre application Angular.

69
00:05:34,028 --> 00:05:38,271
Pour ce faire, ouvrez app.module, et

70
00:05:38,271 --> 00:05:44,452
pendant que nous sommes ici, laissez-moi faire un peu de nettoyage ici.

71
00:05:44,452 --> 00:05:48,489
J'ai tendance à ne pas aimer le code désorganisé, donc

72
00:05:48,489 --> 00:05:52,407
Je vais juste déplacer tout ce code pour

73
00:05:52,407 --> 00:05:57,040
les composants ensemble au même endroit et

74
00:05:57,040 --> 00:06:02,650
alors j'ai mes services étant requis ci-dessous.

75
00:06:02,650 --> 00:06:09,180
Maintenant, nous avons un nouveau module que nous obtenons

76
00:06:09,180 --> 00:06:13,846
du ApapproutingModule,

77
00:06:13,846 --> 00:06:17,764
que nous venons de créer et

78
00:06:17,764 --> 00:06:22,614
alors je vais exiger que

79
00:06:22,614 --> 00:06:27,108
ApapproutingModule dans mon,

80
00:06:34,609 --> 00:06:37,040
Module Route ou l'AppModule ici.

81
00:06:37,040 --> 00:06:43,080
Donc, j'inclut le ApapproutingModule en l'important d'abord là-bas.

82
00:06:43,080 --> 00:06:47,625
Et puis après cela, dans les importations, je vais dans et

83
00:06:47,625 --> 00:06:50,880
puis ajouter dans le ApapproutingModule.

84
00:06:53,440 --> 00:06:56,970
Juste là, ApapproutingModule.

85
00:06:56,970 --> 00:07:01,380
Donc, avec cela, mon module d'application,

86
00:07:01,380 --> 00:07:05,640
le module racine, est maintenant corrigé pour utiliser le ApapproutingModule.

87
00:07:05,640 --> 00:07:11,420
Maintenant, cela me donne la liberté de développer ma partie de routage dans

88
00:07:11,420 --> 00:07:18,540
mon AppraistingModule en toute confiance qu'elle sera utilisée par mon module d'application.

89
00:07:18,540 --> 00:07:21,370
Alors sauvegardons les changements dans le module de l'application, et

90
00:07:21,370 --> 00:07:25,357
, puis nous allons revenir en arrière et ouvrir le ApapproutingModule ici.

91
00:07:26,400 --> 00:07:30,470
Et ici, nous allons utiliser

92
00:07:30,470 --> 00:07:34,050
le module de routeur que Angular nous fournit.

93
00:07:34,050 --> 00:07:37,749
Donc, ici, permettez-moi d'importer le,

94
00:07:41,156 --> 00:07:46,174
RouterModule ici, et aussi le module compagnon

95
00:07:46,174 --> 00:07:51,608
Routes qui est disponible à partir d'Angular.

96
00:07:51,608 --> 00:07:56,428
Et puis je vais importer cela à partir d'Angular,

97
00:07:56,428 --> 00:08:00,320
et ensuite, RouterModule ici.

98
00:08:00,320 --> 00:08:04,540
Donc, à partir de la bibliothèque de routeurs angulaires, j'importe à la fois le RouterModule et

99
00:08:04,540 --> 00:08:06,120
le module Routes.

100
00:08:06,120 --> 00:08:14,590
Donc, une fois que je fais cela, évidemment, je dois être capable d'inclure le RouterModule ici.

101
00:08:14,590 --> 00:08:21,015
Donc, en plus du CommonModule que j'ai importé là-bas,

102
00:08:21,015 --> 00:08:25,330
je dois également utiliser le RouterModule ici.

103
00:08:25,330 --> 00:08:28,803
Maintenant, je vais le laisser à ce stade.

104
00:08:28,803 --> 00:08:33,835
Nous allons développer les routes pour notre application Angular et

105
00:08:33,835 --> 00:08:38,054
puis revenir et corriger cela un peu plus tard.

106
00:08:38,054 --> 00:08:44,225
Donc, avec cela, laissez-moi enregistrer les changements dans le module de routage de l'application.

107
00:08:44,225 --> 00:08:49,925
Et ce que je vais faire est, juste pour garder mon code propre et

108
00:08:49,925 --> 00:08:56,574
organisé, je vais définir toutes les routes pour mon application dans un autre fichier.

109
00:08:56,574 --> 00:09:00,673
Mais je vais créer dans le dossier app-routing et

110
00:09:00,673 --> 00:09:03,863
puis je le nommerai routes.ts5.

111
00:09:03,863 --> 00:09:08,601
Maintenant, à l'intérieur de ce fichier, je vais créer toutes les routes dont j'ai besoin.

112
00:09:08,601 --> 00:09:12,994
Donc ici, je vais importer,

113
00:09:15,508 --> 00:09:23,255
Les Routes de, @angular /router,

114
00:09:23,255 --> 00:09:29,570
et ensuite l'utiliser pour construire les routes pour mon application.

115
00:09:29,570 --> 00:09:33,453
Maintenant, de plus, je dois pouvoir importer tous les composants

116
00:09:33,453 --> 00:09:37,745
que j'ai dans mon application.

117
00:09:37,745 --> 00:09:41,303
Parce que je veux pouvoir naviguer vers tous les composants.

118
00:09:41,303 --> 00:09:44,158
Alors, où dois-je avoir la liste de tous les composants ?

119
00:09:44,158 --> 00:09:46,780
Je les ai dans l'app_module.

120
00:09:46,780 --> 00:09:48,475
Alors laissez-moi aller à l'app_module.

121
00:09:50,917 --> 00:09:58,300
J'essaie de ne pas taper les choses autant que possible pour garder les choses sous contrôle.

122
00:09:58,300 --> 00:10:03,720
Donc, je vais aller à l'app_module, puis je copie dans tous les composants que j'ai.

123
00:10:03,720 --> 00:10:08,681
Je n'ai pas besoin de l'AppComponent car je ne naviguerai pas directement vers cela dans mon application

124
00:10:08,681 --> 00:10:11,925
, mais les autres dont j'aurai besoin.

125
00:10:11,925 --> 00:10:18,441
Donc, je vais simplement copier tout cela et

126
00:10:18,441 --> 00:10:25,510
puis les inclure dans mon fichier de routes, ici.

127
00:10:25,510 --> 00:10:30,080
Alors maintenant j'ai le MenuComponent, le Dishdetail, En-tête, Pied.

128
00:10:30,080 --> 00:10:33,190
En fait, je n'ai pas besoin non plus de l'en-tête et du footerComponent.

129
00:10:33,190 --> 00:10:34,516
Je n'aurai pas besoin de l'en-tête et

130
00:10:34,516 --> 00:10:39,040
FooterComponent parce que je ne vais pas naviguer vers eux en utilisant des routes.

131
00:10:39,040 --> 00:10:43,322
Alors laissez-moi supprimer les composants d'en-tête et de pied de page.

132
00:10:43,322 --> 00:10:46,842
J'ai seulement besoin du Menu, Accueil, À propos, Contacts.

133
00:10:46,842 --> 00:10:53,532
J'ai inclus le Dishdetail, nous en viendrons dans l'un des exercices ultérieurs.

134
00:10:53,532 --> 00:10:57,949
Alors maintenant que nous avons inclus tous ces éléments, la prochaine étape est que

135
00:10:57,949 --> 00:11:02,289
me définisse les différentes routes qui sont disponibles ici.

136
00:11:02,289 --> 00:11:06,884
Je vais définir une constante ici

137
00:11:06,884 --> 00:11:12,247
routes nommées du type Routes.

138
00:11:12,247 --> 00:11:17,908
Alors maintenant vous voyez pourquoi j'ai des routes importantes du routeur Angular là-bas.

139
00:11:17,908 --> 00:11:23,148
Donc, cela me permettra de définir un tableau spécifiant

140
00:11:23,148 --> 00:11:28,651
les différentes routes qui font partie de mon application.

141
00:11:28,651 --> 00:11:32,940
Ici, permettez-moi de préciser toutes les routes ici.

142
00:11:32,940 --> 00:11:37,854
Maintenant, lorsque vous spécifiez des itinéraires dans votre application Angular

143
00:11:37,854 --> 00:11:42,776
, vous spécifiez le chemin.

144
00:11:42,776 --> 00:11:48,303
Que je vais commencer avec le HomeComponent,

145
00:11:48,303 --> 00:11:53,139
et quand je navigue vers le chemin de la maison,

146
00:11:53,139 --> 00:11:59,368
le composant correspondant est le HomeComponent.

147
00:12:00,630 --> 00:12:05,940
Donc, quand mon URL inclut home,

148
00:12:05,940 --> 00:12:08,930
alors je naviguerai vers HomeComponent.

149
00:12:09,930 --> 00:12:14,905
Dans la conférence précédente, nous avons déjà vu comment nous utilisons le HTML

150
00:12:14,905 --> 00:12:21,513
pushState () pour reconnaître la navigation interne

151
00:12:21,513 --> 00:12:27,010
, en utilisant le support HTML pour le pushState ().

152
00:12:27,010 --> 00:12:33,481
C'est donc ce que je tire parti ici pour définir ces différentes routes ici.

153
00:12:33,481 --> 00:12:38,003
Donc, quand je dis localhost:4200/home,

154
00:12:38,003 --> 00:12:43,387
alors cela pointe vers le HomeComponent, ici.

155
00:12:43,387 --> 00:12:48,850
C'est ainsi que je naviguerai vers le HomeComponent.

156
00:12:48,850 --> 00:12:55,909
De même, nous pouvons définir pour les autres composants de notre application.

157
00:12:55,909 --> 00:13:03,213
Le chemin suivant que je vais définir est vers le MenuComponent.

158
00:13:03,213 --> 00:13:09,006
Pour cet exercice, je ne vais définir que ces deux-là.

159
00:13:09,006 --> 00:13:14,119
Les autres seront remplis dans la partie

160
00:13:14,119 --> 00:13:21,371
de certains des exercices ultérieurs et de l'affectation qui suit.

161
00:13:21,371 --> 00:13:25,791
Nous avons donc deux d'entre eux mis en place, Accueil et Menu.

162
00:13:25,791 --> 00:13:29,400
Maintenant, je devrais également fournir la route par défaut ici.

163
00:13:29,400 --> 00:13:35,379
Donc, lorsque l'utilisateur accède à localhost:4200,

164
00:13:35,379 --> 00:13:40,670
, vous finirez dans l'emplacement par défaut.

165
00:13:40,670 --> 00:13:46,054
Donc, dans ce cas, je vais simplement rediriger l'utilisateur vers le HomeComponent,

166
00:13:46,054 --> 00:13:50,828
qui est ce qui sera affiché dans l'application Angular.

167
00:13:50,828 --> 00:13:58,748
Donc, pour ce faire, je vais taper la propriété ReDirectTo.

168
00:13:58,748 --> 00:14:03,838
Et puis définissez cela pour être /home.

169
00:14:03,838 --> 00:14:10,507
Signifiant que lorsque vous naviguez sans fournir un chemin d'URL là-bas,

170
00:14:10,507 --> 00:14:16,708
alors vous naviguerez automatiquement vers le HomeComponent,

171
00:14:16,708 --> 00:14:20,490
et cela devrait correspondre complet ici.

172
00:14:20,490 --> 00:14:25,023
Donc ces trois, je vais fournir pour les routes ici, pour le moment.

173
00:14:25,023 --> 00:14:26,610
Les autres,

174
00:14:26,610 --> 00:14:31,580
comme je l'ai dit, seront ajoutés dans le reste des exercices.

175
00:14:31,580 --> 00:14:36,658
Maintenant, évidemment, vous voyez ces lignes rouges squiggly

176
00:14:36,658 --> 00:14:40,889
là parce qu'elles sont toutes dans

177
00:14:40,889 --> 00:14:46,011
../Alors laissez-moi les réparer.

178
00:14:46,011 --> 00:14:50,232
Alors maintenant, à partir du fichier routes.ts,

179
00:14:50,232 --> 00:14:55,721
, nous préparons cette constante Routes ici et

180
00:14:55,721 --> 00:14:58,971
puis la rendons disponible.

181
00:14:58,971 --> 00:15:04,111
Alors maintenant que c'est prêt pour nous, nous reviendrons à l'app-routing.module.

182
00:15:04,111 --> 00:15:09,282
Et dans l'app-routing.module,

183
00:15:09,282 --> 00:15:15,141
, je vais importer la constante des routes,

184
00:15:15,141 --> 00:15:17,908
la constante des routes.

185
00:15:17,908 --> 00:15:24,542
Si vous voulez dire cela en tant que routes, routes constantes, et utilisez-le ici.

186
00:15:24,542 --> 00:15:26,516
Maintenant, comment puis-je en faire usage ici ?

187
00:15:26,516 --> 00:15:31,451
Maintenant, le RouterModule prend comme

188
00:15:31,451 --> 00:15:36,029
un paramètre pour le ForRoot,

189
00:15:38,737 --> 00:15:42,261
Le paramètre est la configuration des routes.

190
00:15:42,261 --> 00:15:50,154
Donc, je vais fournir les routes comme paramètre pour cela, le RouterModule.

191
00:15:50,154 --> 00:15:56,520
Ok, donc cela corrige notre configuration de routage pour notre application.

192
00:15:56,520 --> 00:16:01,480
Un dernier changement que nous devons corriger est que depuis l'app-routing.module,

193
00:16:01,480 --> 00:16:05,360
, nous voulons pouvoir exporter le RouterModule vers notre app-module afin

194
00:16:05,360 --> 00:16:07,120
qu'il puisse aussi en faire usage.

195
00:16:07,120 --> 00:16:11,796
C'est donc là que nous utilisons la propriété export

196
00:16:11,796 --> 00:16:16,346
dans notre décorateur NgModule.

197
00:16:16,346 --> 00:16:22,907
Et rendre notre RouterModule disponible pour l'AppModule.

198
00:16:22,907 --> 00:16:27,990
Alors sauvegardons les changements jusqu'à présent aussi.

199
00:16:27,990 --> 00:16:30,845
Maintenant, lorsque vous routez vers l'une de ces parties,

200
00:16:30,845 --> 00:16:36,040
quelle que soit la vue affichée pour le composant particulier.

201
00:16:36,040 --> 00:16:40,260
Nous n'avons rien en ce moment dans notre candidature.

202
00:16:40,260 --> 00:16:45,124
Lorsque vous regardez le fichier AppComponent.html.

203
00:16:45,124 --> 00:16:49,961
Ici, par défaut, nous n'avons que l'app-header, app-menu,

204
00:16:49,961 --> 00:16:52,107
et le app-footer ici.

205
00:16:52,107 --> 00:16:54,780
Maintenant heureusement,

206
00:16:54,780 --> 00:17:00,127
le RouterModule Angular nous fournit

207
00:17:00,127 --> 00:17:06,483
une directive appelée router-outlet.

208
00:17:06,483 --> 00:17:11,635
Donc, chaque fois que vous spécifiez cette directive comme,

209
00:17:14,802 --> 00:17:18,192
La balise dans votre fichier de modèle.

210
00:17:18,192 --> 00:17:23,355
Ensuite, votre application Angular utilisera automatiquement

211
00:17:23,355 --> 00:17:30,545
cela comme l'endroit où la vue correspondante doit être insérée dans.

212
00:17:30,545 --> 00:17:36,725
Donc, en spécifiant le routeur-outlet dans le fichier de modèle de mon AppComponent.

213
00:17:36,725 --> 00:17:44,537
Maintenant, je vais pouvoir afficher n'importe laquelle de ces informations dans cet endroit particulier.

214
00:17:44,537 --> 00:17:48,747
Nous avons donc apporté des modifications au module de routage de l'application,

215
00:17:48,747 --> 00:17:54,573
le fichier AppComponent.html, où nous avons ajouté le routeur-outlet.

216
00:17:54,573 --> 00:17:59,416
Nous avons défini les routes dans le fichier Routes.ts et

217
00:17:59,416 --> 00:18:06,074
, puis nous avons l'AppModule où nous avons ajouté dans ApapproutingModule

218
00:18:06,074 --> 00:18:12,350
comme l'une des importations là-bas, après l'avoir importé ici.

219
00:18:12,350 --> 00:18:15,110
Donc, après tous ces changements, allons et

220
00:18:15,110 --> 00:18:21,890
jeter un oeil à ce que nos applications Angular montrent dans le navigateur.

221
00:18:21,890 --> 00:18:26,710
En allant sur notre navigateur, nous pouvons maintenant voir que dans notre navigateur

222
00:18:26,710 --> 00:18:31,830
la chose par défaut qui a été montrée ici est la maison fonctionne.

223
00:18:31,830 --> 00:18:40,060
De votre connaissance du fonctionnement du composant généré par Angular CLI.

224
00:18:40,060 --> 00:18:46,840
Vous reconnaissez déjà que cela doit être dans le modèle pour le composant home.

225
00:18:46,840 --> 00:18:53,040
Aussi, jetez un oeil à l'URL dans la partie adresse du navigateur.

226
00:18:53,040 --> 00:18:56,860
Vous voyez qu'il est dit localhost:4200/home.

227
00:18:56,860 --> 00:18:59,682
Si je tape simplement localhost:4200,

228
00:18:59,682 --> 00:19:04,996
, cela se redirigera automatiquement vers localhost:4200/home.

229
00:19:04,996 --> 00:19:12,923
Parce que nous configurons cette route particulière dans notre configuration de routes ici.

230
00:19:12,923 --> 00:19:16,889
Maintenant, nous n'avons aucun moyen d'aller aux modules restants, alors

231
00:19:16,889 --> 00:19:22,167
comment fournir la liaison afin que nous puissions naviguer vers le module restant.

232
00:19:22,167 --> 00:19:26,901
Donc, pour remplir cela, nous devons aller et être en mesure d'ajouter des informations

233
00:19:26,901 --> 00:19:31,358
supplémentaires dans les fichiers de modèles de composants d'en-tête afin

234
00:19:31,358 --> 00:19:36,640
qu'il puisse naviguer parmi ces différents composants.

235
00:19:36,640 --> 00:19:43,350
En revenant à notre éditeur, permettez-moi d'ouvrir le fichier HeaderComponent.html.

236
00:19:43,350 --> 00:19:49,010
Dans ce fichier HeaderComponent, nous voyons que nous avons ces boutons

237
00:19:49,010 --> 00:19:56,110
ici qui devraient nous permettre de naviguer vers ces composants particuliers là-bas.

238
00:19:56,110 --> 00:20:02,050
Donc, ici, nous prenons l'aide d'une autre directive d'attribut que

239
00:20:02,050 --> 00:20:08,370
le module de routage nous fournit appelé RouterLink.

240
00:20:08,370 --> 00:20:13,289
Donc à ceux-ci, nous allons fournir

241
00:20:13,289 --> 00:20:17,984
RouterLink comme /home.

242
00:20:17,984 --> 00:20:22,968
Ce qui signifie que pour ce bouton particulier,

243
00:20:22,968 --> 00:20:26,171
le lien d'accueil dans notre barre d'outils.

244
00:20:26,171 --> 00:20:30,334
Lorsque nous cliquons dessus, cela devrait me diriger automatiquement vers la maison.

245
00:20:30,334 --> 00:20:36,640
Donc, de cette façon, mon application Angular sait où m'envoyer à ce stade.

246
00:20:36,640 --> 00:20:40,090
Donc c'est pour la maison là-bas.

247
00:20:40,090 --> 00:20:44,420
Maintenant de même, permettez-moi d'en ajouter un pour le menu ici.

248
00:20:45,590 --> 00:20:48,550
Pour le menu, quand je clique sur le lien de menu là,

249
00:20:48,550 --> 00:20:54,020
qui devrait m'amener au composant de menu.

250
00:20:54,020 --> 00:21:01,140
Donc, la directive attributaire RouterLink me permet de spécifier, comme vous voyez

251
00:21:01,140 --> 00:21:08,010
ici une chaîne où je peux spécifier le chemin à ajouter.

252
00:21:09,010 --> 00:21:14,900
Sauvegardons également ces changements, puis maintenant jeter un coup d'œil à notre application.

253
00:21:14,900 --> 00:21:21,021
En allant à notre application, nous voyons maintenant qu'un composant Home est affiché ici.

254
00:21:21,021 --> 00:21:25,426
Lorsque nous cliquons sur le composant Menu, nous sommes au menu.

255
00:21:25,426 --> 00:21:30,570
Alors remarquez comment mon application naviguait automatiquement vers

256
00:21:30,570 --> 00:21:35,509
le composant de menu pour afficher la vue avec le menu ici.

257
00:21:35,509 --> 00:21:39,590
Et en regardant aussi la barre d'adresse,

258
00:21:39,590 --> 00:21:46,670
remarquez comment la barre d'adresse affiche maintenant localhost:4200/menu.

259
00:21:46,670 --> 00:21:51,670
Encore une fois, nous pouvons naviguer vers le composant home et le composant menu,

260
00:21:51,670 --> 00:21:52,410
d'avant en arrière.

261
00:21:53,580 --> 00:21:59,230
Donc, cela montre comment en ajoutant ce routage à notre application,

262
00:21:59,230 --> 00:22:04,940
nous sommes en mesure de naviguer et de montrer différentes vues au sein de notre application.

263
00:22:04,940 --> 00:22:09,640
Maintenant, le sujet et le contact, nous allons le faire dans le cadre de

264
00:22:09,640 --> 00:22:14,090
un autre exercice et de la mission qui suit plus tard.

265
00:22:15,150 --> 00:22:20,485
Ceci complète cet exercice où nous avons utilisé le module de routeur angulaire et

266
00:22:20,485 --> 00:22:25,047
puis configuré notre application Angular pour utiliser diverses routes

267
00:22:25,047 --> 00:22:27,212
pour montrer les différentes vues.

268
00:22:27,212 --> 00:22:29,240
C'est le bon moment pour

269
00:22:29,240 --> 00:22:35,117
vous de faire un commit Git avec le message de base du routeur angulaire.

270
00:22:35,117 --> 00:22:36,115
[MUSIQUE]