Nachdem wir nun die Entwicklung eines vollwertigen Rest-API-Servers mit LoopBack abgeschlossen haben, ist
die unmittelbare nächste Frage, die sich in Ihrem Kopf
stellen wird, wie passen wir die Angular-Anwendung an, um diesen Rest API-Server zu nutzen?
Wie bereits in den vorherigen Fällen,
müssen wir auch unsere Angular-Anwendung neu konfigurieren, um speziell
die Rest-API-Endpunkte und die
verschiedenen Rest-API-Anforderungen zu verwenden, die von unserem LoopBack-Server bereitgestellt werden.
Nun, hier werden wir die Vorteile
eines LoopBack-SDK nutzen, das automatisch für uns mit einem Node-Modul erstellt werden kann.
Wir betrachten unsere LoopBack-Server,
verschiedene Rest-API-Endpunkte und konstruieren automatisch das SDK,
das wir dann in
unsere Angular-Anwendung integrieren können und dann mit unserem LoopBack-Server kommunizieren
können, sowohl zur Authentifizierung als auch zum Datenaustausch.
Um mit dieser Übung zu beginnen,
klonen Sie zuerst das Git-Repository, das
eine teilweise abgeschlossene Angular-Anwendung enthält, die mit unserem LoopBack-Server kommuniziert.
Um dies zu tun, gehen Sie zu Ihrem günstigen Standort auf Ihrem Computer.
Also, hier bin ich in meinem Coursera Angular Ordner.
Ich werde das Git-Repository klonen,
indem ich git clone
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git tippe
und dann dieses Git-Repository klone.
Sobald das Git-Repository geklont ist,
werden wir in den ConFusion Angular6 LoopBack-Ordner wechseln und dann
eine NPM-Installation durchführen, um
alle Knotenmodule für diese teilweise abgeschlossene Angular-Anwendung zu installieren.
Um das LoopBack Software Development Kit für unseren LoopBack-Server automatisch
zu erstellen, werden wir die Hilfe dieses LoopBack SDK Builder Knotenmoduls nutzen.
Also, dieser LoopBack SDK Builder
ist ein Community-gesteuertes Knotenmodul, das tatsächlich
aus dem offiziellen LoopBack SDK Angular entwickelt wurde, das LoopBack-Entwickler veröffentlicht hatten.
Das Loopback SDK Angular unterstützte Angular JS.
Dies wurde in diesem Loopback SDK Builder geändert,
um die Angular two und über Anwendungen zu unterstützen.
Also, der LoopBack SDK
Builder, das Knotenmodul selbst, sobald es in Ihrem Server-Projektordner installiert ist,
können Sie den LoopBack SDK Builder verwenden, um
automatisch durch Ihre LoopBack-Anwendung zu übergeben, die Sie bereits erstellt haben.
Dies wird automatisch alles bauen, was wir
brauchen, um mit unserer Angular-Anwendung zu beginnen.
Es baut also das Software-Development Kit.
Im Software-Development Kit
exportiert der LoopBack SDK Builder also alle Schnittstellen,
alle Modelle für die verschiedenen Daten, die wir auf
unserem LoopBack-Server speichern werden, und auch
alle API-Dienste, die innerhalb Ihrer Angular-Anwendung verwendet werden können.
Also, Ihre Modelle und Ihre Dienste kommen automatisch für die Fahrt, wenn Sie das SDK erstellen.
Jetzt geht es nur darum, dieses SDK in unsere Angular-Anwendung zu integrieren
und dann schnell loszulegen.
Da wir unsere Angular-Anwendung bereits in einem früheren Kurs erstellt haben,
werde ich diese Anwendung nachrüsten, um
das LoopBack SDK zu nutzen, das wir aus diesem LoopBack SDK Builder exportieren werden.
Im vorherigen Schritt
haben Sie soeben
die teilweise abgeschlossene Angular Anwendung installiert, die
bereits an die Verwendung des LoopBack SDK angepasst wurde.
Lassen Sie uns also fortfahren und
das LoopBack SDK erstellen und es dann in unserer Angular-Anwendung bereitstellen,
und dann unsere Angular-Anwendung kompilieren und damit beginnen.
Um das LoopBack SDK einzurichten,
wechseln Sie zum Ordner LoopBack-Server auf der Terminalregisterkarte oder im Befehlsfenster.
Also hier bin ich in meinem LoopBack-Serverordner.
Also, in diesem Ordner,
lassen Sie mich gehen und installieren Sie diesen LoopBack
SDK Builder.
Sobald der Builder installiert ist,
lassen Sie uns fortfahren und das LoopBack SDK erstellen.
Um das LoopBack SDK zu erstellen,
nehmen wir die Hilfe des LB-SDK-Befehlszeilentools, das dieses LoopBack SDK-Modul
automatisch für uns konfiguriert.
Also, um darauf zuzugreifen, sagen wir,. /node Module.
Also, in den Knotenmodulen
gibt es a.bin Ordner, der automatisch erstellt wird, wenn Sie
verschiedene Knotenmodule in den Ordner dort installieren.
Also, um zum Ordner the.bin zu gehen,
werden wir dort auf diesen LB-SDK-Befehl zugreifen
, der automatisch installiert wird,
dann werden wir diesen Breitenserver aufrufen. /server.js,
und wir müssen den Pfad zur Angular Anwendung angeben, die wir gerade konfiguriert haben.
Also, meine Angular-Anwendung befindet sich derzeit in
meinen Dokumenten Coursera eckigen ConFusion Winkel-LoopBack-Ordner.
Also, lassen Sie mich den Teil überschreiben.
Dann lassen Sie mich in mein Terminal oder das Befehlsfenster gehen, in
dem ich versuche, mein LoopBack SDK zu konfigurieren.
Also, an der Eingabeaufforderung,
da es sich im Ordner Eigene Dateien befindet,
werde ich den vollständigen Pfad dazu eingeben, beginnend mit meinem Stammordner in meinem Mac.
Wenn Sie deren Windows verwenden,
stellen Sie sicher, dass dieser Pfad den vollständigen Pfad angibt, beginnend mit dem Doppelpunkt C oder D Doppelpunkt,
je nachdem, welches Laufwerk Sie ihn auf Ihrem Windows-Computer installieren.
Also, der vollständige Pfad zu Ihrem eckigen LoopBack-Ordner,
und dann sagen wir,
/SRC, den Quellordner dort, und dann App.
Dann werden wir das SDK in den
freigegebenen Ordner im SDK-Unterordner dort bereitstellen.
Wir möchten, dass dieser LoopBack SDK Builder
automatisch die NG2-Webversion des SDK bereitstellt.
Dies ist also die Version, die
Webanwendungen und unsere Angular-Anwendung in diesem Fall unterstützt.
Wenn Sie dies für eine native Skriptanwendung konstruieren, werden Sie sagen,
NG2 native, um das SDK für die Native Script-Anwendung zu erstellen.
Da ich meine Angular-Anwendung
erstelle, sage ich einfach, NG2 Web,
und lasse dann den Loopback SDK Builder automatisch
das Software-Development Kit erstellen und es dann
in meinem Angular-Anwendungsquellen-App/shared/sdk-Ordner dort bereitstellen.
Nach ein paar Sekunden
wird das SDK erstellt und in meiner Angular-Anwendung bereitgestellt.
Bevor ich nun meine Angular-Anwendung starte,
lassen Sie mich meinen LoopBack-Server starten,
und bevor ich das tue, gehe ich
hier zu einem anderen Terminal-Tab und starte dann meinen MongoDB-Server,
also gut, ich werde sagen,
Mongod —dbpath=data, und
starte dann meinen MongoDB-Server.
Lassen Sie mich zunächst meinen LoopBack-Server starten.
Also, an der Eingabeaufforderung NPM starten,
und mein LoopBack-Server sollte in kurzer Zeit betriebsbereit sein.
Dann, jetzt zu meiner LoopBack-Anwendung gehen,
lassen Sie mich diese Anwendung in
meinem Visual Studio-Code öffnen, damit wir uns den Quellcode ansehen können.
Sobald meine Anwendung in Visual Studio-Code geöffnet ist,
lassen Sie mich das in ein neues Desktopfenster nehmen.
Lassen Sie mich dann auch meine Angular-Anwendungsbereitstellung starten,
indem Sie NGServe an der Eingabeaufforderung eingeben und warten, bis meine Angular-Anwendung kompiliert wird.
Sobald meine Angular-Anwendung kompiliert und angewendet wurde,
lassen Sie mich zu einem Browser gehen
und dann zuerst diese Angular-Anwendung auschecken.
Gehen Sie zum Browser,
lassen Sie mich hier eine neue Registerkarte öffnen,
und geben Sie dann localhost ein: 4200 und Sie werden
die Angular Anwendung in diesem Browser-Fenster hier bereitgestellt sehen,
und Sie können sehen, dass
die Startseite, die Über uns Seite mit allen Daten,
dann das Menü und auch die Meine Favoriten.
Derzeit wird nichts angezeigt, weil
kein Benutzer eingeloggt ist und die Kontaktseite, genau wie zuvor.
Um mich anzumelden, lassen Sie mich als Benutzer einloggen und dann
werde ich hier meinen Benutzernamen und ein Passwort eingeben, und wenn ich mich dann einloggen, können Sie sehen, dass, wenn ich zu Meine
Favoriten gehe, die Favoriten dieses bestimmten Benutzers hier angezeigt werden.
Genau wie zuvor können wir Kommentare eingeben und dann Kommentare einreichen
und dann auch Elemente zu den Favoriten hinzufügen und so weiter.
Alle Funktionen, die Sie mit den früheren Versionen
der Angular-Anwendung gesehen haben, werden auch in dieser Version der Angular-Anwendung unterstützt.
Auch damit Ihr LoopBack-Server Bilder bereitstellen kann,
werden all diese Daten in Ihrem Servercode im Client-Ordner des Servercodes gespeichert.
Beachten Sie also im Client-Ordner meines LoopBack-Servers, dass ich diesen Unterordner
namens images erstellt und dann alle Bilder in den Unterordner gespeichert habe.
Damit diese Bilder bereitgestellt werden und auch
der Client-Ordner als Öffentlicher Ordner für meinen LoopBack-Server verwendet werden kann,
dann in ein paar Änderungen, die ich an meinem LoopBack-Server vornehmen muss.
Nun, das erste, was Sie tun müssen, ist,
gehen Sie in den Boot-Ordner und im Boot-Ordner,
würden Sie diese root.js Datei hier sehen,
die diese Informationen hier enthält.
Jetzt können Sie entweder die Datei root.js löschen
oder einfach die Datei root.js in etwas anderes umbenennen.
Hier sehen Sie, dass ich diese Datei in root.jsold mit der Erweiterung jsold umbenannt habe.
Nun sollte diese Datei nicht mehr die Erweiterung the.js enthalten.
Also, alles andere als the.js Erweiterung ist in Ordnung.
Also, was das bedeutet, ist, dass in diesem Fall
mein LoopBack-Server, wenn er startet, den Code in diesem Ordner nicht ausführen wird.
Nun, wenn Sie sich den Code in der Datei root.js ansehen, die früher konfiguriert wurde,
haben Sie gesehen, dass der Router so konfiguriert wurde, dass,
wenn Sie auf den Schrägstrich zugreifen, der der Stammordner Ihrer Server ist,
dann wird es einfach den Server LoopBack-Status aufbringen und in der Tat,
das ist, was wir sahen unserem LoopBack-Server,
der die Betriebszeit und die letzte Neustartzeit für unseren Server bereitstellt.
Wir wollen nicht, dass es das tut,
stattdessen möchten wir, dass unser LoopBack-Server in der Lage ist,
alles, was wir in den Client-Ordner als öffentlichen Ordner
zu verwenden, und so kann jede Client-Anwendung im
Client-Ordner meines LoopBack-Servers bereitgestellt werden und sollte
zugegriffen werden, wenn wir auf das LoopBack -Server an seinen standardmäßigen Schrägstrich-Endpunkten.
Also, das ist das Stammverzeichnis des Serverordners.
Also, um das zu tun, ist das erste, was Sie tun müssen,
diesen root.js Dateinamen in root zu ändern.
Zum Beispiel können Sie das einfach in
root.jsold umbenennen oder Sie können diese Datei einfach löschen.
Diese Datei wird in dieser Version meines LoopBack-Servers nicht benötigt.
Nun, nicht nur das,
der zweite Teil, den Sie neu konfigurieren müssen, besteht darin, hier in die middleware.json-Datei zu gehen.
Die Datei middleware.json.
Wenn Sie in der middleware.json-Datei nach unten scrollen,
werden Sie sehen, dass
dies hier ursprünglich nur Dateien enthält: und dann eine leere Klammer hier.
Nun, in diese leere Klammer hier,
fügen Sie einfach diesen Code hier hinzu
, der loopback #static sagt und es sagt params$!.. /client.
Dies zeigt meinem LoopBack-Server an,
dass der Clientordner, der hier verfügbar ist,
als statischer Öffentlicher Ordner für meinen LoopBack-Server verwendet werden sollte.
Also kann auf alles, was in den Client-Ordner gelegt wird, von meinem Server aus zugegriffen werden.
Dies ist also die zusätzliche Änderung, die Sie an der Datei middleware.json vornehmen müssen.
Sobald Sie diese beiden Änderungen vorgenommen haben,
wird Ihr LoopBack-Server alle so konfiguriert, dass die Daten einschließlich der
Bilder bereitgestellt werden, die Sie in
den Unterordner images unter dem Client-Ordner hier ablegen werden. Stellen
Sie also sicher, dass Sie die Bilder hier in den Client-Ordner kopieren, und der zweite besteht darin,
zur Datei middleware.json im Serverordner zu
wechseln und diesen Teil zu aktualisieren.
Sobald wir das tun, dann können diese Bilder durch einfachen Zugriff auf
die /images/ den Bilddateinamen zugegriffen
werden, um auf diese Bilder zuzugreifen, da unsere Gerichte, Führer und die Werbeaktionen diese Bilddateien benötigen und
so dass für uns
vom LoopBack-Server und auch was auch immer Sie in den Client-Ordner ablegen.
So können Sie beispielsweise den Distributionsordner
für Ihre Angular-Anwendung vorbereiten und einfach
den gesamten Inhalt des Distributionsordners in den Client-Ordner hier kopieren.
Wenn Sie dann auf den LoopBack-Server an
seinem Standard-Stammendpunkt zugreifen,
wird Ihre Angular-Anwendung automatisch von Ihrem LoopBack-Server bereitgestellt.
Dies sind also die beiden Änderungen, die Sie an Ihrem LoopBack-Server vornehmen müssen.
Natürlich müssen Sie neugierig sein, wie genau dieses SDK gebaut wird,
wo genau dieses SDK ist und wie ich
es tatsächlich innerhalb meiner Angular-Anwendung nutzen werde.
Um dies zu tun, gehen wir zu unserer Angular-Anwendung und im Quellordner,
unter Quell-App-Ordner,
jetzt, wenn Sie den freigegebenen Ordner öffnen,
würden Sie sehen, dass es hier einen Unterordner namens SDK gibt und in diesem SDK-Unterordner
finden Sie hier eine ganze Reihe von Dateien,
lb.config.ts, index.ts und innerhalb der Speichersockets,
der Dienste und innerhalb des Dienstes
haben Sie hier benutzerdefinierte Dienste und Kerndienste
sowie die verschiedenen Modelle, die hier bereitgestellt werden.
Die Modelle enthalten tatsächlich die Modellstrukturen
für unsere verschiedenen Modelle, die wir implementieren.
Nun, dies ist das LoopBack SDK.
Dieser Code wird automatisch für Sie erstellt und wenn Sie möchten,
können Sie einfach hineingehen und dann
diese Dateien durchlaufen, um nur zu sehen, was dort verfügbar ist.
Stellen Sie sicher, dass Sie keine der Dateien in
diesem SDK-Unterordner ändern, da dies
automatisch vom Loopback SDK-Builder für Sie erstellt
wird. Dies enthält alles, was konfiguriert ist, damit der
LoopBack-Server von Ihrer Angular-Anwendung aus zugegriffen werden kann.
Die Dienste, die ich nutzen werde, sind alle hier verfügbar.
Nun, wie nutzen wir das?
Um Ihnen zu helfen zu verstehen, wie wir dies nutzen,
besuchen wir unsere Home-Komponente und sehen dann, wie die Home-Komponente jetzt aktualisiert wird.
Also, wenn Sie zur Home-Komponente gehen,
werden Sie feststellen, dass ich jetzt Gerichte aus.. /shared/sdk/models.
Dies sind also die Modelle, die
von meinem Loopback SDK Builder automatisch in das SDK exportiert werden.
Also, hier wird mein Geschirr Modell dort definiert werden.
Also, ich werde nur das Geschirr Modell nutzen.
In ähnlicher Weise ist der Dienst selbst als diese DishesAPI verfügbar,
wie Sie hier sehen können und diese DishesAPI ist in der.. /shared/sdk/services Ordner hier.
In ähnlicher Weise die Aktionen und die Promotions-API,
und Führer und Führer API.
Also, diese werden alle automatisch für mich vom Loopback SDK Builder erstellt.
Nun, dann gehen Sie in den Code,
Sie werden jetzt bemerken, dass ich das Gericht als Gerichte,
Förderung als Promotions und Führer als /Führer deklarieren werde.
Diese drei Modelle werden vom Loopback SDK Builder exportiert.
Beachten Sie auch, wie ich die drei Dienste hier neu konfiguriert habe.
Jetzt bezieht sich mein Gericht Service auf Gerichte API,
Promotion-Dienstleistungen, die sich auf Promotions API,
und Führer Service für API-Führer API,
und auch bemerken, wie ich auf den Geschirr-Service hier zugreifen.
Also, ich werde sagen, dass dieses Gericht Service finden eine und wo gekennzeichnet gleich wahr.
Also, hier erinnern Sie sich, dass
ich in meinem LoopBack Rest API Explorer das in den Filter eingegeben hatte,
dann habe ich versucht, das Geschirr dort zu finden.
Also, das ist genau das, was ich hier auch in meinem Code mache.
Also, diese
FindOne, die dann mit diesem geliefert wird, wird ein Element finden und dann das hier zurückgeben,
und dann, dass ich jedes diesem Gericht hier zuordne und
der Rest meiner Angular-Anwendung funktioniert genau wie zuvor.
Beachten Sie nun auch, dass im Konstruktor
beachte, wie ich dies als LoopBack-Konfiguration konfiguriert habe.
Um nun die LoopBack-Konfiguration in jeder Komponente auszuführen, die Sie verwenden,
müssen Sie diese LoopBack-Konfiguration aus diesem freigegebenen SDK-Ordner hier und auch
diese API-Version, die ich deklariere, importieren.
Ich habe diese baseurl.ts-Datei aktualisiert.
Also im Basis-URL-Ordner
habe ich dies auf meinen Namen meines Computers Doppelpunkt 3.000 aktualisiert.
Also, dieser Stelle stellen Sie sicher, dass Sie dies durch
die IP-Adresse oder den Namen Ihres bestimmten Computers ersetzen, auf dem Sie ausgeführt werden. Stellen
Sie also sicher, dass Sie die Basis-URL hier aktualisieren und die API-Version hier ist einfach eine Zeichenfolge.
Sagt API hier.
Diese beiden werden also in meiner Home-Komponente.ts-Datei verwendet.
Also importiere ich diese API-Version hier und die LoopBackConfig.
Die BaseURL, die ich
hier bereits in meinen Konstruktor injiziere, so dass dies bereits hier verfügbar ist,
und dann
muss ich in meinem Konstruktor meiner Komponente diese beiden Anweisungen hier ausführen.
Also, wir werden sagen, „LoopBack set-Basis-URL
auf Basis-URL“, die die gleiche wie die ist, die ich gerade
dort injiziert habe, und schauen Sie dann zurück auf die Einstellung API Version auf API-Version hier.
Also diese beiden muss ich in meiner Home-Komponente
und auch in jeder anderen Komponente konfigurieren, wo ich auf meinen LoopBack-Server
zugreife, ich muss dies konfigurieren.
Jetzt schlägt LoopBack SDK Builder vor, dass wir
dies in jeder einzelnen Komponente hier tun müssen.
Außerdem werden Sie feststellen, dass, wenn Sie zur App module.ts Datei in der App module.ts Datei gehen,
ich alle Eingaben aller anderen Dienste entfernt habe und stattdessen importiere ich
dies hier namens Import SDK Browser-Modul aus Share-SDK hier.
SDK-Browser-Modul hier,
und wenn Sie in die Eingaben hier gehen,
werden Sie sehen, dass ich dieses SDK-Browser-Module.ForRoot hier in den Eingaben konfiguriert habe.
Dieses SDK-Browser-Modul wird also automatisch konfiguriert, wenn wir unser LoopBack SDK erstellen, und
wir müssen das nur in unsere App
module.ts Datei importieren und auch feststellen, dass die Anbieter,
hier haben wir unsere Dienste konfiguriert,
keine der Dienste mehr enthalten, weil das
kommt als Teil meines LoopBack-SDK,
also ist das einzige, was ich bereitstelle, die Basis-URL hier.
Ich habe hier alle anderen aus meiner App module.ts Datei entfernt.
Also, das ist eine Änderung, die Sie bemerken werden.
Wenn Sie also in ähnlicher Weise zur Datei About component.ts,
der Datei DishDetail component.ts,
der Datei favorites component.ts und auch der Datei menu component.ts gehen.
Schauen wir uns also die Menükomponente.ts Datei an.
So werden Sie hier wieder sehen, ich importiere diese
vier und dann in meiner Menükomponente sage ich,
Dish Services Gerichte API und dann
konfiguriere ich die LoopBackConfig Set BaseUrl SetAPI Version.
Ich habe das bereits im Angular-Repository gemacht, das ich für
Sie für meine eckige Anwendung für den LoopBack-Server zur Verfügung gestellt habe
, und Sie werden auch sehen, dass ich hier gerade eine Änderung vorgenommen habe.
Also, wenn Sie alle Elemente aus dem Geschirr Service zu finden, so dass Sie einfach sagen,
Geschirr.Finden und das wird
alle Gerichte, die es in meinem LoopBack-Server gibt hier zurückgeben.
Also, das ist es, was ich hier abhole.
Also sollte der Rest des Codes hier vertraut aussehen, außer dass hier ich
Gerichte nenne, ist gleich Geschirr und eine Reihe von Gerichten hier.
Das ist also die Änderung, die Sie in der Menükomponente sehen werden.
Nun müssen Sie sich fragen, wie die Benutzerauthentifizierung in diesem Fall funktioniert.
Lassen Sie mich Ihre Aufmerksamkeit für die Benutzerauthentifizierung auf
zwei Orte lenken, an denen ich die Benutzerauthentifizierung verwende.
Lassen Sie uns zuerst zur Login-Komponente gehen.
Also, in der Login-Komponente
würden Sie sehen, dass ich in der Login-Komponente diese beiden hier importiere,
die Kunden-API, die die Dienste sind, mit denen ich
Benutzerauthentifizierung durchführen und sich anmelden und abmelden kann,
und ich importiere auch das Kundenmodell und das
Zugriffstokenmodell und in der Login-Komponente,
würden Sie sehen, dass durch Auth Service jetzt nichts anderes als Kunden-API ist und
Sie werden auch feststellen, dass in der Login-Komponente, wenn das Anmeldeformular eingereicht wird,
ich diesen AuthService.login aufrufen.
Diese Login-Funktion, die über die Kunden-API verfügbar ist. Wir
erinnern uns, als wir versuchten, sich mit dem LoopBack-Rest-API Explorer anzumelden,
verwendeten wir den Kundenendpunkt, um sich beim System anzumelden.
Das ist genau das, was ich hier im Code mache.
Also sagen wir diese AuthService.login und hier sehen Sie, dass
es diese freien Parameter hier,
den Benutzernamen und das Passwort als erstes JavaScript-Objekt hier nimmt,
und dann spezifiziere ich auch diesen user.remember., .remember ist das Flag
aus dem Remember me Checkbox, das wir in unserem Login-Komponenten Dialog dort.
Also, wenn der Benutzer überprüft, dass in den Benutzerinformationen
automatisch vom SDK beibehalten werden.
Der Authentifizierungsdienst, der im SDK bereitgestellt wird.
Jetzt sehen Sie, dass ich
keinen Autorisierungsdienst explizit implementieren muss, der
mir automatisch über
die Kunden-API zur Verfügung steht, die hier als Dienst verfügbar ist.
Also, so melde ich mich den Benutzer hier an,
und wenn sich der Benutzer anmeldet, gibt dies
ein JavaScript-Objekt zurück und vom JavaScript-Objekt bekomme ich den
res.user.. Benutzer liefert die Informationen des Benutzers für mich und ich
schicke dies einfach an meine HeaderComponent hier.
Also gehen Sie in die HeaderComponent.
Also lassen Sie uns in die Headerkomponente gehen,
und in der Datei HeaderComponent.ts
werden Sie sehen, dass ich hier die Kunden-API und den
Kunden importiere und Sie werden auch feststellen, dass in der Kunden-API,
ich hier angeben, dass ich sage,
dieser Kunde ist dieser AuthService GetCachedCurrent.
Wenn also ein Benutzer in den aktuell angemeldeten
Benutzern gesperrt ist, werden Informationen in den AuthService umgewandelt, was nichts anderes als die Kunden-API ist.
Also, wenn ich dies GetCachedCurrent aufrufe, wird dies den aktuell angemeldeten Benutzer zurückgeben.
Wenn kein Benutzer angemeldet ist,
gibt dies null zurück.
So kann ich überprüfen, ob ein Benutzer gerade angemeldet ist oder nicht.
Also, wenn der Benutzer gerade angemeldet ist, dann
erhält this.customer die Informationen über den Kunden, der geladen wird.
Die Kundeninformationen einschließlich Vorname, Nachname,
die E-Mail und das Profil des anderen Nutzers stehen zu diesem Objekt this.customer zur Verfügung.
Also, hier überprüfe ich, um sicherzustellen, dass der this.customer nicht null ist.
Wenn es nicht null ist, werde ich den Benutzernamen in
this.customer.username speichern und auf diese Weise, wenn
der Benutzername gesetzt ist, dann
wird mein Header in der Symbolleiste in meiner HeaderComponent den Namen des Benutzers dort widerspiegeln.
Nun, um den Benutzer abzumelden, alles, was ich mache, ist, setze ich den Benutzernamen und
die Kundenvariablen auf null und dann rief ich einfach authService.log an,
AuthServices ist CustomerAPI.Logout, und so melde ich mich den Benutzer aus.
Wenn sich der Benutzer abmeldet,
werden seine Anmeldeinformationen vollständig zerstört.
All dies wird automatisch vom Kunden-API-Dienst erledigt
, der in meinem LoopBack SDK verfügbar ist, das ich gerade dort gebaut habe.
Sie bemerken also, dass, wie der LoopBack SDK
Builder die Dienste und die Modelle und alles, was ich brauche, und in meiner Angular-Anwendung
aufbaut, ich diese einfach importiere und
sie dann zum Konfigurieren meiner Angular-Anwendung verwende.
Sobald ich
das LoopBack SDK mit dem LoopBack SDK Builder erstellt habe, ist alles, was mir übrig bleibt,
die Komponenten und ihre Ansichtsvorlagen zu implementieren, die den Rest enthalten.
Die Dienste werden automatisch vom LoopBack SDK Builder für mich erstellt,
die Modelle werden automatisch für mich erstellt und alles, was ich tun muss, ist,
diese in alle Komponenten zu importieren, in denen ich sie verwenden muss.
Beachten Sie also, wie diese Angular-Anwendung aktualisiert wurde, um das LoopBack SDK zu verwenden.
Wenn Sie nun weitere Informationen darüber benötigen, wie das LoopBack SDK verwendet werden soll,
können Sie sich auch die Dokumentation des LoopBack SDK Builders ansehen.
Wenn Sie also zum LoopBack SDK Builder wechseln,
ist ein Link dazu in den zusätzlichen Ressourcen für diese Lektion verfügbar.
Im LoopBack SDK Builder stehen
Ihnen alle Informationen
zur Verfügung, die Sie benötigen, um das SDK zu verwenden, das vom LoopBack SDK Builder erstellt wurde.
Also, wenn Sie in die Wiki-Dokumentation gehen.
In der Wiki-Dokumentation finden Sie eine Menge Erläuterungen dazu, wie der LoopBack SDK
Builder sein kann oder das vom LoopBack SDK Builder generierte SDK verwendet werden sollte.
Also habe ich gerade diese Dokumentation durchgegangen, um herauszufinden, wie man
das SDK nutzt, das vom LoopBack SDK Builder erstellt wurde,
und dann meine Angular-Anwendung neu konfiguriert, um diese für
die Interaktion mit meinem LoopBack-Server zu verwenden.
Damit habe ich es Ihnen schnell demonstriert, wie
Sie Ihre Angular-Anwendung erstellen und
das SDK nutzen können, das vom LoopBack SDK Builder erstellt wurde,
um aus Ihrer Angular-Anwendung auf Ihren LoopBack-Server zuzugreifen.
Ein ähnlicher Ansatz ist auch für Ihre Ionic Anwendung geeignet.
Für die Native Script-Anwendung erstellen Sie das SDK mit NG2 native in
der Befehlszeile anstelle von NG2 web, wie wir es beim Erstellen dieses SDK verwendet haben.
Mit dieser kurzen Einführung, wie wir
den LoopBack SDK Builder nutzen können, um das SDK zu erstellen und
es dann innerhalb unserer Angular-Anwendung
zu nutzen, kommen sie zum Ende dieser Übung.