1
00:00:03,450 --> 00:00:08,610
In dieser Übung verwenden wir den Angular HTTP Client, um

2
00:00:08,610 --> 00:00:13,870
mit dem JSON-Server zu kommunizieren, den wir bereits in der vorherigen Übung eingerichtet haben.

3
00:00:13,870 --> 00:00:21,270
Wir können nun über den

4
00:00:21,270 --> 00:00:25,200
HTTP-Client Daten vom Server auf unsere Winkelapplikation herunterladen und dann die Daten nutzen, um

5
00:00:25,200 --> 00:00:29,755
die verschiedenen Ansichten innerhalb unserer Komponenten zu konstruieren.

6
00:00:29,755 --> 00:00:34,050
In dieser Übung werden wir den Dish Service neu konfigurieren, um die

7
00:00:34,050 --> 00:00:38,960
Daten über die Gerichte vom JSON-Server abrufen zu können.

8
00:00:38,960 --> 00:00:40,545
Im Rahmen Ihrer Aufgabe

9
00:00:40,545 --> 00:00:41,920
erledigen Sie die verbleibenden beiden,

10
00:00:41,920 --> 00:00:44,735
den Führungsservice und den Promotionsservice.

11
00:00:44,735 --> 00:00:51,810
Wir werden sehen, wie wir den HTTP-Client nutzen können, der uns ein beobachtbares zurückgibt.

12
00:00:51,810 --> 00:00:55,580
Wir haben unsere Anwendung bereits neu konfiguriert,

13
00:00:55,580 --> 00:01:02,530
insbesondere den Service, um Observables an unsere Komponenten liefern zu können.

14
00:01:02,530 --> 00:01:07,070
Innerhalb unserer Komponenten verpflichten wir uns zu diesen Beobachtbarkeiten.

15
00:01:07,070 --> 00:01:10,745
Der größte Teil des Setups

16
00:01:10,745 --> 00:01:15,310
zum Abrufen von Daten vom Dienst zur Komponente ist also bereits vorhanden.

17
00:01:15,310 --> 00:01:22,195
Wir werden es ein wenig verbessern, um mit Fehlern in der nächsten Übung umzugehen.

18
00:01:22,195 --> 00:01:27,290
Unser erster Schritt bei der Vorbereitung der Angular-Anwendung auf

19
00:01:27,290 --> 00:01:31,040
den HTTP-Client für den Zugriff auf den Server besteht darin,

20
00:01:31,040 --> 00:01:35,005
unsere Anwendung mit dem HttpClientModule zu konfigurieren.

21
00:01:35,005 --> 00:01:38,505
Um dies zu tun, öffnen Sie app.module.ts.

22
00:01:38,505 --> 00:01:42,030
Dann, hier, lassen Sie uns

23
00:01:42,030 --> 00:01:57,460
das HttpClientModule von Angular/Common/HTTP importieren.

24
00:02:00,410 --> 00:02:02,700
Sobald wir das importieren,

25
00:02:02,700 --> 00:02:06,625
werden wir fortfahren und den NgModule Dekorator

26
00:02:06,625 --> 00:02:12,510
in den Importen mit dem HttpClientModule konfigurieren.

27
00:02:14,890 --> 00:02:23,640
Jetzt ist unsere Anwendung bereit, das HttpClientModule für den Zugriff auf den Server zu verwenden. Stellen

28
00:02:23,640 --> 00:02:28,880
Sie nun sicher, dass der JSON-Server betriebsbereit ist und

29
00:02:28,880 --> 00:02:31,190
die Daten bereitstellt, damit unsere Anwendung

30
00:02:31,190 --> 00:02:34,520
mit der JSON-Serveranwendung kommunizieren kann.

31
00:02:34,520 --> 00:02:39,055
Nun, da wir auf Daten von der Serverseite zugreifen,

32
00:02:39,055 --> 00:02:46,220
ist es eine gute Praxis, einen speziellen Wert zu erstellen,

33
00:02:46,220 --> 00:02:50,840
der auf die BaseURL Ihres Servers verweist

34
00:02:50,840 --> 00:02:55,845
, so dass er bei Bedarf innerhalb Ihrer Winkelanwendung konfiguriert werden kann.

