1
00:00:00,000 --> 00:00:08,095
Ora che abbiamo completato l'aggiornamento del lato server,

2
00:00:08,095 --> 00:00:10,770
è il momento di passare al client angolare.

3
00:00:10,770 --> 00:00:13,830
Per tua comodità, ti ho fornito

4
00:00:13,830 --> 00:00:17,700
il repository GitHub che contiene la versione finale

5
00:00:17,700 --> 00:00:20,840
del client angolare che è in grado di comunicare con

6
00:00:20,840 --> 00:00:26,805
il nostro server API REST e quindi rendere le varie viste per il nostro client.

7
00:00:26,805 --> 00:00:29,690
Quindi, ho preso l'applicazione Angular che abbiamo

8
00:00:29,690 --> 00:00:32,895
sviluppato nel secondo corso di questa specializzazione,

9
00:00:32,895 --> 00:00:34,380
e poi l'ho modificata.

10
00:00:34,380 --> 00:00:39,680
Faremo un breve tour attraverso il codice in un po 'più tardi.

11
00:00:39,680 --> 00:00:44,005
Ora, clonerai il repository Git sul tuo computer,

12
00:00:44,005 --> 00:00:47,525
quindi avvierai il tuo Client Angular,

13
00:00:47,525 --> 00:00:50,820
e poi lo vedrai comunicare con il nostro lato server.

14
00:00:50,820 --> 00:00:54,555
Vediamo i dettagli dopo.

15
00:00:54,555 --> 00:00:57,885
Per iniziare con questo esercizio,

16
00:00:57,885 --> 00:01:01,345
nel tuo terminale o nella finestra di comando,

17
00:01:01,345 --> 00:01:04,070
vai nella tua posizione comoda e quindi

18
00:01:04,070 --> 00:01:06,685
al prompt digita git clone

19
00:01:06,685 --> 00:01:21,615
https://github.com/jmuppala/conFusion-Angular6.git.

20
00:01:21,615 --> 00:01:28,705
Quindi, lascia che l'applicazione Angular venga clonata sul tuo computer.

21
00:01:28,705 --> 00:01:30,495
Una volta completata la clonazione,

22
00:01:30,495 --> 00:01:39,340
passa alla cartella Confusion-Angular6

23
00:01:39,340 --> 00:01:43,620
che è stata appena creata quando cloni questo repository git.

24
00:01:43,620 --> 00:01:48,845
Quindi noterai immediatamente che ci sono già un sacco di file.

25
00:01:48,845 --> 00:01:56,700
Ora, al prompt, digitare npm install,

26
00:01:56,700 --> 00:02:00,500
al fine di installare tutti i moduli nodo da

27
00:02:00,500 --> 00:02:04,460
cui dipende questa applicazione angolare.

28
00:02:04,460 --> 00:02:09,415
Così, una volta che i moduli del nodo o tutti installati,

29
00:02:09,415 --> 00:02:18,095
allora possiamo avviare il nostro NG servire per compilare e servire la nostra applicazione angolare.

30
00:02:18,095 --> 00:02:21,765
Una volta che tutto è installato dall'installazione di npm,

31
00:02:21,765 --> 00:02:27,080
assicurati che il tuo server MongoDB sia

32
00:02:27,080 --> 00:02:32,365
operativo e che anche il tuo server API REST sia attivo e funzionante.

33
00:02:32,365 --> 00:02:35,165
Altrimenti, il tuo Client angolare non funzionerà.

34
00:02:35,165 --> 00:02:39,720
Quindi, ora che hai installato il tuo Client Angular sul tuo computer,

35
00:02:39,720 --> 00:02:43,815
al prompt digita ng serve e

36
00:02:43,815 --> 00:02:50,755
la tua applicazione Angular verrà compilata e servita da ng serve in breve tempo.

37
00:02:50,755 --> 00:02:54,725
Una volta che la tua applicazione Angular è stata compilata con successo,

38
00:02:54,725 --> 00:02:59,345
vai a un browser e apri l'applicazione Angular nel browser.

39
00:02:59,345 --> 00:03:01,025
Andando

40
00:03:01,025 --> 00:03:06,665
al browser,

41
00:03:06,665 --> 00:03:12,050
nella barra degli indirizzi, lasciami digitare localhost: 4200 e

42
00:03:12,050 --> 00:03:14,345
vedrai che la tua applicazione Angular viene

43
00:03:14,345 --> 00:03:17,930
avviata ed è visibile sullo schermo qui.

44
00:03:17,930 --> 00:03:21,170
Noterai immediatamente che la tua applicazione Angular

45
00:03:21,170 --> 00:03:24,500
è in grado di recuperare i dati dal server e quindi rendere

46
00:03:24,500 --> 00:03:28,115
le varie parti della tua applicazione Angular proprio come quello che hai

47
00:03:28,115 --> 00:03:33,040
fatto alla fine del tuo corso Angular.

48
00:03:33,080 --> 00:03:35,605
Quando si va a parlare di cartella,

49
00:03:35,605 --> 00:03:42,730
si vedrà anche che la pagina Informazioni rende anche le informazioni in quanto tali.

50
00:03:42,730 --> 00:03:45,970
Nel menu, si vedono le voci nel menu

51
00:03:45,970 --> 00:03:49,475
visualizzate proprio come abbiamo visto con l'applicazione Angular.

52
00:03:49,475 --> 00:03:51,595
Ora, in aggiunta, ho aggiunto in

53
00:03:51,595 --> 00:03:56,320
un'altra pagina all'applicazione a pagina singola chiamata My Favorites,

54
00:03:56,320 --> 00:04:02,590
che non è possibile navigare perché nessun utente è connesso al sistema.

55
00:04:02,590 --> 00:04:05,960
Quindi, vedi che non ho alcun utente connesso al sistema.

56
00:04:05,960 --> 00:04:09,120
Quindi, ecco perché non ha senso indicare i miei preferiti,

57
00:04:09,120 --> 00:04:10,845
perché non sai quale utente,

58
00:04:10,845 --> 00:04:12,990
come preferiti, dovrebbe essere mostrato qui.

59
00:04:12,990 --> 00:04:15,580
La pagina di contatto come al solito.

60
00:04:15,580 --> 00:04:17,345
Ora, facciamo il login.

61
00:04:17,345 --> 00:04:19,235
Per accedere alla nostra applicazione,

62
00:04:19,235 --> 00:04:25,665
faremo clic sul pulsante Login e poi vedrai che viene visualizzata la finestra di dialogo Login.

63
00:04:25,665 --> 00:04:32,620
Quindi, lasciami accedere come uno degli utenti registrati,

