1
00:00:00,000 --> 00:00:04,586
[MUSIC]

2
00:00:04,586 --> 00:00:08,713
Lassen Sie mich Ihnen jetzt einen schnellen Überblick über Angular und

3
00:00:08,713 --> 00:00:12,340
seine Beziehung zu reaktivem Programm

4
00:00:12,340 --> 00:00:16,780
geben, wie Angular reaktive Programmierung nutzt.

5
00:00:16,780 --> 00:00:21,988
Insbesondere die RxJS-Bibliothek und wie sie von

6
00:00:21,988 --> 00:00:28,174
Angular genutzt wird, um eine reaktive Möglichkeit zum Schreiben von Angular-Anwendungen bereitzustellen.

7
00:00:28,174 --> 00:00:33,199
Was wir nun in dieser Vorlesung präsentieren, ist ein sehr kurzer Überblick über

8
00:00:33,199 --> 00:00:38,426
das allgemeine Konzept der reaktiven Programmierung, Observables,

9
00:00:38,426 --> 00:00:43,930
das beobachtete Muster und wie es in Angular angewendet wird.

10
00:00:43,930 --> 00:00:47,280
Reaktive Programmierung selbst ist ein sehr umfangreiches

11
00:00:48,460 --> 00:00:52,100
Thema, das in zehn Minuten nicht behandelt werden kann.

12
00:00:53,240 --> 00:00:54,410
Reaktive Programmierung,

13
00:00:54,410 --> 00:00:59,800
wenn ich es im Detail abdecken muss, wird ein ganzer Kurs in seinem eigenen Recht.

14
00:00:59,800 --> 00:01:01,421
Und leider

15
00:01:01,421 --> 00:01:07,372
haben wir nicht die Zeit, einen ganzen Kurs in diesen Kurs einzubetten.

16
00:01:07,372 --> 00:01:12,718
Angesichts der Tatsache, dass wir hauptsächlich daran interessiert sind, wie Angular

17
00:01:12,718 --> 00:01:18,066
reaktive Programmierung nutzt, um es uns zu ermöglichen, Angular-Anwendungen zu verdoppeln,

18
00:01:18,066 --> 00:01:21,590
so werden wir uns auf diesen Aspekt konzentrieren.

19
00:01:21,590 --> 00:01:22,455
Aber auf dem Weg

20
00:01:22,455 --> 00:01:28,340
werde ich Ihnen eine kurze Einführung in die verschiedenen Konzepte in diesem allgemeinen Bereich geben.

21
00:01:28,340 --> 00:01:30,720
Wenn Sie sich für reaktive Programmierung interessieren,

22
00:01:30,720 --> 00:01:36,100
würde ich Ihnen dringend empfehlen, einige der Links, die ich bereitgestellt habe, und

23
00:01:36,100 --> 00:01:40,240
zusätzliche Ressourcen für diese spezielle Lektion zu verfolgen.

24
00:01:40,240 --> 00:01:44,090
Sie haben Zugang zu viel Material da draußen, aber

25
00:01:44,090 --> 00:01:48,220
wir geben Ihnen eine starke Erdung in der reaktiven Programmierung.

26
00:01:48,220 --> 00:01:51,713
Aber in diesem Kurs

27
00:01:51,713 --> 00:01:57,448
werden wir von diesem Punkt an betrachten, wie Angular das reaktive Programmierparadigma für die

28
00:01:57,448 --> 00:02:00,150
Gestaltung von Angular-Anwendungen nutzt.

29
00:02:00,150 --> 00:02:04,818
Wir werden nicht nur auf diese Lektion beschränken, sondern

30
00:02:04,818 --> 00:02:10,266
alle nachfolgenden Lektionen sehen auch Verwendung des beobachtbaren und

31
00:02:10,266 --> 00:02:16,220
des Beobachtungsmusters und wie wir reaktive Anwendungen in eckigen schreiben.

32
00:02:18,080 --> 00:02:22,800
Die ganze Diskussion über reaktive Programmierung dreht sich um

33
00:02:22,800 --> 00:02:27,770
dieses spezielle Software-Engineering-Muster, das als beobachtbares Muster bezeichnet wird.

34
00:02:27,770 --> 00:02:31,970
Sie erinnern sich an die vierköpfige Bande, die ich Ihnen in einem der früheren

35
00:02:31,970 --> 00:02:35,690
Vorträge erwähnt habe, wo wir über das Modellansichts-Controller-Framework und

36
00:02:35,690 --> 00:02:38,140
das Modell-View-Modell-Framework diskutiert haben.

37
00:02:38,140 --> 00:02:43,246
Die gleiche Bande von vier Buch enthält einige der Muster, die

38
00:02:43,246 --> 00:02:49,616
ziemlich erfolgreich in der reaktiven Programmiermuster verwendet wurde.

39
00:02:49,616 --> 00:02:53,570
Das Beobachtermuster dreht sich um Observables.

40
00:02:53,570 --> 00:02:58,948
Sie haben also Observables, deren Verhalten von Beobachtern beobachtet werden kann.