35
00:02:55,845 --> 00:02:58,325
Also, wenn ich in den freigegebenen Ordner

36
00:02:58,325 --> 00:03:05,345
gehe, werde ich hier eine neue Datei namens baseurl.ts erstellen.

37
00:03:05,345 --> 00:03:07,055
Dann

38
00:03:07,055 --> 00:03:15,995
werde ich innerhalb dieser Datei eine Konstante einschließen und sie und die Konstante namens baseURL exportieren,

39
00:03:15,995 --> 00:03:24,355
die ich auf HTTP setzen werde: //localhost: 3000.

40
00:03:24,355 --> 00:03:31,455
Wie Sie sich erinnern, ist dies die BaseURL, auf der mein JSON-Server zugegriffen werden kann.

41
00:03:31,455 --> 00:03:37,565
Also, localhost: 3000/, da.

42
00:03:37,565 --> 00:03:40,210
Lassen Sie mich damit die Änderungen an der BaseURL speichern.

43
00:03:40,210 --> 00:03:47,105
Jetzt bietet angular eine Möglichkeit, Werte wie

44
00:03:47,105 --> 00:03:54,990
diese für den Rest Ihrer Anwendung bereitzustellen, indem Sie einen Provider in Ihrem App-Modul konfigurieren. Wenn wir

45
00:03:54,990 --> 00:03:57,510
also zum App-Modul gehen,

46
00:03:57,510 --> 00:04:04,545
damit wir diese bestimmte BaseURL bereitstellen können,

47
00:04:04,545 --> 00:04:10,870
werden wir zuerst den BaseUrl-Wert in unsere Winkelanwendung importieren.

48
00:04:10,870 --> 00:04:27,380
Also, ich würde sagen, importieren Sie baseURL von shared/baseurl.

49
00:04:27,650 --> 00:04:31,790
Dieser Wert kann nun

50
00:04:31,790 --> 00:04:35,625
dem Rest meiner Anwendung zur Verfügung gestellt werden, indem Sie zu den Anbietern gehen.

51
00:04:35,625 --> 00:04:38,270
Dann, zusätzlich zum LeaderService,

52
00:04:38,270 --> 00:04:42,150
wenn ich einen Wert wie diesen konfiguriere,

53
00:04:42,150 --> 00:04:45,965
würde ich sagen, bieten

54
00:04:45,965 --> 00:04:56,070
und dann baseURL, useValue.

55
00:04:56,540 --> 00:05:03,355
Auf diese Weise werde ich diesen

56
00:05:03,355 --> 00:05:11,310
BaseUrl-Wert als Wertanbieter aus dem App-Modul an den Rest meiner Winkelanwendung liefern.

57
00:05:11,310 --> 00:05:12,835
Im nächsten Schritt

58
00:05:12,835 --> 00:05:19,400
werden wir unseren DishService so konfigurieren, dass er auf die Serverseite zugreifen kann,

59
00:05:19,400 --> 00:05:21,830
und dann die Daten von der Serverseite abrufen

60
00:05:21,830 --> 00:05:25,475
und dann die Daten für unsere Komponenten zur Verfügung stellen.

61
00:05:25,475 --> 00:05:30,170
Jetzt gehen wir zum DishService.

62
00:05:30,170 --> 00:05:32,140
Dann, im DishService,

63
00:05:32,140 --> 00:05:37,790
werden diese Gerichte nicht mehr aus lokalen Akten benötigt.

64
00:05:37,790 --> 00:05:40,970
Ich werde diese Daten von der Serverseite herunterladen.

65
00:05:40,970 --> 00:05:46,475
Also, ich werde das entfernen und dann einen Import von

66
00:05:46,475 --> 00:05:55,460
HttpClient von eckig,

67
00:05:55,460 --> 00:06:00,150
jedes gemeinsame HTTP hinzufügen,

68
00:06:01,240 --> 00:06:10,130
importieren Sie die BaseURL von,

69
00:06:10,130 --> 00:06:19,015
erinnern Sie sich, dass dies in shared/baseurl ist.

