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

2
00:00:04,974 --> 00:00:08,004
Iniziamo ora a parlare di Routing angolare.

3
00:00:08,004 --> 00:00:11,348
Sta instradando o sta facendo il tifo?

4
00:00:11,348 --> 00:00:13,806
Sto per fare il tifo per il routing.

5
00:00:13,806 --> 00:00:18,397
Quindi d'ora in poi, pronuncerò tutti questi come routing,

6
00:00:18,397 --> 00:00:21,400
percorsi, router e così via.

7
00:00:21,400 --> 00:00:25,630
Se vi capita di venire da una zona in cui in inglese lo pronunciate come percorso o

8
00:00:25,630 --> 00:00:27,060
router, per favore portatemi con me.

9
00:00:28,200 --> 00:00:33,610
Quindi, cos'è esattamente il routing angolare e come ci aiuta?

10
00:00:33,610 --> 00:00:37,290
In termini di applicazione angolare che abbiamo visto

11
00:00:37,290 --> 00:00:41,310
finora, non abbiamo mai visto l'uso per il routing.

12
00:00:41,310 --> 00:00:44,913
Abbiamo visto che possiamo sviluppare un'applicazione angolare con

13
00:00:44,913 --> 00:00:49,235
più componenti e quindi farne uso uno all'interno dell'altro, e

14
00:00:49,235 --> 00:00:53,794
sviluppare un'intera applicazione Angular senza nemmeno parlare di routing.

15
00:00:53,794 --> 00:00:58,116
Ora supponiamo di avere più componenti e di

16
00:00:58,116 --> 00:01:03,233
voler essere in grado di navigare tra i componenti in

17
00:01:03,233 --> 00:01:08,350
un modo che è possibile causare questa navigazione attraverso,

18
00:01:08,350 --> 00:01:13,352
ad esempio, facendo clic su collegamenti o pulsanti nell'interfaccia utente ed

19
00:01:13,352 --> 00:01:19,720
essere in grado di rendere diverse visualizzazioni nella schermata dell'applicazione,

20
00:01:19,720 --> 00:01:23,959
quindi Angular Routing viene in tuo soccorso.

21
00:01:23,959 --> 00:01:28,633
Vedremo come possiamo usare il routing per sviluppare qualcosa chiamato

22
00:01:28,633 --> 00:01:30,120
applicazioni a pagina singola.

23
00:01:30,120 --> 00:01:34,390
Parleremo di applicazioni a pagina singola nella prossima lezione.

24
00:01:34,390 --> 00:01:38,540
Ma per il momento, concentriamoci su Angular Routing e

25
00:01:38,540 --> 00:01:42,350
in particolare sul Route un modulo che è disponibile in Angular.

26
00:01:43,610 --> 00:01:48,150
Il modulo router stesso è separato dal modulo core angolare, quindi

27
00:01:48,150 --> 00:01:53,220
è disponibile come modulo separato e sarà necessario importarlo esplicitamente

28
00:01:53,220 --> 00:01:59,170
nell'applicazione Angular per utilizzare il

29
00:01:59,170 --> 00:02:04,360
modello Angular Router supportato fornisce la navigazione tra le

30
00:02:04,360 --> 00:02:09,440
viste raggio fuori dai componenti del raggio che fanno parte della tua predazione angolare.

31
00:02:10,460 --> 00:02:14,820
Quindi, come parte dell'esercizio, aggiungeremo più componenti e

32
00:02:14,820 --> 00:02:21,060
vedremo come possiamo navigare tra loro utilizzando il router angolare.

33
00:02:23,020 --> 00:02:26,800
Quindi, come ho già detto, il router angolare

34
00:02:26,800 --> 00:02:30,280
consente la navigazione tra varie viste.

35
00:02:30,280 --> 00:02:35,660
In modo tale che è possibile includere questa navigazione nei

36
00:02:35,660 --> 00:02:40,870
collegamenti o nei pulsanti basati