41
00:02:58,948 --> 00:03:02,200
Deshalb wird dies das Beobachtermuster genannt.

42
00:03:02,200 --> 00:03:07,180
Sie erklären bestimmte Objekte als beobachtbar oder Subjekte und

43
00:03:07,180 --> 00:03:12,060
diese Observables werden von Beobachtern beobachtet.

44
00:03:12,060 --> 00:03:15,190
Nun werden sich die Beobachter selbst registrieren, um

45
00:03:16,280 --> 00:03:19,400
die Veränderungen im Beobachtbaren zu beobachten, und

46
00:03:19,400 --> 00:03:24,010
die Beobachtbaren werden die Beobachter benachrichtigen, wenn Änderungen auftreten.

47
00:03:24,010 --> 00:03:29,781
In diesem Beobachtermuster wird die Art und Weise, wie diese Beobachter

48
00:03:29,781 --> 00:03:35,165
das Beobachtbare abonnieren oder sich beim Beobachtbaren registrieren.

49
00:03:35,165 --> 00:03:40,013
So weiß das Beobachtbare, welche Beobachter an

50
00:03:40,013 --> 00:03:42,430
Änderungen in seinem Zustand interessiert sind.

51
00:03:42,430 --> 00:03:46,250
So

52
00:03:46,250 --> 00:03:51,830
wird es, wenn eine beobachtbare Beobachtung sagt, in seinem Zustand ändert, sofort alle Beobachter

53
00:03:51,830 --> 00:03:56,660
über die Änderung des Zustands informieren und die Beobachter können anschließend

54
00:03:56,660 --> 00:04:02,170
auf der Grundlage dieser Mitteilung über die Änderung des Beobachtbaren Maßnahmen ergreifen.

55
00:04:02,170 --> 00:04:06,185
Das Beobachtermuster wurde unter vielen verschiedenen

56
00:04:06,185 --> 00:04:07,212
Umständen sehr effektiv eingesetzt.

57
00:04:07,212 --> 00:04:12,600
Und tatsächlich basiert das reaktive Programmierparadigma darum.

58
00:04:12,600 --> 00:04:15,990
Also, die Frage, die Ihnen sofort in den Sinn kommt, ist,

59
00:04:15,990 --> 00:04:18,280
warum reden wir über die Observables?

60
00:04:18,280 --> 00:04:21,730
Was ist das besondere Interesse an Observables?

61
00:04:21,730 --> 00:04:26,161
Observer-Muster ist eine Möglichkeit, Software-Anwendungen zu schreiben.

62
00:04:26,161 --> 00:04:29,760
Also, das basiert auf Streams.

63
00:04:29,760 --> 00:04:33,290
Sie haben also Daten, die Ihre Anwendung fließen.

64
00:04:33,290 --> 00:04:37,826
Diese Daten können als Wertestrom angezeigt werden, der durch Ihre

65
00:04:37,826 --> 00:04:38,879
Anwendung fließt.

66
00:04:38,879 --> 00:04:44,158
Der Stream ist also der primäre Kanal, um den Observables und

67
00:04:44,158 --> 00:04:47,380
beobachtbares Muster ausgelegt ist.

68
00:04:47,380 --> 00:04:51,007
Also, welche Streams Sie diese Streams abonnieren können.

69
00:04:51,007 --> 00:04:55,762
Und wenn ein Wert im Stream herumkommt, nehmen Sie diesen Wert auf und

70
00:04:55,762 --> 00:04:58,400
können dann auf diesen Wert reagieren.

71
00:04:58,400 --> 00:05:02,430
Um also auf diesen Wert reagieren zu können, müssen Sie diesen Stream abonnieren, oder

72
00:05:02,430 --> 00:05:04,710
Sie müssen das Observable abonnieren.

73
00:05:04,710 --> 00:05:08,860
Das Beobachtbare wird häufig weiterhin Werte ausgeben.

74
00:05:08,860 --> 00:05:13,059
Und wenn Sie diese Werte sehen, kann der Beobachter darauf reagieren.

75
00:05:13,059 --> 00:05:16,413
Nun bedeutet dies auch, dass, wenn Sie nicht mehr interessiert sind,

76
00:05:16,413 --> 00:05:19,660
Sie sich von einem beobachtbaren abmelden können.

77
00:05:19,660 --> 00:05:23,653
Du kannst sagen, ich bin nicht mehr daran interessiert, dich zu beobachten und dann zu verschwinden.

78
00:05:23,653 --> 00:05:28,794
Das beobachtbare Muster ermöglicht es Ihnen, Änderungen regelmäßig zu beobachten,

79
00:05:28,794 --> 00:05:34,170
wenn Sie möchten, und dann aufhören zu beobachten, wenn Sie nicht mehr interessiert sind.

80
00:05:34,170 --> 00:05:38,855
Diese Art von Paradigma ermöglicht es Ihnen, Ihre

81
00:05:38,855 --> 00:05:43,135
Software-Anwendungen auf eine sehr interessante Art und Weise zu entwerfen, auf eine sehr intuitive Art und Weise.

