1
00:00:03,680 --> 00:00:11,610
Nun, da Sie Ihre erste Einführung in Reactive Programming, RxJs

2
00:00:11,610 --> 00:00:14,880
und die Verwendung des Beobachtermusters hatten und

3
00:00:14,880 --> 00:00:21,165
wie Angular das Beobachtermuster nutzt und Reactive Programming unterstützt,

4
00:00:21,165 --> 00:00:24,600
gehen wir zu unserer allerersten Übung, um unsere Füße

5
00:00:24,600 --> 00:00:29,315
nass zu bekommen, indem wir die Observables in Angular verwenden.

6
00:00:29,315 --> 00:00:35,950
In dieser Übung werden wir unsere Dienste aktualisieren, um Observables zu nutzen,

7
00:00:35,950 --> 00:00:43,999
denn wenn wir zum nächsten Modul übergehen, wo wir HTTP-Unterstützung in Angular betrachten,

8
00:00:43,999 --> 00:00:49,915
werden wir sofort verstehen, dass HTTP-Unterstützung in Angular auf Observables basiert.

9
00:00:49,915 --> 00:00:54,485
Es ist also eine gute Idee für uns, sich

10
00:00:54,485 --> 00:00:59,870
mit der Verwendung von Observables in dieser Lektion selbst vertraut zu machen.

11
00:00:59,870 --> 00:01:04,770
Daher werden wir die Dienste aktualisieren, um Observables zu exportieren.

12
00:01:04,770 --> 00:01:08,479
Danach

13
00:01:08,479 --> 00:01:11,270
werden wir innerhalb unserer Komponenten diese Observables abonnieren und

14
00:01:11,270 --> 00:01:15,190
die Daten erhalten, die für die Darstellung der Ansichten erforderlich sind.

15
00:01:15,190 --> 00:01:19,340
Gehen wir weiter zur Übung.

16
00:01:19,340 --> 00:01:21,680
Sie müssen sich fragen,

17
00:01:21,680 --> 00:01:25,390
wie nutzen wir RxJs innerhalb von Angular,

18
00:01:25,390 --> 00:01:28,510
und ist es bereits für uns verfügbar?

19
00:01:28,510 --> 00:01:31,730
Was Sie bemerken werden, ist, dass mit der Angular CLI,

20
00:01:31,730 --> 00:01:34,480
wenn Sie Ihre Angular-Anwendung Gerüst ausbauen,

21
00:01:34,480 --> 00:01:37,040
RxJs automatisch darin enthalten ist.

22
00:01:37,040 --> 00:01:39,560
Wenn Sie also zur Datei package.json gehen,

23
00:01:39,560 --> 00:01:42,795
würden Sie feststellen, dass innerhalb der Abhängigkeiten

24
00:01:42,795 --> 00:01:48,900
die RxJS-Bibliothek bereits in Ihrer Anwendung enthalten ist.

25
00:01:48,900 --> 00:01:53,155
Also, was auch immer Sie von RxJs verwenden müssen, ist bereits für Sie verfügbar.

26
00:01:53,155 --> 00:02:00,215
So können wir fortfahren und die RxJS-Bibliothek sofort innerhalb unserer Angular-Anwendung verwenden.

27
00:02:00,215 --> 00:02:03,735
Wenn Sie Ihre Angular-Anwendung von Grund auf neu erstellen,

28
00:02:03,735 --> 00:02:08,450
müssen Sie explizit eine npm-Installation von RxJs durchführen.

29
00:02:08,450 --> 00:02:11,135
Gehen Sie zur Datei dish.service.js,

30
00:02:11,135 --> 00:02:21,080
lassen Sie mich zuerst die von

31
00:02:21,080 --> 00:02:27,750
aus unseren 'rxjs' Observables importieren.

32
00:02:28,960 --> 00:02:32,045
Wir werden auch importieren - Jetzt,

33
00:02:32,045 --> 00:02:35,235
wenn Sie RxJs in Ihrer Angular-Anwendung verwenden, wird