37
00:02:40,870 --> 00:02:45,610
sulla barra degli strumenti e così via che è possibile includere nell'interfaccia utente dell'applicazione Angular e

38
00:02:45,610 --> 00:02:49,810
quindi è possibile attivare la navigazione da una vista all'altra

39
00:02:49,810 --> 00:02:54,320
facendo clic sul collegamento o sul pulsante nel UI.

40
00:02:55,360 --> 00:03:00,611
Questo è dove il router angolare sfrutta l'URL del browser e

41
00:03:00,611 --> 00:03:04,018
utilizza l'URL del browser come istruzione

42
00:03:04,018 --> 00:03:08,179
per navigare tra le viste generate dal client raggio.

43
00:03:08,179 --> 00:03:12,857
Queste viste sono tutte tipicamente supportate dai più componenti

44
00:03:12,857 --> 00:03:15,982
che formano la difficile applicazione Angular.

45
00:03:15,982 --> 00:03:19,289
Ora, quando si passa da una vista a un'altra,

46
00:03:19,289 --> 00:03:22,906
è anche possibile passare parametri facoltativi a tali viste.

47
00:03:22,906 --> 00:03:26,307
Come abbiamo appreso in quella diapositiva precedente,

48
00:03:26,307 --> 00:03:31,305
il Router angolare sfrutta l'URL per

49
00:03:31,305 --> 00:03:36,856
consentirgli di riconoscere la necessità di navigare tra il centro.

50
00:03:36,856 --> 00:03:40,775
Quindi, questo è dove Angular Router sfrutta ciò che

51
00:03:40,775 --> 00:03:44,704
è già supportato in HTML5 tramite l'API di cronologia?

52
00:03:44,704 --> 00:03:47,990
Quindi, cosa ci consente di fare l'API della cronologia?

53
00:03:47,990 --> 00:03:52,156
Dà agli sviluppatori la possibilità di modificare l'

54
00:03:52,156 --> 00:03:56,766
URL di un sito web senza causare un aggiornamento della pagina.

55
00:03:56,766 --> 00:04:03,806
Ora, se siete abituati a visitare vari siti web nel vostro browser,

56
00:04:03,806 --> 00:04:10,078
normalmente si dovrebbe o fare clic sulla barra dei segnalibri o

57
00:04:10,078 --> 00:04:15,198
su un link in una pagina o si dovrebbe digitare esplicitamente

58
00:04:15,198 --> 00:04:20,063
l'URL nella barra degli indirizzi del browser.

59
00:04:20,063 --> 00:04:25,310
Ora, quando lo fai, stai specificando esplicitamente l'URL lì.

60
00:04:25,310 --> 00:04:27,152
Ora, quando si specifica un URL,

61
00:04:27,152 --> 00:04:31,470
si sta attivando il browser per andare automaticamente a un server e

62
00:04:31,470 --> 00:04:37,070
recuperare la nuova pagina e rendere la pagina nella finestra del browser.

63
00:04:37,070 --> 00:04:43,180
Ora, se può sopprimere questa necessità di andare a un server e recuperare le informazioni, ma

64
00:04:43,180 --> 00:04:49,280
invece modificare l'URL senza causare questo aggiornamento della pagina,

65
00:04:49,280 --> 00:04:54,450
allora possiamo approfittarne per permetterci di essere in grado di navigare

66
00:04:54,450 --> 00:04:59,620
tra le viste che fanno parte di una singola applicazione e

67
00:04:59,620 --> 00:05:03,890
questo è dove prendiamo vantaggio del HTML5.

68
00:05:03,890 --> 00:05:09,034
History API che supporta metodi come PushState e ReplaceState.

69
00:05:09,034 --> 00:05:13,662
Quindi, PushState consente di aggiungere una voce di cronologia nella

70
00:05:13,662 --> 00:05:18,494
cronologia del browser senza causare effettivamente un aggiornamento della pagina.

