[MUSIC]
Nun, da wir eine schnelle Einführung in die MVM- und
MVVM-Frameworks, Angular-Dienste und auch Abhängigkeitsinjektion hatten,
gehen wir nun zu unserer nächsten Übung, wo wir unseren
ersten Angular-Dienst erstellen und ihn dann in unsere Komponente einspritzen und
ihn innerhalb unserer -Komponente.
Um zu beginnen, gehen Sie zu Ihrer Anwendung
im Editor Pad im App-Ordner,
erstellen Sie einen neuen Unterordner und benennen Sie ihn als Dienste.
Jetzt werden wir Angular CLI verwenden, um einen neuen Dienst zu unserer Angular-Anwendung hinzuzufügen.
Um dies zu tun, geben Sie an der Eingabeaufforderung ng
generieren service und services/dish ein.
Dadurch wird ein neuer Dienst im Ordner „Dienste“ mit dem Namen „Dish Service“ erstellt.
Sobald dies erstellt wurde, sehen Sie, dass zwei Dateien
von der Angular CLI namens DishService.ts und dish.service.specter.ts erstellt werden.
Dieser wird verwendet, um unseren Angular-Dienst zu testen, während wir später darüber sprechen werden.
Der zweite ist, wo wir unseren Geschirrservice erstellen und
diesen dann in unser App-Modul einspritzen und ihn in unserer Menükomponente nutzen werden.
Gehen wir zum Editor, öffnen wir die Datei dish.service.ts.
Nun, wenn Sie diese Datei öffnen, bemerken Sie sofort hier die allererste
Anweisung, die besagt, importieren Sie {Injectable} von '@angular /core'.
Dieses injizierbare erlaubt es uns, diesen injizierbaren
Dekorator für jede Klasse zu definieren, die wir hier definiert haben.
So können Sie sehen, dass wir hier eine Klasse definieren, die als DishService bezeichnet wird.
Indem wir diesen injizierbaren Dekorator für diesen Geschirr-Service verwenden,
machen wir dieses Objekt jetzt in unserer Anwendung injizierbar.
Dies ist es also, was ermöglicht, dass die Abhängigkeitsinjektion innerhalb unserer
Anwendung verwendet werden kann.
Wenn Sie also die Klasse als injizierbar deklarieren,
lassen Sie uns jetzt unseren DishService konfigurieren, um uns einige Informationen zur Verfügung zu stellen.
Also, hier, Ich werde importieren,
The Dish Klasse aus dem freigegebenen Ordner,
und auch importieren, Die DISHIELS
Konstante aus,
Freigegebener Ordner hier.
Sobald ich diese beiden importiert habe,
kann mein Dienst jetzt konfiguriert werden, um den Wert für uns bereitzustellen.
Also innerhalb des Dienstes werde ich
einen neuen Methodenaufruf GetDishes hinzufügen, und
diese Methode wird hier in einer Reihe von Gerichten zurückkehren.
Und so wird diese Methode die DISH-Konstante zurückgeben
, die wir in unseren DishService importiert haben.
Damit ist unser DishService nun so konfiguriert,
dass dieses DISH-JavaScript-Objekt-Array für jeden
anderen Teil unserer Anwendung bereitgestellt wird, der es erfordert.
Bevor das geschieht, müssen wir diesen Service in Anspruch nehmen und
dann in unsere Anwendung injizieren.
Um dies zu tun, öffnen wir die App-Modul.ts Datei.
Also innerhalb der App-Modul.ts-Datei, direkt nach dem Importieren
der Komponenten direkt dort, werde ich den,
DishService direkt dort importieren.
Und das wird importiert von,
Dienstleistungen DishService hier.
Sobald wir das importieren, dann werden wir diesen DishService als Provider deklarieren.
Also, wenn Sie in den ng Modul Dekorator gehen, so
sehen Sie diese dritte Eigenschaft hier genannt Provider.
Wir haben also Erklärungen, Importe und Anbieter.
Also, wenn Sie einen Dienst haben, den Sie für
alle Komponenten aus einem Teil dieses Moduls zur Verfügung stellen möchten.
Dann geben Sie dies als Provider innerhalb des Moduls hier an.
Also, genau da, werde ich sagen, DishService, hier.
Damit wird mein DishService jetzt für den Rest der Anwendung verfügbar.
Nun, wie passiert das?
Die Abhängigkeit des Angular injizierbare betrachtet diese Informationen, die wir
hier deklariert haben, und entscheidet dann, dass es einen DishService erstellen muss und
injiziert sie, wo immer es benötigt wird.
Wie machen wir diesen Service in Anspruch?
Wir sehen, dass wir in der Menükomponente früher die DISHIELS
Konstante direkt bekommen haben, indem wir hier aus der gemeinsamen Geschirrdatei importiert haben.
Nun ist dies nicht der ideale Weg, um die Informationen zu erhalten,
anstatt die Informationen direkt in Ihre Komponente zu binden,
sollten Sie lieber einen Dienst diese Informationen für Sie holen lassen.
Später können wir unseren Service neu gestalten, um die
gleichen Informationen von einem Back-End-Server abrufen zu können, wenn Sie dies wünschen.
In der Tat werden wir das in einigen der späteren Übungen tun.
Sie werden also die Verantwortung für das Abrufen der Informationen an den Dienst delegieren
und dann nutzen Sie einfach den Dienst innerhalb dieser Menükomponente.
Also werden wir diese Geschirrkomponente von dort löschen und
stattdessen werden wir diesen DishService hier importieren.
Und dieser DishService wird importiert von,
services/dish.service Datei hier.
Nachdem wir das jetzt hinzugefügt haben, haben wir einen Teil der Arbeit erledigt.
Jetzt müssen wir diesen Service zur Verfügung stellen, damit unsere Komponente genutzt werden kann.
Das ist also, wo wir zu diesem Konstruktor hier kommen werden.
In diesem Konstruktor
sehen Sie jetzt die Verwendung des Konstruktors innerhalb unserer Klasse hier.
Also in diesem Konstruktor werden wir
hier private DishService und DishService sehen.
Dies ist also vom DishService-Typ, also
wenn Sie dies im Konstruktor deklarieren, wenn diese Komponente erstellt wird,
dann dieser DishService, den Sie in das App-Modul injiziert haben.
Wenn Sie das in das App-Modul injizieren,
wird ein einzelnes DishService-Objekt erstellt.
Und dieses DishService-Objekt wird Ihnen in Ihrer
Menükomponente hier zur Verfügung gestellt.
So können Sie nun die Methoden aufrufen, die dieser DishService für
Sie bereitstellt, um die Arbeit in Ihrem Namen zu erledigen.
Also, wenn Sie das reinlegen,
jetzt erkennen wir, dass wir diese Gerichte nicht mehr konstant hier haben.
Also muss ich irgendwie diese Informationen holen.
Nun, hier werde ich den Dienst nutzen, den ich für mich zur Verfügung habe, um
die Informationen für uns zu holen.
Wo holen wir diese Informationen ab?
Also, hier werden wir die Hilfe dieser Lebenszyklusmethode namens
NgonInit nehmen.
Also, wenn Sie diese Lebenszyklusmethode namens NgonInit in Ihrer
Anwendung deklarieren, so dass Sie sehen, dass in der Klasse, sagen Sie implementiert die OnInit.
Die Implementierung dieses OnInit erfordert daher, dass Sie
diese NGOnInit-Methode als Teil Ihrer Klasse hier implementieren.
In dieser NGOnInit-Methode
können Sie nun den Dienst bitten, diese Informationen abzurufen.
Warum ist das so?
Diese Lebenszyklusmethode wird
von der Angular Framework ausgeführt werden, wenn diese Komponente instanziiert wird.
Also, wenn diese Komponente erstellt wird, wird diese Methode ausgeführt werden.
Also, wenn diese Methode ausgeführt wird, dann kann ich an diesem Punkt gehen und
das Geschirr aus dem DishService holen.
Also kann ich DishService sagen, und
dann werden Sie wissen, dass Sie die GetDish-Methode innerhalb des DishService haben.
Sie können auf die Methode aufrufen, um das Geschirr für Sie zu holen.
Nun, wenn wir dies tun, dann wird das Geschirr Objekt durch
den Dienst an uns durch diese GetDishs-Methode geliefert werden.
Und das kann in unsere Gerichte lokale Variable gesetzt werden, die wir hier definiert haben.
Damit schließen wir das Update für
alle unsere Anwendungsdateien ab.
Lassen Sie uns gehen und werfen Sie einen kurzen Blick auf die resultierende Angular-Anwendung. Wenn Sie
zum Browser wechseln, können Sie jetzt sehen, dass die
Angular-Anwendung im Browser wie zuvor gerendert wird.
In dieser Version, wie Sie gesehen haben,
werden die Informationen über die Gerichte in Ihre Komponente geholt werden, indem Sie den Service nutzen.
Der Dienst wiederum wird diese Informationen für Sie abrufen.
Jetzt in diesem Moment halten wir den Service sehr einfach.
Der Dienst gibt einfach diesen konstanten Wert zurück, den wir hier definiert haben.
Später können Sie sich vorstellen, dass Sie den Dienst erweitern würden, um
diese Informationen vom Back-End-Server abzurufen.
Wenn das passiert,
wird das Abrufen von Informationen nicht mehr augenblicklich sein.
Das ist, wo wir die Hilfe von Versprechen und
auch den reaktiven JavaScript-Ansatz benötigen, um diese Verzögerung zu unterstützen und
mit der Verzögerung beim Abrufen der Informationen innerhalb unserer Anwendung umzugehen.
Wir werden im nächsten Modul ausführlicher darüber sprechen. Im
Moment wird unsere Anwendung gut laufen, so dass Sie eines
dieser Gerichte auswählen können und die Informationen werden genau wie zuvor angezeigt.
Damit konkurrieren wir diese Übung, in der wir die Grundlagen der Angular-Dienste lernen.
Und wir haben auch gesehen, wie wir den Angular-Dienst
innerhalb unserer Anwendungskomponente nutzen können.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit den Nachrichtenbasisdiensten zu machen.
( MUSIK).