70
00:06:19,015 --> 00:06:21,715
Jetzt, in meinem DishService,

71
00:06:21,715 --> 00:06:24,960
werde ich gehen und die Daten von der Serverseite holen.

72
00:06:24,960 --> 00:06:27,510
Also, im Konstruktor

73
00:06:27,510 --> 00:06:31,740
werde ich den Konstruktor aktualisieren, indem ich

74
00:06:32,260 --> 00:06:39,615
HttpClient hier in meinen Konstruktor injiziere.

75
00:06:39,615 --> 00:06:45,275
Also, jetzt sollte mein DishService eingerichtet werden, um

76
00:06:45,275 --> 00:06:50,990
die Daten von der Serverseite zu erhalten und die Daten an meine Anwendung zurückzugeben.

77
00:06:50,990 --> 00:06:52,340
Jetzt stellen Sie fest, dass

78
00:06:52,340 --> 00:06:56,915
die GetDishs-Methode bereits so eingerichtet ist, dass das Observable an die Komponente zurückgegeben wird.

79
00:06:56,915 --> 00:06:58,980
Also, dieser Teil ist bereits eingerichtet.

80
00:06:58,980 --> 00:07:06,080
Nun, was dies zurückgeben wird, ist, was es von

81
00:07:06,080 --> 00:07:13,230
der HTTP-Get-Methode erhält

82
00:07:13,230 --> 00:07:17,760
, die wir die Serverseite aufrufen werden.

83
00:07:17,760 --> 00:07:21,015
Also, um die Serverseite aufzurufen,

84
00:07:21,015 --> 00:07:23,775
muss ich

85
00:07:23,775 --> 00:07:25,395
innerhalb der get-Methode das

86
00:07:25,395 --> 00:07:30,750
BaseUrl, das ich

87
00:07:30,750 --> 00:07:36,020
bereits erhalten habe, und dann Geschirr liefern.

88
00:07:36,020 --> 00:07:44,000
Auf diese Weise wird die HTTP-Get-Methode die Daten von localhost abrufen: 3000/Gerichte.

89
00:07:44,610 --> 00:07:49,760
Also, das ist die serverseitige URL

90
00:07:49,760 --> 00:07:54,995
, von der Sie die Gerichte Daten hier abrufen können. Das ist es.

91
00:07:54,995 --> 00:08:01,430
Mein Server wird die Daten in Form eines

92
00:08:01,430 --> 00:08:07,660
beobachtbaren für diesen Dienst bereitstellen, wenn die HTTP-Get-Methode aufgerufen wird,

93
00:08:07,660 --> 00:08:14,495
und das wird über die GetDishs-Methode an die Komponente zurückgegeben.

94
00:08:14,495 --> 00:08:19,580
Das war's auch. Jetzt ist mein Dienst so eingerichtet, dass er

95
00:08:19,580 --> 00:08:24,525
die Daten von der Serverseite abruft und dann die Daten an meine Komponente zurückgibt.

96
00:08:24,525 --> 00:08:29,670
Ich werde die restlichen Methoden auch in ähnlicher Weise aktualisieren.

97
00:08:29,670 --> 00:08:36,230
Also, was ich für die nächste Methode für die GetDish-Methode tun

98
00:08:36,230 --> 00:08:38,760
werde, ist, dass ich

99
00:08:39,190 --> 00:08:48,015
diesen Teil kopieren und ihn dann einfach hier einfügen werde,

100
00:08:48,015 --> 00:08:49,890
und dann werden wir das bearbeiten.

101
00:08:49,890 --> 00:08:54,830
Jetzt, wenn Sie für ein bestimmtes Gericht erhalten müssen,

102
00:08:54,830 --> 00:08:58,865
haben Sie die ID des Gerichts, das Ihnen zur Verfügung steht.

103
00:08:58,865 --> 00:09:03,870
Also, wir werden sagen, GetDish ID ist als Parameter verfügbar.

104
00:09:03,870 --> 00:09:05,745
Also, zu den Gerichten,

105
00:09:05,745 --> 00:09:10,130
werde ich die ID als den anderen Parameter hier hinzufügen.

106
00:09:10,130 --> 00:09:13,250
Jetzt, wenn ich die Antwort erhalte und