34
00:02:35,235 --> 00:02:37,330
die gesamte Bibliothek nicht enthalten.

35
00:02:37,330 --> 00:02:41,445
Sie können nur die benötigten Teile aus der RxJS-Bibliothek importieren

36
00:02:41,445 --> 00:02:43,400
und dann in Ihrer Angular-Anwendung verwenden.

37
00:02:43,400 --> 00:02:52,070
Also, wenn Ihre Angular-Anwendung endlich für die Bereitstellung vorbereitet ist,

38
00:02:52,070 --> 00:02:56,030
werden nur die Teile von RxJs, die erforderlich sind, in Ihre Angular-Anwendung aufgenommen.

39
00:02:56,030 --> 00:02:58,055
Der Delay-Operator.

40
00:02:58,055 --> 00:03:07,815
Der Verzögerungsbetreiber ermöglicht es uns, die Aussendung der Ware von unserem beobachtbaren zu verzögern. Wenn wir

41
00:03:07,815 --> 00:03:09,780
in die Methoden gehen,

42
00:03:09,780 --> 00:03:15,295
werden wir jetzt diese Methoden aktualisieren, um Observables zu verwenden,

43
00:03:15,295 --> 00:03:18,230
und wir werden ein Versprechen zurückgeben, indem wir das

44
00:03:18,230 --> 00:03:21,755
beobachtbare in Ihr Versprechen mit dem ToPromise-Operator konvertieren.

45
00:03:21,755 --> 00:03:27,700
Wenn Sie also bereits Komponenten haben, die Versprechen verwenden,

46
00:03:27,700 --> 00:03:30,520
und Sie die Komponenten nicht ändern möchten,

47
00:03:30,520 --> 00:03:33,470
können Sie einfach ein Observable in Ihr Versprechen konvertieren und dann

48
00:03:33,470 --> 00:03:37,890
das Versprechen an Ihre Komponenten senden.

49
00:03:37,890 --> 00:03:42,265
Wie wir erkannt haben, werden Versprechen nur ein Element ausgeben,

50
00:03:42,265 --> 00:03:48,000
während Sie sehen können, dass Observables auf Streams basieren.

51
00:03:48,000 --> 00:03:51,350
Also, das ist die Einschränkung, die Sie erhalten, wenn Sie

52
00:03:51,350 --> 00:03:54,560
nur den zwei Versprechen Operator für Observables verwenden

53
00:03:54,560 --> 00:03:58,520
und es verwenden, weil der ToPromise-Operator

54
00:03:58,520 --> 00:04:03,525
es Ihrem Observable ermöglicht, nur einen Wert zu emittieren.

55
00:04:03,525 --> 00:04:09,350
Aber für den Moment machen wir es als den ersten Schritt, bevor wir

56
00:04:09,350 --> 00:04:14,665
in die vollständige beobachtbare Implementierung unserer Dienste übergehen.

57
00:04:14,665 --> 00:04:17,820
Also, wenn ich zur GetDishs-Methode gehe,

58
00:04:17,820 --> 00:04:22,370
werde ich diese Gerichte zurückgeben.

59
00:04:22,370 --> 00:04:27,950
Also, ich werde diesen Teil entfernen und dann sagen, Rückkehr von.

60
00:04:27,950 --> 00:04:31,625
Wenn Sie nur einen Wert von Ihrem Observable emittieren möchten,

61
00:04:31,625 --> 00:04:33,260
verwenden Sie die of -Methode,

62
00:04:33,260 --> 00:04:38,010
und die den Wert nimmt, den Sie dort emittieren möchten.

63
00:04:38,010 --> 00:04:43,300
Das genügt für unsere aktuelle Bewerbung im Moment.

64
00:04:43,300 --> 00:04:46,160
Also, wir werden das nutzen,

65
00:04:46,160 --> 00:04:52,040
und auch wir wollen die Ausgabe des Wertes um zwei Sekunden verzögern.

