[MUSIC]
Lassen Sie mich Ihnen jetzt einen schnellen Überblick über Angular und
seine Beziehung zu reaktivem Programm
geben, wie Angular reaktive Programmierung nutzt.
Insbesondere die RxJS-Bibliothek und wie sie von
Angular genutzt wird, um eine reaktive Möglichkeit zum Schreiben von Angular-Anwendungen bereitzustellen.
Was wir nun in dieser Vorlesung präsentieren, ist ein sehr kurzer Überblick über
das allgemeine Konzept der reaktiven Programmierung, Observables,
das beobachtete Muster und wie es in Angular angewendet wird.
Reaktive Programmierung selbst ist ein sehr umfangreiches
Thema, das in zehn Minuten nicht behandelt werden kann.
Reaktive Programmierung,
wenn ich es im Detail abdecken muss, wird ein ganzer Kurs in seinem eigenen Recht.
Und leider
haben wir nicht die Zeit, einen ganzen Kurs in diesen Kurs einzubetten.
Angesichts der Tatsache, dass wir hauptsächlich daran interessiert sind, wie Angular
reaktive Programmierung nutzt, um es uns zu ermöglichen, Angular-Anwendungen zu verdoppeln,
so werden wir uns auf diesen Aspekt konzentrieren.
Aber auf dem Weg
werde ich Ihnen eine kurze Einführung in die verschiedenen Konzepte in diesem allgemeinen Bereich geben.
Wenn Sie sich für reaktive Programmierung interessieren,
würde ich Ihnen dringend empfehlen, einige der Links, die ich bereitgestellt habe, und
zusätzliche Ressourcen für diese spezielle Lektion zu verfolgen.
Sie haben Zugang zu viel Material da draußen, aber
wir geben Ihnen eine starke Erdung in der reaktiven Programmierung.
Aber in diesem Kurs
werden wir von diesem Punkt an betrachten, wie Angular das reaktive Programmierparadigma für die
Gestaltung von Angular-Anwendungen nutzt.
Wir werden nicht nur auf diese Lektion beschränken, sondern
alle nachfolgenden Lektionen sehen auch Verwendung des beobachtbaren und
des Beobachtungsmusters und wie wir reaktive Anwendungen in eckigen schreiben.
Die ganze Diskussion über reaktive Programmierung dreht sich um
dieses spezielle Software-Engineering-Muster, das als beobachtbares Muster bezeichnet wird.
Sie erinnern sich an die vierköpfige Bande, die ich Ihnen in einem der früheren
Vorträge erwähnt habe, wo wir über das Modellansichts-Controller-Framework und
das Modell-View-Modell-Framework diskutiert haben.
Die gleiche Bande von vier Buch enthält einige der Muster, die
ziemlich erfolgreich in der reaktiven Programmiermuster verwendet wurde.
Das Beobachtermuster dreht sich um Observables.
Sie haben also Observables, deren Verhalten von Beobachtern beobachtet werden kann.
Deshalb wird dies das Beobachtermuster genannt.
Sie erklären bestimmte Objekte als beobachtbar oder Subjekte und
diese Observables werden von Beobachtern beobachtet.
Nun werden sich die Beobachter selbst registrieren, um
die Veränderungen im Beobachtbaren zu beobachten, und
die Beobachtbaren werden die Beobachter benachrichtigen, wenn Änderungen auftreten.
In diesem Beobachtermuster wird die Art und Weise, wie diese Beobachter
das Beobachtbare abonnieren oder sich beim Beobachtbaren registrieren.
So weiß das Beobachtbare, welche Beobachter an
Änderungen in seinem Zustand interessiert sind.
So
wird es, wenn eine beobachtbare Beobachtung sagt, in seinem Zustand ändert, sofort alle Beobachter
über die Änderung des Zustands informieren und die Beobachter können anschließend
auf der Grundlage dieser Mitteilung über die Änderung des Beobachtbaren Maßnahmen ergreifen.
Das Beobachtermuster wurde unter vielen verschiedenen
Umständen sehr effektiv eingesetzt.
Und tatsächlich basiert das reaktive Programmierparadigma darum.
Also, die Frage, die Ihnen sofort in den Sinn kommt, ist,
warum reden wir über die Observables?
Was ist das besondere Interesse an Observables?
Observer-Muster ist eine Möglichkeit, Software-Anwendungen zu schreiben.
Also, das basiert auf Streams.
Sie haben also Daten, die Ihre Anwendung fließen.
Diese Daten können als Wertestrom angezeigt werden, der durch Ihre
Anwendung fließt.
Der Stream ist also der primäre Kanal, um den Observables und
beobachtbares Muster ausgelegt ist.
Also, welche Streams Sie diese Streams abonnieren können.
Und wenn ein Wert im Stream herumkommt, nehmen Sie diesen Wert auf und
können dann auf diesen Wert reagieren.
Um also auf diesen Wert reagieren zu können, müssen Sie diesen Stream abonnieren, oder
Sie müssen das Observable abonnieren.
Das Beobachtbare wird häufig weiterhin Werte ausgeben.
Und wenn Sie diese Werte sehen, kann der Beobachter darauf reagieren.
Nun bedeutet dies auch, dass, wenn Sie nicht mehr interessiert sind,
Sie sich von einem beobachtbaren abmelden können.
Du kannst sagen, ich bin nicht mehr daran interessiert, dich zu beobachten und dann zu verschwinden.
Das beobachtbare Muster ermöglicht es Ihnen, Änderungen regelmäßig zu beobachten,
wenn Sie möchten, und dann aufhören zu beobachten, wenn Sie nicht mehr interessiert sind.
Diese Art von Paradigma ermöglicht es Ihnen, Ihre
Software-Anwendungen auf eine sehr interessante Art und Weise zu entwerfen, auf eine sehr intuitive Art und Weise.
Aber um diesen Ansatz verwenden zu können,
müssen Sie sich um diesen Ansatz kümmern.
Genau wie wir mit dem Callback-Muster gesehen haben oder wir mit der Verwendung von Versprechen gesehen haben.
Observables ist eine weitere Möglichkeit, Anwendungen zu entwerfen.
Also, ein beobachtbares an sich wird sehr faul sein und es wird einfach dort rumhängen.
So können Sie ein Observable erstellen und es dann einfach dort belassen.
Das Beobachtbare wird aktiv oder
es wird heiß, wenn jemand beginnt, den Beobachter zu abonnieren.
An diesem Punkt tritt der Beobachter in Aktion und beginnt mit der Bearbeitung von Werten.
Wenn also mindestens ein Beobachter dem Beobachtbaren anvertraut ist,
dann beginnt das Beobachtbare mit der Ausgabe von Werten.
Wenn niemand anvertraut wird, wird beobachtbare zurück in seine Schale gehen und dort bleiben.
So kannst du dir das so vorstellen.
Also, wenn dieses mentale Bild Ihnen hilft zu verstehen,
wie das Beobachterpatent funktioniert, dann sei es so.
Also, das wird Ihnen helfen, die Art und Weise zu betrachten, wie wir unsere Anwendungen
in den folgenden Übungen entwerfen und dann in den nachfolgenden Lektionen,
in denen wir HTTP-unterstützte Angular genauer untersuchen.
Ein weiterer Aspekt von Observables ist die Tatsache, dass das Abbrechen einer vorherigen Anfrage und das
anschließende Wiederholen von Observables sehr einfach ist.
Das Versprechen, das Sie früher gesehen haben, sobald Sie auf ein Versprechen warten,
können Sie nicht abbrechen, Sie warten.
Das Versprechen wird schließlich lösen oder scheitern und
dann müssen Sie reagieren, egal was, auch wenn Sie nicht mehr interessiert sind.
Aber mit einem beobachtbaren, wenn Sie Ihr Abonnement verkaufen können,
dann ist das, was mit dem beobachtbaren passiert, keine Sorge für Sie überhaupt.
Und so müssen Sie nichts tun, wenn Sie Ihr Abonnement kündigen.
Also, das Abbrechen und Wiederholen, falls die frühere Studie nicht
erfolgreich ist, ist sehr einfach mit Observables.
Wir werden einige dieser Verhaltensweisen in den folgenden Übungen genauer sehen.
Dies bringt uns zu diesem Konzept der reaktiven Programmierung.
Reaktive Programmierung basiert auf Beobachtermuster und
auch einem iterierten Muster.
Trotzdem
ist das Beobachtermuster das dominierende Merkmal einer reaktiven Programmierung.
In der reaktiven Programmierung sind wir also an Datenflüssen interessiert.
Wie Daten durch Ihre Anwendung fließen.
Jeder Datenfluss kann als Stream behandelt werden.
So kann dieser Datenfluss Änderungen in Ihrer Anwendung übertragen.
Und während die Änderungen über die Anwendung propagiert werden,
können Sie in zwischengeschalteten Phasen sogar einen bestimmten Stream nehmen,
ihn ändern und einen anderen Stream erstellen, der von dort ausgeht.
Das ist also, was uns ein beobachtbares Muster ermöglicht, zu zeichnen.
So dass das gesamte Programmierparadigma um Streams oder Datenflüsse aufgebaut ist.
Dies ist also eine andere Möglichkeit, Ihr Problem zu lösen.
Und deshalb betone ich die Tatsache, dass Sie sich den Kopf bewegen müssen, um zu
verstehen, wie das reaktive Muster oder wie reaktive Programmierung in der Praxis durchgeführt wird.
Jetzt hören Sie oft Leute, die über etwas sprechen, das funktionale
reaktive Programmierung bezeichnet wird.
Wenn Sie mit dem funktionalen Programmierparadigma vertraut sind.
Aber plus reaktive Programmierung
ist, was Menschen oft als funktionale reaktive Programmierung bezeichnen.
Also die Inter-Ehe dieser beiden Ansätze.
Nun werden Sie die Verwendung einiger dieser mit Angular sehen,
während Sie diesen speziellen Kurs durchlaufen.
Schließlich, was ist mit RxJs?
Welche Rolle spielt es in diesem gesamten Ökosystem?
RxJS ist eine JavaScript-Implementierung des beobachtbaren Musters und
unterstützt auch die reaktive Programmierung.
Wenn Sie also reaktive Programmierung in JavaScript durchführen würden,
nutzen Sie die RxJS-Bibliothek dafür.
RxJS nur eine solche Implementierung.
Es gibt ein paar andere, aber der Grund, warum wir uns besonders für RxJs
in diesem Kurs interessieren, ist, weil Angular RxJs für
seine Unterstützung für reaktive Programmierung nutzt.
Das RxJS ist also eine Bibliothek.
Es ist eine separate Bibliothek, die da draußen ist.
Sie können RxJs auch für andere Zwecke verwenden, die nicht unbedingt mit Angular zusammenhängen.
Es gab Anwendungen, die mit RxJs per se entwickelt wurden, die
nicht mit Angular zusammenhängen.
Aber in diesem Kurs sind wir daran interessiert, wie RxJs mit
dem Angular zusammenkommt, um reaktive Programmierung in Angular zu unterstützen.
Es gibt also RxJS eine Bibliothek, mit der Sie asynchrone Programmierung durchführen können.
Wir haben über asynchrone Programmierung gesprochen, die früher verspricht.
Wir werden asynchrone Programmierung mit Callbacks im Knotenkurs sehen.
Und Observables ist eine weitere Möglichkeit, die
asynchrone Programmierung zusammen mit dem ereignisgesteuerten Programmierer zu betrachten.
Wenn Sie also mit dem ereignisgesteuerten Programmierparadigma vertraut sind,
passt RxJS gut in diese Umgebung.
Das Ganze ist um beobachtbare Sequenzen aufgebaut.
Und die RxJS-Bibliothek bietet Ihnen einen Core-Typ namens Observable.
Und um diesen Kerntyp haben Sie einige
Satellitentypen, die als Beobachter, Scheduler und Subjekte gebaut werden.
All diese ermöglichen es Ihnen, reaktive Programmierung durchzuführen.
Darüber hinaus unterstützt RxJS auch eine ganze Reihe von Operatoren.
Unterstützt Operatoren, Trennzeichen, sorry.
Das war ein Schlupf meiner Zunge.
RxJS unterstützt Operatoren,
Operatoren, die von den JavaScript-Array-Operatoren
Wenn Sie mit JavaScript-Array-Operatoren wie Karte vertraut sind,
werden die RxJS-Operatoren Ihnen sehr vertraut aussehen.
Sie können ein beobachtbares Bild und
die Werte, die ein beobachtbares Bild wie ein Array behandeln, deshalb
finden viele der Array-Operatoren auch ihren Weg in RxJS und reaktive Programmierung.
So
werden die Benutzer kartieren, filtern, reduzieren und andere Array-Operatoren auch einen Platz in RxJs und reaktiver Programmierung finden.
Und dies ermöglicht es Ihnen, asynchrone Ereignisse als Sammlungen zu behandeln.
Wenn Sie also auf
ein asynchrones Ereignis warten möchten, ähnelt es dem Abonnieren eines beobachtbaren.
Wenn das beobachtbare den Wert ausgibt, sind Sie bereit, den Wert abzufangen und
dann entsprechend zu handeln.
Sie wissen, wann diese Emission stattfinden wird.
Das ist also der asynchrone Teil, der mit der Verwendung von RxJs ins Spiel kommt.
Und wie ich bereits erwähnt habe, ist der Grund, warum wir an RxJs interessiert sind, weil
Angular die RxJS-Bibliothek nutzt, um die
reaktive Programmierung zu unterstützen.
Angular selbst hat eine Reihe von eingebauten Observables,
wie wir in kurzer Zeit sehen werden.
Wenn man in die reaktive Programmierwelt gelangt, hört man oft Leute, die
über Observables sprechen, dann hört man Leute, die über Operatoren sprechen, und
dann hört man auch Leute, die über Marmordiagramme sprechen.
Nun sind Marmordiagramme eine Möglichkeit,
die reaktive Programmierung mit Observables darzustellen.
Wenn Sie also ein beobachtbares haben,
dann, wenn Sie dieses beobachtbare als Funktion der Zeit betrachten.
Wenn diese Achse also eine Funktion der Zeit darstellt,
wird das beobachtbare periodisch Werte wie diese emittieren, nacheinander.
Also, wenn Sie diese Werte entlang einer Sequenz organisieren,
als eine Funktion der Zeit, so würden Sie sehen, dass Werte wie diese emittiert werden.
Es besteht auch die Möglichkeit, dass Sie einen Fehler feststellen können.
In diesem Fall müssen Sie den Fehler angemessen behandeln.
Wenn Sie den Fehler richtig behandeln,
können Sie fortfahren oder Sie können an diesem Punkt anhalten.
In ähnlicher Weise, wenn ein beobachtbares alle seine Iterationen vervollständigt,
dann wird es als Abschluss des beobachtbaren markiert.
Sie müssen also in der Lage sein, das Abschlussereignis in einem beobachtbaren zu behandeln.
Angesichts dieser Zeit kommentiert Verhalten der beobachtbaren, können Sie dann
die Werte, die das beobachtbare Bild nehmen und Operatoren auf diese Observables anwenden.
Jetzt können diese Werte als Array betrachtet werden.
Wenn Ihnen das hilft, besser zu verstehen, können Sie es als ein Array von Werten anzeigen.
Nun können diese Werte dann mit verschiedenen Operatoren betrieben werden.
Das ist also, wo Ihre Karte, Ihr Filter, Ihr Reduct und mehrere Operatoren, die
alle typischen reaktiven Programmbibliotheken wie RxJS unterstützen.
Ermöglicht es Ihnen,
einen Satz von Werten, die Sie von einem beobachtbaren in einen anderen Satz von Werten erhalten.
Dadurch erstellen Sie am Ende ein neues Observable.
Und dieses neue Beobachtbare wird aus
transformierten Werten aus dem ursprünglichen beobachtbaren bestehen.
Das ist der Grund, warum ich diese transformierten Werte hier als Rechtecke zeige.
Nur um Ihnen einen visuellen Eindruck davon zu geben, was es ist, dass wir versuchen, mit
einem Operator zu tun.
Sie nehmen also einen Wert und wandeln ihn dann in einen anderen Wert um.
Und diese Sequenz dieser verschiedenen Werte, die
Sie erhalten, indem Sie die Werte von einem beobachtbaren emittiert transformieren.
Wird selbst eine andere Zeichenfolge von Werten werden, und folglich
wird eine andere beobachtbare.
So können Sie eine beobachtbare von einem anderen beobachtbaren ableiten.
Aber diese zweite beobachtbare hängt von der ersten ab, so dass es abhängt.
Sein Verhalten wird eingegeben, das erste durch die Verwendung dieses Operators.
Wir werden Beispiele dafür sehen, wenn wir einige der Übungen
in dieser Lektion und den nachfolgenden Lektionen durchlaufen.
Was ist mit Angular und RxJs, wie kommen sie zusammen?
Angular unterstützt, wie wir bereits erwähnt haben, eine Reihe von Observables auf eigene Faust.
Und diese Unterstützung von Observables in Angular ermöglicht es Ihnen, einige
reaktive Programmierung innerhalb Ihrer Angular-Anwendung durchzuführen.
So, zum Beispiel, Formen in Angular,
sahen wir reaktive Formen bereits in einem der früheren Lektionen.
An diesem Punkt habe ich nie das Wort explizit erwähnt, das dort beobachtbar ist.
Aber jetzt, da wir beobachtbar sind, gehen wir zurück zur reaktiven Form und
machen dann eine Transformation in die reaktive Form.
Formen selbst werden in Angular zu Observablen.
Und alle Änderungen in den Werten eines der Formularelemente
können ausgegeben und beobachtet werden, indem das
Beobachtbare abonniert wird, das das Angular-Framework für uns bereitstellt.
In ähnlicher Weise wird HTTP, auf das wir im nächsten Modul dieses Kurses stoßen
werden, auch auf Observables basieren.
Wenn Ihr Dienst also Daten von einem Server abruft,
unterstützt die HTTP-Bibliothek oder das HTTP-Modul in Angular Observables.
Wenn Sie also eine der Methoden ausführen, abrufen, setzen, posten oder
löschen, mit HTTP, werden sie Ihnen ein Observable liefern,
das Sie dann innerhalb Ihres Dienstes abonnieren können.
Und dann transformieren Sie es anschließend, und geben Sie es dann Ihren Komponenten, und
die Komponenten können die Observables abonnieren.
Der Dienst wird bereitgestellt, indem die HTTP-Streams transformiert werden.
Und so wird die reaktive Programmierung und
der Datenfluss durch Ihre Angular-Anwendung sehr unkompliziert.
In ähnlicher Weise gibt es eine AsyncPipe, auf die Sie später in diesem Kurs stoßen werden.
Und auch Änderungserkennung, die um Observables in Angular gebaut wurde.
Im Rest dieses Kurses werden Sie einige Beispiele dafür sehen.
Jetzt zurück zu der Frage, die wir in der vorherigen Folie gesehen haben.
Wie nehmen Sie ein beobachtbares und transformieren es in ein anderes beobachtbares?
Hier ist ein Beispiel, dem Sie in der Übung begegnen, die dieser Vorlesung folgt.
Hier haben wir also den Routenparameter
innerhalb unserer Menükomponente, die den Routenparameter verwendet, um
den Wert des ausgewählten Schüssels an die Komponente „Detail“ zu liefern.
So wird der Route-Parameter zu einem beobachtbaren.
Das Router-Modul von Angular verfügt über einen Aktivitätsdienst ActivatedRoute, der
eine Reihe von Observables unterstützt und einer von ihnen ist die beobachtbaren Parameter.
Die beobachtbaren Parameter sind an die Routenparameter gebunden.
Und so werden alle Änderungen an den Parametern,
in der URL, die Sie begegnen, als beobachtbar ausgegeben.
Wenn Sie also das Observable erhalten, so wie Sie sehen können, können Sie
Zugriff auf dieses Observable erhalten, indem Sie sagen, dass diese Route in Ihrem Code paramiert.
Also sind die Parameter selbst ein Beobachtbares hier.
Nun, auf diese Parameter beobachtbar,
können Sie einen Operator wie einen Operator hier anwenden, der switchmap genannt wird.
Wir werden die Verwendung dieses in der Übung sehen.
Der switchmap Operator nimmt die Parameter beobachtbar.
Und dann verwandelt die beobachtbaren Parameter in eine andere beobachtbare, die ein Gericht ist.
Es nimmt den params-Wert und extrahiert dann den ID-Wert aus den params,
wodurch Sie auf den route Parameter, die id oder
den Parameter zugreifen können, den Sie angegeben haben, und verwendet diesen dann, um das Gericht zu holen.
Jedes Mal, wenn sich der Parameter ändert, wird es zum Abrufen eines neuen Gerichts führen.
Und so jedes Mal, wenn sich der Parameter ändert,
was gleichbedeutend ist, einen neuen Wert durch ihre Parameter beobachtbar zu emittieren.
Das wird in das Abrufen des neuen Gerichts umgewandelt
, für das das die entsprechende ID ist.
So wird das Gericht dann zu einem anderen beobachtbaren.
Jetzt, wenn dieses Gericht beobachtbar wird, können Sie dieses
Gericht hier beobachtbar abonnieren und den Wert des Gerichts erhalten.
Und wenn Sie den Schüsselwert erhalten, können Sie den Schüsselwert nehmen, und dann
erstellen Sie Ihre Gerichtenvariable innerhalb Ihrer Gericht-Detailkomponente auf diesen Teller Wert.
Dadurch wird jede Änderung des Routenparameters durch diesen
Switchmap-Operator in ein Observable übertragen,
das, wenn sie durch das abonnierte beobachtet
wird, es Ihnen ermöglicht, das zu transformieren und es einem anderen Gericht zuzuweisen.
Und wenn dies geschieht, kann Ihre Ansicht mit
dem neuen Gericht aktualisiert werden, das vom Service erhalten wurde.
Jetzt sehen Sie, wie die Daten durch den Routenparameter,
durch den Switchmap-Operator
fließen und zu einer Änderung der Ansicht Ihrer Dish Detail-Komponente führen.
Das ist der Grund, warum beobachtbare basierte Programmierung oder
reaktive Programmierung in Angular sehr nützlich für die
Implementierung bestimmter Funktionen in Ihrer Angular-Anwendung wird.
Dies ist ein solches Beispiel.
Wir werden die Verwendung dieses speziellen Beispiels in
der Übung sehen, die diesem Vortrag folgt.
Ich dachte, ich mache es dir leicht,
dich an all das zu erinnern, indem du nur diese Ode an Observables singst.
[ MUSIK]
Du sollst dies in der Melodie singen von „
Du kannst mich Al“ von Paul Simon vom Simon und Garfunkel Ruhm.
Wenn du dich umdrehst und sagst, wer ist Paul Simon?
Entschuldigung, andere Generation.
( MUSIK)