64
00:04:32,620 --> 00:04:37,295
che abbiamo registrato come parte di questo corso in precedenza.

65
00:04:37,295 --> 00:04:41,840
Quindi, una volta effettuato il login,

66
00:04:41,840 --> 00:04:44,150
noterai immediatamente che, nell'angolo destro,

67
00:04:44,150 --> 00:04:47,410
vedrai che il pulsante Login è ora trasformato in

68
00:04:47,410 --> 00:04:51,730
Logout e il nome dell'utente è indicato qui.

69
00:04:51,730 --> 00:04:54,500
Quindi, chiunque abbia effettuato l'accesso è indicato qui.

70
00:04:54,500 --> 00:04:56,110
Potresti anche, in linea di principio,

71
00:04:56,110 --> 00:05:00,925
sostituirlo con l'immagine dell'utente.

72
00:05:00,925 --> 00:05:03,715
Ora, per questo è necessario fare più modifiche

73
00:05:03,715 --> 00:05:07,790
sia al client che al server per supportare la visualizzazione dell'immagine qui.

74
00:05:07,790 --> 00:05:10,570
Ma, al momento, ti sto solo mostrando come

75
00:05:10,570 --> 00:05:14,260
possiamo facilmente visualizzare le informazioni dell'utente qui.

76
00:05:14,260 --> 00:05:17,200
Quindi, questo richiede una modifica minore al capo del

77
00:05:17,200 --> 00:05:20,335
componente in cui sarò in grado di recuperare

78
00:05:20,335 --> 00:05:23,410
il nome utente da un servizio

79
00:05:23,410 --> 00:05:27,060
chiamato come servizio OAuth di cui parleremo in breve tempo.

80
00:05:27,060 --> 00:05:29,420
Quindi, una volta che l'utente accede,

81
00:05:29,420 --> 00:05:31,955
quindi se ora fai clic su I miei preferiti,

82
00:05:31,955 --> 00:05:35,360
noterai che non c'è nulla nei miei preferiti per l'utente.

83
00:05:35,360 --> 00:05:40,815
Ovviamente, perché l'utente non ha ancora scelto alcun favorito.

84
00:05:40,815 --> 00:05:44,675
Quindi, andiamo ora al menu e poi nel menu,

85
00:05:44,675 --> 00:05:52,980
lasciami selezionare una voce e poi aggiungeranno questo piatto ai nostri preferiti.

86
00:05:52,980 --> 00:05:55,230
Quindi, scendendo qui sotto,

87
00:05:55,230 --> 00:05:58,415
vedi il simbolo del cuore lì,

88
00:05:58,415 --> 00:06:02,655
fai clic su quello e vedrai che questo sarebbe stato aggiunto in The Favorites.

89
00:06:02,655 --> 00:06:06,620
Il fatto che questo sia stato aggiunto in I Preferiti è indicato

90
00:06:06,620 --> 00:06:12,790
dal cambiamento nell'icona qui da un cuore non pieno a un cuore pieno.

91
00:06:12,790 --> 00:06:15,790
Ora, se vai a qualsiasi altro piatto,

92
00:06:15,790 --> 00:06:19,080
noteresti che questo ha un cuore vuoto, il

93
00:06:19,080 --> 00:06:22,795
che significa che questo non è ancora tra i nostri preferiti.

94
00:06:22,795 --> 00:06:25,070
Quindi, lasciami aggiungere un altro elemento ai

95
00:06:25,070 --> 00:06:29,990
miei preferiti e poi aggiungiamo un terzo elemento ai miei preferiti anche.

96
00:06:29,990 --> 00:06:37,455
Quindi, ora, vedrete che se ora vado ai Miei Preferiti,

97
00:06:37,455 --> 00:06:42,560
vedrete qui una serie di Miei Preferiti.

98
00:06:42,560 --> 00:06:46,610
Quindi, avete visto che ho appena aggiunto questi tre piatti ai miei preferiti.

99
00:06:46,610 --> 00:06:48,820
Quindi, questi vengono visualizzati qui.

100
00:06:48,820 --> 00:06:57,100
Quindi, questo viene monitorato utilizzando l'endpoint dei preferiti sul lato server,

101
00:06:57,100 --> 00:06:59,870
che ho implementato come parte dell'ultimo incarico.

102
00:06:59,870 --> 00:07:05,554
Quindi, se hai fatto questo compito correttamente allora questa parte dovrebbe funzionare come previsto.

103
00:07:05,554 --> 00:07:09,310
Ora, possiamo anche modificare My Favorite.

104
00:07:09,310 --> 00:07:11,320
Quindi, ad esempio, nell'angolo destro qui,

105
00:07:11,320 --> 00:07:14,165
vedi questo interruttore Elimina qui.

106
00:07:14,165 --> 00:07:16,320
Quindi, lasciami accendere.

107
00:07:16,320 --> 00:07:17,730
Quindi, quando lo accendi,

108
00:07:17,730 --> 00:07:22,025
vedrai immediatamente le tre croci rosse

109
00:07:22,025 --> 00:07:27,630
appaiono nella parte inferiore di questi tre elementi in I miei preferiti.

110
00:07:27,630 --> 00:07:29,905
Quando lo clicco fuori, poi spariscono.

111
00:07:29,905 --> 00:07:36,750
Quindi, questo è un modo per attivare i pulsanti di eliminazione sui tuoi Preferiti e poi.

112
00:07:36,750 --> 00:07:40,965
Quindi, lasciatemi andare avanti ed eliminare uno degli elementi da I miei preferiti.

113
00:07:40,965 --> 00:07:42,515
Quindi, quando clicco su quel pulsante,

114
00:07:42,515 --> 00:07:47,540
noterai immediatamente che quell'elemento viene eliminato dai miei preferiti,

115
00:07:47,540 --> 00:07:50,405
e scompare immediatamente e I miei preferiti viene

116
00:07:50,405 --> 00:07:54,780
aggiornato e vedrai il valore risultante che viene mostrato qui.

117
00:07:54,780 --> 00:07:56,115
Allo stesso tempo,

118
00:07:56,115 --> 00:07:58,530
l'interruttore Elimina è disattivato, in

119
00:07:58,530 --> 00:08:01,250
modo che i pulsanti di eliminazione non siano più visibili.

120
00:08:01,250 --> 00:08:07,610
Posso sempre attivare nuovamente i pulsanti di eliminazione facendo clic sul pulsante on e off qui.

121
00:08:07,610 --> 00:08:11,210
Quindi, si noti che i miei preferiti verranno visualizzati solo

122
00:08:11,210 --> 00:08:15,790
per gli utenti che hanno effettuato l'accesso al sistema.