107
00:09:13,250 --> 00:09:18,905
sie dann über den GetDish-Methodenaufruf an die Komponente zurückgebe.

108
00:09:18,905 --> 00:09:21,470
In ähnlicher Weise wird

109
00:09:21,470 --> 00:09:26,355
es für das vorgestellte Gericht ein wenig interessante Art sein, es zu konfigurieren.

110
00:09:26,355 --> 00:09:28,945
Nun, für das vorgestellte Gericht,

111
00:09:28,945 --> 00:09:32,705
wenn Sie auf die Daten von der Serverseite zugreifen müssen,

112
00:09:32,705 --> 00:09:34,785
was ich tun werde, ist, jetzt,

113
00:09:34,785 --> 00:09:41,140
wenn ich nach einem vorgestellten Gericht frage,

114
00:09:41,140 --> 00:09:45,410
die Art und Weise, wie meine Serverseite eingerichtet ist, dass ich

115
00:09:45,410 --> 00:09:51,580
einen Abfrageparameter innerhalb meiner URL senden kann, damit ich Gerichte sagen kann?

116
00:09:51,580 --> 00:09:56,615
und dann sagen, dargestellt gleich wahr.

117
00:09:56,615 --> 00:10:00,290
Auf diese Weise gibt mein Server

118
00:10:00,290 --> 00:10:06,840
nur die Objekte zurück, für die das Feature-Flag auf true gesetzt ist,

119
00:10:06,840 --> 00:10:09,965
oder die Feature-Eigenschaft auf der Serverseite auf true gesetzt ist.

120
00:10:09,965 --> 00:10:13,770
Nun, so ist die serverseitige Einrichtung.

121
00:10:13,770 --> 00:10:15,670
Jetzt wieder, sobald Sie die Daten erhalten,

122
00:10:15,670 --> 00:10:20,390
ordnen Sie einfach den Wert zu und geben diesen dann als

123
00:10:20,390 --> 00:10:25,490
beobachtbar für meine Komponente durch die Get-Feature-Dish-Methode zurück.

124
00:10:25,490 --> 00:10:30,110
Wenn ich die Serverseite mit dem Abfrageparameter abfrage,

125
00:10:30,110 --> 00:10:34,155
wird ein Array von Objekten zurückgegeben, die übereinstimmen.

126
00:10:34,155 --> 00:10:39,350
In diesem Fall kommt es so vor, dass das Array dort genau ein Element enthält.

127
00:10:39,350 --> 00:10:44,230
Aber wenn ich den Wert zurückgebe, nachdem ich das Ergebnis erhalten

128
00:10:44,230 --> 00:10:51,865
habe, muss ich dort auch eine Null einschließen, da dies ein Array ist,

129
00:10:51,865 --> 00:10:55,460
also muss ich das erste Element aus dem Array zurückgeben.

130
00:10:55,460 --> 00:11:00,050
Bevor ich vergesse, lassen Sie mich

131
00:11:00,050 --> 00:11:10,770
den Kartenoperator von rxjs-Operatoren importieren.

132
00:11:10,770 --> 00:11:14,200
Nun, für die letzte, die GetDishids,

133
00:11:14,200 --> 00:11:17,570
was ich tun werde, ist die Tatsache zu nutzen, dass ich bereits

134
00:11:17,570 --> 00:11:27,340
die GetDishs-Methode zur Verfügung habe.

135
00:11:27,340 --> 00:11:31,705
Also, wenn die GetDishs-Methode zurückkehrt,

136
00:11:31,705 --> 00:11:37,610
werde ich das mit dem Kartenoperator

137
00:11:41,280 --> 00:12:00,475
als dishes.map, dish.dish id abbilden.

138
00:12:00,475 --> 00:12:07,105
Auf diese Weise gebe ich nur den Wert zurück, den ich brauche,

139
00:12:07,105 --> 00:12:10,840
nur die Dish-IDs durch diese Methode hier.

140
00:12:10,840 --> 00:12:12,765
Das war's auch.

141
00:12:12,765 --> 00:12:19,410
Jetzt ist mein Dish Service vollständig aktualisiert, um die Daten von

