In dieser Übung verwenden wir den Angular HTTP Client, um
mit dem JSON-Server zu kommunizieren, den wir bereits in der vorherigen Übung eingerichtet haben.
Wir können nun über den
HTTP-Client Daten vom Server auf unsere Winkelapplikation herunterladen und dann die Daten nutzen, um
die verschiedenen Ansichten innerhalb unserer Komponenten zu konstruieren.
In dieser Übung werden wir den Dish Service neu konfigurieren, um die
Daten über die Gerichte vom JSON-Server abrufen zu können.
Im Rahmen Ihrer Aufgabe
erledigen Sie die verbleibenden beiden,
den Führungsservice und den Promotionsservice.
Wir werden sehen, wie wir den HTTP-Client nutzen können, der uns ein beobachtbares zurückgibt.
Wir haben unsere Anwendung bereits neu konfiguriert,
insbesondere den Service, um Observables an unsere Komponenten liefern zu können.
Innerhalb unserer Komponenten verpflichten wir uns zu diesen Beobachtbarkeiten.
Der größte Teil des Setups
zum Abrufen von Daten vom Dienst zur Komponente ist also bereits vorhanden.
Wir werden es ein wenig verbessern, um mit Fehlern in der nächsten Übung umzugehen.
Unser erster Schritt bei der Vorbereitung der Angular-Anwendung auf
den HTTP-Client für den Zugriff auf den Server besteht darin,
unsere Anwendung mit dem HttpClientModule zu konfigurieren.
Um dies zu tun, öffnen Sie app.module.ts.
Dann, hier, lassen Sie uns
das HttpClientModule von Angular/Common/HTTP importieren.
Sobald wir das importieren,
werden wir fortfahren und den NgModule Dekorator
in den Importen mit dem HttpClientModule konfigurieren.
Jetzt ist unsere Anwendung bereit, das HttpClientModule für den Zugriff auf den Server zu verwenden. Stellen
Sie nun sicher, dass der JSON-Server betriebsbereit ist und
die Daten bereitstellt, damit unsere Anwendung
mit der JSON-Serveranwendung kommunizieren kann.
Nun, da wir auf Daten von der Serverseite zugreifen,
ist es eine gute Praxis, einen speziellen Wert zu erstellen,
der auf die BaseURL Ihres Servers verweist
, so dass er bei Bedarf innerhalb Ihrer Winkelanwendung konfiguriert werden kann.
Also, wenn ich in den freigegebenen Ordner
gehe, werde ich hier eine neue Datei namens baseurl.ts erstellen.
Dann
werde ich innerhalb dieser Datei eine Konstante einschließen und sie und die Konstante namens baseURL exportieren,
die ich auf HTTP setzen werde: //localhost: 3000.
Wie Sie sich erinnern, ist dies die BaseURL, auf der mein JSON-Server zugegriffen werden kann.
Also, localhost: 3000/, da.
Lassen Sie mich damit die Änderungen an der BaseURL speichern.
Jetzt bietet angular eine Möglichkeit, Werte wie
diese für den Rest Ihrer Anwendung bereitzustellen, indem Sie einen Provider in Ihrem App-Modul konfigurieren. Wenn wir
also zum App-Modul gehen,
damit wir diese bestimmte BaseURL bereitstellen können,
werden wir zuerst den BaseUrl-Wert in unsere Winkelanwendung importieren.
Also, ich würde sagen, importieren Sie baseURL von shared/baseurl.
Dieser Wert kann nun
dem Rest meiner Anwendung zur Verfügung gestellt werden, indem Sie zu den Anbietern gehen.
Dann, zusätzlich zum LeaderService,
wenn ich einen Wert wie diesen konfiguriere,
würde ich sagen, bieten
und dann baseURL, useValue.
Auf diese Weise werde ich diesen
BaseUrl-Wert als Wertanbieter aus dem App-Modul an den Rest meiner Winkelanwendung liefern.
Im nächsten Schritt
werden wir unseren DishService so konfigurieren, dass er auf die Serverseite zugreifen kann,
und dann die Daten von der Serverseite abrufen
und dann die Daten für unsere Komponenten zur Verfügung stellen.
Jetzt gehen wir zum DishService.
Dann, im DishService,
werden diese Gerichte nicht mehr aus lokalen Akten benötigt.
Ich werde diese Daten von der Serverseite herunterladen.
Also, ich werde das entfernen und dann einen Import von
HttpClient von eckig,
jedes gemeinsame HTTP hinzufügen,
importieren Sie die BaseURL von,
erinnern Sie sich, dass dies in shared/baseurl ist.
Jetzt, in meinem DishService,
werde ich gehen und die Daten von der Serverseite holen.
Also, im Konstruktor
werde ich den Konstruktor aktualisieren, indem ich
HttpClient hier in meinen Konstruktor injiziere.
Also, jetzt sollte mein DishService eingerichtet werden, um
die Daten von der Serverseite zu erhalten und die Daten an meine Anwendung zurückzugeben.
Jetzt stellen Sie fest, dass
die GetDishs-Methode bereits so eingerichtet ist, dass das Observable an die Komponente zurückgegeben wird.
Also, dieser Teil ist bereits eingerichtet.
Nun, was dies zurückgeben wird, ist, was es von
der HTTP-Get-Methode erhält
, die wir die Serverseite aufrufen werden.
Also, um die Serverseite aufzurufen,
muss ich
innerhalb der get-Methode das
BaseUrl, das ich
bereits erhalten habe, und dann Geschirr liefern.
Auf diese Weise wird die HTTP-Get-Methode die Daten von localhost abrufen: 3000/Gerichte.
Also, das ist die serverseitige URL
, von der Sie die Gerichte Daten hier abrufen können. Das ist es.
Mein Server wird die Daten in Form eines
beobachtbaren für diesen Dienst bereitstellen, wenn die HTTP-Get-Methode aufgerufen wird,
und das wird über die GetDishs-Methode an die Komponente zurückgegeben.
Das war's auch. Jetzt ist mein Dienst so eingerichtet, dass er
die Daten von der Serverseite abruft und dann die Daten an meine Komponente zurückgibt.
Ich werde die restlichen Methoden auch in ähnlicher Weise aktualisieren.
Also, was ich für die nächste Methode für die GetDish-Methode tun
werde, ist, dass ich
diesen Teil kopieren und ihn dann einfach hier einfügen werde,
und dann werden wir das bearbeiten.
Jetzt, wenn Sie für ein bestimmtes Gericht erhalten müssen,
haben Sie die ID des Gerichts, das Ihnen zur Verfügung steht.
Also, wir werden sagen, GetDish ID ist als Parameter verfügbar.
Also, zu den Gerichten,
werde ich die ID als den anderen Parameter hier hinzufügen.
Jetzt, wenn ich die Antwort erhalte und
sie dann über den GetDish-Methodenaufruf an die Komponente zurückgebe.
In ähnlicher Weise wird
es für das vorgestellte Gericht ein wenig interessante Art sein, es zu konfigurieren.
Nun, für das vorgestellte Gericht,
wenn Sie auf die Daten von der Serverseite zugreifen müssen,
was ich tun werde, ist, jetzt,
wenn ich nach einem vorgestellten Gericht frage,
die Art und Weise, wie meine Serverseite eingerichtet ist, dass ich
einen Abfrageparameter innerhalb meiner URL senden kann, damit ich Gerichte sagen kann?
und dann sagen, dargestellt gleich wahr.
Auf diese Weise gibt mein Server
nur die Objekte zurück, für die das Feature-Flag auf true gesetzt ist,
oder die Feature-Eigenschaft auf der Serverseite auf true gesetzt ist.
Nun, so ist die serverseitige Einrichtung.
Jetzt wieder, sobald Sie die Daten erhalten,
ordnen Sie einfach den Wert zu und geben diesen dann als
beobachtbar für meine Komponente durch die Get-Feature-Dish-Methode zurück.
Wenn ich die Serverseite mit dem Abfrageparameter abfrage,
wird ein Array von Objekten zurückgegeben, die übereinstimmen.
In diesem Fall kommt es so vor, dass das Array dort genau ein Element enthält.
Aber wenn ich den Wert zurückgebe, nachdem ich das Ergebnis erhalten
habe, muss ich dort auch eine Null einschließen, da dies ein Array ist,
also muss ich das erste Element aus dem Array zurückgeben.
Bevor ich vergesse, lassen Sie mich
den Kartenoperator von rxjs-Operatoren importieren.
Nun, für die letzte, die GetDishids,
was ich tun werde, ist die Tatsache zu nutzen, dass ich bereits
die GetDishs-Methode zur Verfügung habe.
Also, wenn die GetDishs-Methode zurückkehrt,
werde ich das mit dem Kartenoperator
als dishes.map, dish.dish id abbilden.
Auf diese Weise gebe ich nur den Wert zurück, den ich brauche,
nur die Dish-IDs durch diese Methode hier.
Das war's auch.
Jetzt ist mein Dish Service vollständig aktualisiert, um die Daten von
der Server-Site zu holen und dann die Daten an meine Komponenten in meinem zu liefern.
Winkelapplikation hier.
Im nächsten Schritt
gehe ich in die Menükomponente.
Dann
werde ich innerhalb der Menükomponente die Inject-Schnittstelle verwenden, die über
den Winkelkern verfügbar ist, um diese BaseURL zu injizieren, die ich dort erhalten habe.
Also, wie nutzen wir das?
Innerhalb des Konstruktors meiner Komponente
werde ich hineingehen und sagen:
"@Inject" Also, erinnern Sie sich, dass wir
diese BaseURL als Provider für diesen Wert im App-Modul früher eingerichtet hatten.
Also, dass BaseURL jetzt so in die Komponente injiziert werden kann.
Nun, wenn Sie einen Dienst haben,
injizieren Sie hier Dienste wie diesen,
aber wenn Sie einen Wert haben,
dann injizieren Sie den Wert mit dem Dekorator "@Inject".
Hier geben wir den Anbieterwert an, den wir dort angegeben haben.
Wir sagten, bieten:BaseURL dort,
also ist das der Wert, den wir hier liefern.
Dann deklariere ich dies als private BaseUrl.
Also, jetzt, in meinem Code hier,
ist diese BaseURL verfügbar, um alles zu konfigurieren, was ich in meiner Anwendung brauche.
Während ich noch hier bin,
werde ich dieses ausgewählte Gericht entfernen, das auch nicht in meiner Anwendung verwendet wird.
Dann verwende ich diese Methode auch nicht mit meiner Anwendung,
also lass mich ein wenig bereinigen, während ich noch hier bin.
Die Art und Weise, wie wir die Daten verarbeiten, die wir
von dem Dienst erhalten haben, bleibt exakt gleich.
Weil mein Dienst immer noch zurückkehrt und beobachtbar ist
und ich das Observable innerhalb dieser Komponente abonniere.
Also, dieser Teil ändert sich überhaupt nicht.
Nun, der Grund, warum ich die BaseURL in meine Komponente injiziere, ist, dass
ich in meiner Vorlage hier das Dishbild erhalte.
Nun, aber dieses Dish-Image muss von meinem Server dort
vom JSON-Server abgerufen werden.
Also, ich muss hineingehen und dann diese Quelle aktualisieren, um zu sagen,
BaseUrl plus Gericht Bild.
Also muss ich dort die vollständige URL für dieses Bild angeben.
Also, das sollte, httlp://localhost: 3000/images/, was auch immer sein.
Also, das ist der Grund, warum ich
den BaseUrl-Wert zusätzlich zum Dishbild hier angeben muss.
Also, das werde ich in Anführungszeichen einschließen,
also wird ein Ausdruck wie dieser innerhalb der Interpolation korrekt funktionieren.
Also, schließen Sie dies in Anführungszeichen ein und geben Sie es dann als Quellwert an,
und dann sehen Sie, dass Sie baseURL plus das Dish-Bild,
das dish.image, die image-Eigenschaft enthält nur die partielle URL.
Also, es enthält Bilder Schrägstrich und image.png Dateinamen.
Deshalb muss ich die http://localhost:3000/ an diese
Dish-Bild-Eigenschaft anhängen, damit ich die Gesamt-URL für mein Bild konstruiere.
Damit ist meine Menükomponente jetzt vollständig eingerichtet,
um alle Daten von der Serverseite zu erhalten.
Nun würde ich auch vorschlagen, dass Sie die Komponente „
Dish Detail“ und auch die Home-Komponente aktualisieren.
Gehen Sie zur Dish Detailkomponente,
verwenden Sie das Inject dort,
und gehen Sie dann zum Konstruktor,
im Konstruktor, jetzt muss ich
Inject von BaseURL und BaseURL dort verwenden,
und so ist meine Dish Detailkomponente jetzt eingerichtet, um die Daten aus dem Dish Service zu erhalten.
Also, dieser Teil wird sich nicht mehr ändern,
es bleibt genau das gleiche, weil mein Geschirr-Service einfach
ein beobachtbares zurückgibt und ich das beobachtbare hier abonniere.
Ich muss auch die Schüssel-Detailkomponenten-Vorlagendatei aktualisieren,
also
würde ich ähnlich zur Bildquelle hier gehen, das BaseURL plus das Dish Image hinzufügen und dann in Zitate einfügen.
In ähnlicher Weise geht man auf die Home-Komponente, die gleiche Sache.
Ich werde eine Injektion machen,
und im Konstruktor
mache ich eine Injektion von BaseURL
und gehe in die Home-Komponenten-Vorlagendatei, in
ähnlicher Weise, wo ich das Dish-Bild hier verwende,
also werde ich sagen, BaseURL plus Dish Image,
und dann in Anführungszeichen einschließen,
und dann Speichern Sie die Änderungen.
Also, das war's. Meine Anwendung wird jetzt aktualisiert, um
den Server zu verwenden, um die Daten für die Gerichte zu erhalten.
Also, lassen Sie uns gehen und sehen Sie die Anwendung im Browser. Wenn Sie in
den Browser gehen,
können Sie jetzt sehen, dass mein
Gericht in meinem Browser genau wie zuvor gerendert wird,
und dann auf die Menükomponente gehen,
sehen Sie, dass das Menü genau wie zuvor gerendert wird und die Schale Detailkomponente,
auch die Teller Details werden genau wie zuvor gerendert.
Mit der Änderung, die wir durch den Zugriff auf die Daten von der Serverseite eingeführt haben,
sind wir in der Lage, die Daten von der Serverseite zu holen und dann
die Daten innerhalb unserer Angular-Anwendung zu rendern.
Um Sie zu überzeugen, dass die Daten tatsächlich von meinem JSON-Server abgerufen werden,
gehen wir zum Terminal und sehen dann das Protokoll im Terminalfenster dort. Wenn Sie
zu dem Terminal gehen, auf dem mein JSON-Server läuft,
können Sie sehen, dass ich tatsächlich eine Reihe von Git-Anfragen
von meiner Server-Site ausgeführt habe, um alle Daten zu erhalten, die ich in meiner Anwendung brauche.
Also, in der Tat ruft meine Angular-Anwendung jetzt alle Daten von
der Server-Site für alle Gerichte in meiner Angular-Anwendung ab.
Nun können Sie den gleichen Ansatz verwenden, um auch
den neuesten Dienst und auch den Promotion-Dienst zu aktualisieren,
aber wir werden dies bis zur endgültigen Zuweisung in diesem Kurs verschieben,
aber dies kann diese Übung abschließen.
In dieser Übung haben wir gelernt, wie man
den HTTP-Client nutzt, um die Daten von
der Server-Site zu erhalten und dann die Daten bei der Erstellung
der Ansichten innerhalb der Komponenten unserer Angular-Anwendung zu verwenden.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht HTTP Teil eins zu machen.