123
00:08:15,790 --> 00:08:21,260
Quindi, si nota immediatamente una serie di modifiche che sono state

124
00:08:21,260 --> 00:08:23,540
apportate al client angolare al fine di

125
00:08:23,540 --> 00:08:26,930
supportare alcune di queste funzionalità aggiuntive che si vedono qui.

126
00:08:26,930 --> 00:08:31,190
Hai anche visto la funzione Login e Logout supportata qui.

127
00:08:31,190 --> 00:08:33,000
Quindi, quando faccio clic sul pulsante Logout,

128
00:08:33,000 --> 00:08:35,930
si nota immediatamente che l'utente viene disconnesso

129
00:08:35,930 --> 00:08:39,800
e il nome utente scompare da lì,

130
00:08:39,800 --> 00:08:44,250
e quindi anche il pulsante viene trasformato nel pulsante Login.

131
00:08:44,560 --> 00:08:49,760
Quindi, con questo, si nota come il mio client Angular è stato

132
00:08:49,760 --> 00:08:54,880
aggiornato per utilizzare il nuovo server API REST

133
00:08:54,880 --> 00:08:59,100
per supportare i preferiti salvati e sul lato server e

134
00:08:59,100 --> 00:09:04,930
quindi automaticamente riflessi nella mia applicazione client come mostrato qui.

135
00:09:04,930 --> 00:09:08,305
Facciamo un breve tour attraverso

136
00:09:08,305 --> 00:09:14,160
il codice angolare che ho fornito per te nel repository GitHub,

137
00:09:14,160 --> 00:09:17,710
e vediamo anche come abbiamo modificato parti del codice

138
00:09:17,710 --> 00:09:21,655
per implementare l'applicazione Angular aggiornata.

139
00:09:21,655 --> 00:09:24,310
Noterai che c'è un nuovo servizio

140
00:09:24,310 --> 00:09:27,130
che ho introdotto qui chiamato servizio di autenticazione.

141
00:09:27,130 --> 00:09:29,295
Il servizio di autenticazione si occupa di

142
00:09:29,295 --> 00:09:35,985
tutte le azioni relative all'autenticazione per l'applicazione Angular.

143
00:09:35,985 --> 00:09:37,715
Quindi, all'interno del servizio di autenticazione,

144
00:09:37,715 --> 00:09:40,760
noterai immediatamente che ho

145
00:09:40,760 --> 00:09:45,545
un insieme di informazioni che ho configurato qui.

146
00:09:45,545 --> 00:09:47,985
Dal momento che conosci già Angular,

147
00:09:47,985 --> 00:09:52,535
dovresti essere in grado di elaborare facilmente tutto ciò che è scritto qui.

148
00:09:52,535 --> 00:09:57,355
Si noti in particolare che all'interno del servizio di autenticazione stesso,

149
00:09:57,355 --> 00:09:59,240
sto memorizzando informazioni come,

150
00:09:59,240 --> 00:10:00,815
ad esempio, TokenKey,

151
00:10:00,815 --> 00:10:06,985
che è la chiave per l'archiviazione locale in cui sto memorizzando il token Web JSON,

152
00:10:06,985 --> 00:10:11,500
e anche alcune variabili aggiuntive

153
00:10:11,500 --> 00:10:16,310
qui dove sto tracciando il nome utente e dove mi trovo autenticato

154
00:10:16,310 --> 00:10:21,955
e tenere traccia del token Web JSON qui.

155
00:10:21,955 --> 00:10:28,540
Ora, iniziamo guardando quando l'utente accede.

156
00:10:28,540 --> 00:10:30,290
Quindi, quando l'utente accede,

157
00:10:30,290 --> 00:10:37,135
allora questa funzione chiamata login verrà chiamata nel nostro servizio di autenticazione qui,

158
00:10:37,135 --> 00:10:40,350
e quando il login viene chiamato nel servizio di autenticazione,

159
00:10:40,350 --> 00:10:44,730
questo verrà passato in un parametro chiamato utente che contiene

160
00:10:44,730 --> 00:10:49,665
il nome utente e la password come parte dell'oggetto JavaScript utente.

161
00:10:49,665 --> 00:10:57,890
Quindi, a questo punto, sto facendo un post HTTP su BaseURL più utenti/login.

162
00:10:57,890 --> 00:11:00,320
Nota anche che qui,

163
00:11:00,320 --> 00:11:06,030
sto fornendo AuthResponse come qualificatore qui.

164
00:11:06,030 --> 00:11:09,945
AuthResponse non è altro che un'interfaccia che ho implementato qui,

165
00:11:09,945 --> 00:11:11,350
in alto qui.

166
00:11:11,350 --> 00:11:14,295
Quindi, questa interfaccia specifica essenzialmente

167
00:11:14,295 --> 00:11:16,860
le informazioni che torneranno come

168
00:11:16,860 --> 00:11:19,670
risposta di autenticazione dal lato server,

169
00:11:19,670 --> 00:11:22,690
la struttura dei dati JSON che stanno

170
00:11:22,690 --> 00:11:25,690
tornando dal lato server e gli oggetti JavaScript corrispondenti.

171
00:11:25,690 --> 00:11:28,865
Quindi, si nota che quando abbiamo aggiornato il server,

172
00:11:28,865 --> 00:11:32,370
ci siamo assicurati che il server invii lo stato,

173
00:11:32,370 --> 00:11:37,035
il successo, il flag e il token nell'indice di stringa.

174
00:11:37,035 --> 00:11:42,000
Quindi, quell'informazione è ottenuta qui.

175
00:11:42,000 --> 00:11:44,240
Ora, quando sto facendo un post su questo,

176
00:11:44,240 --> 00:11:52,975
sto passando il nome utente e la password al post su questo/users/login endpoint.

177
00:11:52,975 --> 00:11:58,375
Quando la risposta ritorna dalla risposta,

178
00:11:58,375 --> 00:12:03,490
il messaggio di risposta stesso conterrà, come abbiamo visto,

179
00:12:03,490 --> 00:12:06,525
il successo, il campo token

180
00:12:06,525 --> 00:12:09,885
e anche il messaggio di stato qui.

181
00:12:09,885 --> 00:12:11,950
Quindi, dal messaggio di risposta,

182
00:12:11,950 --> 00:12:16,960
sto estraendo il token e poi lo trasmetto a questa funzione che implemento qui,

183
00:12:16,960 --> 00:12:20,415
funzione locale qui, chiamata storeUserCredentials.

184
00:12:20,415 --> 00:12:30,295
Quindi, questo verrà restituito alla mia applicazione e verrà memorizzato nel mio lato client,

185
00:12:30,295 --> 00:12:32,220
nella memoria locale.

