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

2
00:00:04,965 --> 00:00:10,050
In questo esercizio vedremo come possiamo sfruttare il

3
00:00:10,050 --> 00:00:14,397
modulo di routing di Angular per essere in grado di supportare più componenti ed

4
00:00:14,397 --> 00:00:19,830
essere in grado di navigare a uno qualsiasi di questi componenti nella nostra applicazione Angular.

5
00:00:21,690 --> 00:00:26,280
Dando una rapida occhiata allo stato della nostra applicazione.

6
00:00:26,280 --> 00:00:29,647
Alla fine dell'ultimo esercizio,

7
00:00:29,647 --> 00:00:36,135
abbiamo già notato che in questa applicazione, nell'intestazione,

8
00:00:36,135 --> 00:00:42,520
abbiamo collegamenti a quattro diverse citazioni, pagine non quotate qui.

9
00:00:42,520 --> 00:00:47,334
Ora, in termini angolari, questo sarebbe supportato utilizzando

10
00:00:47,334 --> 00:00:52,371
componenti diversi, come vedremo in questo esercizio.

11
00:00:52,371 --> 00:00:55,706
Quindi qui vediamo che quando clicchiamo sulla Home,

12
00:00:55,706 --> 00:01:01,840
vogliamo essere in grado di vedere i dettagli di ciò che dovrebbe essere presente nella Home page.

13
00:01:01,840 --> 00:01:07,182
E allo stesso modo, l'About e il Menu ovviamente lo vedi già lì,

14
00:01:07,182 --> 00:01:12,608
e poi il Contatto, probabilmente mostra alcune informazioni sul contenuto di

15
00:01:12,608 --> 00:01:15,040
questo particolare ristorante.

16
00:01:15,040 --> 00:01:18,450
Quindi come fanno a sostenere una cosa del genere?

17
00:01:18,450 --> 00:01:23,490
Innanzitutto, dando una rapida occhiata vediamo che il Menu è

18
00:01:23,490 --> 00:01:28,470
già supportato visualizzando qui le informazioni sul menu, e

19
00:01:28,470 --> 00:01:32,720
questo è già facilitato con l'uso del componente Menu.

20
00:01:32,720 --> 00:01:37,720
Quindi vediamo che il componente Menu è giustapposto tra l'intestazione e

21
00:01:37,720 --> 00:01:42,270
il piè di pagina ed è in grado di visualizzare le informazioni proprio lì.

22
00:01:42,270 --> 00:01:48,270
Ora, come possiamo sfruttare l'uso del modulo router angolare per

23
00:01:48,270 --> 00:01:54,270
consentirci di supportare questi componenti multipli ed essere in grado di navigare tra di loro.

24
00:01:54,270 --> 00:01:58,810
Ora, per iniziare, in primo luogo, ovviamente, abbiamo bisogno di più componenti,

25
00:01:58,810 --> 00:02:04,370
ognuno di essi mostra la propria vista in modo che possiamo navigare tra le viste.

26
00:02:04,370 --> 00:02:09,390
Quindi aggiungiamo altri tre componenti alla nostra applicazione angolare,

27
00:02:09,390 --> 00:02:13,300
la Home, l'About e il Contatto.

28
00:02:13,300 --> 00:02:17,500
Sai già come farlo, quindi passiamo a quel passo successivo.

29
00:02:17,500 --> 00:02:22,959
Al prompt, digitare ng g component

30
00:02:22,959 --> 00:02:28,616
home per creare il componente home.

31
00:02:28,616 --> 00:02:33,094
Allo stesso modo generare

32
00:02:33,094 --> 00:02:38,362
il componente su e

33
00:02:38,362 --> 00:02:43,100
anche mentre siamo a esso

34
00:02:43,100 --> 00:02:48,641
il componente di contatto.

35
00:02:48,641 --> 00:02:53,031
Così ora abbiamo tre componenti aggiunti insieme al nuovo componente che

36
00:02:53,031 --> 00:02:53,903
abbiamo già.

37
00:02:53,903 --> 00:02:58,445
Il componente di dettaglio del disco è già in uso nei componenti del menu, quindi

38
00:02:58,445 --> 00:03:00,833
non lo consideriamo per il momento.

39
00:03:00,833 --> 00:03:05,652
Ma ora abbiamo a casa, circa, contatti e componenti di menu, e