142
00:12:19,410 --> 00:12:27,840
der Server-Site zu holen und dann die Daten an meine Komponenten in meinem zu liefern.

143
00:12:27,840 --> 00:12:30,230
Winkelapplikation hier.

144
00:12:30,230 --> 00:12:31,775
Im nächsten Schritt

145
00:12:31,775 --> 00:12:34,645
gehe ich in die Menükomponente.

146
00:12:34,645 --> 00:12:37,085
Dann

147
00:12:37,085 --> 00:12:45,400
werde ich innerhalb der Menükomponente die Inject-Schnittstelle verwenden, die über

148
00:12:45,400 --> 00:12:53,900
den Winkelkern verfügbar ist, um diese BaseURL zu injizieren, die ich dort erhalten habe.

149
00:12:53,900 --> 00:12:56,340
Also, wie nutzen wir das?

150
00:12:56,340 --> 00:13:00,665
Innerhalb des Konstruktors meiner Komponente

151
00:13:00,665 --> 00:13:03,530
werde ich hineingehen und sagen:

152
00:13:05,520 --> 00:13:12,910
"@Inject" Also, erinnern Sie sich, dass wir

153
00:13:12,910 --> 00:13:20,675
diese BaseURL als Provider für diesen Wert im App-Modul früher eingerichtet hatten.

154
00:13:20,675 --> 00:13:27,425
Also, dass BaseURL jetzt so in die Komponente injiziert werden kann.

155
00:13:27,425 --> 00:13:29,120
Nun, wenn Sie einen Dienst haben,

156
00:13:29,120 --> 00:13:31,170
injizieren Sie hier Dienste wie diesen,

157
00:13:31,170 --> 00:13:32,875
aber wenn Sie einen Wert haben,

158
00:13:32,875 --> 00:13:38,050
dann injizieren Sie den Wert mit dem Dekorator "@Inject".

159
00:13:38,050 --> 00:13:45,935
Hier geben wir den Anbieterwert an, den wir dort angegeben haben.

160
00:13:45,935 --> 00:13:48,720
Wir sagten, bieten:BaseURL dort,

161
00:13:48,720 --> 00:13:50,580
also ist das der Wert, den wir hier liefern.

162
00:13:50,580 --> 00:13:53,470
Dann deklariere ich dies als private BaseUrl.

163
00:13:53,470 --> 00:13:55,660
Also, jetzt, in meinem Code hier,

164
00:13:55,660 --> 00:14:02,910
ist diese BaseURL verfügbar, um alles zu konfigurieren, was ich in meiner Anwendung brauche.

165
00:14:02,910 --> 00:14:04,985
Während ich noch hier bin,

166
00:14:04,985 --> 00:14:14,450
werde ich dieses ausgewählte Gericht entfernen, das auch nicht in meiner Anwendung verwendet wird.

167
00:14:15,300 --> 00:14:21,190
Dann verwende ich diese Methode auch nicht mit meiner Anwendung,

168
00:14:21,190 --> 00:14:25,085
also lass mich ein wenig bereinigen, während ich noch hier bin.

169
00:14:25,085 --> 00:14:27,925
Die Art und Weise, wie wir die Daten verarbeiten, die wir

170
00:14:27,925 --> 00:14:30,635
von dem Dienst erhalten haben, bleibt exakt gleich.

171
00:14:30,635 --> 00:14:34,565
Weil mein Dienst immer noch zurückkehrt und beobachtbar ist

172
00:14:34,565 --> 00:14:38,055
und ich das Observable innerhalb dieser Komponente abonniere.

173
00:14:38,055 --> 00:14:40,765
Also, dieser Teil ändert sich überhaupt nicht.

174
00:14:40,765 --> 00:14:50,935
Nun, der Grund, warum ich die BaseURL in meine Komponente injiziere, ist, dass

175
00:14:50,935 --> 00:14:53,985
ich in meiner Vorlage hier das Dishbild erhalte.

176
00:14:53,985 --> 00:15:00,625
Nun, aber dieses Dish-Image muss von meinem Server dort

177
00:15:00,625 --> 00:15:03,270
vom JSON-Server abgerufen werden.