186
00:12:32,220 --> 00:12:34,545
Quindi, da questa funzione,

187
00:12:34,545 --> 00:12:37,870
sto restituendo queste informazioni

188
00:12:37,870 --> 00:12:51,610
alla funzione chiamante da dove ho avviato il processo di accesso.

189
00:12:51,610 --> 00:12:56,345
Quindi, in questo modo, indicherò al mio componente di login che il login ha avuto successo,

190
00:12:56,345 --> 00:12:59,680
e quindi passerò anche il nome utente al mio componente di login,

191
00:12:59,680 --> 00:13:03,860
che poi passerà tali informazioni sul componente di intestazione,

192
00:13:03,860 --> 00:13:08,830
e il componente di intestazione lo usa per riflettere il nome utente sul nella parte superiore lì,

193
00:13:08,830 --> 00:13:11,145
e anche noi prendiamo l'errore qui.

194
00:13:11,145 --> 00:13:16,390
Quindi, questa è un'implementazione molto semplice di come abbiamo eseguito il login.

195
00:13:16,390 --> 00:13:17,840
Quando si esegue la disconnessione, si

196
00:13:17,840 --> 00:13:20,735
noti cosa faccio quando l'utente chiama una disconnessione.

197
00:13:20,735 --> 00:13:22,070
Quando l'utente chiama un logout,

198
00:13:22,070 --> 00:13:24,560
distruggo semplicemente le credenziali dell'utente,

199
00:13:24,560 --> 00:13:26,845
che include buttare via

200
00:13:26,845 --> 00:13:33,085
il token Web JSON che ho ottenuto quando ho effettuato l'accesso alla mia applicazione.

201
00:13:33,085 --> 00:13:37,010
Quindi, alcune funzioni di supporto aggiuntive che ho implementato qui chiamate

202
00:13:37,010 --> 00:13:40,920
getUserName sono loggate e getToken,

203
00:13:40,920 --> 00:13:45,370
che sarà utile dalle mie altre applicazioni,

204
00:13:45,370 --> 00:13:50,140
altri componenti e servizi.

205
00:13:50,140 --> 00:13:57,375
Quindi, ora diamo un'occhiata ad alcune delle funzioni di supporto che abbiamo implementato qui.

206
00:13:57,375 --> 00:14:04,685
Pertanto, LoadUserCredentials recupererà le credenziali dall'archiviazione locale.

207
00:14:04,685 --> 00:14:10,800
Quindi, noti che qui sto chiamando localStorage e poi dico getItem.

208
00:14:10,800 --> 00:14:12,750
Quindi, localStorage qui sta utilizzando

209
00:14:12,750 --> 00:14:17,305
la memoria locale del browser Web supportata dai browser Web standard

210
00:14:17,305 --> 00:14:19,140
e memorizzando le informazioni lì,

211
00:14:19,140 --> 00:14:21,620
e quindi sta recuperando queste informazioni lì.

212
00:14:21,620 --> 00:14:23,830
Quindi, da lì, le informazioni sulle credenziali,

213
00:14:23,830 --> 00:14:25,745
se valide,

214
00:14:25,745 --> 00:14:27,950
allora tali credenziali saranno impostate qui.

215
00:14:27,950 --> 00:14:32,735
Quindi, tutte queste variabili che ho definito qui verranno inizializzate con

216
00:14:32,735 --> 00:14:38,965
le informazioni appropriate dopo essere state recuperate da localStorage.

217
00:14:38,965 --> 00:14:42,560
Ora, allo stesso modo, la funzione StoreUserCredentials

218
00:14:42,560 --> 00:14:46,285
che ho implementato qui viene chiamata dal metodo di login.

219
00:14:46,285 --> 00:14:50,165
Quando queste informazioni vengono passate,

220
00:14:50,165 --> 00:14:52,290
le informazioni sulle credenziali vengono passate,

221
00:14:52,290 --> 00:14:57,665
tali informazioni vengono memorizzate in LocalStorage a questo punto con tale chiave.

222
00:14:57,665 --> 00:15:00,825
Quindi, UseCredentials

223
00:15:00,825 --> 00:15:05,510
imposta fondamentalmente tutte le variabili che ho nel servizio di autenticazione.

224
00:15:05,510 --> 00:15:07,285
Quindi, imposta il token,

225
00:15:07,285 --> 00:15:09,225
imposta il nome utente

226
00:15:09,225 --> 00:15:14,270
e quindi imposta la funzione IsAuthenticated qui.

227
00:15:14,270 --> 00:15:17,590
Quindi, nota che il nome utente stesso qui, l'

228
00:15:17,590 --> 00:15:20,865
ho dichiarato come soggetto,

229
00:15:20,865 --> 00:15:23,595
che non è altro che un osservabile qui.

230
00:15:23,595 --> 00:15:27,410
Quindi, questo è il motivo per cui ogni volta che dico,

231
00:15:27,410 --> 00:15:30,705
SendUserName qui, dico credenziali username.

232
00:15:30,705 --> 00:15:34,780
Quindi, questo SendUserName implementato proprio in alto qui, si

233
00:15:34,780 --> 00:15:40,080
noti che questo è dove viene inviato il valore osservabile.

234
00:15:40,080 --> 00:15:43,305
Quindi, è per questo che sto dicendo questo nome utente dopo.

235
00:15:43,305 --> 00:15:45,370
Quindi, l'osservabile.

236
00:15:45,370 --> 00:15:49,630
Rimanderà indietro il nome che viene fornito come

237
00:15:49,630 --> 00:15:55,130
parametro a chi si è registrato per osservare questo osservabile.

238
00:15:55,130 --> 00:15:59,070
Quindi questo osservabile, lo osserverò dal

239
00:15:59,070 --> 00:16:03,980
mio componente di intestazione e così in questo modo ogni volta che il nome utente cambia,

240
00:16:03,980 --> 00:16:09,870
da indefinito a un dato nome utente o viceversa,

241
00:16:09,870 --> 00:16:13,040
allora posso aggiornare

242
00:16:13,040 --> 00:16:17,670
la mia barra degli strumenti nel componente di intestazione per riflettere se l'utente è connesso o disconnesso.

243
00:16:17,670 --> 00:16:21,770
Quindi questo è impostato utilizzando questo useCredentials.

244
00:16:21,770 --> 00:16:29,010
Ora DestroyUserCredentials imposta fondamentalmente il token di autenticazione su undefined.

245
00:16:29,010 --> 00:16:34,320
Cancella il nome utente e quindi imposta isAuthenticated su false e quindi

246
00:16:34,320 --> 00:16:37,560
rimuove queste informazioni dal mio negozio locale,

