Nun, da Sie Ihre erste Einführung in Reactive Programming, RxJs
und die Verwendung des Beobachtermusters hatten und
wie Angular das Beobachtermuster nutzt und Reactive Programming unterstützt,
gehen wir zu unserer allerersten Übung, um unsere Füße
nass zu bekommen, indem wir die Observables in Angular verwenden.
In dieser Übung werden wir unsere Dienste aktualisieren, um Observables zu nutzen,
denn wenn wir zum nächsten Modul übergehen, wo wir HTTP-Unterstützung in Angular betrachten,
werden wir sofort verstehen, dass HTTP-Unterstützung in Angular auf Observables basiert.
Es ist also eine gute Idee für uns, sich
mit der Verwendung von Observables in dieser Lektion selbst vertraut zu machen.
Daher werden wir die Dienste aktualisieren, um Observables zu exportieren.
Danach
werden wir innerhalb unserer Komponenten diese Observables abonnieren und
die Daten erhalten, die für die Darstellung der Ansichten erforderlich sind.
Gehen wir weiter zur Übung.
Sie müssen sich fragen,
wie nutzen wir RxJs innerhalb von Angular,
und ist es bereits für uns verfügbar?
Was Sie bemerken werden, ist, dass mit der Angular CLI,
wenn Sie Ihre Angular-Anwendung Gerüst ausbauen,
RxJs automatisch darin enthalten ist.
Wenn Sie also zur Datei package.json gehen,
würden Sie feststellen, dass innerhalb der Abhängigkeiten
die RxJS-Bibliothek bereits in Ihrer Anwendung enthalten ist.
Also, was auch immer Sie von RxJs verwenden müssen, ist bereits für Sie verfügbar.
So können wir fortfahren und die RxJS-Bibliothek sofort innerhalb unserer Angular-Anwendung verwenden.
Wenn Sie Ihre Angular-Anwendung von Grund auf neu erstellen,
müssen Sie explizit eine npm-Installation von RxJs durchführen.
Gehen Sie zur Datei dish.service.js,
lassen Sie mich zuerst die von
aus unseren 'rxjs' Observables importieren.
Wir werden auch importieren - Jetzt,
wenn Sie RxJs in Ihrer Angular-Anwendung verwenden, wird
die gesamte Bibliothek nicht enthalten.
Sie können nur die benötigten Teile aus der RxJS-Bibliothek importieren
und dann in Ihrer Angular-Anwendung verwenden.
Also, wenn Ihre Angular-Anwendung endlich für die Bereitstellung vorbereitet ist,
werden nur die Teile von RxJs, die erforderlich sind, in Ihre Angular-Anwendung aufgenommen.
Der Delay-Operator.
Der Verzögerungsbetreiber ermöglicht es uns, die Aussendung der Ware von unserem beobachtbaren zu verzögern. Wenn wir
in die Methoden gehen,
werden wir jetzt diese Methoden aktualisieren, um Observables zu verwenden,
und wir werden ein Versprechen zurückgeben, indem wir das
beobachtbare in Ihr Versprechen mit dem ToPromise-Operator konvertieren.
Wenn Sie also bereits Komponenten haben, die Versprechen verwenden,
und Sie die Komponenten nicht ändern möchten,
können Sie einfach ein Observable in Ihr Versprechen konvertieren und dann
das Versprechen an Ihre Komponenten senden.
Wie wir erkannt haben, werden Versprechen nur ein Element ausgeben,
während Sie sehen können, dass Observables auf Streams basieren.
Also, das ist die Einschränkung, die Sie erhalten, wenn Sie
nur den zwei Versprechen Operator für Observables verwenden
und es verwenden, weil der ToPromise-Operator
es Ihrem Observable ermöglicht, nur einen Wert zu emittieren.
Aber für den Moment machen wir es als den ersten Schritt, bevor wir
in die vollständige beobachtbare Implementierung unserer Dienste übergehen.
Also, wenn ich zur GetDishs-Methode gehe,
werde ich diese Gerichte zurückgeben.
Also, ich werde diesen Teil entfernen und dann sagen, Rückkehr von.
Wenn Sie nur einen Wert von Ihrem Observable emittieren möchten,
verwenden Sie die of -Methode,
und die den Wert nimmt, den Sie dort emittieren möchten.
Das genügt für unsere aktuelle Bewerbung im Moment.
Also, wir werden das nutzen,
und auch wir wollen die Ausgabe des Wertes um zwei Sekunden verzögern.
Also werde ich diesen Teil des Codes ändern, um
den Delay-Operator für meine beobachtbare, mit Pipe zu verwenden.
Ich muss das in Promise umwandeln und das Versprechen ausgeben.
Jetzt wird meine GetDishes Methode aktualisiert, um ein beobachtbares zu verwenden,
und dann in ein Versprechen umzuwandeln und dann das Versprechen an meine Komponente zu senden.
Daher muss ich keine Updates der Komponente durchführen.
Verwenden wir den gleichen Ansatz, um die verbleibenden beiden Methoden meines Dienstes hier zu aktualisieren.
Also werde ich nur diesen Teil kopieren
und dann diesen Teil aktualisieren, dann
den Verzögerungsteil davon nehmen
und dann diesen Teil aktualisieren, um die Verzögerung zu verwenden
und diese toPromise-Methode zu konvertieren.
Damit wird meine GetDish-Methode ebenfalls aktualisiert.
Lassen Sie mich dasselbe mit der GetFeaturedDish-Methode tun.
Wieder, wenn Sie wollen,
können Sie das Ganze austippen.
Ich bin nur faul, nur die Teile auszuschneiden und einzufügen und zu ändern, die
ich ändern möchte, und diese ToPromise-Methode zu konvertieren.
Das war's. Mein Dienst wird jetzt aktualisiert, um Versprechungen von einem beobachtbaren hier zurückzugeben.
Mit diesem Update
wird mein Dish Service aktualisiert, um Observables zu verwenden,
anstatt die Werte direkt zu verwenden.
Gehen Sie in ähnlicher Weise voran und aktualisieren Sie den Leader-Service und den Promotion-Dienst.
Sie würden jetzt bemerken, dass ich
den Führungsdienst bereits aktualisiert habe, um Observables zu nutzen.
In ähnlicher Weise habe ich den Werbedienst aktualisiert, um Observables zu nutzen.
Speichern Sie die Änderungen und lassen Sie uns gehen und werfen Sie einen Blick auf unsere Anwendung.
Wenn Sie zum Browser gehen,
würden Sie feststellen, dass Ihre Anwendung genau die gleiche Weise wie zuvor ausgeführt wird
und die Daten von den Diensten wie zuvor abruft.
Also nicht viel von einer Änderung innerhalb Ihrer Anwendung als solche.
Es führt genau das Gleiche aus.
Beachten Sie also, dass
es, indem Sie Ihre Versprechen durch Observables ersetzen, nicht viel verändert hat, wie Sie es erwarten.
Jetzt gehen wir noch einen Schritt weiter.
Wir werden nun unsere Dienste Observables zurückgeben lassen,
und wir werden die Komponenten aktualisieren, um Observables zu nutzen.
Der Grund, wie ich bereits erwähnt habe,
ist, dass, wenn wir unsere Dienste aktualisieren, um
den HTTP-Dienst zu verwenden, um zu einem Server zu gehen, um die Daten zu holen,
dann würden wir feststellen, dass die HTTP-Methoden in Angular Observables zurückgeben.
Die Dienste können die Observables einfach an unsere Komponenten weitergeben und
die Komponenten diese Observables abonnieren lassen und
die Daten nutzen, die sie dabei erhalten.
Das wäre also ein Zwischenschritt für uns, um zu dieser Phase zu gelangen.
Wir werden HTTP im nächsten Modul betrachten. Wenn Sie
zu unseren Diensten zurückkehren,
können Sie jetzt das ToPromise zuerst entfernen, indem Sie
den ToPromise-Operator entfernen, da wir es nicht
mehr benötigen und dann werden wir einfach das ToPromise daraus entfernen,
beobachtbar importieren und dann stattdessen
unsere Methode
Observables anstelle von Versprechungen zurückgeben lassen .
Wie ich bereits erwähnt habe,
was auch immer ein Versprechen tun kann, kann ein Beobachtbares auch tun.
Also, lassen Sie uns alle diese aktualisieren, um Observables zurückzugeben.
Tun Sie dasselbe mit den verbleibenden zwei Diensten.
Sie würden jetzt bemerken, dass ich auch den Leader-Service aktualisiert habe,
um einfach Observables anstelle von Versprechen zurückzugeben,
und auch der Promotion-Dienst wurde entsprechend
aktualisiert, um beobachtbar anstelle von Versprechen zurückzugeben.
Nun, was das bedeutet, ist, dass wir gehen und unsere Komponenten aktualisieren müssen,
um Observables zu verwenden, anstatt Versprechen, wie wir es früher getan haben.
Jetzt zum Versprechen sahen wir, dass wir die.then verwenden müssen,
um das Ergebnis zu erhalten, wenn die Auflösung des Versprechens ausgeführt wird.
Mit einem beobachtbaren wird die.then in.subscribe konvertiert.
Die Art und Weise, wie Sie die Daten verbrauchen, bleibt genau gleich.
Mit dieser geringfügigen Änderung in Ihren
Komponenten können die Komponenten nun Observables anstatt Versprechen verarbeiten.
Gehen Sie also zu allen vier Komponenten, die die Dienste nutzen
, zuerst gehen wir zur Datei menu.component.ts.
In der Datei menu.component.ts
würden Sie sofort die rote zerquetschige Zeile dort bemerken,
unter der dann offensichtlich, weil wir kein Versprechen zurückgeben.
Stattdessen geben wir ein beobachtbares zurück.
Also konvertieren Sie das dann, um zu abonnieren und das war's.
Ihre Menükomponente ist nun in der Lage,
die beobachtbaren Werte zu verbrauchen, die vom beobachtbaren ausgegeben werden.
Nehmen Sie dieselbe Änderung an der Datei about.component.ts,
der Datei dishdetail.component.ts und der Datei home.component.ts vor.
Nachdem Sie die restlichen Komponenten Tapscott-Dateien aktualisiert haben,
schauen wir uns das Verhalten unserer Anwendung im Browser an.
Gehen Sie in den Browser, Sie werden keinen Unterschied im Verhalten unserer Anwendung bemerken.
Diese Version unserer Angular-Anwendung wird aktualisiert, um
Observables anstelle von Versprechen zu verwenden.
Also, die Home-Komponente hier,
über Komponente führt genau die gleiche Weise wie zuvor,
und die Menükomponente tut genau das Gleiche.
Auch die Komponente des Gerichtes verhält sich genau so wie zuvor.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir unsere ersten Schritte zur Verwendung von
Observables innerhalb unserer Angular-Anwendung unternommen, indem wir
die Dienste und entsprechend die Komponenten aktualisieren,
um Observables anstelle von Versprechen zu verwenden.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht RxJS Teil eins zu machen.