Ora che hai avuto la tua prima introduzione alla Programmazione Reattiva, RxJs
e l'uso del modello di osservatore e
come Angular sfrutta il modello di osservatore e supporta la Programmazione Reattiva,
passiamo al nostro primo esercizio per
bagnarci i piedi usando gli osservabili in Angular.
In questo esercizio, ci accingiamo ad aggiornare i nostri servizi per fare uso di osservabili,
perché quando passiamo al modulo successivo dove vedremo il supporto HTTP in Angular,
capiremo immediatamente che il supporto HTTP in Angular si basa su osservabili.
Quindi, è una buona idea per noi
familiarizzare con l'uso di osservabili in questa lezione stessa.
Quindi, aggiorneremo i servizi per esportare osservabili.
Successivamente, all'interno dei nostri componenti,
ci sottoscriveremo a questi osservabili e
otterremo i dati necessari per il rendering delle viste.
Passiamo all'esercizio successivo.
Ti starai chiedendo,
come facciamo a utilizzare RxJs all'interno di Angular,
ed è già disponibile per noi?
Quindi quello che noterai è che con la CLI angolare,
quando impalchi la tua applicazione Angular,
RxJS viene automaticamente incluso in lì.
Quindi, se vai al file package.json,
noterai che all'interno delle dipendenze,
la libreria RxJS è già inclusa all'interno dell'applicazione.
Quindi, tutto ciò che devi usare da RxJS è già disponibile per te.
Quindi possiamo andare avanti e usare la libreria RxJS subito all'interno della nostra applicazione Angular.
Se stai costruendo la tua applicazione Angular da zero,
devi eseguire esplicitamente un'installazione npm di RxJs.
Andando al file dish.service.js,
fammi prima importare il di
dai nostri osservabili 'rxjs'.
Importeremo anche - Ora,
quando si utilizza RxJs all'interno dell'applicazione Angular,
l'intera libreria non viene inclusa.
Puoi importare solo qualsiasi parte di cui hai bisogno dalla libreria RxJS
e quindi usarla all'interno dell'applicazione Angular.
Quindi, quando l'applicazione Angular è finalmente preparata per la distribuzione,
solo quelle parti da RxJs che sono richieste
verranno incluse all'interno dell'applicazione Angular.
L' operatore di ritardo.
L' operatore di ritardo ci permette di ritardare l'emissione dell'articolo dal nostro osservabile.
Entrando nei metodi,
ci sarà ora aggiornare questi metodi per fare uso di osservabili,
e restituiremo una promessa convertendo l'
osservabile in vostra promessa utilizzando l'operatore toPromise.
Quindi, se hai già componenti che stanno usando le promesse
e vuoi non modificare i componenti,
puoi semplicemente convertire un osservabile alla tua promessa e quindi
inviare la promessa ai tuoi componenti.
Come ci siamo resi conto, le promesse emetteranno solo un elemento,
mentre puoi vedere che gli osservabili sono basati su flussi.
Quindi, questa è la limitazione che otterrai se
usi solo i due operatori promessa sugli osservabili
e ne usi perché l'operatore ToPromise
consentirà al tuo osservabile di emettere solo un valore.
Ma per il momento facciamolo come primo passo prima di
passare alla piena implementazione osservabile dei nostri servizi.
Quindi, andando al metodo GetDiches,
ho intenzione di restituire questi piatti.
Quindi, ho intenzione di rimuovere quella parte e poi dire, ritorno di.
Se vuoi emettere solo un valore dal tuo osservabile,
userai il metodo of
e che prenderà qualsiasi valore che vuoi emettere lì.
Questo è sufficiente per la nostra applicazione attuale al momento.
Quindi, faremo uso di questo,
e vogliamo anche ritardare l'emissione del valore di due secondi.
Quindi, cambierò questa parte del codice per utilizzare l'
operatore delay per il mio osservabile, usando pipe.
Ho bisogno di convertire questo toPromise ed emettere la promessa.
Quindi ora, il mio metodo GetDiches viene aggiornato per fare uso di un osservabile,
quindi convertirlo in una promessa e quindi inviare la promessa al mio componente.
Quindi non ho bisogno di fare alcun aggiornamento del componente.
Usiamo lo stesso approccio per aggiornare i restanti due metodi del mio servizio qui.
Quindi ho intenzione di copiare questa parte,
quindi aggiornare quella parte,
quindi prendere la parte ritardata di esso,
e quindi aggiornare questa parte per utilizzare il ritardo
e convertire questo metodo toPromise.
Quindi con questo, anche il mio metodo getDish viene aggiornato.
Lasciami fare la stessa cosa al metodo getFeaturedDish.
Di nuovo, se
vuoi, puoi scrivere tutto.
Sono solo pigro per tagliare e incollare e cambiare le parti che
voglio cambiare e convertire questo metodo toPromise.
Questo è tutto. Il mio servizio è ora aggiornato per restituire le promesse da un osservabile qui.
Quindi, con questo aggiornamento,
il mio servizio piatto viene aggiornato per fare uso di osservabili
piuttosto che usare direttamente i valori.
Allo stesso modo, vai avanti e aggiorna il servizio leader e il servizio di promozione.
Ora noterete che ho già aggiornato
il servizio leader per fare uso di osservabili.
Allo stesso modo, ho anche aggiornato il servizio di promozione per fare uso di osservabili.
Salva le modifiche e andiamo a dare un'occhiata alla nostra applicazione.
Quando vai al browser,
noterai che la tua applicazione funziona esattamente allo stesso modo di prima
e recupera i dati dai servizi proprio come prima.
Quindi non molto di un cambiamento all'interno della tua applicazione in quanto tale.
Esegue esattamente lo stesso.
Quindi, nota che sostituendo le tue promesse con osservabili,
non ci sono stati molti cambiamenti all'interno della tua applicazione come te lo aspetti.
Ora, facciamo un passo avanti.
Ora lasceremo che i nostri servizi restituiscano osservabili
e aggiorneremo i componenti per fare uso di osservabili.
Il motivo, come ho detto,
è perché quando aggiorniamo i nostri servizi per utilizzare
il servizio HTTP per andare a un server per recuperare i dati,
allora vorremmo notare che in Angular i metodi HTTP restituiranno osservabili.
I servizi possono semplicemente trasmettere gli osservabili ai nostri componenti e lasciare che
i componenti si iscrivano a questi osservabili e utilizzare
i dati che ottengono in tal modo.
Quindi, questo sarebbe un passo intermedio per arrivare a quella fase.
Avremo a guardare HTTP nel prossimo modulo.
Tornando ai nostri servizi,
ora puoi rimuovere il toPromise prima rimuovendo
l'operatore toPromise perché non ne abbiamo
più bisogno e quindi rimuoveremo semplicemente il toPromise da questo,
importare osservabile e quindi lasciare invece che il
nostro metodo restituisca
osservabili invece di promesse .
Quindi, come ho detto,
qualsiasi cosa una promessa possa fare un osservabile può anche fare.
Quindi, aggiorniamo tutti questi per restituire osservabili.
Fai lo stesso con i restanti due servizi.
Ora noterete che ho anche aggiornato il servizio leader
per restituire semplicemente osservabili invece di promesse,
e anche il servizio di promozione è stato
aggiornato di conseguenza per restituire osservabili invece che promesse.
Ora ciò significa che dobbiamo andare ad aggiornare i nostri componenti
per fare uso degli osservabili piuttosto che delle promesse come abbiamo fatto prima.
Ora, per promessa, abbiamo visto che abbiamo bisogno di usare.then
per entrare in possesso del risultato quando viene eseguita la risoluzione della promessa.
Con un osservabile, il.then viene convertito in.subscribe.
Il modo in cui si consumano i dati rimarrà esattamente lo stesso.
Quindi, con quel piccolo cambiamento all'interno dei tuoi componenti,
i componenti saranno ora in grado di gestire gli osservabili piuttosto che le promesse.
Quindi, andando a tutti e quattro i componenti che fanno uso dei servizi, per
prima cosa, andiamo al file menu.component.ts.
Nel file menu.component.ts,
noteresti immediatamente la linea rossa squiggly lì,
sotto l'allora ovviamente perché non stiamo restituendo una promessa.
Invece stiamo restituendo un osservabile.
Quindi basta convertirlo poi per iscriversi e basta.
Il componente del menu è ora in grado di
consumare i valori osservabili che vengono emessi dall'osservabile.
Effettuare la stessa modifica al file about.component.ts,
al file dishdetail.component.ts e al file home.component.ts.
Dopo aver aggiornato i restanti file Tapscott componente,
andiamo a guardare il comportamento della nostra applicazione nel browser.
Vai nel browser, non noterai alcuna differenza nel comportamento della nostra applicazione.
Questa versione della nostra applicazione Angular viene aggiornata per utilizzare
osservabili invece di promesse.
Quindi, il componente home qui,
sul componente esegue esattamente allo stesso modo di prima,
e il componente menu fa esattamente la stessa cosa.
Anche il componente dettaglio piatto si comporterà esattamente allo stesso modo di prima.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo compiuto i nostri primi passi verso l'utilizzo di
osservabili all'interno della nostra applicazione Angular aggiornando
i servizi e corrispondentemente i componenti per
fare uso degli osservabili al posto delle promesse.
Questo è un buon momento per fare un commit git con il messaggio RxJS parte uno.