82
00:05:43,135 --> 00:05:45,435
Aber um diesen Ansatz verwenden zu können,

83
00:05:45,435 --> 00:05:48,513
müssen Sie sich um diesen Ansatz kümmern.

84
00:05:48,513 --> 00:05:55,455
Genau wie wir mit dem Callback-Muster gesehen haben oder wir mit der Verwendung von Versprechen gesehen haben.

85
00:05:55,455 --> 00:06:01,740
Observables ist eine weitere Möglichkeit, Anwendungen zu entwerfen.

86
00:06:01,740 --> 00:06:06,605
Also, ein beobachtbares an sich wird sehr faul sein und es wird einfach dort rumhängen.

87
00:06:06,605 --> 00:06:10,360
So können Sie ein Observable erstellen und es dann einfach dort belassen.

88
00:06:10,360 --> 00:06:12,496
Das Beobachtbare wird aktiv oder

89
00:06:12,496 --> 00:06:16,777
es wird heiß, wenn jemand beginnt, den Beobachter zu abonnieren.

90
00:06:16,777 --> 00:06:21,380
An diesem Punkt tritt der Beobachter in Aktion und beginnt mit der Bearbeitung von Werten.

91
00:06:21,380 --> 00:06:25,515
Wenn also mindestens ein Beobachter dem Beobachtbaren anvertraut ist,

92
00:06:25,515 --> 00:06:29,000
dann beginnt das Beobachtbare mit der Ausgabe von Werten.

93
00:06:29,000 --> 00:06:36,010
Wenn niemand anvertraut wird, wird beobachtbare zurück in seine Schale gehen und dort bleiben.

94
00:06:36,010 --> 00:06:38,058
So kannst du dir das so vorstellen.

95
00:06:38,058 --> 00:06:42,231
Also, wenn dieses mentale Bild Ihnen hilft zu verstehen,

96
00:06:42,231 --> 00:06:46,760
wie das Beobachterpatent funktioniert, dann sei es so.

97
00:06:46,760 --> 00:06:51,939
Also, das wird Ihnen helfen, die Art und Weise zu betrachten, wie wir unsere Anwendungen

98
00:06:51,939 --> 00:06:56,657
in den folgenden Übungen entwerfen und dann in den nachfolgenden Lektionen,

99
00:06:56,657 --> 00:07:01,116
in denen wir HTTP-unterstützte Angular genauer untersuchen.

100
00:07:04,490 --> 00:07:11,222
Ein weiterer Aspekt von Observables ist die Tatsache, dass das Abbrechen einer vorherigen Anfrage und das

101
00:07:11,222 --> 00:07:16,172
anschließende Wiederholen von Observables sehr einfach ist.

102
00:07:16,172 --> 00:07:20,660
Das Versprechen, das Sie früher gesehen haben, sobald Sie auf ein Versprechen warten,

103
00:07:20,660 --> 00:07:23,690
können Sie nicht abbrechen, Sie warten.

104
00:07:23,690 --> 00:07:26,878
Das Versprechen wird schließlich lösen oder scheitern und

105
00:07:26,878 --> 00:07:31,907
dann müssen Sie reagieren, egal was, auch wenn Sie nicht mehr interessiert sind.

106
00:07:31,907 --> 00:07:36,075
Aber mit einem beobachtbaren, wenn Sie Ihr Abonnement verkaufen können,

107
00:07:36,075 --> 00:07:41,540
dann ist das, was mit dem beobachtbaren passiert, keine Sorge für Sie überhaupt.

108
00:07:41,540 --> 00:07:45,019
Und so müssen Sie nichts tun, wenn Sie Ihr Abonnement kündigen.

109
00:07:45,019 --> 00:07:50,732
Also, das Abbrechen und Wiederholen, falls die frühere Studie nicht

110
00:07:50,732 --> 00:07:55,599
erfolgreich ist, ist sehr einfach mit Observables.

111
00:07:55,599 --> 00:08:01,710
Wir werden einige dieser Verhaltensweisen in den folgenden Übungen genauer sehen.

112
00:08:03,050 --> 00:08:06,771
Dies bringt uns zu diesem Konzept der reaktiven Programmierung.

113
00:08:06,771 --> 00:08:11,071
Reaktive Programmierung basiert auf Beobachtermuster und

114
00:08:11,071 --> 00:08:13,550
auch einem iterierten Muster.

115
00:08:13,550 --> 00:08:14,243
Trotzdem

116
00:08:14,243 --> 00:08:18,610
ist das Beobachtermuster das dominierende Merkmal einer reaktiven Programmierung.

117
00:08:18,610 --> 00:08:22,670
In der reaktiven Programmierung sind wir also an Datenflüssen interessiert.

118
00:08:22,670 --> 00:08:25,780
Wie Daten durch Ihre Anwendung fließen.

119
00:08:25,780 --> 00:08:29,450
Jeder Datenfluss kann als Stream behandelt werden.