71
00:05:18,494 --> 00:05:21,938
Allo stesso modo, un ReplaceState modificherà

72
00:05:21,938 --> 00:05:26,810
la voce della cronologia esistente nella cronologia del browser.

73
00:05:26,810 --> 00:05:30,551
Quindi, è anche possibile utilizzare il

74
00:05:30,551 --> 00:05:35,724
pulsante avanti e indietro del browser per essere in grado di spostarsi

75
00:05:35,724 --> 00:05:41,030
avanti e indietro tra gli URL senza causare un aggiornamento della pagina.

76
00:05:41,030 --> 00:05:45,905
Ora, questo è dove è necessario specificare qualcosa all'interno

77
00:05:45,905 --> 00:05:47,458
della pagina HTML indice chiamato base.

78
00:05:47,458 --> 00:05:52,489
Quindi, quando l'API della cronologia HTML fa uso di questi metodi,

79
00:05:52,489 --> 00:05:57,307
quindi per la modifica, è necessario specificare una

80
00:05:57,307 --> 00:06:02,875
posizione di base da cui si specificano le parti aggiuntive

81
00:06:02,875 --> 00:06:07,930
del percorso URL che non comporterà un aggiornamento della pagina.

82
00:06:07,930 --> 00:06:10,580
Quindi in questo caso, per la nostra applicazione Angular,

83
00:06:10,580 --> 00:06:12,378
questo inizia sempre dalla radice.

84
00:06:12,378 --> 00:06:17,829
Quindi, è per questo che specifichiamo la base come href=»/».

85
00:06:17,829 --> 00:06:22,581
Tutto il resto che viene dopo che nell'URL verrà

86
00:06:22,581 --> 00:06:27,750
trattato all'interno dell'applicazione Angular come qualcosa che

87
00:06:27,750 --> 00:06:33,228
attiva la navigazione che viene gestita il router angolare stesso

88
00:06:33,228 --> 00:06:39,080
senza causare che il browser abbia bisogno di un aggiornamento da un server.

89
00:06:39,080 --> 00:06:44,240
Quindi, è così che il router angolare sfrutta l'API di cronologia HTML5.

90
00:06:45,300 --> 00:06:47,766
Ora, se non hai l'API della cronologia,

91
00:06:47,766 --> 00:06:51,295
l'altro modo di fare la navigazione è usare hashtag.

92
00:06:51,295 --> 00:06:56,558
Lo sai già in HTML, se specifichi un link che inizia

93
00:06:56,558 --> 00:07:01,543
con un hashtag, che fa riferimento a un link all'interno della stessa pagina.

94
00:07:01,543 --> 00:07:05,782
Quindi, quando si fa clic su tali collegamenti, non causerà un aggiornamento della pagina.

95
00:07:05,782 --> 00:07:09,944
Invece, ti reindirizzerà a un'altra posizione all'interno della stessa pagina.

96
00:07:09,944 --> 00:07:12,256
Quindi, questo è un altro modo di fare le cose.

97
00:07:12,256 --> 00:07:17,030
Ma per il rendering pulito, l'API HTML5 supporta questa

98
00:07:17,030 --> 00:07:22,012
API di cronologia che consente di manipolare la cronologia del

99
00:07:22,012 --> 00:07:26,087
browser senza causare un aggiornamento della pagina.

100
00:07:26,087 --> 00:07:28,616
Dopo questa lunga spiegazione

101
00:07:28,616 --> 00:07:33,049
prolissa, prendiamo un esempio per aiutarci a capirlo ancora di più.

102
00:07:33,049 --> 00:07:39,752
Supponiamo di definire il tuo URL come questo, ad esempio, esempio.abc.com/home.

103
00:07:39,752 --> 00:07:43,325
Ora con l'API di cronologia HTML5,

104
00:07:43,325 --> 00:07:48,301
puoi semplicemente prendere l'ultima parte dell'URL e

