Ora che abbiamo completato l'aggiornamento del lato server,
è il momento di passare al client angolare.
Per tua comodità, ti ho fornito
il repository GitHub che contiene la versione finale
del client angolare che è in grado di comunicare con
il nostro server API REST e quindi rendere le varie viste per il nostro client.
Quindi, ho preso l'applicazione Angular che abbiamo
sviluppato nel secondo corso di questa specializzazione,
e poi l'ho modificata.
Faremo un breve tour attraverso il codice in un po 'più tardi.
Ora, clonerai il repository Git sul tuo computer,
quindi avvierai il tuo Client Angular,
e poi lo vedrai comunicare con il nostro lato server.
Vediamo i dettagli dopo.
Per iniziare con questo esercizio,
nel tuo terminale o nella finestra di comando,
vai nella tua posizione comoda e quindi
al prompt digita git clone
https://github.com/jmuppala/conFusion-Angular6.git.
Quindi, lascia che l'applicazione Angular venga clonata sul tuo computer.
Una volta completata la clonazione,
passa alla cartella Confusion-Angular6
che è stata appena creata quando cloni questo repository git.
Quindi noterai immediatamente che ci sono già un sacco di file.
Ora, al prompt, digitare npm install,
al fine di installare tutti i moduli nodo da
cui dipende questa applicazione angolare.
Così, una volta che i moduli del nodo o tutti installati,
allora possiamo avviare il nostro NG servire per compilare e servire la nostra applicazione angolare.
Una volta che tutto è installato dall'installazione di npm,
assicurati che il tuo server MongoDB sia
operativo e che anche il tuo server API REST sia attivo e funzionante.
Altrimenti, il tuo Client angolare non funzionerà.
Quindi, ora che hai installato il tuo Client Angular sul tuo computer,
al prompt digita ng serve e
la tua applicazione Angular verrà compilata e servita da ng serve in breve tempo.
Una volta che la tua applicazione Angular è stata compilata con successo,
vai a un browser e apri l'applicazione Angular nel browser.
Andando
al browser,
nella barra degli indirizzi, lasciami digitare localhost: 4200 e
vedrai che la tua applicazione Angular viene
avviata ed è visibile sullo schermo qui.
Noterai immediatamente che la tua applicazione Angular
è in grado di recuperare i dati dal server e quindi rendere
le varie parti della tua applicazione Angular proprio come quello che hai
fatto alla fine del tuo corso Angular.
Quando si va a parlare di cartella,
si vedrà anche che la pagina Informazioni rende anche le informazioni in quanto tali.
Nel menu, si vedono le voci nel menu
visualizzate proprio come abbiamo visto con l'applicazione Angular.
Ora, in aggiunta, ho aggiunto in
un'altra pagina all'applicazione a pagina singola chiamata My Favorites,
che non è possibile navigare perché nessun utente è connesso al sistema.
Quindi, vedi che non ho alcun utente connesso al sistema.
Quindi, ecco perché non ha senso indicare i miei preferiti,
perché non sai quale utente,
come preferiti, dovrebbe essere mostrato qui.
La pagina di contatto come al solito.
Ora, facciamo il login.
Per accedere alla nostra applicazione,
faremo clic sul pulsante Login e poi vedrai che viene visualizzata la finestra di dialogo Login.
Quindi, lasciami accedere come uno degli utenti registrati,
che abbiamo registrato come parte di questo corso in precedenza.
Quindi, una volta effettuato il login,
noterai immediatamente che, nell'angolo destro,
vedrai che il pulsante Login è ora trasformato in
Logout e il nome dell'utente è indicato qui.
Quindi, chiunque abbia effettuato l'accesso è indicato qui.
Potresti anche, in linea di principio,
sostituirlo con l'immagine dell'utente.
Ora, per questo è necessario fare più modifiche
sia al client che al server per supportare la visualizzazione dell'immagine qui.
Ma, al momento, ti sto solo mostrando come
possiamo facilmente visualizzare le informazioni dell'utente qui.
Quindi, questo richiede una modifica minore al capo del
componente in cui sarò in grado di recuperare
il nome utente da un servizio
chiamato come servizio OAuth di cui parleremo in breve tempo.
Quindi, una volta che l'utente accede,
quindi se ora fai clic su I miei preferiti,
noterai che non c'è nulla nei miei preferiti per l'utente.
Ovviamente, perché l'utente non ha ancora scelto alcun favorito.
Quindi, andiamo ora al menu e poi nel menu,
lasciami selezionare una voce e poi aggiungeranno questo piatto ai nostri preferiti.
Quindi, scendendo qui sotto,
vedi il simbolo del cuore lì,
fai clic su quello e vedrai che questo sarebbe stato aggiunto in The Favorites.
Il fatto che questo sia stato aggiunto in I Preferiti è indicato
dal cambiamento nell'icona qui da un cuore non pieno a un cuore pieno.
Ora, se vai a qualsiasi altro piatto,
noteresti che questo ha un cuore vuoto, il
che significa che questo non è ancora tra i nostri preferiti.
Quindi, lasciami aggiungere un altro elemento ai
miei preferiti e poi aggiungiamo un terzo elemento ai miei preferiti anche.
Quindi, ora, vedrete che se ora vado ai Miei Preferiti,
vedrete qui una serie di Miei Preferiti.
Quindi, avete visto che ho appena aggiunto questi tre piatti ai miei preferiti.
Quindi, questi vengono visualizzati qui.
Quindi, questo viene monitorato utilizzando l'endpoint dei preferiti sul lato server,
che ho implementato come parte dell'ultimo incarico.
Quindi, se hai fatto questo compito correttamente allora questa parte dovrebbe funzionare come previsto.
Ora, possiamo anche modificare My Favorite.
Quindi, ad esempio, nell'angolo destro qui,
vedi questo interruttore Elimina qui.
Quindi, lasciami accendere.
Quindi, quando lo accendi,
vedrai immediatamente le tre croci rosse
appaiono nella parte inferiore di questi tre elementi in I miei preferiti.
Quando lo clicco fuori, poi spariscono.
Quindi, questo è un modo per attivare i pulsanti di eliminazione sui tuoi Preferiti e poi.
Quindi, lasciatemi andare avanti ed eliminare uno degli elementi da I miei preferiti.
Quindi, quando clicco su quel pulsante,
noterai immediatamente che quell'elemento viene eliminato dai miei preferiti,
e scompare immediatamente e I miei preferiti viene
aggiornato e vedrai il valore risultante che viene mostrato qui.
Allo stesso tempo,
l'interruttore Elimina è disattivato, in
modo che i pulsanti di eliminazione non siano più visibili.
Posso sempre attivare nuovamente i pulsanti di eliminazione facendo clic sul pulsante on e off qui.
Quindi, si noti che i miei preferiti verranno visualizzati solo
per gli utenti che hanno effettuato l'accesso al sistema.
Quindi, si nota immediatamente una serie di modifiche che sono state
apportate al client angolare al fine di
supportare alcune di queste funzionalità aggiuntive che si vedono qui.
Hai anche visto la funzione Login e Logout supportata qui.
Quindi, quando faccio clic sul pulsante Logout,
si nota immediatamente che l'utente viene disconnesso
e il nome utente scompare da lì,
e quindi anche il pulsante viene trasformato nel pulsante Login.
Quindi, con questo, si nota come il mio client Angular è stato
aggiornato per utilizzare il nuovo server API REST
per supportare i preferiti salvati e sul lato server e
quindi automaticamente riflessi nella mia applicazione client come mostrato qui.
Facciamo un breve tour attraverso
il codice angolare che ho fornito per te nel repository GitHub,
e vediamo anche come abbiamo modificato parti del codice
per implementare l'applicazione Angular aggiornata.
Noterai che c'è un nuovo servizio
che ho introdotto qui chiamato servizio di autenticazione.
Il servizio di autenticazione si occupa di
tutte le azioni relative all'autenticazione per l'applicazione Angular.
Quindi, all'interno del servizio di autenticazione,
noterai immediatamente che ho
un insieme di informazioni che ho configurato qui.
Dal momento che conosci già Angular,
dovresti essere in grado di elaborare facilmente tutto ciò che è scritto qui.
Si noti in particolare che all'interno del servizio di autenticazione stesso,
sto memorizzando informazioni come,
ad esempio, TokenKey,
che è la chiave per l'archiviazione locale in cui sto memorizzando il token Web JSON,
e anche alcune variabili aggiuntive
qui dove sto tracciando il nome utente e dove mi trovo autenticato
e tenere traccia del token Web JSON qui.
Ora, iniziamo guardando quando l'utente accede.
Quindi, quando l'utente accede,
allora questa funzione chiamata login verrà chiamata nel nostro servizio di autenticazione qui,
e quando il login viene chiamato nel servizio di autenticazione,
questo verrà passato in un parametro chiamato utente che contiene
il nome utente e la password come parte dell'oggetto JavaScript utente.
Quindi, a questo punto, sto facendo un post HTTP su BaseURL più utenti/login.
Nota anche che qui,
sto fornendo AuthResponse come qualificatore qui.
AuthResponse non è altro che un'interfaccia che ho implementato qui,
in alto qui.
Quindi, questa interfaccia specifica essenzialmente
le informazioni che torneranno come
risposta di autenticazione dal lato server,
la struttura dei dati JSON che stanno
tornando dal lato server e gli oggetti JavaScript corrispondenti.
Quindi, si nota che quando abbiamo aggiornato il server,
ci siamo assicurati che il server invii lo stato,
il successo, il flag e il token nell'indice di stringa.
Quindi, quell'informazione è ottenuta qui.
Ora, quando sto facendo un post su questo,
sto passando il nome utente e la password al post su questo/users/login endpoint.
Quando la risposta ritorna dalla risposta,
il messaggio di risposta stesso conterrà, come abbiamo visto,
il successo, il campo token
e anche il messaggio di stato qui.
Quindi, dal messaggio di risposta,
sto estraendo il token e poi lo trasmetto a questa funzione che implemento qui,
funzione locale qui, chiamata storeUserCredentials.
Quindi, questo verrà restituito alla mia applicazione e verrà memorizzato nel mio lato client,
nella memoria locale.
Quindi, da questa funzione,
sto restituendo queste informazioni
alla funzione chiamante da dove ho avviato il processo di accesso.
Quindi, in questo modo, indicherò al mio componente di login che il login ha avuto successo,
e quindi passerò anche il nome utente al mio componente di login,
che poi passerà tali informazioni sul componente di intestazione,
e il componente di intestazione lo usa per riflettere il nome utente sul nella parte superiore lì,
e anche noi prendiamo l'errore qui.
Quindi, questa è un'implementazione molto semplice di come abbiamo eseguito il login.
Quando si esegue la disconnessione, si
noti cosa faccio quando l'utente chiama una disconnessione.
Quando l'utente chiama un logout,
distruggo semplicemente le credenziali dell'utente,
che include buttare via
il token Web JSON che ho ottenuto quando ho effettuato l'accesso alla mia applicazione.
Quindi, alcune funzioni di supporto aggiuntive che ho implementato qui chiamate
getUserName sono loggate e getToken,
che sarà utile dalle mie altre applicazioni,
altri componenti e servizi.
Quindi, ora diamo un'occhiata ad alcune delle funzioni di supporto che abbiamo implementato qui.
Pertanto, LoadUserCredentials recupererà le credenziali dall'archiviazione locale.
Quindi, noti che qui sto chiamando localStorage e poi dico getItem.
Quindi, localStorage qui sta utilizzando
la memoria locale del browser Web supportata dai browser Web standard
e memorizzando le informazioni lì,
e quindi sta recuperando queste informazioni lì.
Quindi, da lì, le informazioni sulle credenziali,
se valide,
allora tali credenziali saranno impostate qui.
Quindi, tutte queste variabili che ho definito qui verranno inizializzate con
le informazioni appropriate dopo essere state recuperate da localStorage.
Ora, allo stesso modo, la funzione StoreUserCredentials
che ho implementato qui viene chiamata dal metodo di login.
Quando queste informazioni vengono passate,
le informazioni sulle credenziali vengono passate,
tali informazioni vengono memorizzate in LocalStorage a questo punto con tale chiave.
Quindi, UseCredentials
imposta fondamentalmente tutte le variabili che ho nel servizio di autenticazione.
Quindi, imposta il token,
imposta il nome utente
e quindi imposta la funzione IsAuthenticated qui.
Quindi, nota che il nome utente stesso qui, l'
ho dichiarato come soggetto,
che non è altro che un osservabile qui.
Quindi, questo è il motivo per cui ogni volta che dico,
SendUserName qui, dico credenziali username.
Quindi, questo SendUserName implementato proprio in alto qui, si
noti che questo è dove viene inviato il valore osservabile.
Quindi, è per questo che sto dicendo questo nome utente dopo.
Quindi, l'osservabile.
Rimanderà indietro il nome che viene fornito come
parametro a chi si è registrato per osservare questo osservabile.
Quindi questo osservabile, lo osserverò dal
mio componente di intestazione e così in questo modo ogni volta che il nome utente cambia,
da indefinito a un dato nome utente o viceversa,
allora posso aggiornare
la mia barra degli strumenti nel componente di intestazione per riflettere se l'utente è connesso o disconnesso.
Quindi questo è impostato utilizzando questo useCredentials.
Ora DestroyUserCredentials imposta fondamentalmente il token di autenticazione su undefined.
Cancella il nome utente e quindi imposta isAuthenticated su false e quindi
rimuove queste informazioni dal mio negozio locale,
quindi sta fondamentalmente gettando via il jsonwebtoken in questa parte.
Quindi è così che ami un utente.
Quindi, una volta perso il jsonwebtoken, l'utente non può più
autenticarsi
sul lato server perché il token non è più disponibile per noi.
Ecco come implementiamo la funzione di logout all'interno della nostra applicazione.
Quindi prenditi un po 'di tempo per passare attraverso
auth.service qui per vedere come ho implementato le varie funzionalità.
Ora, a questo punto,
sono sicuro che tu abbia molta familiarità con come sono implementate le applicazioni angolari,
quindi non dovrebbe essere così difficile per te capire come viene implementato questo codice.
Ora un'altra funzione su cui vorrei attirare la tua attenzione è il token JWT di controllo, qui.
Questa funzione può essere chiamata in qualsiasi momento per verificare e
assicurarsi che il nostro token web JSON sia ancora valido.
Quindi questo è dove sto inviando la richiesta get agli utenti slash check token JWT.
Ricordiamo che abbiamo implementato questo percorso sul lato server nel file.js e.
Quindi da lì saremo in grado di verificare se il jsonwebtoken è ancora valido o meno.
Se il jsonwebtoken non è valido,
allora distruggeremo le
credenziali dell'utente e quindi ci aspettiamo che l'utente acceda di nuovo.
Se il jsonwebtoken è valido, allora va bene e
possiamo procedere in avanti consentendo
all'utente di riconoscere che abbiamo effettuato l'accesso. Quindi, anche se chiudi
il browser e poi riapri il browser e poi riapri l'applicazione Angular,
se hai effettuato l'accesso in precedenza e il jsonwebtoken è stato salvato nella memoria locale,
può essere recuperato da lì e quindi
il tuo stato di accesso verrà ripristinato all'interno dell'applicazione Angular.
Se il token web json è scaduto
, non ci sarà permesso accedere.
Quindi ogni volta che aggiorni la tua applicazione Angular nel
tuo browser o ricarichi l'applicazione Angular nel tuo browser,
controllerai il jsonwebtoken per assicurarti che sia ancora valido.
Se non è valido, l'utente verrà
cancellato e quindi dovrai effettuare nuovamente il login.
In caso contrario, le informazioni dell'utente connesso vengono recuperate
da localStorage e quindi inizializzate all'interno della mia applicazione Angular.
Periodicamente, se in qualsiasi momento il tuo server
risponde con un messaggio 401 Non autorizzato,
anche a quel punto,
controlleremo nuovamente se il jsonwebtoken è valido e quindi lo permettiamo.
Lo faremo usando qualcosa chiamato intercettori Http.
Lasciate che faccia un giro in quella parte del codice,
e poi vi spieghi come funzionano gli intercettori in breve tempo.
Quindi ora oltre a AuthService,
nella cartella dei servizi stessa vedrai questo file chiamato file AuthInterceptors.ts.
Quindi apri questo e vedrai che qui ho implementato intercettori Http.
Ora che cosa fanno questi intercettori Http,
questo è supportato con il client Http che viene come parte di Angular 4.4.
Quello che gli intercettori http fanno è che possono intercettare
richieste in uscita messaggi apportare
modifiche al messaggio di richiesta prima che venga inviato.
Allo stesso modo, possono intercettare i messaggi di risposta in arrivo e quindi modificare
il messaggio di risposta in arrivo prima che
la risposta venga consegnata all'applicazione Angular.
Quindi, attraverso l'intercettazione, come funziona questo intercettore?
Quindi, per far funzionare questo intercettore,
implementiamo, come vedete,
una classe chiamata come HttpInterceptor estendendo HttpInterceptor.
Quindi qui ho implementato AuthInterceptor.
Quindi cosa fa questo AuthInterceptor?
Questo AuthInterceptor sta essenzialmente catturando le richieste in uscita.
Quindi, per catturare una richiesta in uscita, chiami questa funzione chiamata intercetta
e quindi questo ti darà accesso alla richiesta e alla successiva.
Quindi potresti concatenare
un gruppo di intercettori uno dietro l'altro se lo scegli, in
modo che possano elaborare le richieste in uscita una dopo l'altra se lo scegli.
Ciò che questa intercetta fa è che ti dà accesso al messaggio di richiesta Http.
Quindi, quando ottengo l'accesso al messaggio di richiesta Http,
noterai che qui sto iniettando il servizio di autenticazione.
Ora, a differenza del modo in cui stavamo iniettando servizi nei componenti,
qui sto mostrando l'uso di un iniettore.
Un iniettore fa parte del codice angolare.
Quindi, usando un iniettore è possibile iniettare servizi o
altri componenti in altri servizi o componenti.
Quindi qui vedi che sto iniettando il servizio di autenticazione qui usando questo.
Ora un altro motivo è che se inietto direttamente il servizio nel mio costruttore,
svilupperà una dipendenza circolare tra l'intercettore e AuthService,
e ciò causerà il funzionamento del codice.
Quindi questo è un lavoro intorno ai problemi. In
modo che il tuo intercettatore - perché ho bisogno di
AuthService, per entrare in possesso del token da
AuthService e AuthService a sua volta dipende da questo intercettore, ecco
perché per rompere il ciclo sto iniettando esplicitamente AuthService in questo caso.
Ora questo è qualcosa che ho capito per tentativi
ed errori, inizialmente sono andato avanti e ho semplicemente iniettato
i servizi dispari al costruttore e poi ho scoperto che
Angular non stava compilando il codice, quindi ho capito che
c'era un errore lì e poi dopo aver fatto qualche ricerca su Google poi
scoperto che questo è un modo alternativo di gestire
la stessa cosa e questo funziona molto meglio per la nostra applicazione.
Quindi, una volta iniettato AuthService dal servizio,
ottengo il token e poi noto cosa sto facendo qui.
Qui sto dicendo clone const auth req req clone.
Quindi cloneremo la richiesta e poi imposteremo nelle intestazioni.
Quindi diremo che le intestazioni req impostano
l'autorizzazione e poi noteremo cosa sto
impostando l'intestazione di autorizzazione per essere, portatore.
Più AuthToken.
Quindi nell'intestazione di autorizzazione sto impostando il portatore e AuthToken qui.
Quindi è così che sto impostando
l'intestazione di autorizzazione
nel messaggio di richiesta in uscita nella mia applicazione Angular. Quindi proprio li'.
Ed è così che ho assicurato che tutte le richieste in uscita
abbiano l'intestazione di autorizzazione impostata prima che vengano passate al lato server.
E poi, lo passeremo semplicemente al prossimo intercettore, se esiste,
o sulla coda in uscita, in
modo che il messaggio di richiesta venga inviato al lato server.
Allo stesso modo, ho un altro intercettore che ho implementato qui.
Questo intercettore intercetta tutti i messaggi di risposta non autorizzati
che stanno tornando dal lato server.
Quindi, se il server risponde con un 401 messaggio di risposta non autorizzata.
Quindi a quel punto di nuovo, stessa cosa,
ho impostato AuthService qui,
e poi, dentro qui allora dirò,
gestisco se errore.
Quindi questo è dove entrerò in possesso di HttpEvent qui.
L' HttpEvent è un oggetto di livello inferiore rispetto
a una richiesta, ma che ci permette di ottenere l'accesso al messaggio di risposta in arrivo,
e quindi controlleremo se c'è un errore,
e quindi se l'errore è un'istanza di risposta di errore HTTP,
e se lo stato di errore è 401.
Quindi il che significa che ho appena rilevato che il server ha inviato un messaggio di errore 401.
Quindi il che significa che c'era qualche problema di autorizzazione sul lato server.
Quindi a quel punto controllerò
il token web json per assicurarmi che il token web json sia ancora valido.
Se non è valido,
allora scarterò le mie credenziali e mi aspetto che l'utente acceda di nuovo.
Quindi in questo modo mi assicurerò che se
il mio token web json scade nel processo di tentativo di recuperare i dati,
verrà comunque intercettato da qui perché se il server risponde con un 401,
lo intercetterò e poi cancellerò
il mio token web json e mi aspetto che l'utente effettui nuovamente il login.
Possiamo anche reindirizzare l'utente alla pagina di accesso se
lo vuoi, ma con l'applicazione Angular è un po 'più complicato
farlo e non volevo confonderti facendo tutto questo.
Invece, sto semplicemente disconnettendo
l'utente a questo punto e quindi distruggendo le credenziali dell'utente, in
modo che l'utente possa accedere a quel punto.
Quindi, semplice gestione di come iniettiamo l'intestazione di autorizzazione nella richiesta in uscita
e intercettiamo anche eventuali 401 messaggi non autorizzati
che stanno tornando dal lato server.
Quindi, vedi come queste modifiche aggiuntive devono essere
apportate all'applicazione Angular per farlo funzionare con il lato server.
Con la parte di autenticazione impostata in,
se non si dispone di autenticazione e se si stava solo per
accedere agli endpoint API rimanenti e ottenere operazioni, non
è nemmeno necessario preoccuparsi di nessuna di queste cose.
Non è richiesta alcuna autenticazione.
I dati possono essere recuperati molto facilmente.
Ma per qualsiasi
operazione di post, put ed delete,
abbiamo bisogno di supportare tutte queste funzionalità.
Quindi questo è il motivo per cui ho implementato la parte di autenticazione nella mia applicazione.
Anche come ho illustrato in precedenza,
quando nessun utente è connesso,
allora non saremo in grado di navigare al mio endpoint preferiti,
ma quando un utente è connesso,
allora saremo in grado di vedere i miei preferiti per l'utente specifico.
Questo viene implementato utilizzando le guardie del percorso in Angular.
Ora per implementare queste guardie di percorso,
ho implementato un altro servizio qui chiamato AuthGuardService.
Quindi, in questo AuthGuardService,
abbiamo implementato questo metodo chiamato metodo CanActivate che
faremo sottoclasse per implementare questo.
E nel metodo CanActivate,
l'implementazione restituirà un booleano,
e in questo caso,
ciò che controlliamo è se questo utente è connesso,
quindi permetteremo all'utente di navigare.
In caso contrario, si sposterà l'utente all'endpoint home.
Quindi questo è il modo in cui la guardia del percorso è implementata in questo caso.
Ora, per fare uso di questa guardia percorso,
andremo a vedere come i percorsi sono aggiornati per fare uso delle guardie percorso.
Quindi nel file routes.ts,
si può vedere che per il componente favorites,
vediamo che specifichiamo il percorso come preferiti e il componente come
FavoritesComponent e quindi specifichiamo questo altro campo
chiamato CanActivate per il quale abbiamo specificato AuthGuard come parametro qui,
e questo AuthGuard non è altro che il servizio AuthGuard che abbiamo implementato,
che viene importato qui.
Quindi in questo modo quando AuthGuard restituisce false,
allora non ti sarà permesso navigare al componente preferiti,
invece, verrai reindirizzato a casa,
ma quando l'utente è connesso ovviamente AuthGuard valuterà true,
e in questo caso,
allora sarai in grado per passare al percorso dei preferiti lì.
Ora anche allo stesso modo ci sono piccole modifiche ai componenti rimanenti lì dentro,
che ti permettono di affrontare
la complessità di come il tuo client e server parleranno tra loro.
In particolare, si noti come il componente di intestazione è stato aggiornato per
riflettere lo stato di accesso dell'utente nella barra degli strumenti in alto.
Questo è ancora un altro cambiamento interessante che ho
apportato al componente di intestazione nella nostra applicazione.
Quindi lascerò che questo sia un esercizio per capire come è stato attuato.
Codice molto semplice lì.
Dovrebbe essere facile per te capirlo.
Quindi con tutti questi cambiamenti, ora,
il mio client angolare è in grado di interagire con il mio server.
Permettetemi di mostrarvi di nuovo come possiamo pubblicare alcuni commenti al server,
e poi vedere il commento immediatamente riflesso nel piatto.
Quindi, tornando nuovamente alla nostra applicazione,
ora possiamo andare al menu e poi tirare su qualsiasi piatto qui,
e posso postare commenti al piatto qui,
quindi vorrei impostare immediatamente la valutazione qui,
e il mio valore commento qui.
Si noti che non sto inserendo
il mio nome utente o il nome del mio autore qui nel modulo qui.
Ora, naturalmente, per inviare un commento,
devi essere loggato.
Quindi, se non sei loggato in questo commento non sarà accettato dal mio server.
Quindi fammi prima accedere.
Quindi posso accedere qui.
E nel momento in cui accedo,
si nota immediatamente che la barra degli strumenti dell'intestazione è aggiornata per indicare il mio stato.
Ora posso postare questo commento.
E noterai che quando pubblico il commento,
il commento viene aggiunto nell'elenco dei commenti
e noterai anche che il campo dell'autore viene compilato automaticamente qui.
Perché è così che abbiamo impostato il nostro lato server.
Nel campo dei commenti,
abbiamo impostato il nostro utente come
riferimento alle informazioni utente
che memorizziamo nel nostro lato server, e dal momento che usiamo il popolare,
Mongoose Popolate sul lato server,
le informazioni utente vengono automaticamente popolate
nei commenti in arrivo dal server lato.
Quindi, è così che noti come sto sfruttando ciò che
il server mi fornisce già per compilare automaticamente i dettagli.
Quindi, piccole modifiche anche nella
pagina dei dettagli del piatto per riflettere l'uso del supporto dei commenti sul lato server.
Con questo ho completato la rapida illustrazione
del client Angular che abbiamo implementato come parte di questo esercizio.
E spero che tu passi anche attraverso i dettagli del codice nel client Angular,
e quindi rifletti su ciò che hai imparato nel corso Angular e veda
come le modifiche ci consentono di implementare
in un client angolare modificato che ora è in
grado di comunicare con il server e quindi supportano tutte le funzionalità
che originariamente intendevamo implementare come parte sia del client che del lato server.