120
00:08:29,450 --> 00:08:34,510
So kann dieser Datenfluss Änderungen in Ihrer Anwendung übertragen.

121
00:08:34,510 --> 00:08:37,940
Und während die Änderungen über die Anwendung propagiert werden,

122
00:08:39,140 --> 00:08:43,440
können Sie in zwischengeschalteten Phasen sogar einen bestimmten Stream nehmen,

123
00:08:43,440 --> 00:08:46,860
ihn ändern und einen anderen Stream erstellen, der von dort ausgeht.

124
00:08:46,860 --> 00:08:51,980
Das ist also, was uns ein beobachtbares Muster ermöglicht, zu zeichnen.

125
00:08:51,980 --> 00:08:58,000
So dass das gesamte Programmierparadigma um Streams oder Datenflüsse aufgebaut ist.

126
00:08:58,000 --> 00:09:04,540
Dies ist also eine andere Möglichkeit, Ihr Problem zu lösen.

127
00:09:04,540 --> 00:09:10,180
Und deshalb betone ich die Tatsache, dass Sie sich den Kopf bewegen müssen, um zu

128
00:09:10,180 --> 00:09:17,120
verstehen, wie das reaktive Muster oder wie reaktive Programmierung in der Praxis durchgeführt wird.

129
00:09:17,120 --> 00:09:20,810
Jetzt hören Sie oft Leute, die über etwas sprechen, das funktionale

130
00:09:20,810 --> 00:09:22,290
reaktive Programmierung bezeichnet wird.

131
00:09:22,290 --> 00:09:25,640
Wenn Sie mit dem funktionalen Programmierparadigma vertraut sind.

132
00:09:25,640 --> 00:09:28,430
Aber plus reaktive Programmierung

133
00:09:28,430 --> 00:09:32,400
ist, was Menschen oft als funktionale reaktive Programmierung bezeichnen.

134
00:09:32,400 --> 00:09:35,670
Also die Inter-Ehe dieser beiden Ansätze.

135
00:09:35,670 --> 00:09:40,340
Nun werden Sie die Verwendung einiger dieser mit Angular sehen,

136
00:09:40,340 --> 00:09:43,720
während Sie diesen speziellen Kurs durchlaufen.

137
00:09:43,720 --> 00:09:46,010
Schließlich, was ist mit RxJs?

138
00:09:46,010 --> 00:09:49,890
Welche Rolle spielt es in diesem gesamten Ökosystem?

139
00:09:49,890 --> 00:09:55,280
RxJS ist eine JavaScript-Implementierung des beobachtbaren Musters und

140
00:09:55,280 --> 00:09:58,750
unterstützt auch die reaktive Programmierung.

141
00:09:58,750 --> 00:10:03,820
Wenn Sie also reaktive Programmierung in JavaScript durchführen würden,

142
00:10:03,820 --> 00:10:07,820
nutzen Sie die RxJS-Bibliothek dafür.

143
00:10:07,820 --> 00:10:10,790
RxJS nur eine solche Implementierung.

144
00:10:10,790 --> 00:10:15,990
Es gibt ein paar andere, aber der Grund, warum wir uns besonders für RxJs

145
00:10:15,990 --> 00:10:20,860
in diesem Kurs interessieren, ist, weil Angular RxJs für

146
00:10:20,860 --> 00:10:23,880
seine Unterstützung für reaktive Programmierung nutzt.

147
00:10:23,880 --> 00:10:26,190
Das RxJS ist also eine Bibliothek.

148
00:10:26,190 --> 00:10:28,480
Es ist eine separate Bibliothek, die da draußen ist.

149
00:10:28,480 --> 00:10:35,010
Sie können RxJs auch für andere Zwecke verwenden, die nicht unbedingt mit Angular zusammenhängen.

150
00:10:35,010 --> 00:10:39,960
Es gab Anwendungen, die mit RxJs per se entwickelt wurden, die

151
00:10:39,960 --> 00:10:42,400
nicht mit Angular zusammenhängen.

152
00:10:42,400 --> 00:10:46,955
Aber in diesem Kurs sind wir daran interessiert, wie RxJs mit

153
00:10:46,955 --> 00:10:52,480
dem Angular zusammenkommt, um reaktive Programmierung in Angular zu unterstützen.

154
00:10:52,480 --> 00:10:57,790
Es gibt also RxJS eine Bibliothek, mit der Sie asynchrone Programmierung durchführen können.

155
00:10:57,790 --> 00:11:01,800
Wir haben über asynchrone Programmierung gesprochen, die früher verspricht.

156
00:11:01,800 --> 00:11:06,300
Wir werden asynchrone Programmierung mit Callbacks im Knotenkurs sehen.

157
00:11:06,300 --> 00:11:11,380
Und Observables ist eine weitere Möglichkeit, die

158
00:11:11,380 --> 00:11:16,530
asynchrone Programmierung zusammen mit dem ereignisgesteuerten Programmierer zu betrachten.

159
00:11:16,530 --> 00:11:20,320
Wenn Sie also mit dem ereignisgesteuerten Programmierparadigma vertraut sind,