40
00:03:05,652 --> 00:03:08,339
abbiamo bisogno di un modo per andare tra di loro.

41
00:03:08,339 --> 00:03:09,882
Allora, come facciamo a farlo?

42
00:03:09,882 --> 00:03:14,806
Quindi è qui che faccio uso del modulo router angolare.

43
00:03:14,806 --> 00:03:20,618
Per iniziare a utilizzare il modulo router per permetterci di navigare

44
00:03:20,618 --> 00:03:26,225
tra questi componenti, aggiungiamo un nuovo modulo angolare.

45
00:03:26,225 --> 00:03:32,012
Ora questo modello di utilizzo del modulo router è qualcosa che è suggerito per

46
00:03:32,012 --> 00:03:35,841
applicazioni angolari leggermente più complesse, ma

47
00:03:35,841 --> 00:03:41,735
se lo facciamo come pratica standard va un lungo cammino per aiutarci in futuro.

48
00:03:41,735 --> 00:03:46,653
Quindi sto iniziando anche la semplice applicazione con

49
00:03:46,653 --> 00:03:52,032
l'inserimento del modulo router nel proprio modulo separato.

50
00:03:52,032 --> 00:03:58,470
Questo include tutte le nostre esigenze di routing in un modulo separato.

51
00:03:58,470 --> 00:04:04,170
Per iniziare, usiamo di nuovo la CLI angolare per

52
00:04:04,170 --> 00:04:10,450
creare un altro modulo, e chiameremo quel modulo come routing app.

53
00:04:10,450 --> 00:04:15,237
Quindi questo modulo di routing app che stiamo per creare sta andando a sfruttare

54
00:04:15,237 --> 00:04:20,599
il modulo di scanalatura angolare per fornire funzionalità di routing per la nostra applicazione.

55
00:04:20,599 --> 00:04:26,296
E poi abbiamo intenzione di fare uso di questo nel nostro modulo app per abilitare il routing.

56
00:04:26,296 --> 00:04:30,927
Per creare un nuovo modulo chiamato routing app,

57
00:04:30,927 --> 00:04:35,814
al prompt digitare ng g module app-routing,

58
00:04:35,814 --> 00:04:40,960
e che dovrebbe creare un modulo di routing app e

59
00:04:40,960 --> 00:04:49,211
inserire un file app-routing.module.ts in quella particolare cartella lì.

60
00:04:49,211 --> 00:04:52,635
Ora questo modulo di routing delle app è appena lasciato lì.

61
00:04:52,635 --> 00:04:58,138
Dobbiamo includerlo esplicitamente nel nostro modulo app,

62
00:04:58,138 --> 00:05:01,662
quindi deve essere in grado di farne uso.

63
00:05:01,662 --> 00:05:06,669
Andando all'editor ora vediamo che ora abbiamo un'altra cartella qui

64
00:05:06,669 --> 00:05:12,328
chiamata app-routing e all'interno che abbiamo un ApproutingModule qui,

65
00:05:12,328 --> 00:05:18,374
scegliamo un modulo angolare generico che la CLI angolare ha generato per noi.

66
00:05:18,374 --> 00:05:22,034
Questo non ha nulla di specifico sul routing in quanto tale al momento,

67
00:05:22,034 --> 00:05:24,737
ma stiamo andando ad aggiungere quelle funzionalità lì dentro.

68
00:05:24,737 --> 00:05:30,633
Ma, prima di farlo, usiamo questo ApproutingModule nel nostro app.module,

69
00:05:30,633 --> 00:05:34,028
il modulo principale per la nostra applicazione Angular.

70
00:05:34,028 --> 00:05:38,271
Per fare ciò, apri l'app.module, e

71
00:05:38,271 --> 00:05:44,452
mentre siamo qui, fammi fare un po 'di pulizia qui.

72
00:05:44,452 --> 00:05:48,489
Tendo a non piacere il codice disorganizzato, quindi

73
00:05:48,489 --> 00:05:52,407
ho intenzione di spostare tutto questo codice per

74
00:05:52,407 --> 00:05:57,040
i componenti insieme in un posto lì e

75
00:05:57,040 --> 00:06:02,650
poi ho i miei servizi richiesti qui sotto.

76
00:06:02,650 --> 00:06:09,180
Ora abbiamo un nuovo modulo che stiamo ottenendo