66
00:04:52,040 --> 00:04:55,565
Also werde ich diesen Teil des Codes ändern, um

67
00:04:55,565 --> 00:05:01,895
den Delay-Operator für meine beobachtbare, mit Pipe zu verwenden.

68
00:05:01,895 --> 00:05:09,360
Ich muss das in Promise umwandeln und das Versprechen ausgeben.

69
00:05:09,360 --> 00:05:14,775
Jetzt wird meine GetDishes Methode aktualisiert, um ein beobachtbares zu verwenden,

70
00:05:14,775 --> 00:05:19,665
und dann in ein Versprechen umzuwandeln und dann das Versprechen an meine Komponente zu senden.

71
00:05:19,665 --> 00:05:22,710
Daher muss ich keine Updates der Komponente durchführen.

72
00:05:22,710 --> 00:05:31,200
Verwenden wir den gleichen Ansatz, um die verbleibenden beiden Methoden meines Dienstes hier zu aktualisieren.

73
00:05:31,200 --> 00:05:34,455
Also werde ich nur diesen Teil kopieren

74
00:05:34,455 --> 00:05:42,225
und dann diesen Teil aktualisieren, dann

75
00:05:42,225 --> 00:05:46,140
den Verzögerungsteil davon nehmen

76
00:05:46,140 --> 00:05:54,080
und dann diesen Teil aktualisieren, um die Verzögerung zu verwenden

77
00:05:54,080 --> 00:06:06,300
und diese toPromise-Methode zu konvertieren.

78
00:06:06,300 --> 00:06:10,980
Damit wird meine GetDish-Methode ebenfalls aktualisiert.

79
00:06:10,980 --> 00:06:17,370
Lassen Sie mich dasselbe mit der GetFeaturedDish-Methode tun.

80
00:06:17,370 --> 00:06:21,000
Wieder, wenn Sie wollen,

81
00:06:21,000 --> 00:06:23,040
können Sie das Ganze austippen.

82
00:06:23,040 --> 00:06:32,270
Ich bin nur faul, nur die Teile auszuschneiden und einzufügen und zu ändern, die

83
00:06:32,270 --> 00:06:42,395
ich ändern möchte, und diese ToPromise-Methode zu konvertieren.

84
00:06:42,395 --> 00:06:52,800
Das war's. Mein Dienst wird jetzt aktualisiert, um Versprechungen von einem beobachtbaren hier zurückzugeben.

85
00:06:52,800 --> 00:06:54,405
Mit diesem Update

86
00:06:54,405 --> 00:06:58,620
wird mein Dish Service aktualisiert, um Observables zu verwenden,

87
00:06:58,620 --> 00:07:04,215
anstatt die Werte direkt zu verwenden.

88
00:07:04,215 --> 00:07:10,460
Gehen Sie in ähnlicher Weise voran und aktualisieren Sie den Leader-Service und den Promotion-Dienst.

89
00:07:10,460 --> 00:07:13,415
Sie würden jetzt bemerken, dass ich

90
00:07:13,415 --> 00:07:17,985
den Führungsdienst bereits aktualisiert habe, um Observables zu nutzen.

91
00:07:17,985 --> 00:07:24,380
In ähnlicher Weise habe ich den Werbedienst aktualisiert, um Observables zu nutzen.

92
00:07:24,380 --> 00:07:28,200
Speichern Sie die Änderungen und lassen Sie uns gehen und werfen Sie einen Blick auf unsere Anwendung.

93
00:07:28,200 --> 00:07:29,890
Wenn Sie zum Browser gehen,

94
00:07:29,890 --> 00:07:34,745
würden Sie feststellen, dass Ihre Anwendung genau die gleiche Weise wie zuvor ausgeführt wird

95
00:07:34,745 --> 00:07:41,010
und die Daten von den Diensten wie zuvor abruft.

96
00:07:41,010 --> 00:07:45,160
Also nicht viel von einer Änderung innerhalb Ihrer Anwendung als solche.

