Angular 2 Essential Training - Teil 8 - Dienste und Observatorien | Patrick Schroeder | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Angular 2 Essential Training - Teil 8 - Dienste und Observatorien

teacher avatar Patrick Schroeder, Teaching JavaScript Courses

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

9 Einheiten (22 Min.)
    • 1. Dienstleistungen Intro

      0:40
    • 2. Dienstleistungen erklärt

      2:49
    • 3. Konstrukteur

      2:00
    • 4. Services

      3:21
    • 5. Einführung in HTTP

      1:12
    • 6. Observables erklärt

      2:18
    • 7. Http in Angular 2

      1:00
    • 8. Http mit Observablen in unserer App

      5:00
    • 9. HTTP

      3:56
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

91

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Willkommen in Teil 8 des Kurses.

In diesem Abschnitt werden wir Dienste und Beobachtungen besprechen.

Dienstleistungen erklärt - Dienste werden verwendet, um Logik zu verkapseln, die über mehrere Komponenten hinweg wiederverwendet werden kann.

Constructor - Der Konstruktor ist eine spezielle Methode, die ausgeführt wird, wenn eine neue Instanz der Klasse erstellt wird.

Observables Explained - Observables sind Teil der reaktiven Erweiterungen Bibliothek auch bekannt als RxJS und werden in Angular 2 ausgiebig eingesetzt.

HTTP in Angular 2 - Wir verwenden http, um Daten zu senden und zu empfangen. Angular macht es uns einfach, diese Anfragen zu senden.

Code für diesen Kurs finden Sie hier: https://github.com/jakblak/learn-angular2

Triff deine:n Kursleiter:in

Teacher Profile Image

Patrick Schroeder

Teaching JavaScript Courses

Kursleiter:in

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life.