178
00:15:03,270 --> 00:15:08,800
Also, ich muss hineingehen und dann diese Quelle aktualisieren, um zu sagen,

179
00:15:08,800 --> 00:15:13,020
BaseUrl plus Gericht Bild.

180
00:15:13,020 --> 00:15:18,180
Also muss ich dort die vollständige URL für dieses Bild angeben.

181
00:15:18,180 --> 00:15:26,995
Also, das sollte, httlp://localhost: 3000/images/, was auch immer sein.

182
00:15:26,995 --> 00:15:29,640
Also, das ist der Grund, warum ich

183
00:15:29,640 --> 00:15:34,605
den BaseUrl-Wert zusätzlich zum Dishbild hier angeben muss.

184
00:15:34,605 --> 00:15:37,470
Also, das werde ich in Anführungszeichen einschließen,

185
00:15:37,470 --> 00:15:43,395
also wird ein Ausdruck wie dieser innerhalb der Interpolation korrekt funktionieren.

186
00:15:43,395 --> 00:15:48,935
Also, schließen Sie dies in Anführungszeichen ein und geben Sie es dann als Quellwert an,

187
00:15:48,935 --> 00:15:54,730
und dann sehen Sie, dass Sie baseURL plus das Dish-Bild,

188
00:15:54,730 --> 00:16:00,725
das dish.image, die image-Eigenschaft enthält nur die partielle URL.

189
00:16:00,725 --> 00:16:05,645
Also, es enthält Bilder Schrägstrich und image.png Dateinamen.

190
00:16:05,645 --> 00:16:14,640
Deshalb muss ich die http://localhost:3000/ an diese

191
00:16:14,640 --> 00:16:23,220
Dish-Bild-Eigenschaft anhängen, damit ich die Gesamt-URL für mein Bild konstruiere.

192
00:16:23,220 --> 00:16:27,385
Damit ist meine Menükomponente jetzt vollständig eingerichtet,

193
00:16:27,385 --> 00:16:32,000
um alle Daten von der Serverseite zu erhalten.

194
00:16:32,000 --> 00:16:37,100
Nun würde ich auch vorschlagen, dass Sie die Komponente „

195
00:16:37,100 --> 00:16:43,440
Dish Detail“ und auch die Home-Komponente aktualisieren.

196
00:16:43,440 --> 00:16:45,790
Gehen Sie zur Dish Detailkomponente,

197
00:16:45,790 --> 00:16:48,050
verwenden Sie das Inject dort,

198
00:16:48,050 --> 00:16:52,885
und gehen Sie dann zum Konstruktor,

199
00:16:52,885 --> 00:16:57,685
im Konstruktor, jetzt muss ich

200
00:16:57,685 --> 00:17:13,690
Inject von BaseURL und BaseURL dort verwenden,

201
00:17:13,690 --> 00:17:24,185
und so ist meine Dish Detailkomponente jetzt eingerichtet, um die Daten aus dem Dish Service zu erhalten.

202
00:17:24,185 --> 00:17:26,620
Also, dieser Teil wird sich nicht mehr ändern,

203
00:17:26,620 --> 00:17:29,780
es bleibt genau das gleiche, weil mein Geschirr-Service einfach

204
00:17:29,780 --> 00:17:34,395
ein beobachtbares zurückgibt und ich das beobachtbare hier abonniere.

205
00:17:34,395 --> 00:17:40,065
Ich muss auch die Schüssel-Detailkomponenten-Vorlagendatei aktualisieren,

206
00:17:40,065 --> 00:17:43,310
also

207
00:17:43,310 --> 00:17:52,645
würde ich ähnlich zur Bildquelle hier gehen, das BaseURL plus das Dish Image hinzufügen und dann in Zitate einfügen.

208
00:17:52,645 --> 00:17:57,565
In ähnlicher Weise geht man auf die Home-Komponente, die gleiche Sache.

209
00:17:57,565 --> 00:18:02,830
Ich werde eine Injektion machen,

210
00:18:02,830 --> 00:18:09,320
und im Konstruktor

211
00:18:10,860 --> 00:18:18,080
mache ich eine Injektion von BaseURL