77
00:06:09,180 --> 00:06:13,846
dal ApproutingModule,

78
00:06:13,846 --> 00:06:17,764
che abbiamo appena creato e

79
00:06:17,764 --> 00:06:22,614
poi ho intenzione di richiedere che

80
00:06:22,614 --> 00:06:27,108
ApproutingModule nel mio,

81
00:06:34,609 --> 00:06:37,040
modulo Route o AppModule qui.

82
00:06:37,040 --> 00:06:43,080
Quindi, includo ApproutingModule importandolo prima lì.

83
00:06:43,080 --> 00:06:47,625
E poi dopo, nelle importazioni, vado e

84
00:06:47,625 --> 00:06:50,880
poi aggiungo ApproutingModule.

85
00:06:53,440 --> 00:06:56,970
Proprio lì, ApproutingModule.

86
00:06:56,970 --> 00:07:01,380
Quindi con questo, il mio modulo app,

87
00:07:01,380 --> 00:07:05,640
il modulo root, è ora risolto per utilizzare ApproutingModule.

88
00:07:05,640 --> 00:07:11,420
Ora questo mi dà la libertà di sviluppare la mia parte di routing nel

89
00:07:11,420 --> 00:07:18,540
mio ApproutingModule con piena sicurezza che verrà utilizzata dal mio modulo app.

90
00:07:18,540 --> 00:07:21,370
Quindi cerchiamo di salvare le modifiche al modulo app, e

91
00:07:21,370 --> 00:07:25,357
poi torneremo indietro e aprire il ApproutingModule qui.

92
00:07:26,400 --> 00:07:30,470
E qui faremo uso

93
00:07:30,470 --> 00:07:34,050
del modulo router che Angular ci fornisce.

94
00:07:34,050 --> 00:07:37,749
Quindi qui lasciami importare il,

95
00:07:41,156 --> 00:07:46,174
RouterModule qui, e anche il

96
00:07:46,174 --> 00:07:51,608
modulo Routes compagno disponibile da Angular.

97
00:07:51,608 --> 00:07:56,428
E poi così ho intenzione di importarlo da Angular,

98
00:07:56,428 --> 00:08:00,320
e poi, RouterModule qui.

99
00:08:00,320 --> 00:08:04,540
Quindi dalla libreria del router angolare, importazione sia il RouterModule che

100
00:08:04,540 --> 00:08:06,120
il modulo Routes.

101
00:08:06,120 --> 00:08:14,590
Quindi una volta che lo faccio, ovviamente, ho bisogno di essere in grado di includere il RouterModule qui.

102
00:08:14,590 --> 00:08:21,015
Quindi, oltre al CommonModule che ho importato lì,

103
00:08:21,015 --> 00:08:25,330
ho bisogno di usare anche RouterModule qui.

104
00:08:25,330 --> 00:08:28,803
Ora, lo lascio a questo punto.

105
00:08:28,803 --> 00:08:33,835
Svilupperemo i percorsi per la nostra applicazione Angular e

106
00:08:33,835 --> 00:08:38,054
poi torneremo e sistemeremo questo un po 'più tardi.

107
00:08:38,054 --> 00:08:44,225
Quindi con questo, lasciami salvare le modifiche al modulo di routing dell'app.

108
00:08:44,225 --> 00:08:49,925
E quello che farò è, solo per mantenere il mio codice pulito e

109
00:08:49,925 --> 00:08:56,574
organizzato, definirò tutti i percorsi per la mia applicazione in un altro file.

110
00:08:56,574 --> 00:09:00,673
Ma creerò nella cartella di routing dell'app e

111
00:09:00,673 --> 00:09:03,863
poi lo chiamerò come routes.ts5.

112
00:09:03,863 --> 00:09:08,601
Ora, all'interno di questo file, creerò tutti i percorsi di cui ho bisogno.

113
00:09:08,601 --> 00:09:12,994
Quindi qui, ho intenzione di importare,

114
00:09:15,508 --> 00:09:23,255
The Routes from, @angular /router,

115
00:09:23,255 --> 00:09:29,570
e quindi usarlo per costruire i percorsi per la mia applicazione.

116
00:09:29,570 --> 00:09:33,453
Ora, inoltre, ho bisogno di essere in grado di importare tutti

117
00:09:33,453 --> 00:09:37,745
i componenti che ho all'interno della mia applicazione.