160
00:11:20,320 --> 00:11:24,230
passt RxJS gut in diese Umgebung.

161
00:11:25,970 --> 00:11:30,290
Das Ganze ist um beobachtbare Sequenzen aufgebaut.

162
00:11:30,290 --> 00:11:37,160
Und die RxJS-Bibliothek bietet Ihnen einen Core-Typ namens Observable.

163
00:11:37,160 --> 00:11:39,810
Und um diesen Kerntyp haben Sie einige

164
00:11:39,810 --> 00:11:44,390
Satellitentypen, die als Beobachter, Scheduler und Subjekte gebaut werden.

165
00:11:44,390 --> 00:11:47,520
All diese ermöglichen es Ihnen, reaktive Programmierung durchzuführen.

166
00:11:48,620 --> 00:11:54,445
Darüber hinaus unterstützt RxJS auch eine ganze Reihe von Operatoren.

167
00:11:55,745 --> 00:11:59,345
Unterstützt Operatoren, Trennzeichen, sorry.

168
00:11:59,345 --> 00:12:02,545
Das war ein Schlupf meiner Zunge.

169
00:12:03,872 --> 00:12:06,642
RxJS unterstützt Operatoren,

170
00:12:06,642 --> 00:12:11,292
Operatoren, die von den JavaScript-Array-Operatoren

171
00:12:11,292 --> 00:12:15,892
Wenn Sie mit JavaScript-Array-Operatoren wie Karte vertraut sind,

172
00:12:18,202 --> 00:12:22,232
werden die RxJS-Operatoren Ihnen sehr vertraut aussehen.

173
00:12:22,232 --> 00:12:25,372
Sie können ein beobachtbares Bild und

174
00:12:25,372 --> 00:12:30,340
die Werte, die ein beobachtbares Bild wie ein Array behandeln, deshalb

175
00:12:30,340 --> 00:12:36,170
finden viele der Array-Operatoren auch ihren Weg in RxJS und reaktive Programmierung.

176
00:12:36,170 --> 00:12:40,250
So

177
00:12:40,250 --> 00:12:46,440
werden die Benutzer kartieren, filtern, reduzieren und andere Array-Operatoren auch einen Platz in RxJs und reaktiver Programmierung finden.

178
00:12:46,440 --> 00:12:51,890
Und dies ermöglicht es Ihnen, asynchrone Ereignisse als Sammlungen zu behandeln.

179
00:12:51,890 --> 00:12:55,092
Wenn Sie also auf

180
00:12:55,092 --> 00:12:59,770
ein asynchrones Ereignis warten möchten, ähnelt es dem Abonnieren eines beobachtbaren.

181
00:12:59,770 --> 00:13:03,684
Wenn das beobachtbare den Wert ausgibt, sind Sie bereit, den Wert abzufangen und

182
00:13:03,684 --> 00:13:05,550
dann entsprechend zu handeln.

183
00:13:05,550 --> 00:13:07,960
Sie wissen, wann diese Emission stattfinden wird.

184
00:13:07,960 --> 00:13:13,220
Das ist also der asynchrone Teil, der mit der Verwendung von RxJs ins Spiel kommt.

185
00:13:14,550 --> 00:13:19,480
Und wie ich bereits erwähnt habe, ist der Grund, warum wir an RxJs interessiert sind, weil

186
00:13:19,480 --> 00:13:22,750
Angular die RxJS-Bibliothek nutzt, um die

187
00:13:23,900 --> 00:13:27,840
reaktive Programmierung zu unterstützen.

188
00:13:27,840 --> 00:13:31,080
Angular selbst hat eine Reihe von eingebauten Observables,

189
00:13:31,080 --> 00:13:32,369
wie wir in kurzer Zeit sehen werden.

190
00:13:33,430 --> 00:13:38,430
Wenn man in die reaktive Programmierwelt gelangt, hört man oft Leute, die

191
00:13:38,430 --> 00:13:42,230
über Observables sprechen, dann hört man Leute, die über Operatoren sprechen, und

192
00:13:42,230 --> 00:13:45,830
dann hört man auch Leute, die über Marmordiagramme sprechen.

193
00:13:45,830 --> 00:13:49,290
Nun sind Marmordiagramme eine Möglichkeit,

194
00:13:50,390 --> 00:13:53,730
die reaktive Programmierung mit Observables darzustellen.

195
00:13:53,730 --> 00:13:55,710
Wenn Sie also ein beobachtbares haben,

196
00:13:56,830 --> 00:14:02,070
dann, wenn Sie dieses beobachtbare als Funktion der Zeit betrachten.

197
00:14:02,070 --> 00:14:06,710
Wenn diese Achse also eine Funktion der Zeit darstellt,

198
00:14:06,710 --> 00:14:12,090
wird das beobachtbare periodisch Werte wie diese emittieren, nacheinander.

199
00:14:12,090 --> 00:14:16,896
Also, wenn Sie diese Werte entlang einer Sequenz organisieren,