Learn JavaScript Programming

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Dienstleistungen Intro: Hallo und willkommen zurück in diesem Abschnitt wird diskutieren Dienstleistungen. Wir beginnen mit einer Definition, welche Dienste sind und wie sie innerhalb unserer Anwendung verwendet werden können . Dazu gehören das Erstellen eines Dienstes, Registrieren des Dienstes als Anbieter und das Einfügen des Dienstes in eine Komponente. Wir werden auch das Konzept der Abhängigkeitsinjektion und wie winkelförmig eine einzelne Instanz injiziert . Oder Singleton, wenn Dienste verwendet werden, wird auch unseren ersten Blick auf den Konstruktor werfen, wobei der Konstruktor eine Methode ist, die in einer Klasse verwendet wird, um jede anfängliche Einrichtung durchzuführen. 2. Dienstleistungen erklärt: Lassen Sie uns jetzt aufschlüsseln, was ein Service ist und wie er genutzt wird. Dienstleistungen. Luft, die zur Kapselung der Logik verwendet wird, die dann über mehrere Komponenten hinweg wiederverwendet werden kann. Dienste enthalten Methoden, die das Abrufen einer Aktualisierung durchführen. Ein paar Daten. Diese Daten könnten aus einer Jason-Datei stammen, die sich in einem unserer Ordner befindet, eine externe, A p I oder aus unserer eigenen Datenbank. Wir brauchen einen Weg für unsere Komponenten Zehe Zugang haben, thes Methoden. Sicher, wir könnten sie direkt in unsere Komponenten importieren. Aber das ist nicht ideal, da es unsere Komponenten brüchig machen würde und potenziell Nebenwirkungen haben würde. Aus diesem Grund ermöglicht es uns, unseren Service mit einem Injektor zu registrieren. Der Injector erstellt und verwaltet dann eine einzelne Instanz des Dienstes, bekannt als Singleton , die dann in eine , beliebige Anzahl von Komponenten injiziert werden kann, die Zugriff auf den Dienst benötigen ohne die Daten oder den Zustand unserer -Anwendung. Schauen wir uns die drei Schritte zum Erstellen und Verwenden eines Dienstes an. Der erste Schritt besteht darin, eine neue Datei zu erstellen. Die Namenskonvention besteht darin, den Namen unserer Service-Funktion zu verwenden, gefolgt von den Schlüsselwörtern Service, zusammen mit der Typoskripterweiterung im Inneren sind Ordner Wir brauchen ein Import Injectable Injectable ist ein Dekorator, der verwendet wird, um unsere -Dienstinstanz. Und hier importieren wir auch die iBook-Oberfläche. Wir deklarieren unseren injizierbaren Dekorator über der Klasse. Denken Sie daran, Dekoratoren fügen Metadaten hinzu oder, Sie könnten der Klasse zusätzliche Funktionalität hinzufügen, indem Sie auf diese Weise injizierbar erklären, es ermöglicht uns, die Buchserviceklasse als Singleton in Komponenten zu injizieren. Dann werden in der Klasse einige Methoden definieren, die die Arbeit erledigen werden, Bücher zu aktualisieren. Als Nächstes müssen wir unseren neuen Service innerhalb unseres Energiemoduls deklarieren. Wir tun dies innerhalb eines neuen Schlüsselanruf-Providers. Nun sagt das angular, dass wir eine Singleton-Instanz des Buchdienstes bereitstellen möchten, wenn Buchdienste , die hier in eine Komponente injiziert wurden, unsere Buchschnittstelle importiert haben. Zusammen mit dem Buch-Service müssen wir Service innerhalb unseres Konstruktorparameters hinzufügen oder buchen. Dadurch wird der Dienst für die Verwendung unten initialisiert. Dann sind wir in der Lage, Methoden innerhalb der Klasse zu erstellen, die Zugriff auf die Methoden innerhalb unseres Dienstes haben , wie zum Beispiel Bücher abrufen. Das könnte also viel zu absorbieren sein, wenn du dieses Zeug zum ersten Mal siehst. Deswegen werden wir das und mehr Details durchgehen. Zusammen mit einigen Beispielen beginnen Aufzählungszeichen jetzt mit einer besseren Erklärung, was diese Konstruktormethode tatsächlich ist . 3. Konstrukteur: Im letzten Video haben wir uns gezeigt, wie Services air verwendet, um Daten in Komponenten zu injizieren. Insider-Komponentenklasse. Es gibt eine Methode namens Konstruktor, die ist, wo wir unseren Service injizieren müssen. Der Konstruktor ist eine spezielle Methode, die ausgeführt wurde, wenn eine neue Instanz der Klasse erstellt wird . Selbst wenn wir einen Konstruktor innerhalb einer Klasse nicht explizit definieren, gibt es immer noch einen Konstruktor, der erstellt wird. Es ist einfach nicht gesehen. Wir verwenden Konstruktoren, um jede anfängliche Einrichtung für neue Objekte durchzuführen. Sie können optional Parameter annehmen, aber sie können keine Werte zurückgeben. Lassen Sie uns nun einige kurze Beispiele durcharbeiten, um den Konstruktor besser kennenzulernen. Wir setzen den Konstruktor immer direkt unter irgendwelche vordefinierten Eigenschaften, so dass Sie den Konstruktor auf verschiedene Arten sehen werden. In Online-Beispielen sehen Sie den Konstruktor, der verwendet wird, um einerAbhängigkeit, einem injizierten Dienst oder einem Routing eine private Variablezuzuweisen Abhängigkeit, einem injizierten Dienst oder einem Routing eine private Variable . Es wird so aussehen. Wir setzen eine private Variable, die einen Unterstrich für den Dienst enthält. Ankommende Instanz haben wir importiert. Dann können wir diese Variableninstanz innerhalb beliebiger Methoden verwenden, die das Feuer und darunter hatten. Die andere, weniger gebräuchliche Methode, den Konstruktor zu verwenden, besteht darin, Standardeigenschaftswerte zu initialisieren, sodass Sie möglicherweise etwas wie Bücher und Lager sehen. Set ist eine öffentliche Variable mit dem Typ der Zahl als innerhalb der Konstruktoren geschweifte Klammern. Der Wert ist definiert. Beachten Sie, dass wir nichts zurückgeben, außer dass Onley die Werte zuweist. Dies ist also äquivalente Syntax. Aber für mich ist es sinnvoller, Bücher und Lager einmal zu definieren. Wenn Sie bereits einen Standardwert im Auge haben, lassen Sie uns nun ein Beispiel für einen Dienst in unserer App durcharbeiten, indem Sie einen neuen Buchdienst erstellen. 4. Services: Jetzt sind wir wieder in unserer App, und wir werden die Buchschnittstelle in diesem Beispiel verwenden. Öffnen wir also die Buchpunktdatei und nehmen Sie ein paar Änderungen vor. Diese Eigenschaften hier spiegeln also unser A p I. Für dieses Beispiel wider. Ich möchte die Eigenschaften verwenden, die mit dem übereinstimmen, was derzeit angezeigt wird. Also werde ich das vorerst auskommentieren. Und dann werde ich diese neuen Eigenschaften für den Einsatz in unserem Service hinzufügen. Jetzt werde ich eine neue Datei hinzufügen, die Buchpunkt-Service dot ts genannt wird. Ich werde anfangen, indem ich eine Klasse von Buch-Service exportiere und jetzt müssen wir eine hinzufügen meine Importe zuerst von Winkelkern injizierbar sein. Dann http von angular Dash http und ich importiere auch meine Buchschnittstelle über meiner Klassendefinition . Ich brauche meinen injizierbaren Dekorateur. Dann werde ich innerhalb meiner Klasse eine Methode namens Get Books erstellen, die vom Typ ist, den ich für unsere Schnittstelle buche. Dann werde ich in Array von Büchern zurückkehren und dieses Array wird das gleiche Array sein , das wir hart in unsere Bücherlistenkomponentendatei codiert haben. Also werde ich einfach von dort kopieren und es dann in unseren Dienst einfügen. Wir müssen sicherstellen, dass wir unseren Service als Anbieter in unserer App Dot Moduldatei registrieren , also gehen wir in diesen Datei-Import- oder Buch-Service von seinem Standort aus. Dann hatte ich einen Schlüssel von Anbietern zu unserem Energiemodul, das ein Array definiert und derzeit nur zu halten oder zu buchen Service. Jetzt sind wir bereit, unseren Service innerhalb unserer Komponente zu nutzen. Also gehe ich zurück in unsere Buchliste Komponentendatei, werde ich beginnen, indem ich unseren Service importiere. Dann werde ich eine neue Eigenschaft von Büchern hinzufügen, die ein Array von Typ I Buch ist. Dann unten sind Eigenschaften werden meinen Konstruktor in den Klammern hinzufügen. Ich muss eine private Variable des Underscore-Buchdienstes hinzufügen , der vom Typ Buchdienst ist, was wir gerade importiert haben. Die Konvention hier, wenn Dienste innerhalb des Konstruktors injiziert werden, besteht darin, der Variablendeklaration einen Unterstrich als innerhalb der geschweiften Klammern voranzustellen , ist, wo ich meine Bucheigenschaft gleich meinem Buchservice-Bestand setzen werde, Abrufen von Büchern Methode. Dies wird das Gleiche tun wie dieser Code hier. Also werden wir uns vorerst auskommentieren. Und zukünftige Demonstrationen würden Engy darin verwenden, anstatt unsere Daten innerhalb des Konstruktors zu laden . Dieses Beispiel ist also hauptsächlich nur, um Sie mit dem Konstruktor sowie mit der Funktionsweise von Diensten vertraut zu machen. Also werden wir alle speichern, die unsere Anwendung laden, und Sie können sehen, es funktioniert die gleiche wie zuvor ohne Fehler, Creel. 5. Einführung in HTTP: Hallo und willkommen zurück in eckig. Zwei wesentliche Ausbildung in diesem Abschnitt wird diskutieren http und beobachtbare http ist, was wir verwenden, wenn wir etwas aus einer Datenbank oder in einem p abrufen wollen Ich Nicht viel Änderung zwischen eckig eins und eckig zu in dieser Hinsicht. Wir verwenden immer noch das Schlüsselwort http, um unsere Anfragen auszuführen. Was sich geändert hat, ist, wie wir mit der Antwort umgehen. Angular Auch hat den Wechsel zur Verwendung von Rx Js beobachtbaren beobachtbaren im Wesentlichen Reaktionen im Laufe der Zeit emittieren gemacht. Anstatt dass die Antwort ein einmaliges Vorkommen ist. Also wird zuerst diskutieren, was ein beobachtbares ist und wie es sich von einer typischen versprechenbasierten Antwort unterscheidet . Dann werden wir diskutieren, wie HTTP-Anfragen auszuführen Dies wird die Durchführung einer http get-Anfrage beinhalten , um unsere Daten abzurufen, die das Antwortobjekt mit einem beobachtbaren und dann das Abonnieren des beobachtbaren in unserer Komponente wird unsere Energie in den Lebenszyklushaken, um unsere Daten anzuzeigen 6. Observables erklärt: in diesem Video wird tief im Schlepptau graben. Verstehen, Observable beobachtbar sind Teil der Reactive Extensions Bibliothek, auch bekannt als Rx Js, und sie werden auch ausführlich in eckig verwendet. Alles über reaktives X erfahren Sie hier bei reaktivem ex dot io. Jetzt besteht der Zweck von Reactive X darin, ein A p I für die asynchrone Programmierung mit beobachtbaren Streams bereitzustellen . Also, was bedeutet das genau? Es bedeutet, dass beobachtbar ist, uns mit einem asynchronen Datenstrom zu versorgen, den wir abonnieren können , so dass, wenn neue Daten zugelassen wurden, wir automatisch die neuen Daten empfangen können. Sie können sich dies als Empfang der Änderungen der Aktienkurse vorstellen, da der Preis der Aktien ständig schwankt und beobachtbar verwendet werden könnte aktualisieren Sie diese Preise, wie sie in beobachtbaren zwart wie ein Array kommen . Also werden wir den Kartenoperator verwenden, um die Antwort zu verarbeiten Um dies besser zu verstehen , gehen wir zum reaktiven ex dot io und klicken Sie dann auf Ihre Plattform und dann JavaScript. Also werden wir zu dieser Get Home-Seite gebracht. Wenn wir ein wenig nach unten scrollen, können wir ein Beispiel sehen. Dies ist sehr ähnlich wie unser Service aussehen wird. Diese Quelle wird also die Antwort sein. Wir erhalten zurück wie eine Jason-Datei, zum Beispiel, zum Beispiel, dann können wir die Antwort filtern, um ein ausgewähltes Kriterium zu entsprechen. Dann müssen wir die Karte auf der Antwort aufrufen, um die Daten zu formen. Sobald die Daten geformt sind, sie an den Abonnenten weitergegeben. Dieser Abonnent wird sich innerhalb unserer Komponente befinden, und es wird verwendet, um die Daten in unserer Ansicht anzuzeigen und Fehler zu verarbeiten. Wie unterscheidet sich ein beobachtbares von einem Versprechen? Observable ist Arbeit mit mehreren Werten im Laufe der Zeit, während Versprechungen auf Lee einen einzelnen Wert beobachtbar sind Abbrechen. Kräuterversprechungen sind nicht abgebrochen. Herbal beobachtbar kann mit JavaScript-Funktionen wie Karte manipuliert werden, Filter und reduzieren. Also, jetzt, da wir ein besseres Verständnis davon haben, was beobachtbar Zar, lassen Sie uns die Arbeit mit HTTP-Anfragen besprechen 7. Http in Angular 2: wir verwenden http, um Anfragen für Daten zu senden, ein paar Anfragen könnten wir unsere get Anfragen stellen, um einige Daten zu holen und Anfragen zu stellen , die verwendet werden, um ein Stück davon hinzuzufügen oder zu ändern. Ein Winkel macht es sehr einfach für uns Zehenarbeit mit diesen. HTTP-Anfragen Alles, was wir tun müssen, ist http aus eckigem Schrägstrich http zu importieren und dann das HTT-Modul innerhalb ihres Engy-Moduls foul hinzuzufügen und zu einer Liste von Importen hinzuzufügen, die wir benötigen, um es Instanz von http zu erstellen , damit es in unserer Klasse verwendet werden kann. Wir tun dies innerhalb des Konstruktors, indem wir eine private Variable von http hinzufügen, dann können wir Anfragen stellen. In diesem Fall ist es eine get-Anfrage. Made toe Bücher Punkt Jason Datei in unserem A P I Ordner befindet, und dann müssen wir eine Antwort abbilden, bevor Sie es an die Komponente senden. Lassen Sie uns nun eine HD hinzufügen, um Anfrage zu unserer Anwendung zu erhalten 8. Http mit Observablen in unserer App: Hier sind wir wieder in unserer Bewerbung. Öffnen wir hier die Buchservice-Datei. Sie können sehen, dass wir in einigen Büchern hart codiert haben. Was wir tun wollen, ist stattdessen greifen alle Bücher in Arab Bookstop. Jason, Akte hier. Schneller Hinweis, bitte. Stellen Sie sicher, dass Sie die separaten Bücher herunterladen. Thought Jason Datei in ihrer Ressource ist Ordner dieser Vorlesung und dann hinzugefügt hier. Also das erste, was wir tun werden, ist HTTP aus eckigem Schrägstrich http Als nächstes öffnen wir das App-Dot-Modul, Datei ein importiertes http-Modul und dann in unsere Liste der Importe hinzugefügt. Ich werde sicherstellen, dass Sie beobachtbar von unseren XJ Esa's importieren. Nun, jetzt ist das erste, was ich tun werde, innerhalb des Konstruktors. Wir werden eine private Variable von Unterstrich http der HTTP-Instanz zugewiesen. Nun, dann ändern Sie diese iBook-Deklaration zu einem beobachtbaren Array vom Typ I book und entfernen Sie dann die hartcodierten Daten. Und dann kann ich sagen, dass Sie diesen Unterstrich http zurückgeben. Verweise sind variabel und dann doc erhalten und den Speicherort unserer Datei in Bezug auf unsere Indexpunkt-HTML-Datei übergeben . Also ist es bei einem p I Schrägstrich Bücher Schrägstrich Bücher Punkt Jason. Dann brauchen wir ein Format, die Daten wenig, bevor wir es der Komponente geben, um dies zu tun, wir werden den Kartenoperator verwenden, also sagen wir Punktkarte Und hier müssen wir tatsächlich Karte aus unserem Ex-Kleid importieren , um diese Methode zu verwenden. Also werden wir eine Importanweisung für die Methode oben hinzufügen und dann unten, übergeben wir einen Parameter, der die Daten darstellt. Also sagen wir Antwort. Jetzt stellen wir die Frage. Was ist die Art dieser Antwort? Und da wir zum Beispielmehr als nur die Daten erhalten, zum Beispiel erhalten wir auch Header-Informationen zusammen mit dem Status, den wir verwenden sollten. Angular ist in Response-Schnittstelle gebaut, und dies befindet sich im gleichen Ordner wie http. Dann nehmen wir eine Antwort, stellen sicher, dass es zu Jason geworden ist und vom Typ I Buch ist. Das ist also alles, was wir tun müssen, um die Daten abzurufen und an die Komponente weiterzugeben . Wir werden in der nächsten Vorlesung noch ein paar Luftbewegungen hinzufügen. Aber für jetzt, lassen Sie uns nur sehen, wie der Status in unserer Komponente angezeigt wird. So öffnen Sie unsere Bücher Liste Komponentendatei. zuerst unseren Aufruf, Entfernen Siezuerst unseren Aufruf,um Bücher vom Konstruktor zu erhalten. Jetzt möchte ich, dass die Daten angezeigt werden, wie die Seiten geladen werden. Die Konvention besteht darin, dienstbezogene Logik innerhalb der Nichtregierungsorganisation in diesem Lebenszyklus zu aktivieren. Hook So gut, erste Anzeige ist eingeschaltet, und es nach der Komponente, dann sagen Sie Bücher Liste Komponentenimplementierung in einem Netz und fügen Sie n G auf innit Hook Nach dem Konstruktor werde ich innerhalb dieser Curlys eine Methode, um Bücher zu erhalten, die die feine unten sein wird . Dann erstellen wir unsere Methode namens Get Books. Diese Methode ruft dann die Methode get books auf dem Buchservice auf, um alle Bücher aus unserem Jace in Datei abzurufen . Wenn alle diese Bücher Luft verwirrend bekommen, können Sie das etwas anderes nennen, wie alle Bücher bekommen. Aber ich werde es einfach als Bücher für jetzt lassen. Und der letzte Schritt ist, dass wir das beobachtbare mit Punkt abonnieren müssen, dann einen Parameter übergeben, der die Daten darstellt, die wir zurückbekommen. Dieser Name hier kann alles sein, was Sie wollen, aber in diesem Fall sagen wir Bücher, dann Aero-Funktion Dieser Start Bücher gleich Bücher, also könnte das auch ein wenig seltsam aussehen. Aber alles, was wir tun, ist, dass wir die Antwort nehmen und dann sitzen sie gleich dem Reihenbucheigentum hier. Dies würde genauso funktionieren, wenn wir Bücher in etwas wie Response ändern. Schließlich müssen wir einen anderen Parameter hinzufügen, um zu abonnieren, falls ein Fehler vorliegt. Also sagen wir Fehler, dann Pfeilfunktion. Diese Punkt-Fehlermeldung entspricht einer Luft vom Typ beliebig und richtet dann eine Eigenschaft von air message um string einzugeben. Lassen Sie uns nun unsere App laden und sehen Sie die bisherigen Ergebnisse. Also durchlaufen wir jetzt jedes der Bücher in unserem A P I. Das ist großartig, aber es sieht ziemlich kaputt aus. Es gibt zwei Dinge, die wir tun müssen, um das zu beheben. Zuerst müssen wir die Eigenschaften in unserer iBook-Oberfläche ändern, um die unserer A p I widerzuspiegeln. So können Sie diese kopieren oder einfach die Datei herunterladen. Und zweitens müssen wir bearbeiten oder Bücherliste HTML-Datei, um die Eigenschaften unserer A p. Iwiderzuspiegeln. I Also sehen Sie, ob Sie die richtigen Änderungen hier selbst vornehmen können, und die Antwort wird in der nächsten Vorlesung sein 9. HTTP: Hey, Leute, willkommen in diesem Video, wir werden unsere Inserate reparieren. Also, wenn Sie nicht versucht haben, dies selbst zu beheben, empfehle ich Ihnen, es zu versuchen. Dann, wenn das erledigt ist, werden wir einige Fehlerbehandlung zu unserem Service hinzufügen und einige der Rx Jazz Operatoren erkunden . Also gerade jetzt unsere App ist kaputt. Da wir den Service zu unserer Komponente hinzugefügt haben, haben wir den HTML-Code nicht angepasst. Also lasst uns das jetzt machen. Das erste, was ich tun werde, ist, diese anderen Spalten loszuwerden, die die hartcodierten Daten enthalten . Ich werde diese Lieblingsbotschaft behalten, Div. Wir iterieren immer noch über Bücher und Bücher, also lasse ich das auch. Aber ich werde diese beiden Tasten loswerden, die wir nicht mehr benutzen werden. Öffnen wir unsere Bücher. Starten Sie Jason-Datei, damit wir einen Verweis auf unsere Artikel erhalten können. Das Bild unserer Bücher ist genau hier als Bild Euro. So wird das anstelle des Buchpreises ändern, es ist nur Preis genannt. Buchtitel wird Name Book genannt. Autor ist nur Autor. Buchbeschreibung ist einfach Beschreibung veröffentlicht auf wird jetzt Veröffentlichungsdatum genannt. Wir benutzen immer noch Buch, das auf Lager ist, aber ich habe das geändert, um ein Boolean im Jase zu sein. der Datei können wir etwas Ähnliches wie die Hyatt-Bild-Logik oben verwenden. Soldaten kopieren das über und sagen, dass, wenn das Buch vorrätig ist, was bedeutet, wenn es auf true gesetzt ist, zeigen Sie die Zeichenfolge, Ja, sonst, nein. Dann, statt Buchrezensionen, wird sagen, Sterne Bewertung. Und dann werde ich loswerden dieser Bücher auf Lager P-Element und dann beheben Sie diese Bs Lieblingsbereich zu sagen Buch Gedanken-Shop Bewertung und Buch Punktnamen. Jetzt speichern wir alles und sehen die Ergebnisse. Okay, sieht ziemlich gut aus. Lassen Sie uns jetzt noch etwas Lufthandling zu unserem Service hinzufügen. Wir senden nur die Daten von unserem a p i n Punkt zurück, aber nichts tun für den Fall, dass die Datei nicht gefunden wird oder etwas falsch feuert. Also öffne ich meine Buchservice-Datei und erstelle zuerst eine private Luftbehandlungsmethode namens Handle Error. Eine kreative Variable hier mit dem Namen Nachricht, die unsere Fehlermeldung angezeigt wird. Und dann könnte ich das beobachtbare Anhängen an die Wurfmethode zurückgeben, die unsere Nachricht übergibt . Wir verwenden hier einen neuen Rx Js Operator namens throw, also müssen wir ihn importieren. Anstatt diese Operatoren einzeln aufzulisten, könnten wir die gesamte Rx Js-Bibliothek so importieren, aber dies wird seit unserem Austausch eigentlich nicht empfohlen. Das ist eine große Bibliothek und wir brauchen nicht alles da drin. Jetzt. Lassen Sie uns bearbeiten oder Bücher Methode erhalten, um den Lufthandling Schlag einzuschließen. Wir können zuerst die Methode tun, die es uns ermöglicht, eine Nachricht zu protokollieren, nachdem die Daten empfangen wurden. Und dann fügen Sie auch die catch-Methode hinzu, die diesen Gedanken übergibt. Handle Fehler in dem Ereignis und Fehler wird empfangen und stellt sicher, dass diese in neue Operatoren von oben importiert werden. Und dann brechen wir einfach unser A P. Ich rufe an, indem wir am Ende unseres Endpunkts ein zusätzliches s hinzufügen. Und jetzt erhalten wir bei der Aktualisierung eine schöne beschreibende Fehlermeldung, die uns über das Problem mit dem Antwortobjekt warnt