97
00:07:45,160 --> 00:07:46,850
Es führt genau das Gleiche aus.

98
00:07:46,850 --> 00:07:51,035
Beachten Sie also, dass

99
00:07:51,035 --> 00:07:55,370
es, indem Sie Ihre Versprechen durch Observables ersetzen, nicht viel verändert hat, wie Sie es erwarten.

100
00:07:55,370 --> 00:07:58,460
Jetzt gehen wir noch einen Schritt weiter.

101
00:07:58,460 --> 00:08:04,540
Wir werden nun unsere Dienste Observables zurückgeben lassen,

102
00:08:04,540 --> 00:08:08,240
und wir werden die Komponenten aktualisieren, um Observables zu nutzen.

103
00:08:08,240 --> 00:08:09,835
Der Grund, wie ich bereits erwähnt habe,

104
00:08:09,835 --> 00:08:13,790
ist, dass, wenn wir unsere Dienste aktualisieren, um

105
00:08:13,790 --> 00:08:18,420
den HTTP-Dienst zu verwenden, um zu einem Server zu gehen, um die Daten zu holen,

106
00:08:18,420 --> 00:08:25,345
dann würden wir feststellen, dass die HTTP-Methoden in Angular Observables zurückgeben.

107
00:08:25,345 --> 00:08:30,260
Die Dienste können die Observables einfach an unsere Komponenten weitergeben und

108
00:08:30,260 --> 00:08:33,080
die Komponenten diese Observables abonnieren lassen und

109
00:08:33,080 --> 00:08:36,215
die Daten nutzen, die sie dabei erhalten.

110
00:08:36,215 --> 00:08:41,020
Das wäre also ein Zwischenschritt für uns, um zu dieser Phase zu gelangen.

111
00:08:41,020 --> 00:08:45,275
Wir werden HTTP im nächsten Modul betrachten. Wenn Sie

112
00:08:45,275 --> 00:08:48,234
zu unseren Diensten zurückkehren,

113
00:08:48,234 --> 00:08:52,460
können Sie jetzt das ToPromise zuerst entfernen, indem Sie

114
00:08:52,460 --> 00:08:55,400
den ToPromise-Operator entfernen, da wir es nicht

115
00:08:55,400 --> 00:08:59,660
mehr benötigen und dann werden wir einfach das ToPromise daraus entfernen,

116
00:08:59,660 --> 00:09:04,110
beobachtbar importieren und dann stattdessen

117
00:09:04,110 --> 00:09:09,044
unsere Methode

118
00:09:09,044 --> 00:09:16,140
Observables anstelle von Versprechungen zurückgeben lassen .

119
00:09:16,140 --> 00:09:17,615
Wie ich bereits erwähnt habe,

120
00:09:17,615 --> 00:09:21,420
was auch immer ein Versprechen tun kann, kann ein Beobachtbares auch tun.

121
00:09:22,810 --> 00:09:28,400
Also, lassen Sie uns alle diese aktualisieren, um Observables zurückzugeben.

122
00:09:28,400 --> 00:09:32,695
Tun Sie dasselbe mit den verbleibenden zwei Diensten.

123
00:09:32,695 --> 00:09:36,680
Sie würden jetzt bemerken, dass ich auch den Leader-Service aktualisiert habe,

124
00:09:36,680 --> 00:09:40,725
um einfach Observables anstelle von Versprechen zurückzugeben,

125
00:09:40,725 --> 00:09:43,984
und auch der Promotion-Dienst wurde entsprechend

126
00:09:43,984 --> 00:09:47,735
aktualisiert, um beobachtbar anstelle von Versprechen zurückzugeben.

127
00:09:47,735 --> 00:09:52,460
Nun, was das bedeutet, ist, dass wir gehen und unsere Komponenten aktualisieren müssen,

128
00:09:52,460 --> 00:09:57,590
um Observables zu verwenden, anstatt Versprechen, wie wir es früher getan haben.