200
00:14:16,896 --> 00:14:21,540
als eine Funktion der Zeit, so würden Sie sehen, dass Werte wie diese emittiert werden.

201
00:14:22,680 --> 00:14:26,350
Es besteht auch die Möglichkeit, dass Sie einen Fehler feststellen können.

202
00:14:27,750 --> 00:14:30,990
In diesem Fall müssen Sie den Fehler angemessen behandeln.

203
00:14:30,990 --> 00:14:32,510
Wenn Sie den Fehler richtig behandeln,

204
00:14:32,510 --> 00:14:37,830
können Sie fortfahren oder Sie können an diesem Punkt anhalten.

205
00:14:37,830 --> 00:14:41,520
In ähnlicher Weise, wenn ein beobachtbares alle seine Iterationen vervollständigt,

206
00:14:41,520 --> 00:14:44,730
dann wird es als Abschluss des beobachtbaren markiert.

207
00:14:44,730 --> 00:14:49,570
Sie müssen also in der Lage sein, das Abschlussereignis in einem beobachtbaren zu behandeln.

208
00:14:49,570 --> 00:14:54,500
Angesichts dieser Zeit kommentiert Verhalten der beobachtbaren, können Sie dann

209
00:14:54,500 --> 00:15:00,240
die Werte, die das beobachtbare Bild nehmen und Operatoren auf diese Observables anwenden.

210
00:15:00,240 --> 00:15:04,680
Jetzt können diese Werte als Array betrachtet werden.

211
00:15:04,680 --> 00:15:10,120
Wenn Ihnen das hilft, besser zu verstehen, können Sie es als ein Array von Werten anzeigen.

212
00:15:10,120 --> 00:15:15,140
Nun können diese Werte dann mit verschiedenen Operatoren betrieben werden.

213
00:15:15,140 --> 00:15:21,630
Das ist also, wo Ihre Karte, Ihr Filter, Ihr Reduct und mehrere Operatoren, die

214
00:15:21,630 --> 00:15:26,560
alle typischen reaktiven Programmbibliotheken wie RxJS unterstützen.

215
00:15:26,560 --> 00:15:29,010
Ermöglicht es Ihnen,

216
00:15:29,010 --> 00:15:33,590
einen Satz von Werten, die Sie von einem beobachtbaren in einen anderen Satz von Werten erhalten.

217
00:15:33,590 --> 00:15:36,640
Dadurch erstellen Sie am Ende ein neues Observable.

218
00:15:36,640 --> 00:15:39,170
Und dieses neue Beobachtbare wird aus

219
00:15:39,170 --> 00:15:42,830
transformierten Werten aus dem ursprünglichen beobachtbaren bestehen.

220
00:15:42,830 --> 00:15:48,294
Das ist der Grund, warum ich diese transformierten Werte hier als Rechtecke zeige.

221
00:15:48,294 --> 00:15:52,861
Nur um Ihnen einen visuellen Eindruck davon zu geben, was es ist, dass wir versuchen, mit

222
00:15:52,861 --> 00:15:54,170
einem Operator zu tun.

223
00:15:54,170 --> 00:15:58,620
Sie nehmen also einen Wert und wandeln ihn dann in einen anderen Wert um.

224
00:15:58,620 --> 00:16:01,640
Und diese Sequenz dieser verschiedenen Werte, die

225
00:16:01,640 --> 00:16:06,400
Sie erhalten, indem Sie die Werte von einem beobachtbaren emittiert transformieren.

226
00:16:06,400 --> 00:16:11,390
Wird selbst eine andere Zeichenfolge von Werten werden, und folglich

227
00:16:11,390 --> 00:16:12,880
wird eine andere beobachtbare.

228
00:16:12,880 --> 00:16:16,820
So können Sie eine beobachtbare von einem anderen beobachtbaren ableiten.

229
00:16:16,820 --> 00:16:19,335
Aber diese zweite beobachtbare hängt von der ersten ab, so dass es abhängt.

230
00:16:19,335 --> 00:16:26,600
Sein Verhalten wird eingegeben, das erste durch die Verwendung dieses Operators.

231
00:16:26,600 --> 00:16:31,730
Wir werden Beispiele dafür sehen, wenn wir einige der Übungen

232
00:16:31,730 --> 00:16:37,210
in dieser Lektion und den nachfolgenden Lektionen durchlaufen.

233
00:16:37,210 --> 00:16:41,450
Was ist mit Angular und RxJs, wie kommen sie zusammen?

234
00:16:41,450 --> 00:16:48,540
Angular unterstützt, wie wir bereits erwähnt haben, eine Reihe von Observables auf eigene Faust.

235
00:16:48,540 --> 00:16:53,375
Und diese Unterstützung von Observables in Angular ermöglicht es Ihnen, einige

236
00:16:53,375 --> 00:16:59,070
reaktive Programmierung innerhalb Ihrer Angular-Anwendung durchzuführen.

237
00:16:59,070 --> 00:17:02,210
So, zum Beispiel, Formen in Angular,