105
00:07:48,301 --> 00:07:56,988
modificarla in un altro URL come avevo mostrato qui con esempio.abc.com/menu.

106
00:07:56,988 --> 00:08:03,054
Quindi vedi che l'URL ora è stato modificato da barra home a menu barra,

107
00:08:03,054 --> 00:08:08,624
questa modifica può essere attivata utilizzando un metodo di stato push dell'

108
00:08:08,624 --> 00:08:14,216
API della cronologia HTML5 senza come ho detto, senza ricaricare la pagina.

109
00:08:14,216 --> 00:08:18,533
Invece, questo sarà un trigger interno per la

110
00:08:18,533 --> 00:08:24,842
navigazione che il router angolare sfrutta esplicitamente per

111
00:08:24,842 --> 00:08:32,161
supportare la navigazione tra varie viste dell'applicazione Angular.

112
00:08:32,161 --> 00:08:36,828
Ora ovviamente devi essere interessato a come fa il Router angolare ad approfittare

113
00:08:36,828 --> 00:08:37,376
di questo.

114
00:08:37,376 --> 00:08:42,868
Quindi questo è dove il router angolare sfrutta la manipolazione della cronologia

115
00:08:42,868 --> 00:08:47,917
per modificare l'URL del browser senza attivare un aggiornamento della pagina.

116
00:08:47,917 --> 00:08:49,485
Prendiamo un esempio.

117
00:08:49,485 --> 00:08:56,933
Supponiamo di avere la tua applicazione angolare che risiede in questo particolare URL.

118
00:08:56,933 --> 00:09:01,809
Ora, si dà il caso che l'applicazione Angular su cui si

119
00:09:01,809 --> 00:09:06,784
sta lavorando venga renderizzata al browser accedendo a questo particolare URL.

120
00:09:06,784 --> 00:09:13,430
Quindi, ci aiuterà a capire rapidamente cosa ci consente di fare il router angolare.

121
00:09:13,430 --> 00:09:19,790
Quindi, in questo caso, quando si digita questo nell'URL del browser, il

122
00:09:19,790 --> 00:09:24,160
router angolare può essere facilmente configurato per reindirizzare l'utente

123
00:09:24,160 --> 00:09:29,210
a una posizione predefinita all'interno dell'applicazione angolare.

124
00:09:29,210 --> 00:09:33,433
Di solito, ricordami che qualcosa come casa.

125
00:09:33,433 --> 00:09:38,606
Quindi ti porterà al punto di ingresso predefinito per la

126
00:09:38,606 --> 00:09:42,303
tua applicazione angolare che per

127
00:09:42,303 --> 00:09:48,109
ragioni di facile comprensione, lo etichetterò come/home.

128
00:09:48,109 --> 00:09:53,175
Quindi, se il tuo URL contiene localhost: 4200/home,

129
00:09:53,175 --> 00:09:58,249
significa che sei nella tua posizione home predefinita.

130
00:09:58,249 --> 00:10:01,519
Ora, quando questa navigazione viene attivata,

131
00:10:01,519 --> 00:10:07,384
puoi lasciare che il tuo router angolare ti porti automaticamente alla vista,

132
00:10:07,384 --> 00:10:12,017
ad esempio, supportata da quel componente home.

133
00:10:12,017 --> 00:10:16,963
Quindi, quando l'URL diventa localhost: 4200/home,

134
00:10:16,963 --> 00:10:24,605
eseguirai automaticamente il rendering della vista del componente home nella schermata del browser.

135
00:10:24,605 --> 00:10:30,601
Molto esattamente quando si posiziona la visualizzazione che verrà esaminata nella diapositiva successiva e

136
00:10:30,601 --> 00:10:33,086
nell'esercizio che segue.

137
00:10:33,086 --> 00:10:37,903
Allo stesso modo, puoi avere altre viste all'interno

138
00:10:37,903 --> 00:10:42,821
dell'applicazione Angular che possono anche essere supportate tramite altri URL