212
00:18:22,380 --> 00:18:27,640
und gehe in die Home-Komponenten-Vorlagendatei, in

213
00:18:27,640 --> 00:18:33,480
ähnlicher Weise, wo ich das Dish-Bild hier verwende,

214
00:18:33,480 --> 00:18:39,700
also werde ich sagen, BaseURL plus Dish Image,

215
00:18:39,700 --> 00:18:44,815
und dann in Anführungszeichen einschließen,

216
00:18:44,815 --> 00:18:48,530
und dann Speichern Sie die Änderungen.

217
00:18:52,230 --> 00:18:58,805
Also, das war's. Meine Anwendung wird jetzt aktualisiert, um

218
00:18:58,805 --> 00:19:04,540
den Server zu verwenden, um die Daten für die Gerichte zu erhalten.

219
00:19:04,540 --> 00:19:09,775
Also, lassen Sie uns gehen und sehen Sie die Anwendung im Browser. Wenn Sie in

220
00:19:09,775 --> 00:19:11,630
den Browser gehen,

221
00:19:11,630 --> 00:19:14,150
können Sie jetzt sehen, dass mein

222
00:19:14,150 --> 00:19:18,480
Gericht in meinem Browser genau wie zuvor gerendert wird,

223
00:19:18,480 --> 00:19:20,920
und dann auf die Menükomponente gehen,

224
00:19:20,920 --> 00:19:26,380
sehen Sie, dass das Menü genau wie zuvor gerendert wird und die Schale Detailkomponente,

225
00:19:26,380 --> 00:19:31,935
auch die Teller Details werden genau wie zuvor gerendert.

226
00:19:31,935 --> 00:19:38,015
Mit der Änderung, die wir durch den Zugriff auf die Daten von der Serverseite eingeführt haben,

227
00:19:38,015 --> 00:19:41,075
sind wir in der Lage, die Daten von der Serverseite zu holen und dann

228
00:19:41,075 --> 00:19:45,335
die Daten innerhalb unserer Angular-Anwendung zu rendern.

229
00:19:45,335 --> 00:19:51,365
Um Sie zu überzeugen, dass die Daten tatsächlich von meinem JSON-Server abgerufen werden,

230
00:19:51,365 --> 00:19:58,590
gehen wir zum Terminal und sehen dann das Protokoll im Terminalfenster dort. Wenn Sie

231
00:19:58,590 --> 00:20:03,620
zu dem Terminal gehen, auf dem mein JSON-Server läuft,

232
00:20:03,620 --> 00:20:08,625
können Sie sehen, dass ich tatsächlich eine Reihe von Git-Anfragen

233
00:20:08,625 --> 00:20:14,030
von meiner Server-Site ausgeführt habe, um alle Daten zu erhalten, die ich in meiner Anwendung brauche.

234
00:20:14,030 --> 00:20:20,755
Also, in der Tat ruft meine Angular-Anwendung jetzt alle Daten von

235
00:20:20,755 --> 00:20:27,850
der Server-Site für alle Gerichte in meiner Angular-Anwendung ab.

236
00:20:27,850 --> 00:20:31,405
Nun können Sie den gleichen Ansatz verwenden, um auch

237
00:20:31,405 --> 00:20:35,035
den neuesten Dienst und auch den Promotion-Dienst zu aktualisieren,

238
00:20:35,035 --> 00:20:40,200
aber wir werden dies bis zur endgültigen Zuweisung in diesem Kurs verschieben,

239
00:20:40,200 --> 00:20:43,380
aber dies kann diese Übung abschließen.

240
00:20:43,380 --> 00:20:46,920
In dieser Übung haben wir gelernt, wie man

241
00:20:46,920 --> 00:20:50,420
den HTTP-Client nutzt, um die Daten von

242
00:20:50,420 --> 00:20:54,595
der Server-Site zu erhalten und dann die Daten bei der Erstellung

243
00:20:54,595 --> 00:20:59,525
der Ansichten innerhalb der Komponenten unserer Angular-Anwendung zu verwenden.

244
00:20:59,525 --> 00:21:06,000
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht HTTP Teil eins zu machen.