238
00:17:02,210 --> 00:17:06,340
sahen wir reaktive Formen bereits in einem der früheren Lektionen.

239
00:17:06,340 --> 00:17:11,040
An diesem Punkt habe ich nie das Wort explizit erwähnt, das dort beobachtbar ist.

240
00:17:11,040 --> 00:17:15,725
Aber jetzt, da wir beobachtbar sind, gehen wir zurück zur reaktiven Form und

241
00:17:15,725 --> 00:17:18,440
machen dann eine Transformation in die reaktive Form.

242
00:17:18,440 --> 00:17:21,460
Formen selbst werden in Angular zu Observablen.

243
00:17:21,460 --> 00:17:26,337
Und alle Änderungen in den Werten eines der Formularelemente

244
00:17:26,337 --> 00:17:30,605
können ausgegeben und beobachtet werden, indem das

245
00:17:30,605 --> 00:17:36,280
Beobachtbare abonniert wird, das das Angular-Framework für uns bereitstellt.

246
00:17:36,280 --> 00:17:41,934
In ähnlicher Weise wird HTTP, auf das wir im nächsten Modul dieses Kurses stoßen

247
00:17:41,934 --> 00:17:46,500
werden, auch auf Observables basieren.

248
00:17:46,500 --> 00:17:52,720
Wenn Ihr Dienst also Daten von einem Server abruft,

249
00:17:52,720 --> 00:17:56,750
unterstützt die HTTP-Bibliothek oder das HTTP-Modul in Angular Observables.

250
00:17:56,750 --> 00:17:59,780
Wenn Sie also eine der Methoden ausführen, abrufen, setzen, posten oder

251
00:17:59,780 --> 00:18:04,160
löschen, mit HTTP, werden sie Ihnen ein Observable liefern,

252
00:18:04,160 --> 00:18:07,730
das Sie dann innerhalb Ihres Dienstes abonnieren können.

253
00:18:07,730 --> 00:18:11,495
Und dann transformieren Sie es anschließend, und geben Sie es dann Ihren Komponenten, und

254
00:18:11,495 --> 00:18:13,958
die Komponenten können die Observables abonnieren.

255
00:18:13,958 --> 00:18:18,410
Der Dienst wird bereitgestellt, indem die HTTP-Streams transformiert werden.

256
00:18:18,410 --> 00:18:21,780
Und so wird die reaktive Programmierung und

257
00:18:21,780 --> 00:18:27,800
der Datenfluss durch Ihre Angular-Anwendung sehr unkompliziert.

258
00:18:27,800 --> 00:18:32,840
In ähnlicher Weise gibt es eine AsyncPipe, auf die Sie später in diesem Kurs stoßen werden.

259
00:18:32,840 --> 00:18:38,631
Und auch Änderungserkennung, die um Observables in Angular gebaut wurde.

260
00:18:38,631 --> 00:18:44,310
Im Rest dieses Kurses werden Sie einige Beispiele dafür sehen.

261
00:18:44,310 --> 00:18:49,110
Jetzt zurück zu der Frage, die wir in der vorherigen Folie gesehen haben.

262
00:18:49,110 --> 00:18:53,615
Wie nehmen Sie ein beobachtbares und transformieren es in ein anderes beobachtbares?

263
00:18:53,615 --> 00:19:01,465
Hier ist ein Beispiel, dem Sie in der Übung begegnen, die dieser Vorlesung folgt.

264
00:19:01,465 --> 00:19:07,415
Hier haben wir also den Routenparameter

265
00:19:07,415 --> 00:19:12,410
innerhalb unserer Menükomponente, die den Routenparameter verwendet, um

266
00:19:12,410 --> 00:19:17,710
den Wert des ausgewählten Schüssels an die Komponente „Detail“ zu liefern.

267
00:19:17,710 --> 00:19:20,250
So wird der Route-Parameter zu einem beobachtbaren.

268
00:19:20,250 --> 00:19:24,905
Das Router-Modul von Angular verfügt über einen Aktivitätsdienst ActivatedRoute, der

269
00:19:24,905 --> 00:19:30,435
eine Reihe von Observables unterstützt und einer von ihnen ist die beobachtbaren Parameter.

270
00:19:30,435 --> 00:19:33,996
Die beobachtbaren Parameter sind an die Routenparameter gebunden.

271
00:19:33,996 --> 00:19:37,615
Und so werden alle Änderungen an den Parametern,

272
00:19:37,615 --> 00:19:43,620
in der URL, die Sie begegnen, als beobachtbar ausgegeben.

273
00:19:43,620 --> 00:19:47,521
Wenn Sie also das Observable erhalten, so wie Sie sehen können, können Sie

274
00:19:47,521 --> 00:19:53,010
Zugriff auf dieses Observable erhalten, indem Sie sagen, dass diese Route in Ihrem Code paramiert.

275
00:19:53,010 --> 00:19:55,415
Also sind die Parameter selbst ein Beobachtbares hier.

276
00:19:55,415 --> 00:19:57,666
Nun, auf diese Parameter beobachtbar,