129
00:09:57,590 --> 00:10:01,885
Jetzt zum Versprechen sahen wir, dass wir die.then verwenden müssen,

130
00:10:01,885 --> 00:10:07,430
um das Ergebnis zu erhalten, wenn die Auflösung des Versprechens ausgeführt wird.

131
00:10:07,430 --> 00:10:12,495
Mit einem beobachtbaren wird die.then in.subscribe konvertiert.

132
00:10:12,495 --> 00:10:16,715
Die Art und Weise, wie Sie die Daten verbrauchen, bleibt genau gleich.

133
00:10:16,715 --> 00:10:19,890
Mit dieser geringfügigen Änderung in Ihren

134
00:10:19,890 --> 00:10:25,480
Komponenten können die Komponenten nun Observables anstatt Versprechen verarbeiten.

135
00:10:25,480 --> 00:10:31,085
Gehen Sie also zu allen vier Komponenten, die die Dienste nutzen

136
00:10:31,085 --> 00:10:37,185
, zuerst gehen wir zur Datei menu.component.ts.

137
00:10:37,185 --> 00:10:39,280
In der Datei menu.component.ts

138
00:10:39,280 --> 00:10:42,080
würden Sie sofort die rote zerquetschige Zeile dort bemerken,

139
00:10:42,080 --> 00:10:48,100
unter der dann offensichtlich, weil wir kein Versprechen zurückgeben.

140
00:10:48,100 --> 00:10:50,090
Stattdessen geben wir ein beobachtbares zurück.

141
00:10:50,090 --> 00:10:55,245
Also konvertieren Sie das dann, um zu abonnieren und das war's.

142
00:10:55,245 --> 00:10:59,225
Ihre Menükomponente ist nun in der Lage,

143
00:10:59,225 --> 00:11:04,910
die beobachtbaren Werte zu verbrauchen, die vom beobachtbaren ausgegeben werden.

144
00:11:04,910 --> 00:11:10,890
Nehmen Sie dieselbe Änderung an der Datei about.component.ts,

145
00:11:10,890 --> 00:11:16,760
der Datei dishdetail.component.ts und der Datei home.component.ts vor.

146
00:11:16,760 --> 00:11:22,520
Nachdem Sie die restlichen Komponenten Tapscott-Dateien aktualisiert haben,

147
00:11:22,520 --> 00:11:27,245
schauen wir uns das Verhalten unserer Anwendung im Browser an.

148
00:11:27,245 --> 00:11:32,920
Gehen Sie in den Browser, Sie werden keinen Unterschied im Verhalten unserer Anwendung bemerken.

149
00:11:32,920 --> 00:11:36,170
Diese Version unserer Angular-Anwendung wird aktualisiert, um

150
00:11:36,170 --> 00:11:40,275
Observables anstelle von Versprechen zu verwenden.

151
00:11:40,275 --> 00:11:42,620
Also, die Home-Komponente hier,

152
00:11:42,620 --> 00:11:46,085
über Komponente führt genau die gleiche Weise wie zuvor,

153
00:11:46,085 --> 00:11:49,800
und die Menükomponente tut genau das Gleiche.

154
00:11:49,800 --> 00:11:54,785
Auch die Komponente des Gerichtes verhält sich genau so wie zuvor.

155
00:11:54,785 --> 00:11:57,960
Damit schließen wir diese Übung ab.

156
00:11:57,960 --> 00:12:01,430
In dieser Übung haben wir unsere ersten Schritte zur Verwendung von

157
00:12:01,430 --> 00:12:05,030
Observables innerhalb unserer Angular-Anwendung unternommen, indem wir

158
00:12:05,030 --> 00:12:08,330
die Dienste und entsprechend die Komponenten aktualisieren,

159
00:12:08,330 --> 00:12:12,185
um Observables anstelle von Versprechen zu verwenden.

160
00:12:12,185 --> 00:12:18,640
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht RxJS Teil eins zu machen.