247
00:16:37,560 --> 00:16:40,930
quindi sta fondamentalmente gettando via il jsonwebtoken in questa parte.

248
00:16:40,930 --> 00:16:43,330
Quindi è così che ami un utente.

249
00:16:43,330 --> 00:16:47,150
Quindi, una volta perso il jsonwebtoken, l'utente non può più

250
00:16:47,150 --> 00:16:49,850
autenticarsi

251
00:16:49,850 --> 00:16:53,305
sul lato server perché il token non è più disponibile per noi.

252
00:16:53,305 --> 00:16:58,340
Ecco come implementiamo la funzione di logout all'interno della nostra applicazione.

253
00:16:58,340 --> 00:17:01,030
Quindi prenditi un po 'di tempo per passare attraverso

254
00:17:01,030 --> 00:17:05,350
auth.service qui per vedere come ho implementato le varie funzionalità.

255
00:17:05,350 --> 00:17:06,865
Ora, a questo punto,

256
00:17:06,865 --> 00:17:13,190
sono sicuro che tu abbia molta familiarità con come sono implementate le applicazioni angolari,

257
00:17:13,190 --> 00:17:17,960
quindi non dovrebbe essere così difficile per te capire come viene implementato questo codice.

258
00:17:17,960 --> 00:17:24,575
Ora un'altra funzione su cui vorrei attirare la tua attenzione è il token JWT di controllo, qui.

259
00:17:24,575 --> 00:17:29,040
Questa funzione può essere chiamata in qualsiasi momento per verificare e

260
00:17:29,040 --> 00:17:33,360
assicurarsi che il nostro token web JSON sia ancora valido.

261
00:17:33,360 --> 00:17:40,500
Quindi questo è dove sto inviando la richiesta get agli utenti slash check token JWT.

262
00:17:40,500 --> 00:17:49,450
Ricordiamo che abbiamo implementato questo percorso sul lato server nel file.js e.

263
00:17:49,450 --> 00:17:55,385
Quindi da lì saremo in grado di verificare se il jsonwebtoken è ancora valido o meno.

264
00:17:55,385 --> 00:17:57,855
Se il jsonwebtoken non è valido,

265
00:17:57,855 --> 00:17:59,170
allora distruggeremo le

266
00:17:59,170 --> 00:18:03,045
credenziali dell'utente e quindi ci aspettiamo che l'utente acceda di nuovo.

267
00:18:03,045 --> 00:18:06,550
Se il jsonwebtoken è valido, allora va bene e

268
00:18:06,550 --> 00:18:10,375
possiamo procedere in avanti consentendo

269
00:18:10,375 --> 00:18:14,540
all'utente di riconoscere che abbiamo effettuato l'accesso. Quindi, anche se chiudi

270
00:18:14,540 --> 00:18:18,665
il browser e poi riapri il browser e poi riapri l'applicazione Angular,

271
00:18:18,665 --> 00:18:26,625
se hai effettuato l'accesso in precedenza e il jsonwebtoken è stato salvato nella memoria locale,

272
00:18:26,625 --> 00:18:28,930
può essere recuperato da lì e quindi

273
00:18:28,930 --> 00:18:33,740
il tuo stato di accesso verrà ripristinato all'interno dell'applicazione Angular.

274
00:18:33,740 --> 00:18:36,420
Se il token web json è scaduto

275
00:18:36,420 --> 00:18:38,635
, non ci sarà permesso accedere.

276
00:18:38,635 --> 00:18:44,280
Quindi ogni volta che aggiorni la tua applicazione Angular nel

277
00:18:44,280 --> 00:18:47,290
tuo browser o ricarichi l'applicazione Angular nel tuo browser,

278
00:18:47,290 --> 00:18:50,550
controllerai il jsonwebtoken per assicurarti che sia ancora valido.

279
00:18:50,550 --> 00:18:53,095
Se non è valido, l'utente verrà

280
00:18:53,095 --> 00:18:56,200
cancellato e quindi dovrai effettuare nuovamente il login.

281
00:18:56,200 --> 00:19:00,370
In caso contrario, le informazioni dell'utente connesso vengono recuperate

282
00:19:00,370 --> 00:19:05,020
da localStorage e quindi inizializzate all'interno della mia applicazione Angular.

283
00:19:05,020 --> 00:19:09,765
Periodicamente, se in qualsiasi momento il tuo server

284
00:19:09,765 --> 00:19:15,575
risponde con un messaggio 401 Non autorizzato,

285
00:19:15,575 --> 00:19:16,880
anche a quel punto,

286
00:19:16,880 --> 00:19:22,045
controlleremo nuovamente se il jsonwebtoken è valido e quindi lo permettiamo.

287
00:19:22,045 --> 00:19:26,960
Lo faremo usando qualcosa chiamato intercettori Http.

288
00:19:26,960 --> 00:19:30,630
Lasciate che faccia un giro in quella parte del codice,

289
00:19:30,630 --> 00:19:35,180
e poi vi spieghi come funzionano gli intercettori in breve tempo.

290
00:19:35,180 --> 00:19:38,635
Quindi ora oltre a AuthService,

291
00:19:38,635 --> 00:19:45,545
nella cartella dei servizi stessa vedrai questo file chiamato file AuthInterceptors.ts.

292
00:19:45,545 --> 00:19:51,285
Quindi apri questo e vedrai che qui ho implementato intercettori Http.

293
00:19:51,285 --> 00:19:54,435
Ora che cosa fanno questi intercettori Http,

294
00:19:54,435 --> 00:20:00,780
questo è supportato con il client Http che viene come parte di Angular 4.4.

295
00:20:00,780 --> 00:20:04,080
Quello che gli intercettori http fanno è che possono intercettare

296
00:20:04,080 --> 00:20:06,180
richieste in uscita messaggi apportare

297
00:20:06,180 --> 00:20:09,695
modifiche al messaggio di richiesta prima che venga inviato.

298
00:20:09,695 --> 00:20:13,530
Allo stesso modo, possono intercettare i messaggi di risposta in arrivo e quindi modificare

299
00:20:13,530 --> 00:20:15,660
il messaggio di risposta in arrivo prima che

300
00:20:15,660 --> 00:20:18,970
la risposta venga consegnata all'applicazione Angular.

301
00:20:18,970 --> 00:20:22,920
Quindi, attraverso l'intercettazione, come funziona questo intercettore?

302
00:20:22,920 --> 00:20:25,625
Quindi, per far funzionare questo intercettore,

303
00:20:25,625 --> 00:20:28,620
implementiamo, come vedete,

