[MUSIC]
Ora che abbiamo avuto una rapida introduzione ai
framework MVM e MVVM, ai servizi angolari e anche all'iniezione delle dipendenze,
passiamo ora al nostro prossimo esercizio in cui creeremo il nostro
primo servizio angolare e poi inietterlo nel nostro componente e
farne uso all'interno del nostro componente.
Per iniziare, vai all'applicazione nel
pad editor all'interno della cartella App,
crea una nuova sottocartella e chiamala come Servizi.
Ora faremo uso di Angular CLI per aggiungere un nuovo servizio alla nostra applicazione angolare.
Per fare ciò, al prompt digitare ng
generare servizio e servizi/piatto.
Quindi questo creerà un nuovo servizio nella cartella Servizi denominata servizio piatto.
Quindi, una volta creato questo, si vede che due file vengono creati
dalla CLI angolare chiamata DishService.ts e dish.service.specter.ts.
Questo è usato per testare il nostro servizio angolare mentre ne parleremo più avanti.
Il secondo è dove creeremo il nostro servizio piatto e
poi inietteremo che nel nostro modulo app e utilizzarlo nel nostro componente di menu.
Andando all'editor, apriamo il file dish.service.ts.
Ora, quando apri questo file, noti immediatamente qui la prima
affermazione che dice, import {Iniettabile} da '@angular /core'.
Quindi questo iniettabile ci permette di definire questo
decoratore iniettabile a qualsiasi classe che abbiamo definito qui.
Quindi puoi vedere che stiamo definendo una classe qui chiamata DishService.
Utilizzando questo decoratore iniettabile per questo servizio piatto,
stiamo rendendo questo oggetto ora iniettabile all'interno della nostra applicazione.
Quindi questo è ciò che consente l'iniezione di dipendenza da utilizzare all'interno della nostra
applicazione.
Quindi, una volta dichiarata la classe come iniettabile,
ora configuriamo il nostro DishService per fornire alcune informazioni per noi.
Quindi qui, ho intenzione di importare,
la classe Dish dalla cartella condivisa,
e anche importare,
La costante PIASS da,
Cartella condivisa qui.
Quindi, una volta che ho importato questi due,
ora il mio servizio può essere configurato per fornire il valore per noi.
Quindi all'interno del servizio,
aggiungerò un nuovo metodo chiamata getDises, e
questo metodo tornerà in una serie di piatti qui.
E, quindi questo metodo restituirà la costante PIATTI
che abbiamo importato nel nostro DishService.
Con questo, il nostro DishService è ora configurato per
fornire quell'array di oggetti JavaScript PIASS a qualsiasi
altra parte della nostra applicazione che lo richiede.
Ora, prima che ciò accada, dobbiamo prendere questo servizio e
quindi iniettare nella nostra applicazione.
Per fare ciò, apriremo il file.ts modulo app.
Quindi all'interno del file.ts del modulo app, subito dopo aver importato
i componenti proprio lì, ho intenzione di importare il,
DishService proprio lì.
E questo è importato da,
Servizi DishService qui.
Quindi, una volta importato che, allora dichiareremo questo DishService come un provider.
Quindi, se vai nel decoratore del modulo ng, quindi
vedi questa terza proprietà qui chiamata provider.
Quindi abbiamo dichiarazioni, importazioni e fornitori.
Quindi ogni volta che si dispone di un servizio che si desidera rendere disponibile per
tutti i componenti da parte di questo modulo.
Quindi lo specificherai come provider all'interno del modulo qui.
Quindi, proprio lì, sto per dire, DishService, qui.
Quindi con questo, il mio DishService ora diventa disponibile per il resto dell'applicazione.
Ora, come puo' succedere?
La dipendenza iniettabile di Angular esamina queste informazioni che
abbiamo dichiarato qui e poi decide che ha bisogno di creare un DishService e
inietta ovunque sia richiesto.
Ora, come facciamo a usare quel servizio?
Vediamo che nel componente del menu stavamo ottenendo in precedenza
la costante PIATS direttamente importando dal file piatti condivisi qui.
Ora questo non è il modo ideale per ottenere le informazioni,
invece di legare le informazioni direttamente nel tuo componente,
dovresti piuttosto lasciare che un servizio recuperi quelle informazioni per te.
In seguito, possiamo riprogettare il nostro servizio per essere in grado di andare a
recuperare le stesse informazioni da un server back-end se lo si desidera.
In effetti, questo è quello che faremo in alcuni degli esercizi successivi.
Quindi delegerai la responsabilità di recuperare le informazioni al servizio
e quindi farai solo uso del servizio all'interno di questo componente del menu.
Quindi cancelleremo questo componente piatti da lì e
invece importeremo che DishService qui.
E questo DishService viene importato da,
services/dish.service file qui.
Quindi, dopo aver aggiunto questo ora abbiamo fatto una parte del lavoro.
Ora abbiamo bisogno di rendere disponibile questo servizio per il nostro componente per fare uso.
Quindi è qui che scenderemo a questo costruttore qui.
In questo costruttore, quindi
ora vedi l'uso del costruttore all'interno della nostra classe qui.
Quindi in questo costruttore vedremo
DishService e DishService privati qui.
Quindi questo è del tipo DishService, quindi
quando lo dichiari nel costruttore, quando viene creato questo componente,
allora questo DishService che hai iniettato nel modulo dell'app.
Quando lo inietti nel modulo dell'app,
creerà un singolo oggetto DishService.
E quell'oggetto DishService sarà reso disponibile all'interno del tuo
componente di menu qui.
Quindi ora puoi chiamare i metodi che questo DishService fornisce per
te al fine di fare il lavoro per tuo conto.
Quindi una volta che hai messo lì dentro,
ora ci rendiamo conto che non abbiamo più questa costante PIATTI qui.
Quindi ho bisogno di recuperare in qualche modo queste informazioni.
Ora è qui che ho intenzione di sfruttare il servizio che ho a disposizione per
recuperare le informazioni per noi.
Dove prendiamo queste informazioni?
Quindi, questo è dove andremo a prendere l'aiuto di questo metodo del ciclo di vita chiamato
ngOnInit.
Quindi, quando dichiari questo metodo del ciclo di vita chiamato ngOnInit nella tua
applicazione, quindi vedi che nella classe, dici implementa OnInit.
Quindi l'implementazione di questo OnInit richiede di
implementare questo metodo ngOnInit come parte della tua classe qui.
Quindi all'interno di questo metodo ngOnInit,
ora puoi chiedere al servizio di recuperare queste informazioni.
Perché è così?
Questo metodo del ciclo di vita verrà eseguito
dal framework angolare ogni volta che questo componente viene istanziato.
Quindi ogni volta che questo componente viene creato, questo metodo verrà eseguito.
Quindi, quando viene eseguito quel metodo, allora a quel punto posso andare a
prendere i piatti dal DishService.
Quindi posso dire DishService, e
poi saprai che hai il metodo getDishService all'interno di DishService.
Puoi invocare il metodo per recuperare i piatti per te.
Ora, quando lo facciamo, allora l'oggetto piatti sarà fornito
dal servizio a noi attraverso questo metodo getDises.
E che può essere messo nei nostri piatti variabile locale che abbiamo definito qui.
Quindi, con questo, completiamo l'aggiornamento
a tutti i nostri file di applicazione.
Andiamo a dare un'occhiata rapida all'applicazione Angular risultante.
Passando al browser, ora puoi vedere che nel browser l'
applicazione Angular rende proprio come prima.
In questa versione, come avete visto, le informazioni sui piatti
sta per essere recuperato nel vostro componente facendo uso del servizio.
Il servizio a sua volta recupererà queste informazioni per te.
Ora in questo momento stiamo mantenendo il servizio molto semplice.
Il servizio restituisce semplicemente questo valore costante che abbiamo definito qui.
In seguito, puoi immaginare di estendere il servizio per andare a
recuperare queste informazioni dal server back-end.
Quando ciò accade,
il recupero delle informazioni non sarà più istantaneo.
Questo è dove avremmo bisogno dell'aiuto delle promesse e
anche dell'approccio JavaScript reattivo per supportare questo ritardo e
affrontare il ritardo nel recupero delle informazioni all'interno della nostra applicazione.
Ne parleremo in modo più dettagliato nel prossimo modulo.
Per ora, la nostra applicazione funzionerà bene, quindi puoi selezionare uno di
quei piatti e le informazioni verranno visualizzate proprio come prima.
Con questo, competiamo questo esercizio in cui impariamo le basi dei servizi angolari.
E abbiamo anche visto come possiamo fare uso del servizio Angular,
all'interno del nostro componente applicazioni.
Questo è un buon momento per fare un commit git con i servizi di base del messaggio.
[ MUSICA].