139
00:10:42,821 --> 00:10:47,153
che sono estensioni per localhost: 4200.

140
00:10:47,153 --> 00:10:53,354
Quindi, ad esempio, se l'URL è localhost: 4200/aboutus, allora ciò

141
00:10:53,354 --> 00:11:00,410
potrebbe portare a mostrarti la vista che viene renderizzata da aboutComponent.

142
00:11:00,410 --> 00:11:05,070
E allo stesso modo, il menu ti mostrerà il MenuComponent e così via.

143
00:11:06,320 --> 00:11:09,088
Quindi ciò che questo ci permette di fare è,

144
00:11:09,088 --> 00:11:14,624
a seconda di ciò che l'URL utilizzato nel tuo browser,

145
00:11:14,624 --> 00:11:19,956
lo userai per navigare automaticamente tra le varie

146
00:11:19,956 --> 00:11:25,515
viste dei tuoi vari componenti della tua applicazione Angular.

147
00:11:25,515 --> 00:11:27,968
Ora, non devi preoccuparti esplicitamente di questo.

148
00:11:27,968 --> 00:11:33,200
Se configuri il Router angolare per occuparsi di tutto questo, il router

149
00:11:33,200 --> 00:11:38,273
si prenderà automaticamente cura di fornirti la navigazione tra questi

150
00:11:38,273 --> 00:11:43,957
componenti come vedremmo nell'esercizio che segue questa particolare lezione.

151
00:11:43,957 --> 00:11:48,407
Ora, prima di procedere all'esercizio in cui impareremo di più

152
00:11:48,407 --> 00:11:53,017
sul router angolare, lasciami attirare rapidamente la tua attenzione su alcuni termini

153
00:11:53,017 --> 00:11:57,945
all'interno del router angolare che incontrerai durante l'esercizio e

154
00:11:57,945 --> 00:12:01,759
vorrei che prestassi particolare attenzione a questi termini,

155
00:12:01,759 --> 00:12:07,357
perché sono fondamentale per capire come funziona effettivamente il router angolare.

156
00:12:07,357 --> 00:12:13,205
Quindi vedresti prima che quando progettiamo il router angolare,

157
00:12:13,205 --> 00:12:18,042
prenderemo quell'aiuto del modulo router che

158
00:12:18,042 --> 00:12:22,669
fa parte della libreria del router a barra angolare.

159
00:12:22,669 --> 00:12:28,094
Quindi, stiamo andando ad importare il modulo router in o l'applicazione angolare

160
00:12:28,094 --> 00:12:32,690
nel modulo app e poi anche noi importeremo i percorsi.

161
00:12:32,690 --> 00:12:37,716
Quindi, i percorsi ci permettono di definire i vari percorsi che la nostra

162
00:12:37,716 --> 00:12:43,335
applicazione Angular fa uso di o che il router angolare fa uso di.

163
00:12:43,335 --> 00:12:49,047
Quindi, in tal caso, saremmo specificando i percorsi sotto forma di un percorso e

164
00:12:49,047 --> 00:12:51,585
il componente corrispondente.

165
00:12:51,585 --> 00:12:56,299
Così, come si è visto nella diapositiva precedente, si è visto che ognuna di queste

166
00:12:56,299 --> 00:13:00,951
estensioni URL è stata mappata alla vista di un particolare componente.

167
00:13:00,951 --> 00:13:05,729
Quindi, quel tipo di informazioni viene fornito a quel router angolare

168
00:13:05,729 --> 00:13:09,885
attraverso percorsi e questi percorsi sono tutti specificati utilizzando

169
00:13:09,885 --> 00:13:14,139
un oggetto JavaScript come questo percorso con due proprietà.

170
00:13:14,139 --> 00:13:18,470
Percorso e componente e alcune proprietà aggiuntive che non

171
00:13:18,470 --> 00:13:22,970
incontreremo in questo momento, ma vedremo in alcuni degli esercizi successivi.