118
00:09:37,745 --> 00:09:41,303
Perché voglio essere in grado di navigare a tutti i componenti.

119
00:09:41,303 --> 00:09:44,158
Quindi, dove ho l'elenco di tutti i componenti?

120
00:09:44,158 --> 00:09:46,780
Li ho nell'app_module.

121
00:09:46,780 --> 00:09:48,475
Quindi lasciami andare al app_module.

122
00:09:50,917 --> 00:09:58,300
Cerco di non digitare le cose il più possibile per tenere le cose sotto controllo.

123
00:09:58,300 --> 00:10:03,720
Quindi andrò all'app_module, e poi copio tutti i componenti che ho.

124
00:10:03,720 --> 00:10:08,681
Non ho bisogno di AppComponent perché non navigherò direttamente a quello nella mia

125
00:10:08,681 --> 00:10:11,925
applicazione, ma i restanti di cui avrò bisogno.

126
00:10:11,925 --> 00:10:18,441
Quindi ho intenzione di copiare semplicemente tutti questi e

127
00:10:18,441 --> 00:10:25,510
poi includerli nel mio file route, qui.

128
00:10:25,510 --> 00:10:30,080
Quindi ora ho il MenuComponent, il Dishdetail, Header, Foot.

129
00:10:30,080 --> 00:10:33,190
In realtà, non ho bisogno di Header e FooterComponent.

130
00:10:33,190 --> 00:10:34,516
Non ho bisogno di Header e

131
00:10:34,516 --> 00:10:39,040
FooterComponent perché non ho intenzione di navigare verso di loro usando i percorsi.

132
00:10:39,040 --> 00:10:43,322
Quindi lasciami eliminare l'intestazione e i componenti piè di pagina.

133
00:10:43,322 --> 00:10:46,842
Mi serve solo il menu, la casa, l'informazione, i contatti.

134
00:10:46,842 --> 00:10:53,532
Ho incluso il Dishdetail, arriveremo a questo in uno degli esercizi successivi.

135
00:10:53,532 --> 00:10:57,949
Quindi, ora che abbiamo incluso tutti questi, il passo successivo è

136
00:10:57,949 --> 00:11:02,289
per me definire i vari percorsi che sono disponibili qui.

137
00:11:02,289 --> 00:11:06,884
Definirò una costante qui

138
00:11:06,884 --> 00:11:12,247
denominata rotte del tipo Routes.

139
00:11:12,247 --> 00:11:17,908
Quindi ora capisci perché ho percorsi importanti dal router angolare lì.

140
00:11:17,908 --> 00:11:23,148
Quindi questo mi permetterà di definire un array che specifica

141
00:11:23,148 --> 00:11:28,651
i vari percorsi che fanno parte della mia applicazione.

142
00:11:28,651 --> 00:11:32,940
Qui, lasciatemi specificare tutti i percorsi qui.

143
00:11:32,940 --> 00:11:37,854
Ora, quando specifichi percorsi nella tua

144
00:11:37,854 --> 00:11:42,776
applicazione angolare, specificherai il percorso.

145
00:11:42,776 --> 00:11:48,303
Che inizierò con HomeComponent,

146
00:11:48,303 --> 00:11:53,139
e poi quando navigo al percorso home,

147
00:11:53,139 --> 00:11:59,368
il componente corrispondente è HomeComponent.

148
00:12:00,630 --> 00:12:05,940
Quindi, quando il mio URL include casa,

149
00:12:05,940 --> 00:12:08,930
allora navigherò su HomeComponent.

150
00:12:09,930 --> 00:12:14,905
Nella lezione precedente, abbiamo già visto come usiamo l'HTML

151
00:12:14,905 --> 00:12:21,513
pushState () per riconoscere la

152
00:12:21,513 --> 00:12:27,010
navigazione interna, utilizzando il supporto HTML per pushState ().

153
00:12:27,010 --> 00:12:33,481
Quindi questo è quello che sto sfruttando qui per definire questi vari percorsi qui.

154
00:12:33,481 --> 00:12:38,003
Quindi, quando dico localhost: 4200/home,

155
00:12:38,003 --> 00:12:43,387
allora questo sta puntando a homeComponent, qui.

156
00:12:43,387 --> 00:12:48,850
Quindi questo è il modo in cui navigherò su HomeComponent.