304
00:20:28,620 --> 00:20:37,285
una classe chiamata come HttpInterceptor estendendo HttpInterceptor.

305
00:20:37,285 --> 00:20:39,805
Quindi qui ho implementato AuthInterceptor.

306
00:20:39,805 --> 00:20:42,175
Quindi cosa fa questo AuthInterceptor?

307
00:20:42,175 --> 00:20:47,660
Questo AuthInterceptor sta essenzialmente catturando le richieste in uscita.

308
00:20:47,660 --> 00:20:51,785
Quindi, per catturare una richiesta in uscita, chiami questa funzione chiamata intercetta

309
00:20:51,785 --> 00:20:56,700
e quindi questo ti darà accesso alla richiesta e alla successiva.

310
00:20:56,700 --> 00:21:00,550
Quindi potresti concatenare

311
00:21:00,550 --> 00:21:05,080
un gruppo di intercettori uno dietro l'altro se lo scegli, in

312
00:21:05,080 --> 00:21:11,050
modo che possano elaborare le richieste in uscita una dopo l'altra se lo scegli.

313
00:21:11,050 --> 00:21:20,260
Ciò che questa intercetta fa è che ti dà accesso al messaggio di richiesta Http.

314
00:21:20,260 --> 00:21:23,300
Quindi, quando ottengo l'accesso al messaggio di richiesta Http,

315
00:21:23,300 --> 00:21:27,810
noterai che qui sto iniettando il servizio di autenticazione.

316
00:21:27,810 --> 00:21:33,870
Ora, a differenza del modo in cui stavamo iniettando servizi nei componenti,

317
00:21:33,870 --> 00:21:37,295
qui sto mostrando l'uso di un iniettore.

318
00:21:37,295 --> 00:21:39,995
Un iniettore fa parte del codice angolare.

319
00:21:39,995 --> 00:21:44,080
Quindi, usando un iniettore è possibile iniettare servizi o

320
00:21:44,080 --> 00:21:50,020
altri componenti in altri servizi o componenti.

321
00:21:50,020 --> 00:21:57,495
Quindi qui vedi che sto iniettando il servizio di autenticazione qui usando questo.

322
00:21:57,495 --> 00:22:04,690
Ora un altro motivo è che se inietto direttamente il servizio nel mio costruttore,

323
00:22:04,690 --> 00:22:11,545
svilupperà una dipendenza circolare tra l'intercettore e AuthService,

324
00:22:11,545 --> 00:22:15,200
e ciò causerà il funzionamento del codice.

325
00:22:15,200 --> 00:22:18,190
Quindi questo è un lavoro intorno ai problemi. In

326
00:22:18,190 --> 00:22:21,430
modo che il tuo intercettatore - perché ho bisogno di

327
00:22:21,430 --> 00:22:25,810
AuthService, per entrare in possesso del token da

328
00:22:25,810 --> 00:22:31,680
AuthService e AuthService a sua volta dipende da questo intercettore, ecco

329
00:22:31,680 --> 00:22:38,760
perché per rompere il ciclo sto iniettando esplicitamente AuthService in questo caso.

330
00:22:38,760 --> 00:22:42,630
Ora questo è qualcosa che ho capito per tentativi

331
00:22:42,630 --> 00:22:47,080
ed errori, inizialmente sono andato avanti e ho semplicemente iniettato

332
00:22:47,080 --> 00:22:49,600
i servizi dispari al costruttore e poi ho scoperto che

333
00:22:49,600 --> 00:22:54,270
Angular non stava compilando il codice, quindi ho capito che

334
00:22:54,270 --> 00:23:01,510
c'era un errore lì e poi dopo aver fatto qualche ricerca su Google poi

335
00:23:01,510 --> 00:23:05,330
scoperto che questo è un modo alternativo di gestire

336
00:23:05,330 --> 00:23:09,620
la stessa cosa e questo funziona molto meglio per la nostra applicazione.

337
00:23:09,620 --> 00:23:13,560
Quindi, una volta iniettato AuthService dal servizio,

338
00:23:13,560 --> 00:23:17,555
ottengo il token e poi noto cosa sto facendo qui.

339
00:23:17,555 --> 00:23:23,200
Qui sto dicendo clone const auth req req clone.

340
00:23:23,200 --> 00:23:29,380
Quindi cloneremo la richiesta e poi imposteremo nelle intestazioni.

341
00:23:29,380 --> 00:23:32,110
Quindi diremo che le intestazioni req impostano

342
00:23:32,110 --> 00:23:35,240
l'autorizzazione e poi noteremo cosa sto

343
00:23:35,240 --> 00:23:38,005
impostando l'intestazione di autorizzazione per essere, portatore.

344
00:23:38,005 --> 00:23:42,100
Più AuthToken.

345
00:23:42,100 --> 00:23:47,360
Quindi nell'intestazione di autorizzazione sto impostando il portatore e AuthToken qui.

346
00:23:47,360 --> 00:23:49,550
Quindi è così che sto impostando

347
00:23:49,550 --> 00:23:53,080
l'intestazione di autorizzazione

348
00:23:53,080 --> 00:23:57,465
nel messaggio di richiesta in uscita nella mia applicazione Angular. Quindi proprio li'.

349
00:23:57,465 --> 00:24:01,660
Ed è così che ho assicurato che tutte le richieste in uscita

350
00:24:01,660 --> 00:24:06,645
abbiano l'intestazione di autorizzazione impostata prima che vengano passate al lato server.

351
00:24:06,645 --> 00:24:12,775
E poi, lo passeremo semplicemente al prossimo intercettore, se esiste,

352
00:24:12,775 --> 00:24:15,140
o sulla coda in uscita, in

353
00:24:15,140 --> 00:24:19,935
modo che il messaggio di richiesta venga inviato al lato server.

354
00:24:19,935 --> 00:24:24,830
Allo stesso modo, ho un altro intercettore che ho implementato qui.

355
00:24:24,830 --> 00:24:30,260
Questo intercettore intercetta tutti i messaggi di risposta non autorizzati

356
00:24:30,260 --> 00:24:31,800
che stanno tornando dal lato server.

357
00:24:31,800 --> 00:24:37,150
Quindi, se il server risponde con un 401 messaggio di risposta non autorizzata.

358
00:24:37,150 --> 00:24:39,550
Quindi a quel punto di nuovo, stessa cosa,

359
00:24:39,550 --> 00:24:42,760
ho impostato AuthService qui,

360
00:24:42,760 --> 00:24:46,410
e poi, dentro qui allora dirò,

361
00:24:46,410 --> 00:24:49,060
gestisco se errore.

362
00:24:49,060 --> 00:24:54,800
Quindi questo è dove entrerò in possesso di HttpEvent qui.

