In questo esercizio, faremo uso del Client HTTP angolare per
comunicare con il server JSON che abbiamo già configurato nell'esercizio precedente.
Saremo in grado di scaricare i dati dal server alla nostra applicazione angolare utilizzando
il client HTTP e quindi fare uso dei dati per
costruire le varie viste all'interno dei nostri componenti.
In questo esercizio, verrà riconfigurato il servizio piatto per essere in grado di
andare a recuperare i dati sui piatti dal server JSON.
Come parte del tuo incarico,
completerai i restanti due,
il servizio leader e il servizio di promozione.
Vedremo come possiamo sfruttare il client HTTP che restituirà un osservabile a noi.
Abbiamo già riconfigurato la nostra applicazione,
in particolare il servizio per essere in grado di fornire osservabili ai nostri componenti.
All' interno dei nostri componenti, ci sottoscriviamo a questi osservabili.
Quindi, la parte principale dell'installazione
per ottenere dati dal servizio al componente è già lì. Lo
miglioreremo un po 'per affrontare gli errori nel prossimo esercizio.
Il nostro primo passo nella preparazione dell'applicazione angolare per utilizzare
il client HTTP per accedere al server è quello di
configurare la nostra applicazione con HttpClientModule.
Quindi, per farlo, apri app.module.ts.
Quindi, qui, importiamo
HttpClientModule da Angular/Common/HTTP.
Una volta importato,
allora andremo avanti e configurare il decoratore ngModule
nelle importazioni con HttpClientModule.
Ora, la nostra applicazione è pronta a fare uso di HttpClientModule per accedere al server.
Ora, assicurarsi che il server JSON sia attivo e funzionante e
serve i dati in modo che la nostra applicazione possa
comunicare con l'applicazione server JSON.
Ora che stiamo accedendo ai dati dal lato server,
è una buona pratica creare un valore speciale che punta al
BaseURL del tuo server in modo
che possa essere configurato all'interno dell'applicazione angolare come e quando richiesto.
Quindi, andando alla cartella condivisa,
ho intenzione di creare un nuovo file qui chiamato baseurl.ts.
Quindi, all'interno di questo file,
includerò una costante ed esporterò e la costante denominata BaseURL,
che imposterò su HTTP: //localhost: 3000.
Quindi, come ricorderai, questo è il BaseURL a cui è accessibile il mio server JSON.
Quindi, localhost: 3000/, lì.
Quindi, con questo,
lasciami salvare le modifiche al BaseURL.
Ora, angolare fornisce un modo per fornire valori come
questo al resto dell'applicazione configurando un provider all'interno del modulo app.
Quindi, andando al modulo app,
per consentirci di fornire quel particolare BaseURL,
stiamo andando prima importare il valore BaseURL nella nostra applicazione angolare.
Quindi, direi importare BaseUrl da shared/baseurl.
Questo valore può ora essere reso disponibile per
il resto della mia applicazione andando ai provider.
Quindi, oltre al LeaderService,
se configuro un valore come questo,
direi fornire
e quindi baseURL, useValue.
Quindi, in questo modo, fornirò questo valore BaseURL come
fornitore di valori dall'interno del modulo app al resto della mia applicazione angolare.
Nella fase successiva,
stiamo andando a configurare il nostro DishService in modo da consentire l'accesso al lato server,
e quindi ottenere i dati dal lato server,
e quindi rendere i dati disponibili per i nostri componenti.
Ora, andremo al DishService.
Quindi, nel DishService,
questi piatti non sono più necessari dal file locale lì.
Ho intenzione di scaricare quei dati dal lato server.
Quindi, ho intenzione di rimuoverlo e quindi aggiungere un'importazione
di HttpClient da angular,
ogni HTTP comune,
importare BaseURL da,
ricordare che questo è in shared/baseurl.
Ora, all'interno del mio DishService,
vado a recuperare i dati dal lato server.
Quindi, nel costruttore,
aggiornerò il costruttore
iniettando HttpClient nel mio costruttore qui.
Quindi, ora, il mio DishService dovrebbe essere impostato per
ottenere i dati dal lato server e restituire i dati alla mia applicazione.
Ora, si nota che
il metodo GetDishes è già impostato per restituire l'osservabile al componente.
Quindi, quella parte è già impostata.
Ora, ciò che questo restituirà è ciò che ottiene
dal metodo HTTP get
che chiameremo il lato server.
Quindi, per chiamare il lato server,
dovrò fornire,
all'interno del metodo get,
il BaseURL che ho
già ottenuto, e poi i piatti.
Quindi, in questo modo, il metodo HTTP get otterrà i dati da localhost: 3000/piatti.
Quindi, questo è l'URL lato server da
cui è possibile recuperare i dati dei piatti qui. Questo è tutto.
Il mio server fornirà i dati sotto forma di
osservabile a questo servizio quando viene chiamato il metodo HTTP get
e che verrà restituito al componente tramite il metodo GetDiches.
Questo è tutto. Ora, il mio servizio è impostato per andare a
recuperare i dati dal lato server e quindi restituire i dati al mio componente.
Ho intenzione di aggiornare i metodi rimanenti anche in modo simile.
Quindi, quello che farò per il prossimo metodo per il metodo getDish è,
ho intenzione di copiare
questa parte e quindi semplicemente incollarla in posizione qui,
e poi lo modificheremo.
Ora, quando hai bisogno di ottenere per un piatto particolare,
hai l'ID del piatto che è a tua disposizione.
Quindi, diremo GetDish ID è disponibile come parametro.
Quindi, ai piatti,
aggiungerò l'ID come altro parametro qui.
Ora, quando ricevo la risposta e poi la
restituisco al componente tramite la chiamata al metodo getDish.
Allo stesso modo, per il piatto in primo piano,
sarà un modo un po 'interessante di configurarlo.
Ora, per il piatto in primo piano,
quando hai bisogno di accedere ai dati dal lato server,
quello che farò è, ora,
quando chiedo un piatto in primo piano, ora,
il modo in cui il mio lato server è impostato è che posso inviare
un parametro di query all'interno del mio URL in modo da poter dire piatti?
e poi dire in primo piano uguale a true.
Quindi, in questo modo, il mio server restituirà
solo quegli oggetti per i quali il flag in primo piano è impostato su true,
o la proprietà in evidenza è impostata su true sul lato server.
Ora, questo è il modo in cui viene impostato il lato server.
Ora, di nuovo, una volta ottenuti i dati,
basta mappare il valore e poi restituirlo come
osservabile al mio componente attraverso il metodo piatto get featured.
Quando interrogo il lato server utilizzando il parametro di query,
restituirà una matrice di oggetti che corrispondono.
In questo caso, accade che l'array conterrà esattamente un elemento lì.
Ma quando restituisco il valore dopo aver ottenuto il risultato,
ho bisogno di includere anche uno zero perché questo è un array,
quindi ho bisogno di restituire il primo elemento dall'array.
Prima di dimenticare, fammi importare
l'operatore mappa dagli operatori rxjs.
Ora, per l'ultimo, il getDishIds,
quello che ho intenzione di fare è sfruttare il fatto che
ho già il metodo getDishies disponibile per me.
Quindi, quando il metodo GetDiches ritorna,
ho intenzione di mapparlo con l'operatore mappa
come dishes.map, dish.dish id
Quindi, in questo modo, sto restituendo solo il valore di cui ho bisogno,
solo gli id del piatto attraverso questo metodo qui.
Questo è tutto.
Ora, il mio servizio piatto è completamente aggiornato per andare a recuperare i dati dal
sito del server e quindi fornire i dati ai miei componenti nel mio.
Applicazione angolare qui.
Nel passaggio successivo,
andrò nel componente del menu.
Quindi all'interno del componente del menu,
userò l'interfaccia di iniezione disponibile attraverso
il nucleo angolare per iniettare questo baseUrl che ho ottenuto lì.
Allora, come facciamo a usarlo?
All' interno del costruttore del mio componente,
entrerò e dirò,
"@Inject" Quindi, ricorda che avevamo impostato
questo BaseURL come provider per questo valore nel modulo app in precedenza.
Quindi, quel BaseURL può ora essere iniettato nel componente come questo qui.
Ora, quando hai un servizio,
stai iniettando servizi come questo qui,
ma quando hai un valore,
allora inietti il valore usando il decoratore "@Inject".
Qui, stiamo specificando il valore del provider che abbiamo specificato lì.
Abbiamo detto, fornire: BaseUrl lì,
quindi questo è il valore che stiamo fornendo qui.
Quindi, sto dichiarando questo come BaseUrl privato.
Quindi ora, all'interno del mio codice qui,
questo BaseURL è disponibile per configurare tutto ciò di cui ho bisogno all'interno della mia applicazione qui.
Mentre sono ancora qui,
ho intenzione di rimuovere questo piatto selezionato che anche non viene utilizzato all'interno della mia applicazione.
Quindi, anche questo metodo non sto usando con la mia applicazione,
quindi lasciami fare un po 'di pulizia mentre sono ancora qui.
Il modo in cui trattiamo i dati che abbiamo ottenuto
dal servizio rimarrà esattamente lo stesso.
Perché il mio servizio è ancora di ritorno e osservabile,
e mi iscrivo all'osservabile all'interno di questo componente.
Quindi, quella parte non cambia affatto.
Ora, il motivo per cui inietto il baseUrl all'interno del mio componente è che,
nel mio modello qui,
sto ottenendo l'immagine del piatto qui.
Ora, ma questa immagine piatto deve essere ottenuta dal mio server lì,
dal server JSON lì.
Quindi, ho bisogno di entrare e quindi aggiornare questa fonte per dire,
BaseUrl più immagine del piatto.
Quindi, ho bisogno di fornire l'URL completo per quell'immagine lì.
Quindi, questo dovrebbe essere, httlp://localhost: 3000/images/, qualunque cosa.
Quindi, questo è il motivo per cui ho bisogno di fornire
il valore BaseURL oltre all'immagine del piatto qui.
Quindi, questo racchiuderò tra virgolette,
quindi questo è il modo in cui un'espressione come questa all'interno dell'interpolazione funzionerà correttamente.
Quindi, racchiudi questo tra virgolette e poi forniscilo come valore sorgente,
e poi qui vedi che stai usando baseURL più l'immagine del piatto,
la dish.image, la proprietà image contiene solo l'URL parziale.
Quindi, contiene immagini barra e nome file image.png.
Quindi, è per questo che ho bisogno di aggiungere http://localhost:3000/,
a quella proprietà dell'immagine del piatto in modo da costruire l'URL totale per la mia immagine.
Quindi, con questo, il mio componente di menu è ora completamente configurato
per ottenere tutti i dati dal lato server.
Ora, allo stesso modo, suggerirei di aggiornare
il componente dettaglio piatto e anche il componente casa.
Andando al componente dettaglio piatto,
usa l'iniezione lì,
e poi vai al costruttore,
nel costruttore, ora ho bisogno
di usare iniettare BaseUrl e BaseUrl lì,
e così, il mio componente dettaglio piatto è ora impostato per ottenere i dati dal servizio piatto.
Quindi, questa parte non cambierà più,
rimane esattamente la stessa perché il mio servizio di piatti sta semplicemente
restituendo un osservabile e sto sottoscrivendo a quello osservabile qui.
Ho anche bisogno di aggiornare il file del modello dei componenti di dettaglio del piatto,
quindi allo stesso modo andando alla fonte dell'immagine qui,
aggiungerei il BaseURL più l'immagine del piatto e poi inserirlo tra le citazioni lì.
Allo stesso modo, andando al componente di casa, stessa cosa.
Ho intenzione di fare un iniezione,
e nel costruttore
faccio un iniezione di BaseURL,
e vado al file modello dei componenti di casa,
allo stesso modo dove uso l'immagine del piatto qui,
quindi ho intenzione di dire, BaseURL più l'immagine del piatto,
e poi racchiuderla tra virgolette qui,
e poi salvare le modifiche.
Quindi, questo è tutto. La mia applicazione è ora aggiornata per utilizzare
il server per ottenere i dati per i piatti.
Quindi, andiamo a vedere l'applicazione nel browser.
Andando al browser,
ora puoi vedere che all'interno del mio browser,
il mio piatto viene reso esattamente come prima,
e poi andando al componente menu,
vedi che il menu rende esattamente come prima e il componente dettaglio piatto,
anche i dettagli del piatto sono resi esattamente come prima.
Quindi, con il cambiamento che abbiamo introdotto accedendo ai dati dal lato server,
siamo in grado di recuperare i dati dal lato server e quindi
rendere i dati all'interno della nostra applicazione angolare.
Per convincerti che i dati vengono effettivamente ottenuti dal mio server JSON,
andiamo al terminale e quindi vediamo il registro nella finestra del terminale lì.
Andando al terminale in cui è in esecuzione il mio server JSON,
puoi vedere che ho effettivamente eseguito un sacco di richieste Git
dal mio sito server per ottenere tutti i dati di cui ho bisogno all'interno della mia applicazione.
Quindi, in effetti la mia applicazione Angular sta ora recuperando tutti i dati dal
sito del server per tutti i piatti all'interno della mia applicazione Angular.
Ora, è possibile utilizzare lo stesso approccio anche per aggiornare
il servizio più recente e anche il servizio di promozione,
ma lo rimanderemo fino all'assegnazione finale di questo corso,
ma questo potrebbe completare questo esercizio.
In questo esercizio, abbiamo imparato come
utilizzare il client HTTP al fine di ottenere i dati dal
sito server e quindi utilizzare i dati nella costruzione delle
viste all'interno dei componenti della nostra applicazione angolare.
Questo è un buon momento per fare un commit Git con il messaggio HTTP parte uno.