157
00:12:48,850 --> 00:12:55,909
Allo stesso modo, possiamo definire per gli altri componenti nella nostra applicazione.

158
00:12:55,909 --> 00:13:03,213
Il prossimo percorso che ho intenzione di definire è il MenuComponent.

159
00:13:03,213 --> 00:13:09,006
Per questo esercizio, ho intenzione di definire solo questi due.

160
00:13:09,006 --> 00:13:14,119
I restanti saranno compilati come parte

161
00:13:14,119 --> 00:13:21,371
di alcuni degli esercizi successivi e assegnazioni che seguono.

162
00:13:21,371 --> 00:13:25,791
Quindi ne abbiamo due, Home e Menu.

163
00:13:25,791 --> 00:13:29,400
Ora, dovrei anche fornire il percorso predefinito qui.

164
00:13:29,400 --> 00:13:35,379
Quindi, quando l'utente naviga su localhost: 4200,

165
00:13:35,379 --> 00:13:40,670
finirai nella posizione predefinita.

166
00:13:40,670 --> 00:13:46,054
Quindi, in tal caso, reindirizzerò semplicemente l'utente a HomeComponent,

167
00:13:46,054 --> 00:13:50,828
che è ciò che verrà visualizzato nell'applicazione Angular.

168
00:13:50,828 --> 00:13:58,748
Quindi, per farlo, digiterò la proprietà reDirectTo.

169
00:13:58,748 --> 00:14:03,838
E poi definiscilo per essere/home.

170
00:14:03,838 --> 00:14:10,507
Significato che quando si naviga senza fornire un percorso URL lì,

171
00:14:10,507 --> 00:14:16,708
si dovrebbe automaticamente passare a HomeComponent,

172
00:14:16,708 --> 00:14:20,490
e questo dovrebbe corrispondere completo qui.

173
00:14:20,490 --> 00:14:25,023
Quindi questi tre, vi forniro' per le rotte qui, per il momento.

174
00:14:25,023 --> 00:14:26,610
I restanti,

175
00:14:26,610 --> 00:14:31,580
come ho detto, saranno aggiunti come parte del resto degli esercizi.

176
00:14:31,580 --> 00:14:36,658
Ora, ovviamente vedi queste

177
00:14:36,658 --> 00:14:40,889
linee rosse squiggly lì perché queste sono tutte in

178
00:14:40,889 --> 00:14:46,011
../Quindi lasciami sistemare quelle.

179
00:14:46,011 --> 00:14:50,232
Così ora, dal file routes.ts,

180
00:14:50,232 --> 00:14:55,721
stiamo preparando questa costante Routes qui e

181
00:14:55,721 --> 00:14:58,971
poi renderlo disponibile.

182
00:14:58,971 --> 00:15:04,111
Quindi ora che questo è pronto per noi, torneremo all'app-routing.module.

183
00:15:04,111 --> 00:15:09,282
E nell'app-routing.module,

184
00:15:09,282 --> 00:15:15,141
ho intenzione di importare la costante

185
00:15:15,141 --> 00:15:17,908
route, Routes costante.

186
00:15:17,908 --> 00:15:24,542
Se vuoi dirlo come rotte, instrada costanti e usalo qui.

187
00:15:24,542 --> 00:15:26,516
Ora, come faccio a usarlo qui?

188
00:15:26,516 --> 00:15:31,451
Ora, il RouterModule prende come

189
00:15:31,451 --> 00:15:36,029
parametro per il forRoot,

190
00:15:38,737 --> 00:15:42,261
Il parametro è la configurazione route.

191
00:15:42,261 --> 00:15:50,154
Quindi ho intenzione di fornire le rotte come parametro per questo, il RouterModule.

192
00:15:50,154 --> 00:15:56,520
Ok, questo corregge la nostra configurazione di routing per la nostra applicazione.

193
00:15:56,520 --> 00:16:01,480
Un ultimo cambiamento che dobbiamo risolvere è che da app-routing.module,

194
00:16:01,480 --> 00:16:05,360
vogliamo essere in grado di esportare RouterModule nel nostro app-module in modo

195
00:16:05,360 --> 00:16:07,120
che possa anche farne uso.

196
00:16:07,120 --> 00:16:11,796
Quindi questo è dove facciamo uso della