363
00:24:54,800 --> 00:25:04,580
L' HttpEvent è un oggetto di livello inferiore rispetto

364
00:25:04,580 --> 00:25:08,630
a una richiesta, ma che ci permette di ottenere l'accesso al messaggio di risposta in arrivo,

365
00:25:08,630 --> 00:25:12,530
e quindi controlleremo se c'è un errore,

366
00:25:12,530 --> 00:25:17,235
e quindi se l'errore è un'istanza di risposta di errore HTTP,

367
00:25:17,235 --> 00:25:20,770
e se lo stato di errore è 401.

368
00:25:20,770 --> 00:25:28,220
Quindi il che significa che ho appena rilevato che il server ha inviato un messaggio di errore 401.

369
00:25:28,220 --> 00:25:32,305
Quindi il che significa che c'era qualche problema di autorizzazione sul lato server.

370
00:25:32,305 --> 00:25:33,790
Quindi a quel punto controllerò

371
00:25:33,790 --> 00:25:37,620
il token web json per assicurarmi che il token web json sia ancora valido.

372
00:25:37,620 --> 00:25:39,030
Se non è valido,

373
00:25:39,030 --> 00:25:44,910
allora scarterò le mie credenziali e mi aspetto che l'utente acceda di nuovo.

374
00:25:44,910 --> 00:25:48,880
Quindi in questo modo mi assicurerò che se

375
00:25:48,880 --> 00:25:53,480
il mio token web json scade nel processo di tentativo di recuperare i dati,

376
00:25:53,480 --> 00:25:58,045
verrà comunque intercettato da qui perché se il server risponde con un 401,

377
00:25:58,045 --> 00:26:00,280
lo intercetterò e poi cancellerò

378
00:26:00,280 --> 00:26:03,830
il mio token web json e mi aspetto che l'utente effettui nuovamente il login.

379
00:26:03,830 --> 00:26:08,750
Possiamo anche reindirizzare l'utente alla pagina di accesso se

380
00:26:08,750 --> 00:26:12,330
lo vuoi, ma con l'applicazione Angular è un po 'più complicato

381
00:26:12,330 --> 00:26:16,275
farlo e non volevo confonderti facendo tutto questo.

382
00:26:16,275 --> 00:26:19,385
Invece, sto semplicemente disconnettendo

383
00:26:19,385 --> 00:26:22,500
l'utente a questo punto e quindi distruggendo le credenziali dell'utente, in

384
00:26:22,500 --> 00:26:25,855
modo che l'utente possa accedere a quel punto.

385
00:26:25,855 --> 00:26:33,880
Quindi, semplice gestione di come iniettiamo l'intestazione di autorizzazione nella richiesta in uscita

386
00:26:33,880 --> 00:26:38,850
e intercettiamo anche eventuali 401 messaggi non autorizzati

387
00:26:38,850 --> 00:26:40,820
che stanno tornando dal lato server.

388
00:26:40,820 --> 00:26:45,860
Quindi, vedi come queste modifiche aggiuntive devono essere

389
00:26:45,860 --> 00:26:51,955
apportate all'applicazione Angular per farlo funzionare con il lato server.

390
00:26:51,955 --> 00:26:55,125
Con la parte di autenticazione impostata in,

391
00:26:55,125 --> 00:26:58,200
se non si dispone di autenticazione e se si stava solo per

392
00:26:58,200 --> 00:27:02,485
accedere agli endpoint API rimanenti e ottenere operazioni, non

393
00:27:02,485 --> 00:27:05,240
è nemmeno necessario preoccuparsi di nessuna di queste cose.

394
00:27:05,240 --> 00:27:06,790
Non è richiesta alcuna autenticazione.

395
00:27:06,790 --> 00:27:09,140
I dati possono essere recuperati molto facilmente.

396
00:27:09,140 --> 00:27:10,590
Ma per qualsiasi

397
00:27:10,590 --> 00:27:12,395
operazione di post, put ed delete,

398
00:27:12,395 --> 00:27:15,630
abbiamo bisogno di supportare tutte queste funzionalità.

399
00:27:15,630 --> 00:27:21,375
Quindi questo è il motivo per cui ho implementato la parte di autenticazione nella mia applicazione.

400
00:27:21,375 --> 00:27:23,995
Anche come ho illustrato in precedenza,

401
00:27:23,995 --> 00:27:26,985
quando nessun utente è connesso,

402
00:27:26,985 --> 00:27:32,570
allora non saremo in grado di navigare al mio endpoint preferiti,

403
00:27:32,570 --> 00:27:35,035
ma quando un utente è connesso,

404
00:27:35,035 --> 00:27:40,420
allora saremo in grado di vedere i miei preferiti per l'utente specifico.

405
00:27:40,420 --> 00:27:45,095
Questo viene implementato utilizzando le guardie del percorso in Angular.

406
00:27:45,095 --> 00:27:47,995
Ora per implementare queste guardie di percorso,

407
00:27:47,995 --> 00:27:52,080
ho implementato un altro servizio qui chiamato AuthGuardService.

408
00:27:52,080 --> 00:27:54,170
Quindi, in questo AuthGuardService,

409
00:27:54,170 --> 00:27:57,970
abbiamo implementato questo metodo chiamato metodo CanActivate che

410
00:27:57,970 --> 00:28:02,225
faremo sottoclasse per implementare questo.

411
00:28:02,225 --> 00:28:05,705
E nel metodo CanActivate,

412
00:28:05,705 --> 00:28:08,550
l'implementazione restituirà un booleano,

413
00:28:08,550 --> 00:28:10,090
e in questo caso,

414
00:28:10,090 --> 00:28:15,630
ciò che controlliamo è se questo utente è connesso,

415
00:28:15,630 --> 00:28:18,605
quindi permetteremo all'utente di navigare.

416
00:28:18,605 --> 00:28:25,480
In caso contrario, si sposterà l'utente all'endpoint home.

417
00:28:25,480 --> 00:28:31,175
Quindi questo è il modo in cui la guardia del percorso è implementata in questo caso.

418
00:28:31,175 --> 00:28:33,955
Ora, per fare uso di questa guardia percorso,

419
00:28:33,955 --> 00:28:41,780
andremo a vedere come i percorsi sono aggiornati per fare uso delle guardie percorso.

420
00:28:41,780 --> 00:28:44,520
Quindi nel file routes.ts,

421
00:28:44,520 --> 00:28:50,435
si può vedere che per il componente favorites,

422
00:28:50,435 --> 00:28:54,510
vediamo che specifichiamo il percorso come preferiti e il componente come

423
00:28:54,510 --> 00:28:58,620
FavoritesComponent e quindi specifichiamo questo altro campo