277
00:19:57,666 --> 00:20:02,970
können Sie einen Operator wie einen Operator hier anwenden, der switchmap genannt wird.

278
00:20:02,970 --> 00:20:05,830
Wir werden die Verwendung dieses in der Übung sehen.

279
00:20:05,830 --> 00:20:09,840
Der switchmap Operator nimmt die Parameter beobachtbar.

280
00:20:09,840 --> 00:20:17,190
Und dann verwandelt die beobachtbaren Parameter in eine andere beobachtbare, die ein Gericht ist.

281
00:20:17,190 --> 00:20:21,861
Es nimmt den params-Wert und extrahiert dann den ID-Wert aus den params,

282
00:20:21,861 --> 00:20:25,493
wodurch Sie auf den route Parameter, die id oder

283
00:20:25,493 --> 00:20:30,708
den Parameter zugreifen können, den Sie angegeben haben, und verwendet diesen dann, um das Gericht zu holen.

284
00:20:30,708 --> 00:20:38,265
Jedes Mal, wenn sich der Parameter ändert, wird es zum Abrufen eines neuen Gerichts führen.

285
00:20:38,265 --> 00:20:42,045
Und so jedes Mal, wenn sich der Parameter ändert,

286
00:20:42,045 --> 00:20:47,290
was gleichbedeutend ist, einen neuen Wert durch ihre Parameter beobachtbar zu emittieren.

287
00:20:47,290 --> 00:20:50,850
Das wird in das Abrufen des neuen Gerichts umgewandelt

288
00:20:50,850 --> 00:20:53,190
, für das das die entsprechende ID ist.

289
00:20:53,190 --> 00:20:56,240
So wird das Gericht dann zu einem anderen beobachtbaren.

290
00:20:56,240 --> 00:21:01,100
Jetzt, wenn dieses Gericht beobachtbar wird, können Sie dieses

291
00:21:01,100 --> 00:21:05,850
Gericht hier beobachtbar abonnieren und den Wert des Gerichts erhalten.

292
00:21:05,850 --> 00:21:10,490
Und wenn Sie den Schüsselwert erhalten, können Sie den Schüsselwert nehmen, und dann

293
00:21:10,490 --> 00:21:17,742
erstellen Sie Ihre Gerichtenvariable innerhalb Ihrer Gericht-Detailkomponente auf diesen Teller Wert.

294
00:21:17,742 --> 00:21:22,468
Dadurch wird jede Änderung des Routenparameters durch diesen

295
00:21:22,468 --> 00:21:25,224
Switchmap-Operator in ein Observable übertragen,

296
00:21:25,224 --> 00:21:28,296
das, wenn sie durch das abonnierte beobachtet

297
00:21:28,296 --> 00:21:32,569
wird, es Ihnen ermöglicht, das zu transformieren und es einem anderen Gericht zuzuweisen.

298
00:21:32,569 --> 00:21:37,236
Und wenn dies geschieht, kann Ihre Ansicht mit

299
00:21:37,236 --> 00:21:41,915
dem neuen Gericht aktualisiert werden, das vom Service erhalten wurde.

300
00:21:41,915 --> 00:21:47,106
Jetzt sehen Sie, wie die Daten durch den Routenparameter,

301
00:21:47,106 --> 00:21:50,184
durch den Switchmap-Operator

302
00:21:50,184 --> 00:21:55,985
fließen und zu einer Änderung der Ansicht Ihrer Dish Detail-Komponente führen.

303
00:21:55,985 --> 00:22:01,000
Das ist der Grund, warum beobachtbare basierte Programmierung oder

304
00:22:01,000 --> 00:22:05,060
reaktive Programmierung in Angular sehr nützlich für die

305
00:22:05,060 --> 00:22:09,070
Implementierung bestimmter Funktionen in Ihrer Angular-Anwendung wird.

306
00:22:09,070 --> 00:22:11,034
Dies ist ein solches Beispiel.

307
00:22:11,034 --> 00:22:15,984
Wir werden die Verwendung dieses speziellen Beispiels in

308
00:22:15,984 --> 00:22:20,332
der Übung sehen, die diesem Vortrag folgt.

309
00:22:20,332 --> 00:22:22,658
Ich dachte, ich mache es dir leicht,

310
00:22:22,658 --> 00:22:27,970
dich an all das zu erinnern, indem du nur diese Ode an Observables singst.

311
00:22:27,970 --> 00:22:34,948
[ MUSIK]

312
00:22:34,948 --> 00:22:37,469
Du sollst dies in der Melodie singen von „

313
00:22:37,469 --> 00:22:42,310
Du kannst mich Al“ von Paul Simon vom Simon und Garfunkel Ruhm.

314
00:22:42,310 --> 00:22:46,000
Wenn du dich umdrehst und sagst, wer ist Paul Simon?

315
00:22:46,000 --> 00:22:47,385
Entschuldigung, andere Generation.

316
00:22:47,385 --> 00:22:53,670
( MUSIK)