197
00:16:11,796 --> 00:16:16,346
proprietà di esportazione nel nostro decoratore ngModule.

198
00:16:16,346 --> 00:16:22,907
E rendere il nostro RouterModule disponibile per l'AppModule.

199
00:16:22,907 --> 00:16:27,990
Quindi salviamo le modifiche anche finora.

200
00:16:27,990 --> 00:16:30,845
Ora, quando si instradano a una di queste parti,

201
00:16:30,845 --> 00:16:36,040
qualunque cosa si visualizzi la vista per il particolare componente.

202
00:16:36,040 --> 00:16:40,260
Al momento non abbiamo nulla nella nostra applicazione.

203
00:16:40,260 --> 00:16:45,124
Quando si guarda il file AppComponent.html.

204
00:16:45,124 --> 00:16:49,961
Qui, per impostazione predefinita abbiamo solo l'app-header, app-menu,

205
00:16:49,961 --> 00:16:52,107
e l'app-footer qui.

206
00:16:52,107 --> 00:16:54,780
Fortunatamente,

207
00:16:54,780 --> 00:17:00,127
l'Angular RouterModule ci fornisce

208
00:17:00,127 --> 00:17:06,483
una direttiva chiamata come router-outlet.

209
00:17:06,483 --> 00:17:11,635
Quindi ogni volta che specifichi questa direttiva come,

210
00:17:14,802 --> 00:17:18,192
Il tag nel tuo file modello.

211
00:17:18,192 --> 00:17:23,355
Quindi la tua applicazione Angular

212
00:17:23,355 --> 00:17:30,545
lo userà automaticamente come luogo in cui deve essere inserita la vista corrispondente.

213
00:17:30,545 --> 00:17:36,725
Quindi, specificando la presa del router nel file modello del mio AppComponent.

214
00:17:36,725 --> 00:17:44,537
Ora sarò in grado di visualizzare qualsiasi di queste informazioni in quella particolare posizione.

215
00:17:44,537 --> 00:17:48,747
Così abbiamo apportato modifiche al modulo di routing app,

216
00:17:48,747 --> 00:17:54,573
il file AppComponent.html, dove abbiamo aggiunto il router-outlet.

217
00:17:54,573 --> 00:17:59,416
Abbiamo definito le rotte nel file Routes.ts e

218
00:17:59,416 --> 00:18:06,074
poi abbiamo l'AppModule dove abbiamo aggiunto nel ApproutingModule

219
00:18:06,074 --> 00:18:12,350
come una delle importazioni lì, dopo averlo importato qui.

220
00:18:12,350 --> 00:18:15,110
Quindi, dopo tutti questi cambiamenti, andiamo a

221
00:18:15,110 --> 00:18:21,890
dare un'occhiata a ciò che le nostre applicazioni angolari stanno mostrando nel browser.

222
00:18:21,890 --> 00:18:26,710
Andando al nostro browser, ora possiamo vedere che nel nostro browser

223
00:18:26,710 --> 00:18:31,830
la cosa predefinita che è stata mostrata qui è lavori domestici.

224
00:18:31,830 --> 00:18:40,060
Dalla tua conoscenza di come funziona il componente generato da Angular CLI.

225
00:18:40,060 --> 00:18:46,840
Riconosci già che questo deve essere nel modello per il componente home.

226
00:18:46,840 --> 00:18:53,040
Inoltre, dai un'occhiata all'URL nella parte indirizzo del browser.

227
00:18:53,040 --> 00:18:56,860
Vedete che dice localhost: 4200/casa.

228
00:18:56,860 --> 00:18:59,682
Se digito semplicemente localhost: 4200,

229
00:18:59,682 --> 00:19:04,996
questo si reindirizzerà automaticamente a localhost: 4200/home.

230
00:19:04,996 --> 00:19:12,923
Perché abbiamo impostato quel particolare percorso nella nostra configurazione di rotte qui.

231
00:19:12,923 --> 00:19:16,889
Ora non abbiamo modo di andare ai moduli rimanenti, quindi

232
00:19:16,889 --> 00:19:22,167
come forniamo il collegamento in modo da poter navigare al modulo rimanente.

233
00:19:22,167 --> 00:19:26,901
Quindi, per riempirlo, dobbiamo andare ed essere in grado di aggiungere ulteriori

234
00:19:26,901 --> 00:19:31,358
informazioni nei file di modello dei componenti di intestazione in modo