424
00:28:58,620 --> 00:29:07,785
chiamato CanActivate per il quale abbiamo specificato AuthGuard come parametro qui,

425
00:29:07,785 --> 00:29:12,445
e questo AuthGuard non è altro che il servizio AuthGuard che abbiamo implementato,

426
00:29:12,445 --> 00:29:14,825
che viene importato qui.

427
00:29:14,825 --> 00:29:20,405
Quindi in questo modo quando AuthGuard restituisce false,

428
00:29:20,405 --> 00:29:24,755
allora non ti sarà permesso navigare al componente preferiti,

429
00:29:24,755 --> 00:29:28,105
invece, verrai reindirizzato a casa,

430
00:29:28,105 --> 00:29:36,245
ma quando l'utente è connesso ovviamente AuthGuard valuterà true,

431
00:29:36,245 --> 00:29:37,390
e in questo caso,

432
00:29:37,390 --> 00:29:41,665
allora sarai in grado per passare al percorso dei preferiti lì.

433
00:29:41,665 --> 00:29:49,700
Ora anche allo stesso modo ci sono piccole modifiche ai componenti rimanenti lì dentro,

434
00:29:49,700 --> 00:29:52,200
che ti permettono di affrontare

435
00:29:52,200 --> 00:29:57,365
la complessità di come il tuo client e server parleranno tra loro.

436
00:29:57,365 --> 00:30:02,555
In particolare, si noti come il componente di intestazione è stato aggiornato per

437
00:30:02,555 --> 00:30:08,195
riflettere lo stato di accesso dell'utente nella barra degli strumenti in alto.

438
00:30:08,195 --> 00:30:11,500
Questo è ancora un altro cambiamento interessante che ho

439
00:30:11,500 --> 00:30:15,710
apportato al componente di intestazione nella nostra applicazione.

440
00:30:15,710 --> 00:30:20,220
Quindi lascerò che questo sia un esercizio per capire come è stato attuato.

441
00:30:20,220 --> 00:30:22,160
Codice molto semplice lì.

442
00:30:22,160 --> 00:30:24,660
Dovrebbe essere facile per te capirlo.

443
00:30:24,660 --> 00:30:28,020
Quindi con tutti questi cambiamenti, ora,

444
00:30:28,020 --> 00:30:32,095
il mio client angolare è in grado di interagire con il mio server.

445
00:30:32,095 --> 00:30:36,540
Permettetemi di mostrarvi di nuovo come possiamo pubblicare alcuni commenti al server,

446
00:30:36,540 --> 00:30:41,995
e poi vedere il commento immediatamente riflesso nel piatto.

447
00:30:41,995 --> 00:30:45,325
Quindi, tornando nuovamente alla nostra applicazione,

448
00:30:45,325 --> 00:30:50,050
ora possiamo andare al menu e poi tirare su qualsiasi piatto qui,

449
00:30:50,050 --> 00:30:52,740
e posso postare commenti al piatto qui,

450
00:30:52,740 --> 00:30:59,600
quindi vorrei impostare immediatamente la valutazione qui,

451
00:30:59,600 --> 00:31:02,540
e il mio valore commento qui.

452
00:31:03,540 --> 00:31:06,700
Si noti che non sto inserendo

453
00:31:06,700 --> 00:31:15,735
il mio nome utente o il nome del mio autore qui nel modulo qui.

454
00:31:15,735 --> 00:31:18,470
Ora, naturalmente, per inviare un commento,

455
00:31:18,470 --> 00:31:19,590
devi essere loggato.

456
00:31:19,590 --> 00:31:24,520
Quindi, se non sei loggato in questo commento non sarà accettato dal mio server.

457
00:31:24,520 --> 00:31:26,935
Quindi fammi prima accedere.

458
00:31:26,935 --> 00:31:32,890
Quindi posso accedere qui.

459
00:31:32,890 --> 00:31:34,220
E nel momento in cui accedo,

460
00:31:34,220 --> 00:31:39,255
si nota immediatamente che la barra degli strumenti dell'intestazione è aggiornata per indicare il mio stato.

461
00:31:39,255 --> 00:31:41,375
Ora posso postare questo commento.

462
00:31:41,375 --> 00:31:43,990
E noterai che quando pubblico il commento,

463
00:31:43,990 --> 00:31:46,440
il commento viene aggiunto nell'elenco dei commenti

464
00:31:46,440 --> 00:31:50,575
e noterai anche che il campo dell'autore viene compilato automaticamente qui.

465
00:31:50,575 --> 00:31:54,040
Perché è così che abbiamo impostato il nostro lato server.

466
00:31:54,040 --> 00:31:55,570
Nel campo dei commenti,

467
00:31:55,570 --> 00:31:58,880
abbiamo impostato il nostro utente come

468
00:31:58,880 --> 00:32:05,890
riferimento alle informazioni utente

469
00:32:05,890 --> 00:32:09,755
che memorizziamo nel nostro lato server, e dal momento che usiamo il popolare,

470
00:32:09,755 --> 00:32:11,585
Mongoose Popolate sul lato server,

471
00:32:11,585 --> 00:32:14,080
le informazioni utente vengono automaticamente popolate

472
00:32:14,080 --> 00:32:16,715
nei commenti in arrivo dal server lato.

473
00:32:16,715 --> 00:32:21,130
Quindi, è così che noti come sto sfruttando ciò che

474
00:32:21,130 --> 00:32:25,615
il server mi fornisce già per compilare automaticamente i dettagli.

475
00:32:25,615 --> 00:32:31,180
Quindi, piccole modifiche anche nella

476
00:32:31,180 --> 00:32:38,880
pagina dei dettagli del piatto per riflettere l'uso del supporto dei commenti sul lato server.

477
00:32:38,880 --> 00:32:43,769
Con questo ho completato la rapida illustrazione

478
00:32:43,769 --> 00:32:49,575
del client Angular che abbiamo implementato come parte di questo esercizio.

479
00:32:49,575 --> 00:32:55,990
E spero che tu passi anche attraverso i dettagli del codice nel client Angular,

480
00:32:55,990 --> 00:32:59,410
e quindi rifletti su ciò che hai imparato nel corso Angular e veda

481
00:32:59,410 --> 00:33:03,105
come le modifiche ci consentono di implementare

482
00:33:03,105 --> 00:33:06,350
in un client angolare modificato che ora è in

483
00:33:06,350 --> 00:33:09,705
grado di comunicare con il server e quindi supportano tutte le funzionalità

484
00:33:09,705 --> 00:33:17,310
che originariamente intendevamo implementare come parte sia del client che del lato server.