172
00:13:24,610 --> 00:13:28,531
Inoltre, la seconda domanda che ti chiederesti è dove verrebbe

173
00:13:28,531 --> 00:13:30,657
resa questa vista nella tua applicazione Angular?

174
00:13:30,657 --> 00:13:35,863
Questo è dove all'interno del nostro modello del nostro componente app,

175
00:13:35,863 --> 00:13:43,286
includeremo una direttiva chiamata come il routeRoutlet che è specificato come

176
00:13:43,286 --> 00:13:48,628
vedete come <router-outlet> e </router-outlet>.

177
00:13:48,628 --> 00:13:54,890
Questo sarà incluso nel file modello componente dell'app,

178
00:13:54,890 --> 00:13:59,188
ora il tuo router angolare naviga

179
00:13:59,188 --> 00:14:04,484
alle diverse viste dei diversi componenti.

180
00:14:04,484 --> 00:14:08,899
La vista corrispondente del componente verrà inclusa nella

181
00:14:08,899 --> 00:14:13,633
vista delle applicazioni ovunque si specifichi questa presa router particolare.

182
00:14:13,633 --> 00:14:17,773
Quindi, attenzione per questo nell'esercizio che segue.

183
00:14:17,773 --> 00:14:22,752
Inoltre, per attivare la navigazione, si vedrebbe che

184
00:14:22,752 --> 00:14:27,743
con molti dei tag a che vengono utilizzati all'interno dell'applicazione.

185
00:14:27,743 --> 00:14:32,429
Quindi, per esempio, vorrei includere un setup un tag con il

186
00:14:32,429 --> 00:14:36,820
pulsante MD componente materiale angolare nella barra degli strumenti,

187
00:14:36,820 --> 00:14:41,327
nel componente intestazione della nostra applicazione angolare.

188
00:14:41,327 --> 00:14:44,635
Vorrei associare i tag a con un'altra direttiva,

189
00:14:44,635 --> 00:14:47,437
una direttiva attributo chiamata routerLink.

190
00:14:47,437 --> 00:14:53,260
Il RouterLink è una direttiva effettiva che il modulo router ci fornisce.

191
00:14:53,260 --> 00:14:57,966
Questo collegamento router ci permette di specificare il percorso come, ad esempio,

192
00:14:57,966 --> 00:15:00,783
codici scritti, posso vedere un «/menu».

193
00:15:00,783 --> 00:15:05,677
È possibile avere più dettagli di questo per RouterLink.

194
00:15:05,677 --> 00:15:11,646
Ma per l'esercizio, inizieremo con un semplice esempio in cui avremmo,

195
00:15:11,646 --> 00:15:15,806
per esempio, /menu barra home barra contattaci e così

196
00:15:15,806 --> 00:15:19,976
via specificato utilizzando l'attributo RouterLink diretto.

197
00:15:19,976 --> 00:15:25,212
Quindi, quando fai clic su un link come questo nella barra degli strumenti,

198
00:15:25,212 --> 00:15:31,281
allora questo attiverà il Router angolare per causare una modifica o

199
00:15:31,281 --> 00:15:39,502
una navigazione a una vista particolare supportata dal modulo Angular Router.

200
00:15:39,502 --> 00:15:45,391
Quindi, la mappatura tra questo link e i componenti corrispondenti

201
00:15:45,391 --> 00:15:51,800
è già specificata nel percorso che diamo alla nostra applicazione angolare.

202
00:15:51,800 --> 00:15:56,715
Quindi, fai attenzione a tutte queste cose mentre fai l'esercizio.

203
00:15:56,715 --> 00:16:00,895
Spiegherò alcune di queste cose e la ragione per

204
00:16:00,895 --> 00:16:07,366
farle mentre stiamo facendo i passi dell'esercizio che segue questa lezione.

205
00:16:07,366 --> 00:16:11,099
[ MUSIC]