235
00:19:31,358 --> 00:19:36,640
che possa navigare tra questi vari componenti.

236
00:19:36,640 --> 00:19:43,350
Tornando al nostro editor, lasciami aprire il file HeaderComponent.html.

237
00:19:43,350 --> 00:19:49,010
All' interno di questo file HeaderComponent, vediamo che abbiamo questi pulsanti

238
00:19:49,010 --> 00:19:56,110
qui che dovrebbero permetterci di navigare a quei particolari componenti lì.

239
00:19:56,110 --> 00:20:02,050
Quindi qui, prendiamo l'aiuto di un'altra direttiva attributo che

240
00:20:02,050 --> 00:20:08,370
il modulo di routing fornisce per noi chiamato come RouterLink.

241
00:20:08,370 --> 00:20:13,289
Quindi a questi forniremo

242
00:20:13,289 --> 00:20:17,984
RouterLink come/home.

243
00:20:17,984 --> 00:20:22,968
Il che significa che per questo particolare pulsante,

244
00:20:22,968 --> 00:20:26,171
il link home nella nostra barra degli strumenti.

245
00:20:26,171 --> 00:20:30,334
Quando clicchiamo su questo, che dovrebbe indirizzarmi automaticamente a casa.

246
00:20:30,334 --> 00:20:36,640
Quindi in questo modo, la mia applicazione Angular sa dove mandarmi a questo punto.

247
00:20:36,640 --> 00:20:40,090
Quindi questo è per casa lì.

248
00:20:40,090 --> 00:20:44,420
Ora allo stesso modo, lasciatemi aggiungere anche uno per il menu qui.

249
00:20:45,590 --> 00:20:48,550
Per il menu, quando clicco sul link del menu lì,

250
00:20:48,550 --> 00:20:54,020
questo dovrebbe portarmi al componente del menu.

251
00:20:54,020 --> 00:21:01,140
Quindi la direttiva dell'attributo RouterLink mi consente di specificare, come vedi

252
00:21:01,140 --> 00:21:08,010
qui una stringa in cui posso specificare il percorso che deve essere aggiunto.

253
00:21:09,010 --> 00:21:14,900
Salviamo anche queste modifiche, e poi ora diamo un'occhiata finale alla nostra applicazione.

254
00:21:14,900 --> 00:21:21,021
Andando alla nostra applicazione, ora vediamo che un componente Home viene visualizzato qui.

255
00:21:21,021 --> 00:21:25,426
Quando clicchiamo sul componente Menu, siamo al menu.

256
00:21:25,426 --> 00:21:30,570
Quindi nota come la mia applicazione è navigata automaticamente

257
00:21:30,570 --> 00:21:35,509
al componente menu per mostrare la vista con il menu qui.

258
00:21:35,509 --> 00:21:39,590
E anche dando un'occhiata alla barra degli indirizzi,

259
00:21:39,590 --> 00:21:46,670
si noti come la barra degli indirizzi ora mostra localhost: 4200/menu.

260
00:21:46,670 --> 00:21:51,670
Ancora una volta, possiamo tornare al componente home e al componente menu,

261
00:21:51,670 --> 00:21:52,410
avanti e indietro.

262
00:21:53,580 --> 00:21:59,230
Quindi questo mostra come aggiungendo questo routing alla nostra applicazione,

263
00:21:59,230 --> 00:22:04,940
siamo in grado di navigare e mostrare diverse viste all'interno della nostra applicazione.

264
00:22:04,940 --> 00:22:09,640
Ora, il circa e il contatto, lo faremo come parte di

265
00:22:09,640 --> 00:22:14,090
un altro esercizio e il compito che segue in seguito.

266
00:22:15,150 --> 00:22:20,485
Questo completa questo esercizio in cui abbiamo usato modulo router angolare e

267
00:22:20,485 --> 00:22:25,047
quindi configurato la nostra applicazione angolare per utilizzare vari percorsi

268
00:22:25,047 --> 00:22:27,212
per mostrare le diverse viste.

269
00:22:27,212 --> 00:22:29,240
Questo è un buon momento per

270
00:22:29,240 --> 00:22:35,117
fare un commit Git con il messaggio Nozioni di base del router angolare.

271
00:22:35,117 --> 00:22:36,115
[ MUSIC]