MEAN Stack: Lerne eine E-Commerce-App mit Angular 12, PrimeNG und NodeJS [2024]

1. Was werden wir machen: Sie werden eine großartige Anwendung erstellen, die eine E-Commerce-Plattform ist. Und mit dieser E-Commerce-Plattform, werden Sie in der Lage sein, einige Animationen zu machen. Sie werden Banner haben, Sie können sie steuern. Sie haben eine Kategorie für Ihre Produkte und Sie werden eine vorgestellte Produkte Banner und auch, wenn Sie zu einer bestimmten Kategorie wie dieser gehen, werden Sie nur die Produkte sehen, die unter dieser Kategorie sind. Und auch, Sie werden in der Lage sein, das vorgestellte Produkt hier zu sehen, das Sie im Admin-Panel steuern können, wie ich Ihnen zeigen werde, und auch, wenn Sie zum Produktdetail gehen, werden Sie alle Details über ihr Produkt sehen, die wie Sie sehen einem Namen oder Titel und der Bewertung des Produkts, diese Menge. Und Sie können es zu Ihrem Warenkorb hinzufügen und Sie werden die vollständige Beschreibung sehen, die wir direkt im Admin-Panel sein können. Und auch Sie werden eine Galerie des Produkts haben. So werden Sie in der Lage sein, diese Galerie mit Ihrer Hand zu bauen. Wir werden diese Galerie nicht mit einer Bibliothek machen. Nein, wir werden es von Hand machen. Sie werden lernen, wie Sie die Realität von Komponenten in Angular verwenden. Und auch, wir werden sehen, wie man in ihren Warenkorb geht und Artikel in ihren Warenkorb legt. Und Sie werden auch die Benachrichtigungen und die Toast-Benachrichtigungen sehen. Und Sie werden in der Lage sein, in den Warenkorb zu gehen. Sie können Ihren Warenkorb verwalten, Sie können Artikel von der Karte löschen. Sie können auch die Menge ändern und alles wird sofort berechnet, nachdem Sie die Menge aktualisiert haben. Alles wird beobachtet. Also werden wir unsere x js verwenden, um unseren Warenkorb zu beobachten und es wird sofort aktualisiert jedes Mal, wenn der Benutzer aktualisiert oder ein Produkt in den Warenkorb legt. Außerdem haben wir eine Checkout-Seite, auf der der Benutzer seine Daten eingeben und eine Bestellung aufgeben kann. Und er kann auch die Bestellung bekommen und eine Dankeschön Seite bekommen. Und auch werden wir mit dem Admin-Panel arbeiten. Admin-Panel enthält alle Dashboards, die Sie benötigen. Wie viele Bestellungen, wie viele Produkte alle aus der Datenbank stammen, aus Rayon-Daten, nichts ist hartcodiert. Außerdem erfahren Sie, wie Sie das Produktfenster erstellen, damit Sie das Produkt verwalten, löschen, bearbeiten oder sogar ein neues Produkt hinzufügen können. Beim Hinzufügen neuer Produkte, werden Sie in der Lage sein, auch eine große Komponente zu verwenden, wie diese Noten Drop-Down-Schalter Taste. Sie werden auch einen großartigen Editor verwenden. So wird es für Sie alle Informationen im Front-End reflektieren. So werden Sie keine Kopfschmerzen haben, um die Komponente oder die Beschreibung des Produkts zu stylen, aber Sie werden sehen, wie Sie den Benutzer Stylet mit einem benutzerfreundlichen Editor lassen können , wie Sie hier sehen. Und auch lernen Sie, wie Sie Bilder auf Ihren Server hochladen. Und dann können Sie all diese Bilder verwenden und dann eine Galerie für Ihre Anwendung und für Ihr Produkt erstellen. Etwas anderes mit Kategorien, werden wir die Symbole verwenden. Wir werden auch einige Filterung auf dem Tisch oder Sortierung verwenden. Und auch, Sie werden auch einen Farbwähler verwenden, wie Sie hier sehen. Wir können diese großartige Komponente auch verwenden, um Farben aufzuheben und auch die Kategorien zu aktualisieren. Alle Arbeit ist mit realen Daten, nichts ist gefälscht, nichts ist hartcodiert. Wir werden wirklich wie ein Praktisches lernen. Und darüber hinaus lernen Sie eine tolle Struktur mit Angular. Wie können Sie Ihre Dateien strukturieren, wie Sie eine gemeinsame Stile erstellen können, und wie Sie eine wiederverwendbare Module und Komponenten, die wie jedes große Unternehmen gebaut werden können. Außerdem gibt es einen Befehl. Sie werden in der Lage sein, die Bestellungen zu verwalten und dann können Sie den Status der Bestellungen ändern und es wird auch im Admin-Panel angezeigt. Und Sie werden auch die Bestelldetails sehen. Wir greifen komplizierte Datenstruktur aus der Datenbank mit unserer API mit NodeJS und auch dem Kunden M4 und verbinden Kundeninformationen mit der Bestellung. Und auch, wir werden ein Management für den Benutzer tun. Wir werden in der Lage sein, die gesamte Verwaltung unserer Benutzer zu sehen. Und wir werden in der Lage sein, die Rolle der Benutzer zuzuweisen, wenn er admin ist oder nicht. So wird er in der Lage sein, in unsere Seite oder auf die Admin-Seite zu schauen oder nicht. Und auch wir werden mit wie einen tollen Blick in bieten, wir werden den Login, die Authentifizierung, die Web-Token verwenden , um den Benutzer zu authentifizieren und anzugeben, ob der Benutzer admin ist oder nicht. All das. Sie werden es durch Angular, durch ein X Mono Repo lernen . Und Sie werden auch lernen, wie man eine großartige Anwendung wie diese Anwendung baut, werden Sie eine Menge Dinge lernen. Du wirst Styling lernen. Sie lernen, wie Sie das Projekt strukturieren. Sie werden sehen, wie große Unternehmen codieren, wie sie gemeinsam genutzte Module erstellen. Und sie werden in der Lage sein, schneller, mehr und mehr Anwendungen zu entwickeln . Am Ende dieses Kurses werden Sie eine Menge Dinge lernen, NodeJS, MongoDB und auch eckig, und dann ein X Mono Repo und RX und auch die RX JS Observables. Sie werden sie in der Praxis verstehen. Bist du bereit? Lasst uns dafür anfangen. 2. Was ist MEAN: Okay, in dieser Vorlesung werden wir wissen, was gemein ist Stack. Aber zuerst, lassen Sie mich Ihnen vorstellen, was ein Technologie-Stack im Allgemeinen ist? Ein Tech-Stack ist eine Liste aller Technologien und Dienste, die zurückkamen , dass sie zum Erstellen und Ausführen einer einzigen Anwendung verwendet werden. Zum Beispiel besteht die soziale Seite Facebook aus einer Kombination von Codierungs-Frameworks und Sprachen, einschließlich JavaScript, HTML, PHP und React js. Und das ist Facebook-Technologie-Stack. Zum Beispiel habe ich hier eine mittlere Statistik aufgelistet, die MongoDB Express Angular Node.js ist, wie wir später erklären werden, Lampe verwendet die Technologien Linux-Betriebssystem, Apache Server, MySQL-Datenbank, und als Will PHP Programmiersprache als auch. Verheiratet ist MongoDB, Express, reagieren oder React Native und NodeJS. Also, was bedeutet stat bedeutet, dass Stack für Technologien verwendet wird. Also für die Datenbank, in der ich meine Daten speichern werde, verwende ich MongoDB. Mongodb ist eine sehr spärliche Datenbank, die mir viele Funktionen bietet, die ich meine Daten leicht abrufen und filtern kann. Express wird zum Erstellen von Web-APIs verwendet, bei denen ich Daten aus meiner Datenbank erhalte und erstelle oder lösche. Und NodeJS ist das berühmte Framework für Aufbau eines Back-End-Anwendungen und das Ausführen von Webservern. Und schließlich, Angular. Angular ist ein Hauptzweck unseres Kurses. Wir werden viel über Angular lernen. Angular ist ein Front-End-Framework, das von Google bereitgestellt wird, um hauptsächlich Webanwendungen und auch plattformübergreifende Anwendungen zu erstellen, um Ihre Anwendung im Web oder auf mobilen Geräten zu erstellen. Bieten Sie eine großartige Struktur, um Ihre Anwendung zu konstruieren und es einfach zu machen, zusammen mit einem großartigen Werkzeug kombiniert zu werden und auch eine sehr schnelle Leistung und sichere Produktionsbuilds zu bieten. Lernen. All diese Technologien allein werden Ihre Erfahrungen nicht erfüllen , um zu erfahren, wie diese Technologien zusammenarbeiten können. Denn wenn Sie keine praktische Arbeit oder ein reales Projekt machen, werden Sie sie nicht in Wirklichkeit lernen. Sie werden nur Kurse sehen, die sie nur die Dokumentation jeder Technologie lesen. Aber hier in diesem Kurs haben wir auf die Idee gekommen, eine voll funktionsfähige E-Commerce-Website zu bringen. Und mit dieser Website werden Sie die MongoDB verwenden und mit Express verbunden. Und Express wird mit Angular verbunden sein und alle interagieren mit Node.JS. Jede Technologie hat Verantwortung. Und wir werden im Detail sehen, wie wir diese Verantwortung in einer realen funktionalen Anwendung umsetzen können. Sonst bin ich sicher, dass Sie es nicht lernen werden. lernen, benötigen Sie einen praxisnahen Anwendungskurs. 3. Wer kann diesen Kurs machen: Okay, in diesem Vortrag möchte ich erklären, wer diesen Kurs nehmen kann. Was sind die Kursvoraussetzungen? Also für mich würde ich sagen, dass, wenn ich bereits eine kleine grundlegende Angular-Anrufe wie ein Grundwissen von Angular bekommen würde, dann ist dieser Kurs für mich geeignet. Wie du einen sehr, sehr einfachen Angular brauchst. Wie Sie wissen müssen, was Komponente ist, was ist Service, was ist Modul? Sogar ich erkläre sie auch schnell. Aber wenn Sie etwas Praktisches tun, werden Sie sie verstehen. Ich habe es in gewisser Weise getan, wie am Anfang. Ich erkläre sie sehr detailliert. Und dann mit der Zeit, weil wir mehrere Komponenten, mehrere Dienste und mehrere Module erstellen werden, werden Sie sich daran gewöhnen. Sie müssen auch ein Grundwissen mit TypeScript kennen. In diesem Fall reichen Grundkenntnisse mit TypeScript und JavaScript wirklich aus, um sich anzumelden und zu diesem Kurs zu gehen. - Und auch. Wir brauchen ein Styling und Templating. HTML- und CSS-Kenntnisse sind ebenfalls erforderlich. Sie werden also den CSS-Code verstehen, den ich tippe, selbst ich erkläre es Punkt für Punkt und ich zeige Ihnen, wie, wenn ich Padding oben setze, was passiert? Wie, wenn ich die Schriftfarbe ändere, wie ich einen Box-Schatten mache, wie ich Grenze für die Schaltfläche mache, et cetera. Also alle diese drei Informationen, die Sie wissen müssen, bevor Sie den Kurs anmelden. Wenn nicht, würde ich es vorziehen, dass Sie diesem Kurs sehr langsam folgen, denn selbst das habe ich alle hier erwähnten Punkte erläutert. Aber ich bevorzuge Studenten, die ein sehr grundlegendes Wissen über eckige haben. Und auch möchte ich erwähnen, dass dieser Kurs in Anfängerweise gemacht wird. Ich habe es nicht sehr kompliziert gemacht. Zum Beispiel verwende ich keine sehr komplizierte Brillenstruktur und mag auch , wie ich die Beziehungen zwischen Klassen viel Erweiterung und Vererbung machen kann. Nein, das habe ich nicht getan. Ich habe es mit einem Grundwissen gemacht. Also, wer ist frisch fertig Angular Kurs, theoretisch oder praktisch? Er kann auch sehen, wie die Dinge implementiert werden können, und es wird Ihr Wissen über Angular erweitern , um mehr und mehr Anwendungen zu erstellen, und Sie wissen, wie man sie auch strukturiert. Dieser Vortrag wird auf dem Back-End-Teil über NodeJS angewendet. Und NodeJS, wir werden von vorne anfangen und Sie werden sehen, was ich mit jedem Wort, das ich dort mache, meine. Das war's also. Wenn Sie irgendwelche Kenntnisse haben, auch, dieser Kurs ist gut für Sie. Aber ich, wie ich Ihnen sagte, Sie müssen es sehr langsam folgen. Sie müssen mehrere Notensysteme wiederholen. Sie müssen immer wieder einige Videos wiederholen. Dann erhalten Sie die Informationen und Sie werden verstehen , dass es Ailey einfacher für Sie danach kommt. 4. Nodejs installieren: Um mit der Entwicklung zu beginnen, brauchen wir immer das Paketmanagement. Die Paketverwaltung kommt mit NodeJS-Anwendung. Also, um es zu installieren, spielt es einfach in Google NodeJS und gehen Sie zu Download. Und Sie werden den Download für alle Betriebssysteme sehen. Zum Beispiel habe ich hier für Windows und auch für Mac OS. Es gibt zwei Typen wie LTS, die für die meisten Benutzer empfohlen wird, und die aktuelle, die die neuesten Funktionen sind. Besser, immer eine stabile Version zu erhalten, die für die meisten Benutzer empfohlen wird. Hier können Sie Ihre Installation basierend auf Ihrem Betriebssystem auswählen. Und es wird einfach eine Anwendung sein, wie jede Anwendung, die Sie installieren können. Danach können Sie diese Anwendung herunterladen und ausführen. Und es wird wie jede normale Anwendungsinstallation sein. Also, um sicher zu sein, danach beenden Sie alle diese Schritte. Sie müssen einige MPM-Kommentare ausführen. Um MPM-Befehle auszuführen, können wir Visual Studio Code verwenden. Nachdem Sie den Visual Studio-Code geöffnet haben, sehen Sie hier die neuesten Projekte, die Sie haben. Aber zum Beispiel müssen wir das Terminal von Visual Studio-Code öffnen. Also werde ich hier gehen und Control und J. sagen und dann werde ich das Terminal öffnen lassen. Und im Terminal können wir zum Beispiel einen Kommentar NodeJS platzieren. So können wir sagen, zum Beispiel, NPM-Version. Und wir würden das vollständige Detail Jungfrau über die installierte Node.js bekommen. Danach werden wir in der Lage sein, NodeJS-Paketverwaltung zu verwenden, wo es viele Bibliotheken gibt, die wir in unserer Anwendung und unseren Entwicklungen verwenden können. 5. Einstellung, MongoDB: Für unseren E-Shop benötigen wir eine Datenbank. Und die Datenbank, wir brauchen keine Software zu installieren. Wir werden MongoDB, Atlas verwenden. Mongodb bietet jetzt einen Online-Datenbankspeicher an, was bedeutet, dass die Datenbank bereits in der Cloud ist. Was wir tun müssen, nur um auf die URL zu gehen, die ich mit dieser Vorlesung angehängt und erstellen Sie ein Konto hier und registrieren Sie sich und dann in Ihr Konto schauen. Nach der Protokollierung sehen Sie diesen Bildschirm, den Sie benötigen, um ein Projekt zu erstellen. Zunächst einmal müssen Sie ein Projekt für unseren E-Shop erstellen. Also gehen Sie hier und sagen, ich will ein Projekt, das zum Beispiel jeder Hub ist . Und ich klicke auf Weiter. Und dann erstellen Sie das Projekt. Danach benötigt das Projekt einen Cluster. Wir müssen also einen Cluster aufbauen, in dem wir unsere Datenbank anbieten. Hier gibt es gemeinsame Cluster, die kostenlos sind. Sie können es verwenden und den Server auswählen, der Ihrem Land am nächsten ist. Zum Beispiel werde ich diesen verwenden, den Standardwert. Und dann nach dem Erstellen des Clusters sind wir bereit, unsere Datenbank zu erstellen. Die Datenbank in MongoDB namens Sammlung. Sie müssen also zu den Sammlungen gehen und eine neue erstellen, basierend auf Ihren Bedürfnissen. Wir haben bereits eine, die wir für den Kurs im Projekt 0 erstellt haben. Hier gibt es Sammlungen, bei denen ich mehrere Datenbanken erstellt habe. Ihr Teil besteht also nur darin, ein Konto zu erstellen und Cluster zu erstellen und Ihre eigene Sammlung zu erstellen, die wir im Kurs verwenden werden. Wir werden später sehen, wie man die Verbindung zwischen unserem Back-End-Code und der MongoDB in der Cloud herstellt. 6. PostMan installieren, um unsere API's auszuprobieren: Wenn wir APIs erstellen, müssen wir sie testen. Sie können Ihre APIs mit einer Front-End-Anwendung wie React oder Angular oder Vue js testen. Aber wir werden in diesem Kurs zuerst mit dem Backend beginnen. Der beste Weg, dies zu tun und die APIs zu testen, ist die Installation eines Tools namens Postman. Gehen wir zu Google. Sie gehen zum Download Postman. Und hier finden Sie basierend auf Ihrem Betriebssystem. Also hier werden Sie wählen, laden Sie die Anwendung. Und nachdem es heruntergeladen wurde, wird es ein normales Setup wie jede Anwendung sein. Nach dem Öffnen der heruntergeladenen Datei erhalten Sie eine Benachrichtigung, wenn Sie Mac OS verwenden. Und es wird Sie auffordern, diese Anwendung in den Anwendungsordner zu verschieben. Und danach sehen Sie, dass sich diese Anwendung in Ihrem Anwendungsordner befindet. Dasselbe für Windows. Es ist normal, wie jede kleine Anwendung zu installieren. Nach dem Öffnen der Anwendung können Sie APIs testen. Lasst uns eins testen. Wenn Sie zu Google gehen und JSON-Platzhalter eingeben, sehen Sie, dass der erste Link einige gefälschte APIs ist. So können Sie eine GET-Anfragen testen oder Anfragen posten. Also lasst uns das mal probieren. Es steht hier. Als GET-Anfrage gehe ich zum Postboten und öffne dann eine neue Registerkarte mit der GET-Anfrage und platziere den Link, den ich vom JSON-Platzhalter kopiert habe, und drücke Senden, ich bekomme eine Antwort. Diese Antwort kommt als JSON. Und auf die gleiche Weise werden wir unsere APIs erstellen. 7. Anfänge mit dem Backend: Herzlich willkommen im dritten Abschnitt dieses Kurses. Wir werden Einführung darüber haben, mit dem Back-End zu beginnen. Was ist ein Backend? Im Software-Engineering beziehen sich die Begriffe Front-End und Backend auf eine Trennung von Bedenken zwischen der Präsentationsschicht und der Datenzugriffsebene. So wird jede Webanwendung und mobile Anwendung als Front-End betrachtet. Backend ist der Teil, in dem ich Daten halte. Wieder eine Datenbank oder ein Dateiserver. Und der Server selbst kann als Back-End betrachtet werden. Also lasst es uns so haben. Das Frontend zeigt die Daten an und das Backend hält diese Daten an einem sicheren Ort namens Server. Wir müssen irgendwie mit diesen Daten umgehen, die auf dem Server gespeichert sind und sie dem Client dienen. Und mit einigen Programmiersprachen wie Java, SQL und auch keine GS, die wir in diesem Kurs tun werden, um diese Daten an den Client auf eine schöne Art und Weise zu senden, um sie in HTML, CSS und JavaScript-Bibliotheken. In der nächsten Vorlesung werden wir sehen, wie das Frontend mit dem Backend kommunizieren kann, um diese Daten zu erfassen, die RESTful-APIs genannt wird. 8. Übersicht zu unserer RESTful: Werfen wir einen Blick auf unsere RESTful API, um zu sehen wie Daten zwischen dem Client und dem Server ausgetauscht werden. Was ist die Architektur der RESTful API? Wir haben den Client und wir haben einen Server, und sie tauschen Daten über HTTP-Protokoll aus. Dies ist das grundlegende Konzept der RESTful API. Es gibt auch Operationen zum Erstellen von Daten, Lesen von Daten, Aktualisieren und Löschen von Daten. Seine Operationen können über das HTTP-Protokoll durchgeführt werden. Es gibt spezifische Methoden des HTTP-Protokolls, die diese Operationen ausführen, die wir zuerst Operationen aufrufen, was ist der Unterschied zwischen RESTful API und der Front-End-Route? Die RESTful-API bringt Daten. Die Front-End-Dürre zeigt die Daten oder Rendern einer bestimmten Seite. Wenn Sie Ihren Browser öffnen und RESTful API-Link setzen, wenn Sie Zugriff auf diese Daten haben, dann erhalten Sie eine Zeichenfolge, die aus JSON- oder XML-Datei besteht. Http-Protokoll ist in der Lage, eine Seite mit HTML CSS zu rendern und bringen Sie Ihre Daten. So HTTP-Methoden im Allgemeinen sind sie GET, post, PUT und delete, die die groben Operationen sind. Aber in HTTP-Methoden werden sie so genannt. Also schicke ich eine Anfrage an die Datenbank oder an das Back-End im Allgemeinen, um einige Daten durch die Rest-API zu erhalten. Zum Beispiel, wenn Sie eine Produktliste über die API erhalten, wird es mir Array von Liste von Produkten geben. Wenn Sie ein einzelnes Produkt erhalten, Umgehung der ID dieses Produkts, wird es mir JSON-Datei mit allen Details des Produkts geben. Wenn ich ein Produkt aktualisieren möchte, sende ich eine PUT-Anfrage mit der Idee für das Produkt und füge auch die neuen Daten hinzu. Und die Antwort wird das gleiche Produkt sein, aber mit anderen Daten. Und das Löschen eines Produkts wird nur die ID des Produkts mit Löschanforderung übergeben. Erstellen eines Produkts, müssen Sie ein neues Produkt zu posten. Also verwende ich die Hauptroute der API der Produkte und dann übergebe ich neue Daten, die Daten, die zum Beispiel Name Ihres Produkts und des Bildes, und das sind Teiche, eine neue ID mit den neuen Namen des Produkts und natürlich das Bild. Dies sind unsere API-Anfragen, um die Daten zu erhalten oder Daten auf dem Server zu veröffentlichen oder zu löschen oder zu aktualisieren. Und ich benutze api Slash v1, was die Version eins bedeutet. Wenn Sie also Ihre API in Zukunft aktualisieren möchten, fügen Sie eine neue Version hinzu. So können sie Benutzer immer noch die älteren Versionen Ihrer API verwenden. Das Gleiche für Bestellungen und die Benutzer. In diesem Fall haben Sie die gleiche Sequenz, aber Sie müssen nur Ihre Daten planen, oder? Das Erstellen eines Webservers mit NodeJS ist sehr einfach. Lassen Sie uns das in der nächsten Vorlesung sehen. 9. Den Backend-Server mit Express erstellen: Lassen Sie uns anfangen, unseren Back-End-Server zu erstellen, oder sagen wir unseren Webserver, wo wir unsere APIs an den Client rufen werden. Nachdem wir unseren Visual Studio-Code in den Ordner Back-End-Ordner geöffnet haben, wie wir ihn zuvor strukturiert haben, führen wir einen Befehl npm init in MPM aus, es wird uns nach einem Paketnamen fragen. Ich habe E-Shop, eine Jungfrau. Ich drücke Enter description, sagen wir etwas Backend für den E-Shop zum Beispiel. Und dann der Einstiegspunkt wie wo die Anwendung starten wird, setze ich app.js und dann einige, einen weiteren Kommentar. Wir drücken die Eingabetaste und dann wird es uns fragen, dass alles in Ordnung ist. Wir drücken die Eingabetaste. Dann werden wir sehen, ein Paket Jason erstellt wird. Also lassen Sie uns jetzt unsere Datei erstellen bis js, wo wir unseren Einstiegspunkt unserer Anwendung starten werden. Also werde ich hier zum Beispiel console.log, Hello World setzen. Und dann wird es Hello World drucken, wenn ich diese Anwendung ausführe. Aber wie wir diese Anwendung ausführen, empfehle ich, eine Bibliothek namens NADH Monde zu verwenden, die ein Dienstprogramm ist, das auf Änderungen unseres Quellcodes überwacht , wenn wir Control S drücken oder diese Anwendung JS speichern, wird es Starten Sie die Anwendung automatisch erneut. Nachdem wir diese Bibliothek installiert haben, sehen wir, dass sie in einem Paket JSON als benutzerdefiniertes Skript unabhängig ist, können wir es hier hinzufügen, wie es ein Kommentar ist, um die Anwendung mit Node Monitor zu starten. Also kann ich sagen, Startknotenmonitor oder Knoten stöhnen. App Punkt JS. In diesem Fall lasse ich die Anwendung mit der Einstiegspunktdatei app.js starten . Probieren wir es jetzt aus. Lassen Sie uns ab.js speichern und dann npm start schreiben. Und nachdem ich die Anwendung gestartet habe, werde ich Hello World sehen. Und die Anwendung läuft noch. Es erkennt also jede Änderung, die ich in der Anwendung mache. Also sage ich helloworld mit der Änderung war Ausrufezeichen, und ich sehe, es hat sich geändert. Lassen Sie uns die Welt verändern E-Sharp. Wir werden hallo e-shop sehen. Das ist großartig. So haben wir bis jetzt nur eine laufende Anwendung, aber wir haben noch keinen Server. Um also einen Webserver zu erstellen, lassen Sie uns Express installieren, die eine berühmte Bibliothek von Node.JS ist, um einen Server zu hosten. Nach dieser Installation werde ich es auch in Abhängigkeiten sehen. Aber lassen Sie uns dieses Konsolenprotokoll entfernen und es eine Konstante erstellen, nennen Sie es Express und rufen Sie die Bibliothek Express mit dem Schlüsselwort require express auf. Es wird es automatisch von Knotenmodulen aufrufen. Und lassen Sie uns eine Konstante erstellen, die App genannt wird. Und diese App mit Aufruf eine Funktion namens Express, die wir zuvor erwähnt oder definiert haben. Dieser Webserver erfordert das Abhören eines bestimmten Ports. Also sage ich, dass zuhören. Und ich gebe, zum Beispiel, dreitausend als ein Hafen an. Und es gibt einen Rückruf. Callback wird uns geben, wir alle werden ausgeführt, wenn es eine erfolgreiche Erstellung des Servers. Also im Callback kann ich jede Nachricht in der Konsole drucken. Zum Beispiel werde ich sagen, der Server wird jetzt gestartet oder der Server läuft jetzt auf dem Link lokalen Host mit 3000 Port. Lassen Sie uns nun die Anwendung erneut ausführen. Ich werde sagen, npm start. Und wir werden einen Fehler bekommen, weil ich den Server bereits betreibe. Also lasst es uns anfangen und ich führe es wieder. Ich werde lokalen Host sehen oder der Server läuft auf localhost 3000. Wenn ich den Browser öffne und diese URL besuchen, localhost 3000, mal sehen, was wir haben werden. Ich habe es hier gesetzt und ich sehe, dass kommen, bekommen, nicht bekommen kann, weil ich keine anfängliche Route für die Anwendung angegeben habe. Wir erschaffen. Jetzt die anfängliche Route oder die Wurzel, können wir sagen, app dot get. Wir werden sehen, dass Express uns alle HTTP-Anfragen zur Verfügung stellt. Zum Beispiel PUT, löschen und auch posten. Also vergiss es. Es akzeptiert zwei Parameter. Die erste ist die Route selbst. Zum Beispiel werde ich die anfängliche Route oder die Wurzel sagen. In diesem Fall werde ich nach einem Rückruf fragen. Der Callback wird die Antwort haben, die ich an den Client senden werde , wenn er diese Route anrufen wird. Also sage ich in der Callback-Antwort, Punkt Sand, zum Beispiel, sagen wir eine Nachricht, wir können es Hallo oder API nennen, nicht Hallo World. Also, jetzt haben wir diese API. Lassen Sie uns speichern, und jetzt können wir die Anwendung erneut im Browser ausführen. Die Anwendung wird eine GetMethod aufrufen und wir erhalten als Antwort, diese hallo API. Als Zusammenfassung haben wir gesehen, wie wir unseren eigenen Server oder Webserver mit Express erstellt haben. Und wir beobachteten unsere Änderungen mit Knoten Monitor und wie wir diese Anwendung aufrufen erhalten, um eine Route zu initialisieren. Und wir laufen den Server unter einem bestimmten Port, den wir zuvor gesehen haben. Wir müssen eine API und eine Version in der URL dieses Out haben. Lassen Sie uns also sehen, wie wir das mit Umgebungsvariablen in der nächsten Vorlesung erstellen können. 10. Umgebungsvariablen lesen: Okay, also fangen wir mit Umgebungsvariablen an. Umgebungsvariablen werden normalerweise als öffentliche Variable verwendet, die in der Anwendung verwendet werden. Zum Beispiel möchte ich eine öffentliche Variable für die API-URL. Also diese API-URL, die für jede Route vorangestellt wird, die ich für meine Anwendung oder für meine API verwende. Wie wir zuvor gesehen haben, dass jede API, die wir hatten, vorangestellt ist etwas wie Schrägstrich, API Schrägstrich Version eins. Und das bedeutet, dass jede API in meiner Anwendung diese URL hat. Und dann API-Version eins. Und dann sage ich, zum Beispiel, Produkte. Und dann kann ich einige Daten in dieser API posten , löschen oder erstellen. Also nun mal sehen, wie wir dieses Präfix lesen können. Also möchte ich nicht in meiner API wiederholen, ist immer die Zeichenfolge. So kann ich es in einer Konstante beheben, die von überall lesbar ist. Und dann kann ich es an das Mikrofon übergeben, an meine Strings Routen, und dann wäre es in dieser Route lesbar. Um dies zu tun, zuerst normalerweise, nicht in der Node.JS, normalerweise haben wir eine Umgebungsvariable namens dot n oder Umgebungsdatei. Und welches Beispiel übergebe ich einen Variablennamen, den ich will, jeden Namen, den Sie zum Beispiel API-URL. Und dann kann ich die Zeichenfolge sagen, die ich übergeben möchte, die api Schrägstrich v1 ist. Und in diesem Fall werde ich diese API-URL überall in der Anwendung definiert. Aber zuerst, wie wir diese Variable aus dieser Datei in unserer Anwendung lesen können, gibt es eine Bibliothek, wir können sie von MPM-Paketen installieren. Und es nennt sich Punkt-Punkt-EMF. Also können wir nicht sagen, npm installieren dot EMF. Und diese Bibliothek ist in der Regel immer verfügbar. Und wir können es in der Anwendung JS in der Route in der Wurzel verwenden, Kein Problem. So können wir sagen, definieren oder wir können sagen, dass diese Bibliothek erforderlich ist. Also nicht EMF Schrägstrich Konflikt. Und normalerweise sollte dies in einer Zeichenfolge sein. Wenn ich sage, dass diese Bibliothek erforderlich ist, kann ich eine bestimmte Konstante verwenden, um diese Werte aus der M-Datei zu erhalten. Also werde ich hierher gehen und eine Konstante definieren. Lassen Sie uns es zum Beispiel API nennen. Und dann können wir sagen Prozess Punkt, Punkt, dann der Name der Variablen, die ich hier erstellt habe. Also kann ich API auf der Score-URL sagen. Also lasst uns alles retten. Und nun versuchen wir, diese Variable zu drucken , um zu sehen, ob sie wirklich aus dieser Datei liest oder nicht. Also lassen Sie es uns am Start tun, als wir den Server gestartet haben. Also werde ich console.log sagen, die API für Konstante. Also dann werde ich meinen Server starten, mpm start. Und hier ist es, wir haben jetzt schon definiert. Also kann ich in jeder Route, die ich habe, diese API-Variable plus die Route definieren oder übergeben , die ich möchte, zum Beispiel Produkte. In diesem Fall habe ich die vorangestellte API-Version eins plus Produkte. Wir werden das genauer in den nächsten Vorträgen sehen, um zu sehen, wie man die Route erstellt und wie man sie baut und wie man sie nennt. Das Wichtigste, was Sie jetzt wissen müssen, dass wir die öffentlichen Variablen in dieser Datei erstellen und sie überall in der Anwendung lesen können . In diesem Fall möchte ich zum Beispiel die Datenbankzeichenfolge oder die Verbindungszeichenfolge speichern . Ich kann es hier in dieser Datei speichern und zum Beispiel ein Geheimnis für die Authentifizierung, ich kann es auch hier speichern. Und wenn ich die Anwendung auf dem Produktionsserver bereitstellen möchte, werde ich diese Variablen ändern. So werden wir auch eine andere Datei haben, zum Beispiel dot EMF, aber für Produktionsserver, werden wir sehen, dass natürlich in der Vorlesung, wo wir die Anwendung Node.JS bereitstellen werden. Also nun gehen wir zum nächsten Vortrag, wo wir die echte API erstellen und wie wir JSON-Daten durch sie senden weil wir JSON-Daten für unseren E-Shop benötigen, um mit dem Frontend die Informationen über die Produkte und die Bestellung austauschen und et cetera. 11. Erste Call und Parsing erstellen: Jetzt werden wir sehen, wie man Daten zwischen Front-End und Back-End austauscht. Wir haben zuvor gesehen, wie man Daten mit dem Frontend mit der GET-Anfrage austauscht. Also senden wir Hallo API. Aber was wir getan haben, ist nur eine Zeichenfolge auszutauschen, die Hallo API ist. Also müssen wir JSON-Daten austauschen. Zum Beispiel ist das Produkt ein Objekt, besteht aus ID, Name, Bild und dem Preis. Also lassen Sie uns jetzt die Produkt-API simulieren. Also auf den ersten, Lassen Sie uns das schöne Präfix wie zuvor. Also werde ich die Backticks verwenden, die sehr hilfreich sind, um zwischen Konstanten und Strings zu kombinieren, ohne dieses Plus zu verwenden. Also jetzt, lassen Sie uns diesen Teil entfernen und ein Backticks erstellen. Und mit einem Zeichen Dollar und gebogenen Klammern. Ich werde API machen. Und dann sagen wir Produkte. Lassen Sie uns diesen Teil von hier entfernen. Und auch das hier. Und ich werde eine Konstante schaffen. Sagen wir, Produkt. Und dieses Produkt ist Objekt, enthält ID, sagen wir eine, und Name, sagen wir, Haare, Kommode. Und Bild mit, zum Beispiel, einige URL. So haben Sie hier die Möglichkeit, doppelte Anführungszeichen oder einfache Anführungszeichen auszuwählen. Aber mit JavaScript, Es ist besser, immer einfache Anführungszeichen in dieser Antwort zu verwenden. Lassen Sie uns dieses Produkt an das Front-End senden. Und wir werden die Anwendung ausführen. Jetzt haben wir die Anwendung läuft. Gehen wir zum Postboten. Postman ist Anwendung, wie wir zuvor gesprochen haben und wir sahen, wie man es installiert. Also kann ich APIs nicht wie mit GET-Methoden, Post, PUT usw. aufrufen. Also lasst uns hier unsere API 3000 und dann api Slash Version eins Schrägstrich Produkte haben . Und ich klicke auf Senden. Dann ist das Pons das Objekt, das ich bereits erstellt habe. Wir gehen also davon aus, dass wir dieses Objekt erstellen, indem die Daten des Produkts in der Datenbank oder aus der Datenbank abrufen und sie dann mit einer GetMethod an das Frontend senden. Also, was, wenn der Benutzer oder der Administrator der Anwendung des Problems nach oben, senden wir, oder, zum Beispiel, erstellen Sie ein neues Produkt. So benötigt das neue Produkt eine Daten, die vom Frontend gesendet werden. Also, jetzt lasst uns diese Muskelmethode von get to post ändern. Welches Beispiel werde ich es kopieren und sagen Post. Die Postanfragen benötigen auch Daten. Diese Daten werden vom Front-End kommen. Also, wie ich diese Daten vom Frontend bekomme, ist es sehr einfach, indem ich den Anforderungspunktkörper verwende. Also, nachdem ich die Daten des Körpers gepostet habe, werde ich sie zurück an das Frontend senden. Lassen Sie uns also eine Konstante erstellen, sagen wir ein neues Produkt. Und dieses neue Produkt wird auf Anfrage Punktkörper. Also lass es uns so machen. Konsole. Protokollieren Sie das neue Produkt. Also gehen wir zum Postboten. Postbote ändern wir diese Methode von get to post. Und der Körper der Anfrage wird zum Beispiel in der JSON-Zeile sein, die JSON ist. Und dann kann ich zum Beispiel dieses Objekt übergeben . Und wenn ich auf Senden klicke, sehen wir, dass wir eine zurückgeben. Und im Konsolenprotokoll wurde ich undefiniert. Das Problem ist also, dass der Körper nicht gut analysiert wird. Also brauchen wir etwas, das man Middleware nennt. Die Middleware ist eine Funktion, die die Kontrolle der Anfrage und die Antwort jeder API hat. Wenn also die Frontends und das JSON-Objekt, benötigen wir das Back-End, um zu verstehen, dass dies benachbart ist. Also bitte analysieren Sie es und verwenden Sie es im Back-End. Um das zu tun, müssen wir nur eine Sache von Express JS verwenden. Also müssen wir diesen JSON verwenden. Der Express akzeptiert also JSON-Daten. Und das Ding ist sehr einfach. Wie ich Ihnen schon sagte, brauchen wir eine Middleware. Und diese Middleware kann mithilfe der App-Nutzung durchgeführt werden. Und dann sagen wir Express dot JSON. Und diese Methode machen wir unsere Daten von Express verständlich, die vom Front-End gesendet werden. Und wir können hier wie Middleware tippen. Und in Zukunft werden wir sehen, dass wir alle Middleware setzen werden. In diesem Abschnitt. Zuvor wurde etwas namens BodyParser verwendet, und dieser Body-Parser wurde dupliziert. Also jetzt verwenden wir Express JSON. Wenn Sie also in den nächsten Vorträgen sehen, dass wir BodyParser verwenden, ersetzen Sie es einfach durch ausgedrückt oder JSON. Auf diese Weise garantieren Sie, dass Ihre Anwendung auf die richtige Weise ausgeführt wird. So jetzt sind wir in der Lage, ein get und auch Post der Daten zu machen. Ich werde zum Beispiel hier Friseur zu wechseln und es zu schicken. Und ich werde den Friseur zwei zurückbekommen. Jetzt ist unsere API bereit. Wir beginnen jetzt, diese API-Struktur für Bestellungen für Produkte und 40 Benutzer zu erstellen, wie wir zuvor im vorherigen Abschnitt gesprochen haben. In der nächsten Vorlesung werden wir sehen, wie diese APIs Ereignisse protokolliert werden. Zum Beispiel, wenn jemand Daten oder gute Daten postet, werden wir sie in der Konsole unserer Anwendung sperren. 12. API-Anfragen protokollieren: Es ist sehr hilfreich Fehler, dass der Entwickler zu wissen, was auf seinem Server los ist. So können wir die HTTP-Anfragen kennen und protokollieren, die vom Frontend kommen, wie Posts, get oder put oder delete. Um dies zu tun, gibt es eine sehr gute Bibliothek namens Morgan, so dass wir es verwenden können, um unsere HTTP-Anfragen zu protokollieren, die vom Frontend kommen. Also lasst uns diese Bibliothek installieren. Ich stoppe den Server, sagen m, Pm installieren Morgan. Und nach der Installation dieser Bibliothek können wir es auch mit erfordern nennen. Also hat Morgan gekostet. Erfordert. Morgan. Wir sagten, dass diese Bibliothek eine Middleware-Bibliothek ist, also müssen wir sie in App Dot verwenden Morgan. Und es gibt einige Standardoptionen, die Tiny genannt wird. Dies ist gut für den Fall, dass die Log-Anfragen in einem bestimmten Format angezeigt werden. Lassen Sie uns zum Beispiel den Server erneut ausführen. MPM Start. Also haben wir hier, dass ein Server mit Postman läuft. Lasst uns ein paar Anfragen machen. Zum Beispiel werde ich den Beitrag erneut senden. Okay, zurück zur Anwendung oder zum Code. Wir werden sehen, dass wir eine Post-Anfrage auf der API und mit ihrer spezifischen Statusnummer erhalten haben. Lasst uns ein GET machen. Auch. Hier ist ein get, Senden und zurück an die Anwendung. Und ich sehe, dass ich auch protokolliert, sie GET Anfragen. Es gibt viele Optionen für diese Bibliothek, sodass Sie Ihre Protokolle wie gewünscht formatieren können. Aber das werden wir nicht tun. Wir werden nur winzig verwenden. Und natürlich können Sie mit diesen Protokollen auf einigen Dateien sagen, all dies ist, wird hier in der Dokumentation dieser Bibliothek angezeigt. Jetzt haben wir nur eine gefälschte Daten des Produkts verwendet. Lassen Sie uns beginnen, diese Daten an die Datenbank zu binden. Also lassen Sie uns in der nächsten Vorlesung die Verbindung mit der MongoDB mit Atlas zu machen. 13. Mongoose Installation und Verbindung mit der Mongoose: Zuvor haben wir gesehen, wie man Daten des Produkts fälscht , um sie zu speichern und sie in unserer Anwendung anzuzeigen. Jetzt müssen wir die Daten in der Datenbank speichern. Und in diesem Kurs verwenden wir MongoDB. Und wie wir vorher gesehen haben, brauchen wir keine spezielle Software für MongoDB zu installieren. Wir müssen uns nur in der Cloud von MongoDB anmelden. Und dann erstellen wir unsere Datenbank und verbinden unsere Anwendung mit dieser Datenbank in der Cloud. Also vor allem, wie wir unsere Anwendung mit der Datenbank in der Cloud verbinden können. Also zuerst müssen wir eine Bibliothek namens Mongoose installieren. Mongoose ist verantwortlich für den gesamten Betrieb der MongoDB-Datenbank in der Anwendung oder einer Node.js Anwendung. Also lassen Sie uns diese Bibliothek installieren, die Mongoose genannt wird. Ich werde hier tippen npm installieren Mungo. Und wie jede Bibliothek müssen wir eine Konstante erstellen. Nennen wir es Mungo. Und das von Mongo, wir können sagen, es erfordert Mongolen. Wir können davon ausgehen, dass dieses Ding hier wie Import ist. Also importieren wir jede Bibliothek und speichern sie in einer Konstante. Normalerweise fügen wir die Verbindung zur Datenbank hinzu, bevor Sie den Server starten. Also hier werde ich sagen, Mungo, Punkt verbinden und trennen. Es fragt nach URIs. Uris oder Verbindungszeichenfolge. Ich kann es von MongoDB Cloud bekommen. Wir haben zuvor gesehen, wie man sich mit der Cloud von MongoDB verbinden und unsere Anwendung und Cluster und unser Projekt erstellen kann. Und wir sahen, dass wir mehrere Sammlungen haben, oder wir können Datenbanken sagen. Und diese Datenbanken haben wir Zugriff auf sie über unsere Anwendung. Lassen Sie uns also sehen, wie wir diese Datenbanken in Clustern verbinden können. Wenn ich zu Clustern zurückgehe, sehe ich hier eine Schaltfläche, auf der Connect steht. Wenn ich connect sage, kann ich mehrere Optionen von MongoDB verwenden. Zum Beispiel, was wir brauchen, ist die Verbindung Ihrer Anwendung. Also müssen wir eine Verbindungszeichenfolge verwenden, um sie von hier zu bekommen und sie in unsere Verbindungsmethode mit von Mongoose einfügen. also auf diese Option klicken, erhalten wir eine Verbindungszeichenfolge. Lassen Sie es uns kopieren und in unserer Anwendung haben. Also bringe ich Zitate hierher und kopiere diese Verbindungszeichenfolge. Aber wir können nicht sehen, dass diese Verbindungszeichenfolgen einen Benutzernamen und ein Passwort und einen Datenbanknamen enthalten sollten. Aber von wo aus ich diese Informationen nicht bekommen kann, ist einfach in MongoDB Cloud. Wir können einen bestimmten Benutzer verwenden, um sich mit diesen Datenbanken zu verbinden. Wir müssen nur zum Datenbankzugriff gehen und einen neuen Benutzer erstellen. Und dieser Benutzer können wir mit Datenbank in der Cloud verbinden. Also lassen Sie uns hier klicken, fügen Sie einen neuen Datenbankbenutzer hinzu. Und lassen Sie uns einen Benutzernamen, E scharfen Benutzer und das Passwort geben , Sie haben die Freiheit, ein beliebiges Passwort auszuwählen. Zum Beispiel setze ich von eins bis sieben. Er sagte, dass das Passwort zur Verfügung gestellt wird, ist sehr schwach. Also lassen Sie uns ein paar Buchstaben hinzufügen. Und dann hat es den Benutzer erfolgreich hinzugefügt. Wenn wir zu unserer Verbindungszeichenfolge zurückkehren, müssen wir diese Daten hier ersetzen. Also zuerst werde ich hier den Benutzernamen, e-Sharp Benutzer und das Passwort, das ich vorher hatte, und den Datenbanknamen eingeben. Okay, das haben wir noch nicht die Basis. Also lasst uns eins hinzufügen. Wir gehen zurück zu den Clustern. Und dann können wir hier unsere Sammlungen sehen. Und in dieser Liste von Sammlungen, die ich zuvor habe, kann ich eine neue Datenbank erstellen. Also werde ich es einen Namen E-Sharp geben, dass die Basis und den gleichen Namen für die Sammlung. Zurück nahm diese Verbindungszeichenfolge. Wir können jetzt einen Datenbanknamen hinzufügen. Also jetzt haben wir die vollständige Verbindungszeichenfolge. Wir haben vorher über Umgebungsvariablen gesprochen. Also lassen Sie uns diese Zeichenfolge in den Umgebungsvariablen speichern, also kopiere ich sie. Und dann erstelle ich zum Beispiel eine Variable, nenne sie Verbindungszeichenfolge. Und dann gebe ich ihm diesen Wert, der die Zeichenfolge ist, die ich von der Datenbank-Cloud bekommen habe. Und hier sage ich nur Prozesspunkt-Umgebungsvariable , Punkt, Verbindung, Zeichenfolge. So jetzt, wie wir überprüfen können, ob wir mit der Datenbank verbunden sind oder nicht. Wenn wir diese Methode Connect überprüfen, werden wir feststellen, dass es ein Versprechen zurückgibt. Das Versprechen wird normalerweise ausgeführt und es gibt zwei Methoden zurück. Einer ist dann, wenn seine Erfolge und eins mit dem Fehler, wenn es scheitert. Also hier werde ich dann setzen. Und dann, wenn ich Pfeilfunktion und ich Konsole eine Nachricht protokolle , ist diese Datenbankverbindung bereit. Und wenn es beim Fang scheitert. Und es ist auch Pfeilmethode. Wir können sagen, dass die Konsole den Fehler protokolliert. Lassen Sie uns versuchen, unseren Server zu starten. Also jetzt npm starten. Und wir sehen, dass es einige Benachrichtigungen gibt, die diese Veraltungswarnung sagen. Es sagt, dass der aktuelle URL-String-Parser veraltet ist. Also müssen wir eine bestimmte Variable verwenden. Daher müssen wir eine bestimmte Option als wahr verwenden, um diese Veraltungsverzögerung verschwinden zu lassen. Aber wie wir es verwenden können, sehen wir, dass diese Verbindungsmethode einen anderen Parameter namens Optionen hat. Also mit diesen Optionen ist ein Objekt, wo ich die Optionen übergeben kann, die ich will. Also lasst uns das hier kopieren. Als Option hinzugefügt. Wir haben auch eine weitere Veraltungswarnung erhalten, die die Verwendung einheitlicher Topologie ist. Dies wird auch für die Suche nach den Servern verwendet. Also lassen Sie es uns hier hinzufügen. Und lasst uns sparen. Wir bekommen immer noch Fehler. Eigentlich müssen wir den Fehler auch den Datenbanknamen in den Optionen übergeben. Also kann ich sagen, dass es ein reserviertes Wort ist, es heißt DB-Name. Und mit diesem TB-Namen kann ich den Datenbanknamen übergeben. Wir nannten unsere Datenbank in der Cloud als e-shop, dass die Basis. Und nach dem Speichern und dem Versuch, die Verbindung wiederherzustellen, sehen wir erneut, dass die Authentifizierung fehlgeschlagen ist. In MongoDB Atlas müssen Sie eine Netzwerkachse angeben. Also dieser Netzwerkzugriff, müssen Sie eine Whitelist von IPs haben, die auf Ihre Datenbank zugreifen können. Also habe ich schon zwei IPs. Ich kann eine weitere IP hinzufügen, indem ich zum Beispiel zu Google gehe und einfach eingeben, was meine IP ist. Und im ersten Suchergebnis bekomme ich meine IP direkt. Also gehe ich hierher, kopiere diese IP, und dann sage ich, füge die neue IP hinzu. Also diese IP hinzugefügt wird, kann ich sagen, mein Home-Office. Und dann klicke ich auf Bestätigen. Also zurück zur Anwendung. Wir können sehen, ob wir in der Lage sind, eine Verbindung herzustellen oder nicht. So können wir einfach noch einmal auf Speichern drücken. Und wir sehen hier, dass der Server läuft, aber wir haben noch keine Antwort vom Datenbankserver erhalten. Und wir sehen, dass die Datenbankverbindung bereit ist. Auf diese Weise verbinden wir das Problem der Back-End-Anwendung mit der Datenbank in der Cloud. Im nächsten Teil werden wir sehen, wie man Daten in diese Datenbank mit unseren APIs schreibt , die wir zuvor erstellt haben. 14. Verwendung von MongoDB: Natürlich gibt es auch ein lokales Werkzeug, um die Datenbank von MongoDB zu durchsuchen. Sie müssen unsere Klasse nicht online nutzen. Sie können auch ein Tool herunterladen, das mehr, mehr Funktionalität hat , wie wir später sehen werden, wie Export und Import von Daten. Weil ich Ihnen die Dateien und die Daten und die Datenbank, die ich erstellt habe, geben möchte, um Ihre Daten oder Datenbank nicht selbst zu füllen. Sie werden die Dateien bereit haben. So können Sie dieses Tool verwenden, um wie die Datenbanken und die Tabellen und die Dokumente auch in Ihre Datenbank zu importieren . Mit dieser Vorlesung gibt es einen Link für und etwas namens MongoDB Compass. Und das ist ein sehr großartiges Tool zum Durchsuchen der MongoDB-Datenbank. Und es ist für alle Versionen von Betriebssystemen verfügbar. Auch, wie für Windows, für einen Ponto und auch für Mac OS. Also, nachdem Sie diesen Link heruntergeladen haben, wird es Ihnen eine Anwendung geben, die Sie verwenden können. Und diese Anwendung können Sie es zu Ihren Anwendungen installieren und dann können Sie es öffnen. Okay, lassen Sie uns die installierte Anwendung öffnen. Wie ich hier zeige, habe ich es hier in meiner Anwendungsliste, in meinem Mac-System. Und es wird für mich den MongoDB-Kompass anhängen. Wie Sie hier sehen, initialisieren wir es. Es wird also initialisiert. Und lassen Sie mich ein wenig wie Give it größerer Größe zu sein. Also jetzt fragt es mich, eine Verbindungszeichenfolge hinzuzufügen, die wir in der vorherigen Vorlesung erstellt haben, damit ich meine Verbindungszeichenfolge kopieren und dann hier einfügen und dann auf Verbinden klicken kann. Ich habe bereits erklärt, wie man den Benutzernamen, das Passwort und auch den Datenbanknamen erhält. Also habe ich das schon getan. Also ist es in der letzten Zeit. Ich habe hier den E-Shop-Benutzer und auch MongoDB und all diese Informationen dazwischen. Also, jetzt müssen wir auf Connect klicken. Und dann wird es eine Verbindung zu meiner Datenbank herstellen. Wie Sie sehen, habe ich alle meine Cluster aufgelistet, die ich im Atlas habe. Also haben wir alle Datenbanken, die ich zuvor erstellt habe. Und auch die Datenbank, mit der wir arbeiten werden. Sie haben also zwei Möglichkeiten. Vielleicht können Sie MongoDB Atlas oder MongoDB Compass, MongoDB Compounds verwenden. Sie mussten nicht in den Browser schauen und auf die Website von MongoDB Atlas schauen. Aber Sie können die Verwendung lokal hören. Öffnen Sie einfach eine Anwendung, fügen Sie Ihre Verbindungszeichenfolge hinzu, und sie wird hier immer gespeichert. In diesem Kurs werde ich MongoDB Atlas verwenden. Und wenn wir für die Bereitstellung gehen, werde ich MongoDB Compass verwenden, weil wir Daten importieren und exportieren müssen. Und auch. In der nächsten Vorlesung später werde ich Ihnen zeigen, wie Sie Ihre Datenbank importieren und speichern. Sie müssen nicht alle diese Informationen manuell eingeben, wie z. B. die Datenbank. So haben Sie bereits eine Datenbank, die Sie in Ihre Sammlung importieren können und dann können Sie sie verwenden. Ich möchte ihren Kurs verfolgen. 15. Schreibdaten in der Datenbank mit API: Perfekt, Also bin ich so froh, dass wir jetzt eine erfolgreiche Verbindung zur Datenbank haben, lassen Sie uns jetzt versuchen, einige Daten in die Datenbank zu posten, damit wir sie in der MongoDB Cloud sehen können. In der relationalen Datenbank. Zuvor haben wir gesehen, dass die Beziehung zwischen den Tabellen, aber hier in MongoDB ist es anders zu erwerben. Wir können betrachten, die Namenstabelle ist eine Sammlung. Wie wir hier sehen, haben wir bereits eine Datenbank. In dieser Datenbank gibt es eine Sammlung. So können wir sagen, die Sammlung ist eine Tabelle in relationaler Datenbank. Ich habe die Datenbank gelöscht, die wir zuvor erstellt haben. Ich werde ein neues mit der Tabelle erstellen, nennen wir es Produkte. So haben wir zum Beispiel gesagt, dass unser Datenbankname e-shop ist. Datenbank. Produkte ist der Kollektionsname. Also habe ich die Datenbank. Jede Datenbank und darin gibt es eine Tabelle oder eine Sammlung. Wir können es Produkte nennen. Ok, großartig. Also, jetzt haben wir, sagen wir diese Sammlung, lassen Sie uns Daten zu dieser Sammlung veröffentlichen. Also in Postman, wie wir zuvor gesehen haben, haben wir hier zu diesem Objekt, lassen Sie es uns in diese Datenbank schieben. Aber zuerst, was wir in der Node.JS Anwendung tun müssen, müssen wir ein Modell mit Mongoose erstellen. Modell ist das gleiche wie eine Sammlung. So können wir in MongoDB sagen, es heißt Sammlung und in Node.JS heißt es Modell. Also müssen wir ein Produktmodell erstellen. Dieses Modell enthält die Spalten, die wir für das Produkt benötigt haben. Zum Beispiel der Name oder das Bild, oder zum Beispiel die Menge des Produkts in der Lagerung in Mongoose. Dies wird als Schema bezeichnet. Und wenn wir dorthin zur Dokumentation gehen, sehen wir, dass Mongoose hier viel Flexibilität hat. So können wir Schemas erstellen. Zum Beispiel blockieren Schema, wie wir hier sehen. Und wir können den Titel des Feldes, Autor, Körper, und es gibt eine Art davon, und jedes Feld hat einige Optionen. So können Sie beispielsweise Datum Punkt angeben . Nun, zum Beispiel, wir sind in diesem Datensatz oder dieses Dokument erstellt wird, dann werden wir sehen, dass es automatisch das Datum der Zeit der aktuellen Zeit dauert. Also lasst uns einfach anfangen. Lassen Sie uns zuerst das Produktmodell erstellen. Ich gehe zur Anwendung und danach, sagen wir, verwenden und vor den APIs. Ich erstelle zum Beispiel bei Konstante, nenne es Produktschema. Und dieses Produktschema wird Mongoose Bibliothek und Schema verwenden. Und das Schema, das ein Objekt und dieses Objekt akzeptiert , wird die Felder nehmen, wie wir hier in der Dokumentation gesehen haben. Also haben wir ein neues Schema und hier können wir unsere Felder auflisten. Also lassen Sie uns unsere Felder hinzufügen, die wir vorher hatten. Also sage ich, ich brauche den Namen. Wir Typ ist Zeichenfolge. Und zum Beispiel brauche ich auch Bild. Welcher Typ auch String. Es würde die URL des Bildes enthalten. Und lassen Sie uns auch etwas wie zählen auf Lager. Zählung auf Lager. Und diese Zahl auf Lager wird eine Zahl sein. Es gibt viele Arten. Sie können die Dokumentation von Mungo überprüfen und wir werden im Kurs die verschiedenen Arten sehen , die wir für unsere Webshop-Anwendung verwenden werden. Nachdem wir dieses Schema haben, müssen wir das Modell erstellen. Also sage ich konstantes Produkt. Normalerweise beginnen die Modelle mit Großbuchstaben. So können wir sagen Produkt, das Mungo Punkt-Modell ist. Und das Modell genannt, oder die Sammlung wird Produkt genannt. Und mit dem Produktschema, das wir zuvor hier hatten. Also sage ich Produktschema, und ich drücke Speichern. Jetzt haben wir das Produktschema und das Produktmodell bereits definiert. Also jetzt müssen wir zum Beispiel mit Posting-Anfragen, wir müssen diese Post-Daten vom Front-End erhalten, das heißt, wir können Postbote oder jede andere Anwendung wie Angular oder React sagen. Und dann müssen wir diese Daten durch das Back-End empfangen, analysieren und in die Datenbank schieben. Um dies zu tun, müssen wir zuerst ein neues Produkt erstellen, zum Beispiel dieses Modells. Also lasst uns das machen. Wir können sagen const Produkt. Und dieses Produkt ist ein neues Produkt, das wir vorher hatten. Aber was sind die Bereiche dieses Produkts? Das Produkt ist also dieses Modell, das wir vorher hatten. Und wir werden die Felder dieses Produkts hinzufügen, wie der Name. Und das Bild und die Zählung auf Lager. Also werde ich hierher gehen und ich werde diese Anfrage erhalten, die ich bekommen habe. Mit dieser Bitte bekomme ich die Leiche. Und mit dem Körper im Körper schicke ich hier ID, Name, Bild, und ich kann auch auf Lager zählen. Es wird genau die gleiche Benennung hier sein, die vom Frontend kommt. Das Frontend und das Backend müssen sich also auf die gleiche Benennung für die Felder und das Objekt einigen , die an das Backend gesendet werden. Also hier sage ich, der Name ist Anfrage Punkt Körper, Punkt Name. Bild ist Anfrage Punktkörper, Punktbild. Anzahl auf Lager ist auch von der Anfrage Punkt Körper Punkt Anzahl auf Lager. Jetzt haben wir das Modell bereit, also müssen wir es nur in der Datenbank speichern. Um das zu tun, können wir sagen Produkt Punkt. Und es hat eine Methode namens Speichern. Speichern. Es bedeutet, dass es in der Datenbank speichern. Wenn wir diese Speichermethode überprüfen, gibt es ein Versprechen zurück, Versprechen mit dem Dokument. Also können wir sagen, dann gibt es ein Versprechen zurück. So können wir sagen, erstellt Produkt. Dies ist also das Produkt, nachdem es in der Datenbank erstellt wurde. Es ist also unsere eigene Methode. So können wir hier sagen, Antwortpunktstatus, dass es eine erfolgreiche Verbindung oder erfolgreiche Erstellung der Datenbank des Dokuments ist. Also kann ich hier sagen Punkt JSON. Also möchte ich das erstellte Produkt zurückgeben, um es im Frontend zu sehen. Und im Falle eines Fehlers oder irgendetwas passieren kann, können wir sagen, fangen Sie den Fehler. Und dieser Fehler können wir Antwort Punktstatus sagen. Zum Beispiel 500. Es ist der Antwortcode für Fehler im http-Punkt-JSON. Ich erstelle zum Beispiel mein eigenes Objekt. Ich sage Fehler ist der Fehler, den ich bekommen habe. Und zum Beispiel sage ich, ob ihr Erfolg oder nein, vielleicht kann ich diese Variable im Frontend verwenden. Zum Beispiel, um einige Ladevorgänge zu beenden oder zurück zur Homepage zu gehen. Wenn es einen Fehler gibt. Wir versenden das Produkt bereits. Also lasst uns diesen Teil hier löschen und unser Backend MPM starten, starten. Wir haben es jetzt fertig und die Verbindung ist fertig. Lassen Sie uns ein paar Daten hier posten. Schön. Es ist prahlvoll, wir haben Ausweis, Name, Bild. Also, wenn wir zu unserer Sammlung in MongoDB gehen, Lassen Sie uns hier Aktualisieren drücken. Wir haben die gleichen Daten hier. Versuchen wir es erneut, indem wir die Anzahl auf Lager hinzufügen. Sagen Sie zum Beispiel 500 Stück in meinem Lager. Ich schicke es. Ich habe ein neues Produkt mit dem gleichen Namen erstellt, und es gibt die ID des erstellten Produkts zurück. Gehen Sie zurück zu MongoDB, aktualisieren Sie erneut. Schön. Ich habe auch zwei Produkte, die bereits über meine API im Back-End gepostet wurden. Und wir bemerken hier, dass es gesperrt und erfolgreich ist. Lassen Sie uns einen Fehler machen. beispielsweise einen Fehler zu machen, lassen Sie uns dieses Feld wie erforderlich machen. So Datenbank erkennt, dass diese Anzahl in Stoke Pflichtfeld ist. Es wird also mit einem Fehler antworten, den Sie nicht gesendet haben, zum Beispiel die Anzahl auf Lager. Um dies zu tun, gehen wir zurück zum Schema und wir ändern dies in ein Objekt. Der Typ dieses Objekts ist Zahl und erforderlich ist true. Also lassen Sie es uns speichern und unsere, wieder unsere API ausführen , aber ohne Anzahl auf Lager. Und wenn wir den JSON validieren und erneut senden, werden wir sehen, dass wir einen Fehler, Fehler und erfolgreich, falsch oder fehlgeschlagen erhalten haben . In diesem Fall würde ich sagen, der Fehler ist validieren oder Fehlerpfadanzahl auf Lager ist erforderlich. Also antwortete mir die Datenbank, dass dieses Feld erforderlich ist. Wenn ich es wieder mache, sein Erfolg. So haben wir jetzt eine Daten an das Back-End gepostet. Lassen Sie uns eine get-Anfrage erstellen. Also möchte ich diese Daten abrufen, Beispiel ihre Produktinformationen im Front-End anzeigen. Um das zu tun, müssen wir eine get-Anfrage erstellen. So erstellen Sie eine GET-Anfrage einfach ändern wir dies zu bekommen. Und wir müssen die Produktliste angeben. Also lassen Sie uns zum Beispiel die alte Produktliste bekommen. Und wenn ich die Anfrage sende, bekomme ich die alte API, die wir vorher hatten. Also lasst uns es ändern, um es aus der Datenbank zu haben. Um dies zu tun, gehen wir zur Get-Anfrage und dann ersetzen wir diese Konstante und nennen sie zum Beispiel diese Liste. Und ich nenne nur das Modell selbst, das wir vorher erstellt haben und finden. Das war's. Also sage ich const Produktliste und die Antwort erhalten unsere, senden Sie mir die Produktliste. Lassen Sie uns das versuchen. Wir steigen auf. Wir stellen fest, dass wir hier einen Fehler bekommen haben. Der Fehler liegt daran, dass diese Find-Methode ein Versprechen zurückgibt. Und hier, wenn ich die Antwort schicke, ist diese Produktliste vielleicht noch nicht fertig und ich habe sie noch nicht bekommen. Also muss ich warten, bis diese Produktliste fertig ist und dann kann ich sie mit der Antwort senden. Es gibt einen anderen Weg, als zu tun, zum Beispiel, Punkt dann und nicht fangen. Das ist etwas, was wir mit await Schlüsselwort tun können. Und im await-Schlüsselwort erfordert es immer asynchrone Methode. Also habe ich diese Methode hier und es ist asynchron, und ich habe hier ein Gewicht. Also in diesem Fall, wenn ich die Produktliste anrufe, dann wird es warten, es wird gefüllt, und dann sende ich die Antwort an das Front-End. Also lasst es uns nochmal machen. Jetzt. Ich speichere und schicke dann diese Anfrage, wir sehen, dass wir die Daten hier bekommen haben. Wir haben den Fehler nicht mehr bekommen. Das ist deshalb, weil wir ein Versprechen zurückgeben. Wir sollten warten, bis die Datenbank uns ihre Antwort sendet, und dann werden wir im Front-End warten. Vielleicht werden Sie mich fragen, wie ich das Problem oder die Probleme erkennen kann. Es ist sehr einfach. Ich kann sagen, wenn eine Produktliste oder keine Produktliste, wenn es keine Produktliste gibt, dann kann ich Antwort Punktstatus 500 sagen. Und zum Beispiel kann ich mit JSON Fehler oder Erfolg falsch sagen. Wenn also ein Fehler aufgetreten ist, zum Beispiel Verbindung oder irgendetwas, kann ich einfach Fehler mit einem Erfolg zurückgeben, wenn diese Liste leer ist. Wir haben also zwei verschiedene Möglichkeiten, Fehler aus der Datenbank auszudrücken und zu fangen. Also kann ich hier sagen, finden, ich kann ein Gewicht und asynchron setzen, oder ich kann es mit normalen Versprechungen tun. Wie zum Beispiel, sage ich Speichern, Punkt dann und fangen. Natürlich ist dies mehr Code sparen. Wir haben das nur in zwei Zeilen gemacht, und das ist sehr gut. Von nun an werden wir immer async verwenden und warten. Das ist alles für jetzt ist Mungo. Lassen Sie uns etwas Refactoring machen. Es ist sehr schön, die Routen in einigen Dateien und die Modelle in einer anderen Datei zu haben. So können wir mehr Organisation unseres Codes, des Backends haben. 16. Analyse der the: Willkommen zurück. Ich habe meine Meinung hier geändert, also werden wir kein Refactoring durchführen. Lassen Sie uns zuerst die Datenbank von e-shop analysieren. Auf diese Weise können wir wissen, welche Routen und welche Schemas wir erstellen und die Dateien im Back-End erstellen können. Hier haben wir also am wenigsten der Tabellen Dokumente oder Sammlungen, die wir in unserer Datenbank benötigen. Jeder Shop hat Produkte, Bestellungen, Kategorien, Benutzer und Bestellartikel. Dies ist der einfachste E-Shop. Wenn Sie also mehr erwachsen werden möchten, müssen Sie mehr Tabellen wie eine Rezensionen haben oder zum Beispiel, einige neue Kategorien sind größere Kategorien. Also beginnen wir einfach und wir werden unseren E-Shop bauen, um langsam größer zu sein. Vor allem die Produkte, zum Beispiel, es hat ID, die die ID für das Produkt ist. Und diese ID wird generiert, wenn wir jede ID automatisch von MongoDB in die Datenbank posten. Der Name des Produkts und auch die Beschreibung. Und die Beschreibung erreicht Schriftart wird verwendet, zum Beispiel, ich möchte einige HTML-Code speichern. Manchmal verwenden Menschen als eine Beschreibung der Produkte mit Bildern und Titeln und einigen komplizierten Reach Texten. So werden wir sehen, wie wir Editor im Front-End haben werden. Für HTML. Wir brauchen auch das Hauptbild des Produkts. Und es ist eine Zeichenfolge, eine Zeichenfolge, die die URL zu diesem Bild speichert. Außerdem brauchen wir eine Galerie von, eine Galerie wird einige Bilder und Array von Strings haben, von URLs, wo wir eine Galerie des Produkts haben, mehr Details über das Produkt. Und dann werden wir eine Marke und auch Preis, Preis der Produktkategorie haben. Es wird die Typkategorie sein. In MongoDB. Hier werden wir etwas haben, das Referenzen genannt wird. Es ist nicht wie relationale Datenbanken, aber hier können wir den Typ der Tabelle direkt definieren. Wie wir in Zukunft sehen werden, werden wir sehen, dass diese Kategorie eine Art von Kategorie ist oder einen Verweis auf die Kategorientabelle hat. Und zählen Sie auf Lager, wie viele Artikel dieses Produkts im Lager sind. Auch Bewertung basierend auf Bewertungen und ob dieses Produkt angezeigt wird oder nicht. Also, um es auf der Homepage sofort als vorgestelltes Produkt zu sehen. Und dann werden wir sehen, dass das, was sie, dieses Produkt ist vier Kategorien erstellt. Wir brauchen nur einen Namen, vielleicht ein paar zusätzliche Daten. Zum Beispiel, was ich im Frontend brauche, manchmal Farbe, so kann ich jede Kategorie basierend auf einer bestimmten Farbe und auch Symbol oder Bild färben. Für Bestellungen benötigen wir Bestellartikel, die ein Array von Auftragsposition ist. Und Bestellartikel ist eine Tabelle, in der es das Produkt und die Menge enthält. So wird jede Bestellung ein Produkt und die Menge haben. Also vielleicht werde ich 10 Produkte haben. Ich habe sie in einer Bestellung bestellt. Und dann wird jedes Produkt eine gewisse Menge haben. Die Lieferadresse eins und Adresse zwei. Und Stadt, Postleitzahl, Land, Telefonnummer des Benutzerstatus, um zu sehen, ob diese Geburtsauftrag, zum Beispiel, Biegen, Versand oder Lieferung. Und auch der Gesamtpreis. Wir werden sehen, wie der Gesamtpreis basierend auf den Bestellartikeln und dem Benutzer, der diese Bestellung bestellt hat, berechnet wird. Denn wir werden nach jedem Benutzer suchen, der etwas bestellen möchte. Und dann das Datum der Bestellung. Für die Benutzer. Wir benötigen einen ID-Namen, E-Mail, wo der Benutzer sich mit seiner E-Mail und dem Passwort-Hash anmelden wird. Das Passwort sollte in der Datenbank gehasht gespeichert werden. Ich kann es nicht als Nur-Text speichern. Straße, Wohnung, Stadt und Postleitzahl. Und auch Land mit einer Telefonnummer. Und auch zu wissen, ob dieser Benutzer admin ist. So kann er sich zum Beispiel im Admin-Panel anmelden oder nicht. Vielleicht wird jemand fragen, warum ich hier die Adresse vom Benutzer getrennt habe. Wie zum Beispiel kann ich hier eine zusätzliche Tabelle wie Adresse haben. Dann kann ich dieses Feld in diese Tabelle einfügen. Und ich kann Benutzer und Bestellungen mit dieser Adresstabelle verknüpfen. Eigentlich haben die meisten Aesops ein Problem, dass manchmal Benutzer, nachdem er etwas bestellt hat , hat er seine Adresse geändert. Aber die Bestellung ist bereits versandt. Also müssen wir die Bestellung als Flugzeug mit einer Lieferadresse speichern, wie der Benutzer sie platziert hat, nicht mit der Benutzeradresse verwandt. Wir werden diese Adresse nur verwenden, um die Bestelladresse automatisch zu füllen , wenn der Benutzer nach dem Sperren etwas bestellt. Auf diese Weise haben wir einen Überblick über unsere Datenbank in MongoDB. Jetzt werden wir zum Backend gehen und die Dateien erstellen und unseren Code ein wenig umgestalten, um auf dieser Datenbankstruktur zu basieren. 17. Erstellen von Backend Schemas: Willkommen zurück. Ich stelle mir jetzt vor, dass was, wenn wir alle Schemas hier in dieser Datei App.js platzieren, es sehr groß wäre. Und ich denke, wir werden Tausende von Zeilen hier haben. Normalerweise setzen sie in Node.JS, den Leuten oder den Programmierer im Allgemeinen den Leuten oder den Programmierer im Allgemeinendiese Routen ein, zum Beispiel die API-Routen und auch die Schemas in getrennte Dateien. Um, lassen Sie uns das jetzt tun und wir werden sehen, wie das Projekt besser zu organisieren. So weiter Schemata. Lassen Sie uns hier einen Ordner erstellen. Wir nennen es Modelle. Und innerhalb von modal werden wir eine Datei für jedes Modell erstellen, das wir haben, zum Beispiel Produkte oder Produkt dot js. In Produkten AS werde ich dieses Schema platzieren. Also lassen Sie uns diesen Teil kopieren und ihn hier platzieren. Mungo ist in dieser Datei nicht definiert, daher müssen wir auch diesen Teil kopieren, wo Const Mungo Mungo erfordern , weil diese Datei den importierten Mungo in der app.js nicht sehen kann. Also haben wir hier const Mongoose und Mungo Schema. Und übrigens, lasst uns auch den Mogul holen. Obwohl wir es geschnitten haben und wir es hier platzieren. Nun, wie ArcJS dieses Modell in Node.JS verwenden wird. Wenn wir eine Konstante oder zum Beispiel eine Klasse oder ein Objekt exportieren möchten , sagen wir einfach, dass wir es auf diese Weise tun müssen. Exportiert Punktprodukt und dann das Modell. Also, hier, in diesem Fall, wird das Produkt in jeder anderen Datei zu sehen sein. Und ich kann es mit der Require-Methode importieren. Also gehen Sie zu ab.js Datei und ich sage const Produkt, das kommt von, indem Sie es aus dieser Datei benötigen, wo wir das Modell haben, zum Beispiel Modelle Schrägstrich Produkt. In diesem Fall haben wir das Produkt erhalten und wir können es als Modell für unsere API verwenden. Lassen Sie uns mehr Refactoring machen. Wir sehen, dass wir alle APIs haben, erhalten Post, GET Post. Also, wenn wir das für alle Schemas tun, wäre es eine sehr große Datei. Es gibt eine Möglichkeit in Node.JS, dass Sie auch die Routen oder die APIs in separater Datei speichern können. Ich werde Ihnen zeigen, wie es geht. Lassen Sie uns zuerst einen Word-Ordner erstellen, Dürre Router. Und innerhalb des Routers erstelle ich auch Produkte, die js. Für jedes Modell gibt es vielleicht Router. In Express. Es gibt etwas namens Router, und dieser Router ist nur verantwortlich für das Erstellen von APIs, Stoppen der APIs und das Importieren und Exportieren zwischen den Dateien. Also, wie geht man das? Zuerst müssen wir den Express importieren. Express erforderlich. Und der Router wird Teil von Express sein. So können wir sagen Express-Punkt-Router. Also dieser Router, wenn ich ihn in ArcJS importiere, kann ich ihn hier verwenden. Und dieser Router, es kann als Middleware verwendet werden, so kann ich es mit App-Nutzung verwenden. Also zuerst, lasst uns bewegen, sehen, wie man diese Router bewegt. Lassen Sie uns zuerst alle APIs kopieren, die wir hatten und sie hier platzieren. Anstelle von App. Ich sage nur Router. Das ist sehr einfach. Und auch lösche ich sie von hier. Und wie wir gesagt haben, bis die 2s ist, kann es auch das äußere verwenden. So können wir die Haupt-API-Route der Produkte nehmen und hier zum Beispiel den Produkt-Router platzieren . Aber woher diese Produkte Router kommen wird, wird es von hier kommen. Also kann ich nicht sagen, dass ich auch den Router exportieren möchte. Also kann ich hier gehen und sagen, dass Modulpunkteexport Router ist. Also haben wir hier eine andere Art zum Exportieren. Hier exportieren wir das Produkt selbst, und hier exportieren wir ein Modul. Also auf diese Weise kann ich sagen, Produkte Router ist eine Konstante. Also können wir hier sagen, konstant. Produkte Router kommen von, erfordern, von Routern. Und dann Produkte. So werden wir hier sehen, dass diese Anwendung diese Routen von Routen verwendet, die von Produkten Router kommen. Also hier müssen wir etwas tun. Wir können die API nicht so verwenden, da es sonst sein wird, können wir dies als die Kinder betrachten. Zum Beispielmuss ich hier nur den Schrägstrich platzieren, muss ich hier nur den Schrägstrich platzieren damit ich es berücksichtigen kann, wenn ich localhost 3000 Slash-Produkte sage, dann kann ich diesen erreichen, bekommen. Und das Gleiche für die Post. Wenn ich etwas in der Zukunft wie Count möchte, sage ich es so, dann wird die API http 3000 Schrägstrich Produkte Schrägzahl sein. Das ist also der beste Weg, wie wir das in separater Datei umgehen können. Aber zuerst haben wir hier das Modellprodukt. Also müssen wir auch dieses Modell importieren. Also sage ich const, Produkt wird von Modellen das Produkt benötigt. Jetzt haben wir die Routen abgeschlossen. So haben wir alles bekommen Post und wir werden sehen, wie man das Löschen und Update hinzufügt. Speichern wir diese Datei und speichern Sie sie auch hier. Machen Sie hier etwas mehr Organisation des Codes, damit wir ihn nicht mehr brauchen. So können wir hören, sagen Router. Und hier, der Produkt-Router, können wir es hier importieren lassen. Mal sehen, ob alles gut funktioniert, können wir MPM sagen, starten. Alles ist verbunden und alles funktioniert wie Rauch. Das Gleiche. Wir gehen auch für die anderen Datenbanksammlungen. Zum Beispiel werde ich hier Bestellungen GS und auch Benutzer und auch die Kategorie haben. Auch das Gleiche für diese Autoren. Ich werde die gleichen Akten haben. Ich bin mir sicher, dass Sie nicht daran interessiert sind, den ganzen Prozess zu sehen, weil es genau der gleiche ist. Ich werde sie hinzufügen. Und dann werden wir danach sehen, wie sie am Ende aussehen, unsere Anwendung sieht so aus. In app.js. Wir haben die Middlewares, Routen, und auch die Datenbankverbindung und den Verkäufer. In den Strecken. Ich habe Routen für jeden Typ oder, oder für jede Sammlung, die wir in unserer Anwendung hatten, erstellt. Also gehe ich hierher und habe das genau wie die Produkte kreiert. Wir haben, die Benutzer Bestellungen, Kategorien. Und das Gleiche für Schemata. Jedes Schema hat jetzt sein eigenes. In diesem Fall haben wir jetzt alles bereit, um unsere APIs zu erstellen. Derzeit benutze ich nur bekommen in jedem Typ. Ich möchte nur eine Sache erwähnen. Wenn wir das Modell aus Exporten dot-Produkt auf diese Weise exportieren, nicht auf diese Weise. Wenn wir es importieren, müssen wir es als Objekt importieren. Also hier, wenn ich zu den Produkten gehe, importiere ich es so. In ES6 haben wir dieses Objekt Zerstörung. Dieses Modell gibt also ein Objekt zurück. Also muss ich ein neues Objekt erstellen und diesem alle Felder dieses Objekts zuweisen. Also in diesem Fall kann ich es überall mit Sicherheit verwenden, es gibt kein Problem, wenn Sie auf diese Weise verwenden. Die Art, das Modul direkt zu exportieren. Probieren wir unseren LPI aus. Jetzt. Ich gehe hier und ich sage bekommen, ich habe Liste der Produkte. Das war's vorerst. Für die nächsten Vorträge werden wir sehen, wie man diese Schemas füllt und wie man sie mit den Strukturen unserer Datenbank verbindet. Und wir werden sehen, wie wir unseren E-Shop weiter besser aufbauen können. 18. Schnitzelei und warum wir es Enabling: Wenn Sie ein Front-End und die Back-End-Entwicklung in ihrer gleichen Zeit tun. Ich bin sicher, dass Sie diesen Fehler gesehen haben. Dieser Fehler namens Cross-Origin Resource Sharing, was in einer menschlichen Sprache bedeutet, dass Node.JS Anwendung keiner anderen Anwendung vertrauen kann. Also, wenn ich Anfragen von meinem Frontend an das Backend sende, dann das Back-End, wenn Lot mir dasselbe antwortet, was ich will, weil es verboten ist. Es verwendet einen anderen Port, der eine völlig andere Domäne ist. also in meiner Front-End-Anwendung einen Dienst erstelle, Wenn ichalso in meiner Front-End-Anwendung einen Dienst erstelle,um die APIs aufzurufen, bekomme ich diesen Fehler. Und in Mozilla org erklären sie alle Daten oder alle Details zu diesem Kurs. Also irgendwie in der NodeJS-App müssen wir diesen Kurs aktivieren. Wie können wir jeder Anwendung erlauben, API von meinem Server anzufordern. Es gibt eine Bibliothek namens Kurs. Wir können es verwenden, um den Kurs für jede Anwendung zu ermöglichen. Also stoppe ich den Server und ich sage npm installieren Kurs. Nach der Installation müssen wir es benötigen und importieren. Also hier importieren wir alles in ArcJS. Also sage ich const natürlich, erfordern Kurs. Und um den Kurs zu aktivieren, ist es vor allem sehr einfach, vor dem Start der Anwendung, bevor wir einen Dienst in der Anwendung verwenden, müssen wir tun, keine Kerne verwenden. Und App Dot Optionen. Mit Stern, wie alles. Ich benutze den Kurs. Diese App dot-Optionen. Es bedeutet, dass es sich um eine Art von HTTP-Anfragen handelt, wie GET und post und put und delete. Aber was ist es? Wenn wir Google HTTP-Optionen, sehen wir, dass HTTP-Option ist eine Methode Anfragen erlaubt Kommunikationsoptionen für eine bestimmte URL an den Server. Wenn ich also sage, ich will einen Stern, also erlaube ich alles mit diesem Kurs. In diesem Fall erlaube ich also, dass alle anderen HTTP-Anfragen von jedem anderen Ursprung übergeben werden. Daher ist es sehr wichtig, diesen Kurs zu verwenden und ihnen zu ermöglichen, diesen Fehler zu vermeiden. Schließlich, nachdem wir dieses Modul oder diesen Abschnitt beendet haben, würde ich sagen, dass dieses Projekt das Startup für uns ist, um das Problem des Back-Ends zu erstellen. Also werde ich es als Zip-Datei setzen, damit Sie es herunterladen und von hier aus starten können. Sie können dieses Projekt in Ressourcen mit dieser Vorlesung sehen. In den nächsten Modulen werden wir sehen, wie alle Schemas und APIs für jeden Teil der Anwendung erstellt werden. 19. Backend: Produkte und Kategorien: Herzlich willkommen im dritten Abschnitt dieses Kurses. Wir werden Einführung darüber haben, mit dem Back-End zu beginnen. Was ist ein Backend? Im Software-Engineering beziehen sich die Begriffe Front-End und Back-End auf eine Trennung von Bedenken zwischen der Präsentationsschicht und der Datenzugriffsebene. So wird jede Webanwendung und mobile Anwendung als Front-End betrachtet. Backend ist der Teil, in dem ich Daten halte. Wieder eine Datenbank oder ein Dateiserver. Und der Server selbst kann als Back-End betrachtet werden. Also lasst es uns so haben. Das Frontend zeigt die Daten an und das Backend hält diese Daten an einem sicheren Ort namens Server. Wir müssen irgendwie mit diesen Daten umgehen, die auf dem Server gespeichert sind und sie dem Client dienen. Und mit einigen Programmiersprachen wie Java, SQL und auch keine GS, die wir in diesem Kurs tun werden, um diese Daten an den Client auf eine schöne Art und Weise zu senden, um sie in HTML, CSS und JavaScript-Bibliotheken. In der nächsten Vorlesung werden wir sehen, wie das Frontend mit dem Backend kommunizieren kann, um diese Daten zu erfassen, die RESTful-APIs genannt wird. 20. Produkte Model: Willkommen zurück. In dieser Vorlesung werden wir sehen, wie Sie das Produktmodell oder das Produktschema erstellen. Alles in Mongoose beginnt mit Schema. Jedes Schema wird einer MongoDB-Sammlung zugeordnet und definiert die Form des Dokuments innerhalb dieser Sammlung. Basierend auf dem Modell, das Sie rechts auf dem Bildschirm sehen, werden wir das gleiche Schema erstellen, wie wir es vorher in diesem Modell erstellen. So können die Felder des Produkts wie hier beginnen, ich sage, der Typ dieses Feldes ist eine Zeichenfolge. Und es gibt Schemaoptionen oder Schema-Typ-Optionen. Diese Schema-Typ-Optionen, können Sie sie auf Mongoose Dokumentation sehen. Also gehe ich hier zur Mongoose Dokumentation. Ich gehe zu Schema-Typen. Und in Schema-Typen können wir sehen, dass es viele Typen gibt. Zum Beispiel, string, number, date, und es gibt etwas namens Optionen, wie wir hier in diesem Beispiel sehen. Also gehe ich zum Beispiel zu Schema-Typ, und ich sehe, dass es Pfad und Optionen in der Dokumentation Schema-Typ-Optionen gibt, ich kann alle Optionen sehen, die ich brauche, um mein Schema zu erstellen. Was wir eigentlich für unseren Kurs brauchen, denke ich, dass wir dieses erforderliche Feld und auch etwas namens href benötigen , um auf eine andere Tabelle und Standard zu verweisen, was ein Standardwert ist, wenn das Objekt des Produkts erstellt wird. So ist der Produktname immer erforderlich. Ich habe es auf wahr gesetzt. Das nächste Feld ist die Beschreibung, die eine kurze Beschreibung des Produkts sein wird. Und es wird auch eine Schnur sein. Ist es erforderlich? Ich würde sagen, die kurze Beschreibung wird in unserem Fall erforderlich sein. Und dann gehen wir zur reichen Beschreibung. In der Rich-Beschreibung ist auch eine Typ-Zeichenfolge. Aber ich würde sagen, es ist nicht erforderlich. Und wir können einen Standardwert dafür setzen, wenn es erstellt wird. Zum Beispiel sage ich leere Zeichenfolge. Dasselbe gilt für das Bild. Also sage ich hier auch, das Bild ist eine Zeichenfolge und es hat einen Standardwert wie leer. Jetzt gehen wir zu Bildern. Bilder. Sie sind immer Array von Strings. So können wir es einfach wie dieses Array ausdrücken. Und der Typ jedes Elements dieses Arrays ist eine Zeichenfolge. Wir haben auch Marke, die das Gleiche sein wird. String und Preis. So wird der Preis in der Art und Weise sein Typ Zahl ist. Und der Standardwert. Wir können sagen, es ist 0. Der nächste Schritt jetzt müssen wir die Kategorie hinzufügen. Also ist es einfach. Wir sagen, Kategorie ist Art der ID der Kategorie. Also hier im Produkt, wenn ich ein Produkt hinzufügen möchte, verwende ich die Kategorie-ID, nicht die ganze Kategorie. Also sage ich, dass die Verbindung zwischen der Tabelle und des Produkts und der Tabelle der Kategorie die ID der Kategorie ist. Der Typ dieses Feldes wird also Mongoose Punktschema, Punkttypen, Punkt-Objekt-ID sein. Also in diesem Fall muss ich immer die ID übergeben. und wie würde ich sagen, dass diese ID mit Kategorien Tabelle oder Kategorieschema verbunden ist. Ich mache das einfach. Ich sage, eine Referenz ist Kategorieschema. In diesem Fall wird diese ID mit dem Kategorieschema verbunden sein. Wenn ich ein Produkt hinzufüge, ist es die Suche in Kategorien und ich hole bestimmte ID. Und dann sage ich, dieses Produkt hat Kategorie, zum Beispiel Schönheit und Gesundheit. Ist das erforderlich? Ja, fügen wir es bei Bedarf hinzu. Das nächste Feld, das wir tun Wir haben bereits ist auf Lager gezählt. Auf Lager zählen, Es ist normalerweise eine Nummer und erforderlich. Sie müssen also angeben, wie viel von diesem Produkt Sie in Ihrem Speicher haben. Es gibt auch eine andere Eigenschaft, die wir max und Min setzen können. Zum Beispiel sage ich, Minimum hat 0 und Maximum. Es hat zum Beispiel 255. Also sage ich hier, dass, wenn ich ein Produkt mit minus Anzahl der Anzahl auf Lager poste, dann werde ich Fehler bekommen, weil Mungo, wenn es zu mir und sagen Sie mir, dass, nein, das ist falsch. Sie müssen die Zahl zwischen 0 und 255 setzen. Das Gleiche gilt zum Beispiel für die Bewertung und auch für eine Reihe von Bewertungen. Sie sind Zahlen. Also habe ich sie hier hinzugefügt. Und das Feld ist gekennzeichnet ist Typ Boolean. Der Standardwert ist also falsch. Dies ist also, um das Produkt auf der Homepage als vorgestelltes Produkt zu zeigen. Außerdem habe ich das Felddatum erstellt. erstellten Daten sind also ein Typdatum und der Standardwert ist jetzt Datum Punkt, also ist es sehr einfach. Wenn also das Produkt oder diese Anfrage kommt, wird es die aktuelle Zeit in Anspruch nehmen. Jetzt haben wir alle das Schema sind bereit für ihr Produkt und wir werden später sehen, wie man Produkt in den Post-Anfragen hinzufügen und wie man es bekommt. 21. Kategorien und Schema: Zuvor haben wir das Kategorieschema erstellt. Und wie Sie hier im Modell auf der rechten Seite des Bildschirms sehen, müssen wir diese Felder erstellen. Also fangen wir mit dem Namen an. Es ist genau das Gleiche, wie wir es für das Produkt getan haben. Also sage ich, Typ Zeichenfolge erforderlich durch. Um also nicht so viel Zeit beim Tippen zu nehmen, werde ich die anderen Felder hinzufügen, weil sie auch den String-Typ haben. Also hier haben wir Symbol und Farbe. Das Symbol wird zum Beispiel Symbolname sein, wir verwenden einige Schriftartsymbole oder Google-Material-Icons. Also kann ich nur den Icon-Namen sagen. Und auch ich sage hier die Farbe, diese Farbe wird ein Hash, Hash-String sein, wie so etwas wie ich 000 000 sagen kann, was schwarz ist. Auf diese Weise kann ich die Farbe der Kategorie speichern, die ich im Frontend anzeigen muss. Beginnen wir also jetzt mit der Erstellung der API der Kategorie. In der nächsten Vorlesung werden wir sehen, wie Kategorie hinzufügen und gelöscht. 22. Kategorien hinzufügen und löschen: Großartig. Also zurück in die reale Welt. Jetzt werden wir die Kategorie API haben. In dieser Vorlesung werden wir wissen, wie man eine Kategorie hinzufügt und eine Kategorie entfernt. Ich habe hier einfach angefangen, weil die Kategorie-API die einfachste ist, die wir in der Zukunft sehen werden. So erstellen Sie kompliziertere APIs, wie die Produkte und die Bestellungen. Wie Sie sich erinnern, bevor wir die Routen und Routen erstellt haben, fügen wir unsere APIs hinzu. Wir haben hier ein GET, wir werden es bearbeiten, um einen besseren Weg zu machen, oder wir können es halten, um Liste der Produkte zu erhalten. wir nun eine Kategorie hinzu. Also durch die Erstellung von Router-Punkt-Post. Also werde ich eine Kategorie hinzufügen, also durch Schrägstrich und dann asynchron, Anfrage und Antwort. Dann werde ich hier das Hinzufügen zur Datenbank mit Mongoose und das Hinzufügen einer neuen Kategorie machen. Wir haben vorher gesehen, dass die Anfrage immer die Informationen vom Front-End erhalten hat, wie der Benutzer die Informationen sendet. Und dann lesen wir sie und posten sie in die Datenbank. Lassen Sie uns zum Beispiel eine Konstante erstellen, können wir es nennen oder Kategorie lassen. Und das wird ein neues Modell der Kategorie sein. Also diese Kategorie, wir haben es bereits hier importiert. Und wir werden das Objekt dieser Kategorie wird Name und auch Symbol und Farbe sein , genau wie das Schema. Also, wie würde ich diese Daten bekommen? Also fragen Sie Punkt, Körper, Punktnamen. Also muss mir das Frontend genau diesen Namen schicken. Also auch das Gleiche gilt für Anfrage Punkt, Symbol, Punkt oder sorry, Punkt, Körper, Punktsymbol. Auch für die Farbe. Wir fügen hier hinzu. Die Farbe. Wenn Sie sich erinnern, als wir ein Produkt hier gepostet haben, hatten wir etwas wie speichern. Also sage ich, das Modell Punkt speichern, und dann wird dieses Speichern mir ein Versprechen zurückgeben. Und dann kehre ich zurück mit dem Status, der Produkte erstellt hat. Und wir haben vorher auch über warten und async gesprochen. Also lassen Sie es uns jetzt mit einem Gewicht und async tun. Mit einem Gewicht und einer Spüle sage ich Kategorie, die ich vorher erstellt habe. Ich kann sagen, dass unser Gewicht der Kategorie, die ich erstellt Punkt speichern. Also in diesem Fall warte ich, bis das gerettet wurde. Und dieses Speichern wird für mich ein Versprechen mit dem Dokument oder der Kategorie selbst zurückgeben , die erstellt wird. Und dann überprüfe ich, ob es keine Kategorie gibt, wie keine Kategorie erstellt. Dann sage ich Rückgabefehler. Der Antwortpunktstatus wird also 400 vier sagen. Zum Beispiel enden Punkte. Dass die Antwort zum Beispiel, oder die Kategorie nicht erstellt werden kann. Zum Beispiel. Und dann, wenn es Kategorie gibt, dann sage ich Antwortpunkte beenden die Kategorie. Das ist sehr einfach. Als Zusammenfassung erstelle ich ein neues Kategoriemodell und füllte es dann mit Daten. Ich habe es mit Mongos gespeichert und dann habe ich hier gewartet, bis diese Kategorie fertig ist. Und dann überprüfe ich, ob es Kategorie gibt, gibt es Daten in dieser Kategorie, dann schicke ich es. Aber wenn nicht, gebe ich einen Fehler zurück. Starten wir jetzt unseren Server. Mpm start verbunden mit der Datenbank. Alles ist in Ordnung. Und ich benutze Postman. Postbote zum Beispiel habe ich diese Kategorie erstellt. Ich sagte, Name ist Gesundheit und Symbol Symbol ist Symbol Gesundheit und etwas Farbe. Ich schicke es und ich sehe, dass es erfolgreich gepostet wurde. Und ich habe eine neue ID dieser Kategorie, um zu überprüfen, ob es wirklich funktioniert. Wir gehen wieder zu Atlas und überprüfen es in der Datenbank. Ich gehe hierher und habe es schon gefunden. Also lassen Sie uns eine andere Kategorie erstellen. Zum Beispiel, wie Computer. Und dieser Computer hat Icon Computer und eine bestimmte Farbe im Front-End können Sie eine Farbe Pickup erstellen. Farb-Tonabnehmer. Wir weisen Ihnen den Code der Farbe zu. Zum Beispiel sage ich 444, und ich schicke es und ich habe ein neues erstellt. Ich gehe zu Atlas. Und sag Erfrischen. Und wir werden sehen, dass diese Kategorie auch hier hinzugefügt wird. Also haben wir Computer und Gesundheit. Lassen Sie uns nun eine Kategorie löschen. Das Löschen einer Kategorie ist identisch. Also können wir nicht sagen, Router dot, löschen, nicht post. Und ich sage das aus, was ich zum Löschen einer Kategorie zuweisen möchte. Und dann sage ich Anfrage und Antwort als Rückruf. Und ich würde diese Anfrage und Antwort verwenden. Lass es uns hier mit Versprechen machen. Wir haben es vorher mit einem Gewicht und async gemacht. Machen wir es hier mit einem versprechenden Weg. Also zuerst nenne ich das Modell, ich sage Kategorie Punkt. Es gibt Methode, die nach ID suchen und entfernen genannt wird. Also finden wir eine ID durch und entfernen sie dasselbe mit find by ID und delete. Also hier muss ich die Kategorie finden, die ich löschen möchte. Also nach ID. Wo ich also die ID bekomme, bekomme ich die ID vom Benutzer oder vom Client. So wird der Client mir irgendwie die ID senden und dann werde ich sie in der Datenbank finden und gelöscht. Also, wie kann ich die ID vom Client bekommen? Es gibt einen Weg, Es ist sehr guter Weg. Es ist über die URL. Also kann ich hier nicht mit zwei Punkten sagen und dann kann ich mit ID sagen. Also diese ID, können Sie es wie Sie wollen, wie Sie wollen, wie jeder Name Sie wollen. Dann wird die URL wie api Slash v1 aussehen Schrägstrich die ID, die ich von der Kategorie löschen möchte. Also hier, wie ich diese ID von der URL bekommen werde. Es ist sehr einfach. Ich sage, Punkt params Punkt-ID anfordern. Also hier ist dieser Name der gleiche Name wie, wie ich hier zugewiesen. So zum Beispiel, ich sage Kategorie ID. Ich, dann muss ich hier Kategorie ID setzen. Also, bevor wir sahen, dass wir nach der Leiche gefragt. Der Körper ist, wenn wir die Anfrage innerhalb des Körpers senden. Also hier haben wir Körper und wir senden in den Körper der Anfrage, die Daten. Aber jetzt werden wir sie senden oder wir werden die ID durch die URL senden. So wie wir hier sehen, dass diese Methode für uns ein Versprechen zurückgeben wird. Also werde ich dann sagen und dann wird das Versprechen für mich ein Dokument und das Dokument zurückgeben , das die gelöschte Kategorie ist. Also sage ich hier, wenn es Kategorie gibt, wie wenn Sie sie finden, dann geben Sie einen Antwortpunkt, Statuspunkt oder sorry, 200 und Punkt JSON zurück. Und ich kann mein eigenes Objekt erstellen. Ich kann sagen, dass Erfolg wahr ist und eine Nachricht an den Benutzer. Also kann ich ihm nicht sagen, dass die Kategorie gelöscht wurde. Und dann, wenn es keine Kategorie gibt, wenn ich diese Kategorie sonst nicht finde, sage ich Rückkehr, Antwortpunktstatus. Der nicht gefundene Code ist 404. Und der JSON, ich sage Erfolg, falsch. Also habe ich diese Kategorie nicht gefunden und nichts wird gelöscht. So kann ich sagen, in der Nachrichtenkategorie nicht gefunden. Aber was ist, wenn ein Fehler auf dem Server passiert ist? Zum Beispiel, nicht darüber, diese Kategorie nicht zu finden, sondern ein Fehler, wie Verbindungsfehler oder wenn ich die falschen Daten kaufe, falsche ID. Also kann ich das nicht mit dem Catch-Fehler sagen. Ich sage, dass bitte finden Sie für mich oder senden Sie mir eine Nachricht, dass ein Fehler im Server aufgetreten ist. Im Allgemeinen geht es nicht um gefundene Kategorie oder nicht gefundene Kategorie. Also hier sage ich Rückkehr Antwort, Punktstatus. Der Fehler ist im Allgemeinen 400. Also JSON. Und dann sage ich, Erfolg ist falsch. Und dann kann ich den Fehler an das Frontend an den Benutzer senden. Also lassen Sie uns jetzt diese API testen, das Löschen der Kategorie. Lassen Sie uns eine erstellen und löschen Sie den Server erneut starten. MPM Start. Wir sind mit dieser Datenbank verbunden. Dann lassen Sie uns zum Beispiel neue Kategorie Computer erstellen . Ja, dieser Name, wir behalten ihn gleich. Und ich kopiere diese Kategorie. Und dann ändere ich diese Methode, um zu löschen. Also hier sage ich nach Kategorien, Ich sage die ID der Kategorie, die ich löschen möchte. Und dann drücke ich „Senden“. Kategorie Nizza wurde gelöscht. Wenn wir die Liste der Kategorien wieder erhalten, wenn Sie möchten, können Sie hier die Geschichte dessen sehen, was Sie zuvor getan haben. Also lasst uns eine Liste von Kategorien bekommen. Wir haben immer noch die alte Kategorie, die schlechte Gesundheit, die auch gelöscht. Also kann ich hier gehen und sagen, diese ID löschen. Und dann, wenn ich zurückgehe, um zu bekommen, würde ich leeres Array bekommen. Wir haben also keine Kategorie. Versuchen wir nun, nicht gefundene ID zu löschen. Zum Beispiel kann ich 444 hier sagen. Also, wenn ich es schicke, Ich bekomme Erfolg falsche Kategorie nicht gefunden. Das ist gut. Es ist genau die Botschaft, die wir wollten. Und lassen Sie uns auch einen Fehler machen. Normalerweise, wenn Sie Fehler beim Löschen der ID ähnlicher Kategorie oder Objekt-ID machen möchten, hat dieses Format in MongoDB. Lassen Sie uns diese Formate ändern. Zum Beispiel mache ich es so kurz. Also, wenn ich schicke, bekomme ich hier den Fehler. Der Fehler ist also 400 und dann sage ich, dass der Erfolg fällt und der Fehler passiert ist. Es geht um Objekt-ID, weil es falsch formatiert ist. Sie haben hier die Wahl, zwischen asynchronen und await-Methoden oder mit dann zu treffen. Also die Versprechungen, sie können auf beide Arten sein. Du hast keinen Unterschied. Aber hier ist auch mehr geführt und hier ist kürzere Code. In der nächsten Vorlesung werden wir sehen, wie eine Liste der Kategorien und auch eine einzelne Kategorie zu erhalten . 23. Kategorien und Kategorien: In diesem Vortrag werden wir eine Liste der Kategorien und Kategorien Detail erhalten. Also zuerst werden wir die Kategorieliste machen. Wir haben es vorher schon in den vorherigen Vorlesungen gemacht. Also hier benutze ich getMethod und dann verwende ich find. Mit dieser Methode bekomme ich die Kategorieliste. Und wenn es Kategorieliste gibt, dann werde ich bekommen, ich werde es per Antwort senden. Und wenn es nichts gibt, dann werde ich Fehler senden. Lassen Sie uns bearbeiten, bearbeiten Sie hier. Und wir können sagen, Staat 2s 200, dass wir die Kategorieliste gefunden haben. Lassen Sie uns nun eine Kategorie nach ID bekommen. Also werde ich hier sagen oder ändern. Es ist auch GET-Anfrage. Also wird dieses get die gleiche API akzeptieren, aber mit Parameter, wie wir zuvor gesehen haben. Also würde ich hier asynchrone Methode, Anfrage, Antwort, Rollenfunktion verwenden. Und dann werde ich eine konstante Kategorie machen. Und hier würde ich await Methode verwenden. Also werde ich hier die Kategorie genannt zu tun. Und es gibt eine Methode, die nach ID gefunden wird. Mit dieser Methode werde ich nach der ID von der Anfrage params dot ID fragen. Und ich werde überprüfen, ob es keine Kategorie gibt, dann sende die Antwort falsch oder Fehler. Wenn es Kategorie gibt, dann werde ich es mit dieser Antwort senden. Also hier habe ich es schnell gemacht. Wenn es keine Kategorie gibt, senden Sie Antwort 500. Die Nachricht an den Benutzer, die besagt, dass die Kategorie mit der angegebenen ID nicht gefunden wurde. Und wenn es Kategorie gibt, dann werde ich es mit dieser Antwort senden. Testen wir das mit Postman. Die Kategorieliste ist also API-Version 1 Schrägstrich Kategorien und eine Get-Anfrage, die ich sende, aber ich habe keine Kategorie. Lasst uns eins hinzufügen. Ich habe die Post-Anfrage hier, und ich habe die Leiche bereits bei diesem. Und lassen Sie uns noch einen wie Gesundheit hinzufügen. Gesundheit. Das ist Ende. Also müssen wir jetzt zur GET-Anfrage zurückkehren. Rufen Sie es nochmal an, ich habe zwei Anfragen oder zwei Kategorien. Lassen Sie uns diese Kategorie nur nach ID erhalten. Also werde ich nur die ID nach der URL übergeben. Ich klicke auf „Senden“. Und ich habe die detaillierte Kategorie hier in meiner API-Anfrage bekommen. 24. Kategorie aktualisieren: Willkommen zurück. Also, jetzt lasst uns die Kategorie aktualisieren. Aktualisieren der Kategorie bedeutet, dass wir entweder den Namen oder die Farbe oder das Symbol aktualisieren. Die HTTP-Anfragen dazu werden Realtor dot put genannt. Also haben wir gesagt, ich kann die Daten in der Datenbank aktualisieren. Aber hier ist es eine Mischung zwischen dem Erhalten der Params und dem Erhalten des Körpers, der Params. Wir werden es verwenden, um die ID des Produkts oder die Kategorie zu erhalten, die wir aktualisieren möchten. Und dann in dieser Antwort oder dem Anforderungskörper, Wir werden das tun. Wir werden die Daten erhalten, die aktualisiert werden. Auf die gleiche Weise wird hier asynchrone Anfrage und Antwort eine ROM-Methode sein. Und dann werde ich die Kategorie in einer Variablen konstant. Und dann werde ich sagen, warten Sie auf Kategorie und finden Sie nach ID und Update. So kann ich das Produkt und dann unsere Kategorie finden, und dann aktualisiere ich es. Der erste Parameter dieser Methode ist also request dot powerapps dot ID. Also muss ich die ID übergeben, die ich vom Benutzer bekommen habe. Und der zweite Parameter ist das Objekt, in dem die aktualisierten Daten enthält. So Kategorie hat einen Namen und Symbol und Farbe. Also bekommen sie von der Anfrage Punktkörper, Punktname. Das Gleiche, genau wie wir eine neue Kategorie gepostet haben. Also werde ich es hier tun. Also, wenn ich Kategorie bekomme, dann ist alles in Ordnung und alles wurde aktualisiert. Wenn nicht, dann gibt es einen Fehler. Also werde ich diese Logik implementieren. Es ist genau das gleiche, wie wir es in der Post haben. Also werde ich das gleiche kopieren und es hier setzen. Also würde ich speichern, verbunden mit der Datenbank, und das ist der Zustand mit Postman. Also hier haben wir die Liste der Kategorien, die wir zuvor erstellt haben. Nehmen wir nun diese ID und ändern Sie diese Methode in einen Put. Und dann übergebe ich den Ausweis, den ich bekam. Und der Körper wird anders sein. Zum Beispiel, hier haben wir es Computer Elefant Computer 11. Lassen Sie uns es ändern, zum Beispiel, um durch Phonics zu wählen. Und das Symbol wird das gleiche elektronische sein, und die Farbe ist 55, wenn ich sende. Also, was ich hier habe, sind die alten Daten in Node.JS. Es gibt die Option, wenn Sie die alten Daten, die Sie senden, oder zum Beispiel, die die Kategorie Original oder die aktuellen Daten, die Sie aktualisieren, zurückerhalten möchten. Denn wenn wir hier gehen und auf get drücken, werden wir in unserer Liste die aktualisierten Daten sehen. Wir werden hier haben, die Elektronik. Aber hier in der PUT-Anfrage haben wir die alten Daten zurückgegeben. In diesem Fall müssen Sie in Node.JS einen Parameter an die Suche nach ID und Update übergeben, die aufgerufen wird, ist natürlich Objekt, und Sie können einen neuen durch sagen. Hier bedeutet es, dass ich die neuen aktualisierten Daten zurückgeben möchte. Speichern wir es und versuchen Sie es erneut. Also gehen wir zum Hafen. Lassen Sie uns es zum Beispiel in eine andere Sache ändern, zum Beispiel Schönheit. Und hier sagte ich „Schönheit“. Und ich klicke, dann habe ich die aktualisierten Daten bekommen. Wenn ich hier nochmal mit der Liste sage, habe ich die alle Daten aktualisiert. 25. Poste eine neue Product: In dieser Vorlesung werden wir sehen, wie man ein neues Produkt postet. Wie bei der Arbeit mit Kategorien. Wir werden auch ein neues Produkt veröffentlichen. Also müssen wir nur die Felder sammeln, die gleichen Felder, die vom Frontend gesendet werden. Fügen Sie sie dann als Produktmodell hinzu und speichern Sie sie dann in der Datenbank. Zuvor haben wir diesen Teil gemacht. Also lassen Sie es uns umgestalten und es mit unserem Modell und mit unserer Datenbank machen. Lassen Sie uns also unsere Kopie der Felder erstellen, die wir im Modell hatten. Also hier habe ich schon das Gefühl, dass die Felder nicht so viel Zeit brauchen, um sie zu füllen. Sie sind alle gleich. Sie kommen alle aus dem Körper. Lassen Sie uns auch hier den Code reduzieren, so dass wir async verwenden und warten können. Also hier werde ich async hinzufügen. Und dann lassen Sie uns nach unten gehen. Und wir sagen, wir haben, zum Beispiel, Produkt ist gleich warten und das Produkt, das wir erstellt das Produktmodell dot speichern. So haben wir hier jetzt das neue Produkt erstellt wird, nachdem es gespeichert wurde. Also lasst uns diesen Teil löschen. Und wir sagen hier, wenn es kein Produkt gibt, dann als Antwort zurückgegeben wird, ist der Statuscode 400 oder 500, dass es wie ein interner Serverfehler ist. Und dann senden Sie eine Nachricht, dass das Produkt nicht erstellt werden kann. Und wenn alles gut läuft, dann geben Sie das Produkt zurück. Also, was ist das Besondere hier? Das Besondere hier, dass Sie das Produkt leicht posten können, aber was ist, wenn der Benutzer oder die Front und Mitte auf falsche Kategorie? Zum Beispiel, wenn ich eine Kategorie-ID und die Benutzer-ID von selbst erstellt habe, und diese ID der Kategorie existiert nirgendwo in der Datenbank. Also lasst uns zuerst überprüfen, ob es Kategorie existiert oder bekannt ist. Um das zu tun. Wir können das Gleiche, wir können tun, const Kategorie. Und in dieser Kategorie sagen wir warten auf ein neues Kategoriemodell. Und finden Sie nach ID. haben wir schon mal gesehen. Also sage ich Anfrage Punktkörper, Punktkategorie. Das Frontend in der Kategorie sendet also die ID der Kategorie, die ich dem Produkt hinzufügen möchte. Also, hier, wenn es keine Kategorie gibt, dann geben Sie den Antwortpunktstatus zurück, zum Beispiel 400, dass der Benutzer einen Fehler gemacht hat und er ungültige Kategorie sendet. Also im Allgemeinen haben wir alle Felder und der Benutzer muss die Kategorie senden. Wenn alles gültig ist, wird es fortgesetzt und ihr Produkt normal hinzufügen. Versuchen wir das mit Postman. Also gehe ich zu Postman und erstelle eine neue API. Und der Link wird der gleiche sein. Http und Kategorien, nicht Kategorien. Wir brauchen Produkte. Also Stift, ich denke, jetzt können wir die Leiche hier hinzufügen. Und dieser Kumpel wird die Typreihe sein. Und diese Zeile ist kein Text, ist JSON. Das Frontend sendet also benachbarten Block an das Back-End. Also habe ich es bereits vorbereitet, keine Zeit damit zu verschwenden, dies zu schreiben. Also habe ich den Namen, die Beschreibung und lesen Beschreibung, Bild, Marke, Preis, Kategorie und die Kategorie. Ich habe die Zeichenfolge aus der Liste der Kategorien erhalten. Also, wenn Sie sich erinnern, haben wir zwei Kategorien. Ich habe eins kopiert und es hier hinzugefügt. Und der Zählbestand ist 10. Bewertung ist für nicht so viel gutes Produkt. Und Kritiken. Die Anzahl der Bewertungen ist 22. Und wird es vorgestellt? Ja, es ist wahr. Also, wenn ich das Produkt schicke, bekomme ich Antwort des Produkts und mit einer neuen ID des Produkts. Schauen wir uns die Atlas-Datenbank an. Hier ist Atlas und wir haben hier MongoDB, Ich erstelle eine Aktualisierung. So sehen wir hier, dass das Produkt bereits gepostet ist. Und wir bemerken, dass die Kategorie Objekt-ID hat. Versuchen wir nun, eine ungültige Kategorie zu senden. Also Lassen Sie uns entfernen, zum Beispiel dies und machen Sie es 80. Zum Beispiel. Senden Ich habe eine ungültige Kategorie erhalten. Und das ist Knochen ist 400 schlechte Anfrage. Das Besondere beim Posten eines Produkts ist also nur, wie wir es mit der Kategorie verknüpft haben. Sie müssen also jede Kategorie validieren, die bereits in der Datenbank vorhanden ist und diese dann mit der Produktbuchung an die Post senden. Auf diese Weise haben Sie ein gültiges Produkt, das wirklich mit einer Kategorie verknüpft ist. 26. erhalte eine Produkt- und Liste der Products: Als wir unsere API vorbereitet haben, haben wir eine Anfrage für eine Liste von Produkten gestellt. So, wie wir hier sehen, wird die Produktliste mit finden gespeichert. Und dann bringen wir es an die Front zurück, dass. Lassen Sie uns das also mit unseren Veränderungen versuchen. Mit dem Postboten. Ich sehe hier das Produkt, ich ändere den Beitrag zu bekommen. Und wir sehen, dass wir Array und Liste der Produkte haben. Das ist sehr einfach. Lassen Sie uns eine GET-Anfrage nur für ein Produkt erstellen. Es wird genau das gleiche sein wie die Liste der Produkte zu bekommen, wie wir zuvor gesehen haben. Wir müssen hier nur den ID-Parameter hinzufügen. Und lassen Sie uns diesen Namen in Produkt ändern. Und jetzt, wenn es ein Produkt gibt, dann, wenn es kein Produkt gibt, sorry. Sie geben also einen Fehler zurück. Wenn ein Produkt vorhanden ist, senden Sie es erneut an das Frontend oder an die API. Aber was wir hier ändern müssen, ist nicht in Ordnung, sondern finden Sie nach ID. Und die ID, wie wir zuvor gesehen haben, stammt von der Anfrage, die von den oder, sorry dot params gesucht wurde, weil wir die Parameter in der URL dot ID haben. Lass es uns speichern und versuchen. Jetzt. Ich kopiere zum Beispiel eine der IDs, die ich hier für Produkte habe, und ich setze sie hier nach dem Produkt. Also habe ich den Ausweis hier. Und ich sage, ich bekomme, dann habe ich die Produktdetails genau wie hier bekommen. Ich möchte hier erwähnen, dass zum Beispiel in der Liste der Produkte manchmal, wenn ich eine große Liste von Produkten habe, nicht alle Daten senden muss. Zum Beispiel, wenn ich im Frontend nur den Produktnamen und das Bild anzeigen möchte. Also habe ich eine spezifische API erstellt, die nur Liste der Namen und Bilder der Produkte zurückgibt. Lasst uns das jetzt versuchen. Also immer, nachdem wir hier gefunden haben, finden Sie Methode, wenn ich auf Punkt klicke, dann werde ich eine Methode namens select finden. Es ist also genau so, als ob man eine Abfrage auswählt. So kann ich hier übergeben, welche Felder ich anzeigen möchte. Also sage ich zum Beispiel, ich brauche nur den Namen. Also sagen wir, hier nennen Sie da drin, rühren und speichern Sie es. Also hier werden wir das Produkt einzeln entfernen und wir erhalten eine Liste. Und wir sehen hier haben wir Liste der Produkte und nur die Namen, wenn wir wollen, zum Beispiel, Name und Bild. Also gehe ich zu dieser Zeichenfolge und füge nur Leerzeichen hinzu. Und dann das Feld, das ich anzeigen möchte, zum Beispiel, sage ich Bild, und dann speichere ich. Gehen wir zum Postman und wir würden Bild und Namen bekommen. Wir bemerken hier, dass es ID gibt, so dass wir diese ID auch ausschließen können. Wie wir das tun können. Wir gehen auch auf die gleiche Zeichenfolge, und wir haben die ID in diesem Fall. Also kann ich sagen, minus die ID. Wenn ich also auf Speichern klicke, gehe ich zum Postman und schicke diese Anfrage. Ich habe jetzt eine saubere Auswahl. Auf diese Weise können Sie Ihre APIs mit mehr Leistung und effizienter erstellen. So haben Sie keine Hindernisse in Erinnerungen für das Laden auf den Client. Sie benötigen eine Liste von Produkten. Also schick einfach, was du brauchst. So können Sie eine spezielle API dafür erstellen. So können Sie über diese API senden, was Sie wollen. 27. Angaben der Kategorie in der Produktpalette: So wie wir zuvor gesehen haben, dass wir auf diese Weise ein einziges Produkt bekommen. Also, aber das Feld der Kategorie ist nur die ID. Wenn ich zum Beispiel das Produkt mit dem Kategorienamen anzeigen möchte. So habe ich zum Beispiel das Produktdetail, aber ich möchte auch ihren Namen zeigen. Es ist also nicht schön, eine weitere Anfrage für die Kategorie zu erhalten und dann diese beiden Anfragen zusammenzuführen und im Frontend zu zeigen, was ich brauche. Es gibt einen sehr schönen Weg, dies in MongoDB und Mongoose zu tun. Also, nachdem ich nach ID-Methode gefunden habe, wenn ich Punkt drücke, sehe ich sie MSO dort ist bevölkert. Auffüllen bedeutet, dass jede verknüpfte ID oder Feld mit einer anderen Tabelle als Detail in diesem Feld angezeigt wird. Also, was Feld hat, zum Beispiel, ID, die mit einer anderen Tabelle verknüpft ist, wie wir zuvor in dem Schema gesehen haben wir hier haben, wir die Kategorie erstellt ist Objekt-ID und die Referenzkategorie. Also ist diese Kategorie tatsächlich ID, wie wir zuvor gesehen haben. Also sage ich, ein rührendes Bevölkern. Kategorie. Ich gehe zum Postboten und klicke dann auf Senden. Ich sehe, dass ich die Details der Kategorie bekommen habe. Also hier auf diese Weise, wenn ich eine GET-Anfrage für ein einzelnes Produkt erstelle, gehe ich davon aus, dass ich auf einer Produktseite bin. Ich sende eine Anfrage, um die Produktdetails zu erhalten, und dann bekomme ich auch die Kategoriedetails, damit ich sie auch auf der Produktseite anzeigen kann. Es funktioniert auch mit der GET-Anfrage. So bekommen sie im Allgemeinen. Also, wenn ich hier alle Liste gefüllt haben möchte, so sage ich einfach die Kategorie aller Listen des Produkts füllen. Ich drücke Speichern, gehen Sie zu Postman. Ich bekomme Liste der Produkte und IC sie bereits bevölkert. Einige von ihnen, sie sind nicht mit einer Kategorie verbunden. Sie sind zuvor haben wir sie erstellt. Also hier, zum Beispiel, dieses Produkt, es hat eine Kategorie und es ist mit einer Kategorie in der Datenbank verbunden. Als Zusammenfassung, wenn jemand Sie fragt, wie ich MongoDB-Tabellen wie relationale Datenbank verbinden kann, erstelle ich nur ein Feld in der ursprünglichen Tabelle. Und dann sage ich in diesem Feld, dass ich eine Objekt-ID möchte, und es wird auf das Schema verwiesen, das ich für die andere Tabelle erstellt habe. Und wenn ich dann eine GET-Anfrage erstelle, sage ich, füllen Sie dieses Feld aus. Dieses Feld muss also eine ID sein und dann wird es füllen, was mit dieser Tabelle zusammenhängt. 28. Aktualisieren einer Product: Also lassen Sie uns jetzt unser Produkt aktualisieren. Aktualisieren eines Produkts entspricht genau der Art und Weise, wie wir eine Kategorie aktualisiert haben. Aber wie wir in der Post gesehen haben, müssen wir nur die Kategorie validieren. Obwohl wir in Kategorien gehen, lassen Sie uns alle PUT-Anfrage kopieren würde genau die gleiche sein. Und dann gehe ich zum Produkt, füge ich die neue Route hinzu. Und hier haben wir Produkt oder setzen ID. Und dann werden wir dasselbe tun, was wir für die Kategorie getan haben. Also lasst uns dies in Produkt ändern. Hier ist Produkt, Produktmodell. Suchen Sie nach ID und aktualisieren Sie. Wir haben die Perimeter angeforderte Params-ID und ich bekomme die Felder von hier. Kopieren wir sie gleich und fügen Sie sie hier ein. So haben wir alle Bereiche des Produkts, neu. Ja, wir möchten das neue Produkt zurückgeben. Wenn kein Produkt vorhanden ist, senden Sie eine fehlerhafte Anfrage oder einen internen Serverfehler und sagen Sie dann, dass das Produkt nicht optimistisch sein kann. Und auch, wenn alles in Ordnung ist, dann senden Sie das neue Produkt zurück. Wir fehlen erst jetzt den Teil, in dem wir die Kategorie validieren müssten. Also wieder hier bekommen wir das Gleiche hier. Und dann sage ich Paste Kostenkategorie, und dann frage ich nach Kategorie. Und wenn das keine Kategorie ist, dann senden Sie eine ungültige Kategorie an den Benutzer. Versuchen wir es jetzt mit dem Postboten. Ich gehe zum Postman, lass es uns kopieren oder wir haben die Felder schon hier. Damit wir das ändern können, können wir setzen. Und hier gebe ich die Idee, die ich ändern möchte. Also sage ich hier, zum Beispiel, diese ID. Und dann lasst uns es zu Produkt eins in neu ändern. Und hier auch Beschreibung Sie und Ford Beispiel. Aktualisieren wir den Preis 32. Und das war's. Wir senden die Post-Anfrage und wir haben eine Fehlermeldung erhalten, dass es sich um eine ungültige Kategorie handelt. Also lasst uns die richtige Kategorie machen. Also gehen wir hier zu den Kategorien API und holen die richtige und hier aktualisiert. Und sie senden, wir haben wieder das neue Produkt. So sehen oder hören wir das Produkt neu und die Beschreibung ist in U und mit dem neuen Preis. Also das einzige, was wir hier getan haben, dass wir auch, wir haben die Kategorie validiert. Also im Front-End, wie wir später sehen werden, dass wir Forum des Produkts haben werden. Wenn ich also auf Bearbeiten klicke, sehe ich die Felder bereits ausgefüllt. Also aktualisiere ich einfach die Felder, die ich brauche und schicke dann diese Anfrage erneut. Lassen Sie uns auch die Datenbank überprüfen, ob alles aktualisiert wird. Und dann bekomme ich die Produktliste. Und ich sehe hier das Produkt hat eine neue Beschreibung und einen neuen Namen. Und natürlich auch dann Ihr Preis. 29. Löschen einer Product: Auch das Löschen eines Produkts ist die gleiche Art und Weise, wie wir eine Kategorie gelöscht haben. Aber hier möchte ich einen Punkt erwähnen, der sehr wichtig ist, um unsere API zu validieren. Lassen Sie uns zuerst auch kopieren, dass Anfragen aus Kategorien löschen. Ich nehme diesen und füge ihn dann hier in die Produkt-API oder Produktrouten ein. Wir ersetzen alles zu Produkt. Alles wird ersetzt. Also haben wir jetzt alle Staaten. Und versuchen wir es jetzt. Lassen Sie uns eine Liste von Produkten erhalten. Wird bekommen, haben wir alle diese Produkte. Lassen Sie uns die alten entfernen, weil sie leer sind. So können wir eine der IDs auswählen, diese ändern, um sie zu löschen und diese Anfrage zu senden. Jetzt durchbläst und das Produkt wird gelöscht. Was ich hier erwähnen möchte, ist sehr wichtig. Was ist, wenn ich eine schlechte ID wie diese schicke? Ich werde sehen, dass ich einen Fehler erhalte, dass die Objekt-ID ungültig ist. Daher müssen wir auch die Objekt-ID in allen Anfragen validieren. Also in diesem Fall haben wir einen Fehler abgefangen. Aber hier in der PUT-Anfrage gibt es keine Aufforderung, den Fehler zu fangen. Wir überprüfen nur, ob wir ein Produkt bekommen oder nicht. Aber hier überprüft es die ID, also wird es irgendwie hängen. Also lassen Sie uns das in die PUT-Anfrage ändern und ein Problem in der, in der ID machen. Zum Beispiel entferne ich diesen und schicke dann eine Anfrage und ich sehe, dass das Backend hängt. Deshalb bevorzuge ich mehr auf diese Weise, die Verheißung. So kann ich immer sagen, was ich sehen kann, was ich bekommen kann und was ich fangen kann. Aber wenn Sie auf diese Weise halten wollen, so können wir auch nicht nur die Kategorie validieren. Wir können die ID validieren. Wie können wir das machen? Die ID sollte der Typ der Objekt-ID sein, die in Mongoose gespeichert ist. Also hier werde ich zuerst anfangen, eine Konstante zu machen. Benötigen Sie Mungo. Dieser konstante Mungo. Es hat eine Methode, bei der ich es in der PUT-Anfrage verwenden kann. Also kann ich nicht sagen, dass Mongoose dot eine gültige Objekt-ID ist, also kann ich dann die Anfrage dot params dot ID übergeben. Also, wenn das gültig ist, dann fahre ich fort. Wenn nicht, gebe ich eine Antwort auf den Fehler zurück. Wie wir hier sehen, gibt dies einen booleschen Wert zurück. Also lasst es uns in ein wenn setzen. Also sage ich hier, wenn Mongoose. Also werde ich auf diese Weise auch eine schlechte Anfrage senden und ich sage ungültige Produkt-ID. Und in diesem Fall wird das Produkt oder die API für mich Fehler zurückgeben, wenn ich die ID weitergebe. Probieren wir es jetzt aus. Wir haben einen falschen Ausweis. Ich sehe, dass ich keinen Fehler zurückgegeben habe. Dies liegt daran, dass ich sagte, wenn gültig ist, dann Fehler zurückgeben, also sollte ich nicht gültig sein, also füge ich nicht hinzu. Gehen wir also wieder zurück und senden Sie die Anfrage erneut. Und ich erhalte Fehler ungültige Produkt-ID. 30. Get für Statistiken: Willkommen zurück. Manchmal möchte ich im Admin-Panel dem Administrator zeigen, wie viele Produkte ich in der Datenbank habe. In diesem Fall möchte ich eine API sehen, die mir alle Produkte zurückgibt oder wie viele Produkte ich in der Datenbank habe. So wird es nur eine Zahl zurückgeben. Mungo hat eine Menge von Methoden. Basierend auf diesen Methoden können Sie jede gewünschte Abfrage mit einer API zurückgeben. Zum Beispiel können Sie in Mongoose aus dem Modellprodukt jede Methode haben, die Sie zurückgeben möchten. So können Sie Ihre eigene API basierend auf dem erstellen, was Mongoose Ihnen zur Verfügung stellt. Ich zähle die Produkte nicht. Ich möchte den Gesamtpreis meiner Produkte. Ich möchte zum Beispiel Summe oder den Preis der Bestellungen, den Gesamtumsatz, alle Statistiken, die ich in meinem Front-End haben möchte, zum Beispiel möchte ich Admin-Panel haben. In der Zukunft. Ich werde Ihnen das mit einigen Statistiken zeigen. Dazu müssen Sie API erstellen, die normalerweise verwendet wird, um das zu bekommen, was Sie von der Datenbank wollen. Also lassen Sie uns hier einen neuen hinzufügen, wie Router dot get. Es wäre natürlich getMethod. Und dann sagen Sie, zum Beispiel, Schrägstrich Anzahl. Die API wird also sein, nachdem Produkte gezählt werden. Also der zweite Parameter, wird es das gleiche wie GetMethod sein. Also lassen Sie uns das gleich kopieren und einfach die Straße dort ändern. Also sage ich, get count, ich habe asynchrone Antwort und hier muss ich basierend darauf ändern, was Mongoose mir gibt. So erstellen wir eine Konstante, nennen es Produktanzahl. Und hier würde ich bis zum Ende löschen und zum Beispiel sagen, es gibt eine Methode Satz Zähldokumente. Also möchte ich sehen, wie viele Dokumente in diesem Modell oder in dieser Tabelle. Zählen Sie also Dokumente und dann wird es die Zählung oder als Rückruf zurückgeben. Und dann sage ich einfach die Zählung zurückgeben. Also bekomme ich die Zählung und gebe sie zurück. Und dann wurden die Zähldokumente für mich zurückgegeben, die Produktanzahl. Also hier sage ich, wenn es keine Produktanzahl gibt und dann einen Fehler an den Benutzer zurückgibt, sonst senden Sie die Produktanzahl. Das war's. Normalerweise geben wir einen JSON zurück. So zum Beispiel, ich sage hier, Produktanzahl ist eine Produktanzahl, oder zum Beispiel, ich sage nur die Anzahl der Produkte. Sie haben hier die Freiheit, einen beliebigen Namen zu wählen. Ich bevorzuge das hier. Lassen Sie uns testen, dass wir Mann angeblich, ich gehe zu Postman und dann sage ich Produkte GET Methode, bekommen Zählung. Und wir führen das aus. Und wir sehen, dass die Produktanzahl drei ist, also sind es wirklich drei. Lasst uns das überprüfen. Ja, ich habe die erste 1, zweite, die erste, die dritte 1. Das ist cool. So können wir nun dem Admin zeigen, welche Produkte oder wie viele Produkte er in seinem Vortrag hat. 31. Get Products: Eine weitere statistische Anfrage kann sein, zum Beispiel, ich möchte die vorgestellten Produkte, wie wir hier auf der Homepage dieser Website sehen. Wir sehen einige vorgestellte Produkte, die immer auf der Homepage angezeigt werden. So zuvor in Produkte Modell, hatten wir etwas oder ein Feld namens gekennzeichnet ist. Ist gekennzeichnet hat einen booleschen Wert wie true oder false. Dies bedeutet, dass dieses Produkt auf der Homepage angezeigt werden soll oder nicht. Lassen Sie uns nun eine API erstellen, um nur die vorgestellten Produkte zu erhalten. Und um es komplexer zu machen, können wir Konto haben. So kann ich zum Beispiel drei vorgestellte Produkte oder die letzten drei vorgestellten Produkte oder die letzten sechs vorgestellten Produkte erhalten. Lass es uns jetzt tun. Jede GET-Anfrage ist also so, als würde sie mit router.get beginnen. Also lassen Sie uns diese kopieren und unsere vorgestellte API erstellen. Oder anstatt zu zählen, werden wir sagen, dass wir zum Beispiel vorgestellte, vorgestellte Produkte erhalten . Also in Mongoose, müssen wir die vorgestellten Produkte finden. Nur, nicht alle Produkte, nur die vorgestellten. Also sage ich hier, Produkte Punkt finden. Und wie Sie sich vorher erinnern, hatten wir eine Filtration. Wir haben gerade darüber gesprochen, aber wir werden sehen, wie man einen Filter mit dem Produkt baut. So wie auch immer, jetzt finde ich, dass es wie Objekt akzeptiert und dann können Sie definieren, welche Felder der Wert sein müssen. So zum Beispiel, ich sage, ist gekennzeichnet muss ein wahr sein. Also alle Produkte, die durch vorgestellt hat, dann werde ich sie bekommen. Also hier bleibt alles gleich ist Tat nur das Objekt. Also hat ISA hier gerade für mich die Produkte zurückgegeben. Also sage ich hier Produkte, Produkte, Produkte. Lasst uns das jetzt mit Postman überprüfen. Ich gehe hierher, ich sage Get Funktion. Also senden wir und wir haben nur ein vorgestelltes Produkt, weil wir nur ein vorgestelltes Produkt in unserer API haben, also in unserer Datenbank. Also, wenn wir es hier überprüfen, so dass der erste hat, ist falsch. Die zweite ist auch falsch, aber die letzte wird angezeigt. Okay, so jetzt möchte ich nicht, um meine Homepage, die Produkt zum Beispiel vorgestellt fühlen, Ich habe wie diese Seite zum Beispiel, Ich habe 200 Funktionen Produkte. Also werde ich nicht nur, zum Beispiel, fünf Produkte. Um dies zu tun, können wir auch einige Einschränkungen für unsere API verdienen basierend auf dem, was Benutzer sendet. Zum Beispiel kann ich hier hinzufügen, wie wir zuvor gesehen haben, können wir jeden Parameter wie zuvor hinzufügen, wir fügen eine ID hinzu. Aber hier können wir zählen zum Beispiel hinzufügen. Und dann hier werde ich diese Zählung bekommen. Count ist gleich der Anforderung der Parameter, weil seine Parameter und Anzahl. Also, wenn es eine Anforderungspunktanzahl gibt oder eine Torque Params Punktanzahl anfordert, wenn der Benutzer etwas passiert, dann bekomme es. Wenn nicht, geben Sie 0 zurück. Also, das wie wenn hier. Also, wenn es mit der API Zählung Vergangenheit gibt, dann holen Sie es. Wenn nicht, geben Sie 0 zurück. Diese Zählung kann also dieser Wert oder dieser Wert sein. Es ist genau wie die IF-Anweisung. Also, wie werden wir diese Zählung verwenden? Es ist sehr einfach. Nachdem ich gefunden habe, was ich will, nur das vorgestellte Produkt, Ich sage Limit Count. Also lasst uns das mit Postman versuchen. Wir sagen, Sie werden vorgestellt. Und dann die Zählung, die ich zum Beispiel drei will, dann werde ich diese Anfrage senden. Wir werden nicht, dass es hängt. Es gibt also einen Fehler. Lassen Sie uns überprüfen, was der Fehler ist. Der Fehler besagt hier, dass nicht das Feld zum Analysieren von Suchprodukten durch Ablehnungslimit drei, Return key false, gekennzeichnet wird. Also, warum passiert das? Limit Feld muss numerisch sein, aber wir haben es hier numerisch. Denn das, weil hier, diese Anforderung dot powerapps dot count gibt, wie Sie hier sehen, eine Zeichenfolge zurück . Und das wird auch eine Zeichenfolge sein. Also haben wir hier einen String-Wert, keine Zahl, weil Limit nach einer Zahl fragt. Also, um es leicht zu einer Zahl zu ändern, legen Sie einfach ein Plus hinter diesem Getränk. Jetzt, nachdem wir gespeichert und neu gestartet haben, fragt der Server nach unserer API. Wir werden das vorgestellte Produkt erhalten. 32. Filter- und Produktlinien in der Kategorie: Fortsetzung mit Filterung, Lassen Sie uns auch Filterung nach Kategorien. Wenn der Benutzer also einige bestimmte Kategorien auswählt, erhält er die Produkte, die in dieser Kategorie sind. Und das ist eine normale Filterung in jeder Werkstatt. Also müssen wir irgendwie die GET-Anfrage anpassen oder eine Produktlistenanfrage abrufen , um nach Kategorie zu filtern. Aber zuerst muss ich über etwas reden, das wir vorher erlebt haben. Zwei Arten von Parametern, die wir an das Backend senden können. Der erste ist der URL-Parameter. So kann der Benutzer jede ID senden, nachdem sie, Sie krank sind oder im body Parameter. Also haben wir Körper. Und in diesem Körper gibt es einige Parameter und auch mit der URL. So haben wir eine andere Art der Übergabe von Werten an das Backend, das Abfrageparameter genannt wird. Abfrageparameter werden immer verwendet. In diesem Fall habe ich zum Beispiel URL-API, URL localhost, und dann übergebe ich den Abfrageparameter. Der API-Parameter wird wie folgt übergeben, so dass ich hier Nummer übergeben kann, aber der Abfrageparameter geht immer nach einem Fragezeichen. Also kann ich nicht immer sagen, dass ich hier eine Kategorie brauche. So wie wir vorher gesehen haben, können wir auch in der Find-Methode filtern. Also, nachdem wir das Modell übergeben und dann finden, können wir Objekt wie zuvor übergeben. Wie wird dargestellt, wie eines des Feldes muss diesen Wert haben. Aber jetzt machen wir es als Kategorie. Also diese Suche müssen wir Kategorie und mit einer bestimmten ID haben, die vom Benutzer übergeben wird. Aber wie können wir es mehrere Werte machen, denn hier kann ich nur einen einzigen Wert haben. Es ist sehr einfach. Sie können einfach ein Array übergeben und automatisch wird Mungo erkennen, dass alle diese Werte in dieser Kategorie sein müssen. Und dann wird dies die richtigen Produkte zurückgeben, die diese besseren Kategorien haben. Also kann ich hier so etwas nicht sagen, erste Kategorie und zweite Kategorien-ID. Also lasst es uns hier wie etwas anderes machen. Also, um anders zu sein. Also, jetzt müssen wir irgendwie diesen Abfrageparameter nehmen und ihn in ein Array aufteilen und dann an diesen Fund übergeben. Es ist also sehr einfach. Ich sage, wenn es Anfrage dot, jquery dot Kategorien gibt, was diese ist, dann lassen Sie es in einer Konstante speichern. Const, zum Beispiel, Filter. Und dieser Filter, werden wir den Wert Anforderung Punkt Abfrage Kategorien haben. Und wir werden diesen Wert aufteilen. Also teilen wir es durch Komma. Also sagen wir split, teilen Sie die Zeichenfolge basierend auf Komma, und dann wird es für mich zu Elementen im Array zurückkehren, die eine Zeichenfolge und die andere ist. Also einfach, wir können diese Variable hier platzieren, weil wir sie als Array aufgeteilt haben. Aber wegen des Bereichs in JavaScript können wir diesen Wert nicht zuweisen oder verwenden Wert aus diesem, wenn, weil andere Felder ihn nicht sehen können. Es ist also besser, die Variable hier zu erstellen und sie als leeres Array zu geben. Und diese Variable, ich gebe ihr den Split zu, und dann benutze ich sie hier. Versuchen wir das mit Postman. Also gehe ich hierher und ich habe versucht, das Produkt zu bekommen. Ich bekomme nichts, weil ich die API zwange, Kategorie zu haben. Also, wenn es nichts gibt, dann muss es eine Kategorie haben. Also lasst uns wie dynamischer Weg haben. Ich mache das als leeres Objekt. Und dieses leere Objekt wird zugewiesen und hat einen Wert, wenn Params und oder Abfrageparameter vorhanden sind. Dann sagen Sie, ich sage Kategorie ist das. Und dann dieser Filter, entferne ich all dieses Objekt und dann wird es an die Geldstrafe übergeben. Also, wenn es leer ist, gibt es nichts. Also werde ich die ganze Liste des Produkts bekommen. Und wenn es Abfrageparameter gibt, würde es mit Kategorie gefüllt werden, was unsere Bedingung ist, und es wird diesen Wert vom Benutzer haben. Versuchen wir es nochmal. Jetzt. Ich schicke diese Anfrage, nett. Ich habe alle Produkte vorher bekommen. Ich habe einige Produkte erstellt, zum Beispiel Produkt 1 und Produkt 2 und Produkt 3. Und sie haben aus verschiedenen Kategorien, zum Beispiel diese Kategorie und diese Kategorie. Also sage ich hier, Fragezeichen Kategorien. Und der Wert dieser Kategorien. Nehmen wir die erste Kategorie. Zum Beispiel dieses. Und ich schicke, und dann habe ich zwei Kategorien oder zwei Produkte. Also diese beiden Produkte, sie gehören zu dieser Kategorie. Lassen Sie uns noch einen hinzufügen. Zum Beispiel die zweite, indem Sie sie mit einem Komma aufteilen. Also sage ich hier. Also haben wir 123. Das erste Produkt stammt aus der zweiten Kategorie, und die anderen beiden Produkte, sie sind aus der ersten Kategorie. Und wenn ich nichts passe, dann wird es normal funktionieren, um alle Liste der Produkte zu erhalten. Hier hat der Benutzer also die Möglichkeit, die Abfrageparameter zu übergeben oder nicht. So kann ich jetzt auf meiner Homepage zum Beispiel einige Banner haben, die einige bestimmte Produkte aus Kategorien anzeigen , und auch den Benutzer, wenn er auf die Produktseite geht, können Sie diese Produkte auch filtern -Kategorie. Zum Beispiel wird es so etwas wie Checkboxen oder zum Beispiel einige Pillen sein. So kann er darauf klicken und die Kategorien auswählen , für die Sie die Produkte anzeigen möchten. 33. "_id" auf "id“ - mehr -: Wenn ich ein Produkt oder eine Liste von Produkten bekomme, sendet Mongoose oder MongoDB das Feld mit der richtigen Art, wie ich es gemacht habe. Aber die ID, es hat ein kleines Problem. Es hat diesen Unterstrich. Ich möchte, dass die ID nur ID als Schlüssel ist, also kann ich sie überall in meinen Anwendungen verwenden, nicht nur zum Beispiel für die Anwendung, die wir in diesem Kurs machen. Also kann ich dieses Backend mit anderen Anwendungen verwenden, die normalerweise die ID nur als Schlüssel akzeptieren. Irgendwie. Mungo, wir können auch diese ID kopieren und ein Feld namens ID nur ohne Unterstrich erstellen. Also, wie geht man das? Das nennt man Virtuals. Mit diesem Produktschema, das wir zuvor erstellt haben, können wir immer eine virtuelle ID erstellen. Und diese virtuelle ID wird ein get haben. Und dies wird von der ID stammen, die im Produktschema übergeben wird. Dies ist also ein Weg, wie man es macht und Hex-String, weil wir Hexa-Strings für die ID haben, die Objekt-ID genannt wird. Und dann müssen wir eine Option für das Produktschema aktivieren. Und sagen Sie, wenn ich einen Wert an das Frontend oder an die API senden möchte, aktivieren wir die Virtuals, weil dies ein virtuelles Feld ist. In jedem Schema können wir diese zwei oder vier Zeilen oder zwei Methoden hinzufügen. Und dann haben wir den Ausweis. Also, wenn wir es jetzt mit dem Postboten versuchen, kann ich schicken. Und ich werde sagen, dass ich die ursprüngliche ID und die ID haben werde, die ich will. Also Mall Front-End freundlich, ich kann diese ID direkt ohne diesen störenden Unterstrich verwenden. 34. Benutzer und Authentizität: Willkommen in einem neuen Modul. In diesem Modul werden wir lernen, wie die Authentifizierung zu machen und die Benutzer-API zu erstellen. Lassen Sie uns eine kurze Information erhalten, wie Sie all diesen Prozess erstellen und wie Sie unser Backend sichern können. Das Konzept, das in jedem Server oder Authentifizierungsserver folgt, ist wie folgt. Zunächst meldet sich der Benutzer mit seiner ID oder seiner E-Mail-Adresse und seinem Passwort an. Und dann wird der Authentifizierungsserver ihm mit authentifizierten antworten. Wenn er die richtigen Referenzen hat. Und gt, das JSON Web Token genannt wird. Und dieses Token wird an den Benutzer zurückgegeben. So kann der Benutzer es verwenden, um die anderen APIs wie Produkte und Bestellungen zu erhalten. Und natürlich hat der Benutzer nicht alle Rechte, mit dem Back-End zu tun, was er will. So können wir zwischen den Admins und den Benutzern unterscheiden, aber sie sind in der gleichen Tabelle. So einige Benutzer haben spezielle Fähigkeit, einige Produkte zu erstellen, Aufträge zu erstellen, entfernen oder ändern Sie den Zustand des Produkts, et cetera. Wenn der Benutzer dieses Token hat, kann er es mit jedem API-Aufruf übergeben, beispielsweise indem er ein Produkt an den Server und an die API erstellt, die wir zuvor erstellt haben. Und dann wird der Server sagen, Yeah, Sie sind verifiziert und Sie können den API-Aufruf machen. Also sie Benutzer hier oder der Server hier, wir sind Antwort entweder mit authentifizierten, Sie sind. Ok. Wenn du die Antwort erhältst, bekommst du, was du getan hast. Und wenn es keine Authentifizierung gibt, antwortet der Server, als wären Sie kein authentifizierter Benutzer, um diesen API-Aufruf auszuführen. In den nächsten Vorträgen werden wir die wichtigsten Schritte wie folgt sehen. Also zuerst werden wir einen Blick auf das Benutzermodell und Schema werfen. So können wir genau das Schema erstellen, das wir für die Benutzer benötigen. Genau wie wir es vorher mit den Produkten gemacht haben. Und dann werden wir alle registrieren einen neuen Benutzer mit einer Rest-API. Also, wenn wir einen Benutzer in unserem e-Sharp haben, so werden wir ihn registrieren und dann kann er seine Bestellungen machen. Hashing des Benutzerkennworts. Natürlich werden wir das Passwort nicht genau in der Datenbank speichern, ist es? Also müssen wir machen, dass das Passwort irgendwie gehasht wird. Wenn es also einen Angriff gibt und jemand eine Datenbank erzählt hat, dann wird er das Benutzerkennwort nicht wieder in unserem Webshop verwenden. Als nächstes werden wir sehen, wie Benutzer und Liste zu bekommen Liste der Benutzer zu erhalten, aber wir schließen das Passwort aus. Wir werden also lernen, wie man Teile aus unseren APIs ausschließt und dann Benutzerdaten mit und ohne Passwort aktualisiert. Manchmal möchte ein Benutzer sein Profil aktualisieren. Also will ich nur meinen Namen ändern, oder? Ich möchte meine Adresse ändern. Also sage ich nur, dass ich diese Daten aktualisieren möchte, aber ich möchte mein Passwort nicht aktualisieren. Aber auch wenn ich mein Passwort vergessen habe, kann ich es zurücksetzen. Und dann werden wir in diesem Fall die Benutzerdaten mit dem Passwort aktualisieren. Dann werden wir zu dem wichtigen Teil gehen, wo wir die APIs schützen werden. So ist zum Beispiel kein Benutzer in der Lage, ein Produkt zu erstellen. Nur der Admin. Außerdem ist kein Benutzer in der Lage, den Status der Bestellung zu ändern, nur die Elemente. So werden wir sehen, wie diese APIs zu schützen. So kann der Benutzer keine Anfrage nur senden, wenn er es ist, er ist authentifiziert. Und dann sehen Sie, wie Sie in dem Benutzer aussehen, nachdem wir diesen Benutzer erstellt haben. So kann sich die Person in den Shop einloggen und ein Token erhalten , damit er es verwenden kann, um ein Produkt zu erhalten oder eine Bestellung aufzugeben. Auch, wie wir zuvor gesprochen haben, kann der Server möglicherweise mit Authentifizierungsfehler reagieren. Wenn Sie also eine API anfordern und nicht authentifiziert sind, erhalten Sie einen Fehler. Wir werden sehen, wie man damit umgeht. Außerdem sind wir nur Rechnung, um dem Benutzer weitere geheime Informationen hinzuzufügen, also durch das Token. So können wir auch festlegen oder unterscheiden zwischen den Benutzern und den Admins. So können wir sagen, etwas wie ist admin, aber wo ich diese Informationen verstecken kann. Denn wenn ich es als Flugzeug stelle, dann kann jeder die Daten ändern und sagen, ich bin Admin und er kann keinen Zugriff haben. Aber hier werden wir das Token von ist admin innerhalb des Token verstecken. Auch am Ende für Statistiken, wie wir es immer tun, bekommen wir die Anzahl der Nutzer oder wie viele Kunden wir in unserem Webshop haben. Das war's vorerst. Also lasst uns gehen und mit dem Benutzerschema beginnen. 35. Benutzermodell und Schema: Wie wir in unserem Benutzermodell zuvor hatten, sehen wir, dass wir einen Namen und E-Mail und Passwort benötigen, etc. Also lassen Sie uns unser Benutzerschema genau so erstellen, wie wir es in diesem Modell haben. Auf der rechten Seite. Ich habe sie schon geschrieben, damit wir schnell über sie gehen können. Und dann können Sie aus dem Code implementieren, den ich in die Ressourcen hochladen werde. Zunächst ist der Name des Benutzers eine Zeichenfolge und es ist erforderlich. Zweitens ist die E-Mail eine Zeichenfolge und auch true erforderlich. Und auch der Passwort-Hash. Wir haben gesagt, wir werden das Passwort in der Datenbank gehasst speichern. Es wird eine Zeichenfolge sein und es ist erforderlich. Die Telefonnummer des Benutzers wird auch eine Zeichenfolge oder eine Nummer sein. Und mit dem Wahren und es ist erforderlich. Hier werden wir den Benutzer identifizieren, wenn er Admin im Shop ist oder nein. Es wird also ein boolescher Wert sein und der Standardwert ist false. Die Adresse, die für den Versand der Bestellung des Benutzers verwendet wird. So können wir eine Straße wie eine Zeichenfolge verwenden, und der Standardwert ist ein leerer Wert. Wohnung ist auch String. Postleitzahl ist eine Zeichenfolge, Stadt und Land. Und am Ende haben wir ein Benutzerschema, wie wir es zuvor mit den Produkten getan haben, haben wir eine virtuelle ID erstellt. Also würden wir ID auf diese Weise bekommen, nicht auf diese Weise. Es ist also benutzerfreundlicher oder front-End-freundlich. So können wir es im Frontend als normale ID verwenden, um Benutzerdaten zu holen oder einen Benutzer zu identifizieren. Und hier aktivieren wir die Virtuals für das Schema. Und hier der normale Export des Moduls und des Schemas. Hier geht es also um das Benutzerschema. Wir werden jetzt umziehen, um einen Benutzer oder registrierten Benutzer in unserem Webshop zu erstellen. 36. Registriere eine neue User: In dieser Vorlesung werden wir sehen, wie Sie einen neuen Benutzer als jede Post-Anfrage registrieren oder posten. Wir können die Benutzerdaten auch im Text der Anfrage veröffentlichen und sie dann in die Datenbank einreichen. Also, um es schnell zu machen, Lassen Sie uns eine der Post-Anfrage kopieren, die wir vor haben, zum Beispiel, die Kategorie. Also lassen Sie uns dieses kopieren und fügen Sie es dann in unser Benutzerrouten-Modul ein und beginnen, die Körperanfragen basierend auf dem Modell hinzuzufügen , das wir vorher für den Benutzer hatten. Also lassen Sie uns alle diese Felder so fühlen, als hätten wir sie vom Frontend wie gewohnt und fügen Sie sie hier in unsere Anfrage ein. Also zuerst werde ich dies anpassen, um Benutzer zu sein. Und hier würden wir Benutzermodell verwenden. Und dann werde ich warten, um den Benutzer zu retten. Und wenn es keinen Benutzer gibt, antwortet dann mit der Fehlermeldung, dass der Benutzer nicht erstellt oder registriert werden kann. Also lassen Sie uns die Felder hinzufügen, die wir jetzt brauchen. Also werde ich diese beiden Bildschirme trennen und dann werde ich meine Felder hier hinzufügen. Also Name, der gleiche Name. Und E-Mail wird E-Mail sein. Und hier die Leichname E-Mail. Lassen Sie uns schnell für den Rest tun. Nun wird unser neues Benutzermodell so aussehen. Also habe ich alle Schlüssel oder alle Felder, die ich sie aus dem Schema bekommen habe. Und dort nahm ich an, dass ich das aus dem Körper der Anfrage bekomme. Also dieser Kumpel und die Anfrage wird vom Postboten oder vom Frontend kommen. Wie wir als nächstes sehen werden. Versuchen wir das jetzt mit einem Postboten. So werden wir zum Beispiel ein Objekt erstellen, und ich werde einen Benutzer und einen Passwort-Hash und all diese Informationen in diesem Objekt zuweisen. Also, was wird der volle Weg dafür sein? Es wird die API-Route und dann Benutzer sein. Warum? Da in der app.js, hatten wir vorher, alle APIs Routen sind hier definiert. Also sage ich AP US Produkte und dann gebe ich die Produkte Routen. Und dann hier werden wir Benutzer haben. Also in unserer API, werden wir Benutzer verwenden. Also gehen zum Front-End, Lassen Sie uns eine der APIs kopieren wir vor und fügen Sie es hier. Und hier. Anstelle von Produkten werden wir sagen, Benutzer. Das ist perfekt. Also lassen Sie uns einen Beitrag hinzufügen. Und dann im Körper werden wir eine Reihe hinzufügen. Und der Typ dieser Zeile ist JSON, da der Benutzer die Daten in einem JSON-Format sendet. Und dann lassen Sie uns unser Objekt hier erstellen. Also würde ich den Namen sagen, und ich gebe jedem Namen zu, zum Beispiel James, und das Gleiche für den Rest. Also lasst uns sie fühlen. Also haben wir hier das Passwort-Hash, die Telefonnummer, der Administrator, Ja oder nein, Wohnung, Postleitzahl, Stadt und Land. Also in diesem Fall werden wir einen Benutzer haben, der diese Eigenschaften hat. Wir sollten das Passwort nicht so setzen. Also müssen wir es hash, wie wir in der nächsten Vorlesung sehen werden. Also stelle ich jetzt die Daten und ich bekomme all diese Informationen. Also haben wir hier Namen als Benutzername, und die Daten und alle Informationen, die wir eingegeben haben. Und auch die API reagierte mit ID und Unterstrich-ID. So hat der Benutzer in der Datenbank erstellt. Schauen wir uns unsere Datenbank auf Atlas an. Wenn wir also zu unserem Cluster gehen und dann Sammlungen, werde ich auf unsere Datenbank zugreifen, die Benutzer oder E-Shop-Datenbank und die Tabellenbenutzer ist. Und wir werden sehen, dass der Benutzer hier erstellt wird. Ich denke, ich habe ein Feld verpasst, das nicht mit der API gesendet wird, also müssen wir es hinzufügen. Also lassen Sie es uns hier hinzufügen, die Straße ist. Also haben wir drei es auch, und es ist 3s. Zum Beispiel 100. Ich werde verschiedene Benutzer mit unterschiedlichen Namen hinzufügen, um unsere Datenbank zu fühlen. Also sage ich James, zum Beispiel, ich würde Tom und Tom hier sagen. Und das gleiche Passwort, Nehmen wir an, er hat 777 hier und die gleiche Adresse zum Beispiel. Und wir werden senden, senden. Wir werden auch das gleiche haben, dass auch ein anderer Benutzer wie Mike. Wir werden hier haben, Mike kleine m. Und auch die gleichen Informationen wie sagen wir hier es 88. Und die Straßennummer, zum Beispiel, fünf, die Wohnung ist 4. In diesem Fall hatten wir in unserer Datenbank drei Benutzer. Wie wir hier sehen werden. Ich aktualisiere die Seite. Und wir werden hier sehen, dass wir drei Benutzer haben. 37. Das Benutzer-Passwort erweitern: Das Speichern des Passworts, in diesem Fall als Klartext ist nicht sicher, denn wenn jemand irgendwie unsere Datenbank bekommen hat, wird er die Liste aller Passwörter aller Benutzer in unserer Datenbank sehen. Es ist also besser, es irgendwie zu hash oder zu codieren damit jeder nicht verstehen kann, was das ist, das echte Passwort hinter diesem Hashing oder es codiert. Um dies zu tun, gibt es eine Bibliothek, von NodeJS zur Verfügung gestellt wird. Es nennt sich die js entschlüsseln. Wir können es hier in einem neuen Fenster installieren. So MPM installieren JS gegriffen werden. Und ich werde diese Bibliothek installieren und sie dann in meine Anwendung importieren. Also würde ich sagen, verursacht, gegriffen werden und JS entschlüsseln müssen. Also, wie werden wir diese Bibliothek verwenden? Also werde ich den Benutzer oder das Frontend nicht nach einem Passwort-Hash fragen. Ich werde nach einem normalen Passwort fragen, aber intern in meinem Backend werde ich dieses Passwort verschlüsseln. Also hier werde ich sagen, sei Kryptpunkt, Hash-Synchronisation. Und dann fragt Hash Sync nach einer Zeichenfolge und auch etwas namens Salz. Das Salz ist zum Beispiel wie zusätzliche, extra geheime Informationen, so dass jede Person diesen Hash nicht entschlüsseln kann. So zum Beispiel, werde ich hier mein Geheimnis hinzufügen. Sie können jedes Geheimnis hinzufügen. Zum Beispiel kannst du meine Zigarette sagen. Sie können alles hinzufügen. Ich werde hier hinzufügen, zum Beispiel, Nummer, es ist 10. Und ich werde den Benutzer nicht nach einem Passwort-Hash fragen, aber ich werde ihn einfach nach einem Passwort fragen. Versuchen wir das jetzt und lassen Sie uns sehen, was der Server oder das Backend uns nach der Verschlüsselung des Passworts antworten wird. Also hier, lassen Sie uns ein anderes Benutzerpasswort erstellen, nicht Passwort-Hash. So wird es auch von eins bis sechs sein. Und er hat ein paar Informationen, wie wir es vorher hatten. Machen wir ihn zum Beispiel nicht zum Admin. Und ich werde senden, und wir werden hier den Passwort-Hash wie folgt sehen. Es ist also nicht genau das, was der Benutzer gesendet hat. Also werden wir irgendwie verwenden, wenn wir uns anmelden, wir werden diesen Hash mit dem Passwort vergleichen, das der Benutzer verwendet hat, als er sich angemeldet hat. Dies wird auch durch Entschlüsselung Bibliothek getan werden. So haben wir jetzt ein sicheres Back-End oder ein sicheres Objekt des Benutzers, so dass niemand diese Informationen lösen oder entschlüsseln kann. 38. Benutzer- und Liste von Benutzern ohne Passwort.: Wie wir bereits gesehen haben, dass wir GET-Anfrage erstellt haben, um die Liste der Benutzer zu erhalten. Und auch können wir das Gleiche erstellen, um einen einzelnen Benutzer zu bekommen. Also kopieren Sie es aus Kategorien auch. Und ich werde diese Kategorie Benutzer ändern. So haben wir auf diese Weise eine Liste von Benutzern und erhalten Einzelbenutzer. Versuchen wir das mit einem Postboten. Ich gehe hierher und ich bekomme keinen Benutzer, der seine ID hat. Es gibt so und ich werde keine Liste von Benutzern. Dann bekomme ich sie so. Wir haben hier ein Sicherheitsproblem. Ich möchte die Liste der Benutzer mit ihrem Passwort-Hash nicht senden. Es ist also besser, die API oder die API-Felder ohne Passwort-Hash zu senden. Wie können wir das machen? Zuvor haben wir gesehen, dass wir einige Teile aus unserer API oder einigen Feldern ausschließen können. Wie wir das tun, nachdem wir die Find-Methode aufgerufen haben, setzen wir Select und dann drücke ich Minus, und dann kann ich mit Minus angeben, welches Feld es ausgeschlossen werden soll. Zum Beispiel, hier in diesem Fall, werde ich Passwort-Hash sagen. Und wenn ich dann die API aufrufe, werde ich sehen, dass ich Felder ohne Passwort-Hash habe. Lassen Sie uns das auch für den einzelnen Benutzer tun. Ich werde hier wählen, oder wir können das direkt kopieren. Es funktioniert auch mit find by ID, wie mit find und width, find by id. Speichern Sie es. Probieren Sie es aus. Und lassen Sie uns zum Beispiel diesen Benutzer mit dieser ID bekommen, die ich hier gepostet habe. Und wir sehen, dass wir diesen Benutzer ohne Passwort-Hash bekommen haben. Wir können auch, wenn Sie eine Liste der Benutzer erhalten, zum Beispiel im Admin-Panel meiner Anwendung, möchte ich nur den Namen des Benutzers und zum Beispiel Telefonnummer und E-Mail anzeigen . In diesem Fall können Sie also eine API erstellen, die nur diese Felder enthält. So können Sie nicht mit Minus auswählen, aber Sie können Name, Telefon, E-Mail sagen. Also dann erhalten Sie nur diese Felder mit dieser Anfrage dieser API. Also lasst uns sie holen. Wir haben nur Namen, E-Mail und Telefon. Dies ist sehr hilfreich, wenn Sie möchten, zum Beispiel, wenn Sie eine Schnabelliste haben und dann diese große Liste, Sie wollen es reduzieren. Sie möchten also nur bestimmte Felder auswählen, die Sie im Frontend verwenden möchten. Lassen Sie es uns zurück zu Passwort-Hash setzen. Also möchte ich nur den Passwort-Hash ausschließen und eine Liste der Benutzer mit all ihren Details erhalten. 39. Melde dich an: In dieser Vorlesung werden wir sehen, wie der Benutzer sich anmelden und die APIs verwenden kann. Also ist er verpflichtet, seine E-Mail oder ID und Passwort zu haben und dann irgendwie mit API an den Authentifizierungsserver zu senden. Und der Authentifizierungsserver antwortet mit GW t, dem JSON Web Token, und sagt, dass der Benutzer authentifiziert ist und in der Lage ist, die gesicherten APIs zu verwenden. Fangen wir an, den ersten Teil zu machen. Also müssen wir eine Post-Anfrage erstellen, wo eine Person seinen Benutzernamen und sein Passwort an den Server senden kann. Lassen Sie uns zuerst eine Post-Anfrage in unserer Benutzer-API erstellen. Also werde ich sagen Router dot post, und dann wird der Pfad Login sein. Und dann speichern wir eine asynchrone Methode, die Anfrage und die Antwort. Und wir werden den Rückruf hier haben. Lassen Sie uns den Login per E-Mail machen. So werden wir in ihrer Antwort durch die E-Mail und Passwort erwarten. Also zuerst müssen wir wissen, ob dieser Benutzer existiert. Ich habe wirklich einen Benutzer mit dieser E-Mail. Also zuerst werde ich Konstante erstellen, ihm Benutzer geben. Und dieser Benutzer wird eine Gewichtsmethode haben, genau wie wir es vor dem Benutzer gemacht haben und eine finden. Ich möchte Benutzer per E-Mail finden. Also werde ich hier sagen, finden Sie einen, und dann wird es Objekt sein. Ich kann zuweisen, nach welchem Feld ich den Benutzer durchsuchen möchte. Zum Beispiel möchte ich per E-Mail suchen. Also hier werde ich sagen E-Mail. Und diese E-Mail wird von der Anfrage Dot Body Dot E-Mail kommen. Also hier habe ich den Benutzer bereits, der per E-Mail an die Sperre gesendet wird. Also, wenn ich einen Benutzer bekomme oder wenn ich keinen Benutzer bekomme, werde ich einen Fehler senden. Also werden wir tun, dass Rückgabe Benutzer oder Antwortpunktstatus für 100 Punkte Ende. Und dann werden wir sagen, dass der Benutzer nicht gefunden wurde. Andernfalls werde ich in der Antwort senden, dass der Benutzer gefunden wurde. Und es wird im Sandobjekt wie Benutzer sein. Lassen Sie uns das ausprobieren, um sicherzustellen, dass das funktioniert. Also hier brauche ich eine Post-Anfrage, ich entferne diese, und hier werden wir einen Login haben. Und dann brauchen wir das nicht alles. Wir brauchen nur die E-Mail, wie gesagt, und das Passwort des Benutzers. Also hier werde ich Passwort haben. Zum Beispiel, sagen wir 1, 2, 3, 4, senden Sie es. Und dann werden wir diesen Benutzer wirklich mit dieser E-Mail existieren. Lassen Sie uns Fehler in der E-Mail machen. Sie machen zwei, zum Beispiel, ich bekomme den Benutzer nicht gefunden. Also sind wir jetzt auf dem richtigen Weg. Also haben wir den Benutzer gefunden, den wir einloggen möchten. Um sich einen Benutzer anzumelden, müssen wir das Passwort, das er eingegeben hat, und mit dem Passwort vergleichen , das bereits in der Datenbank vorhanden ist. Aber wir haben bereits ein Hash-Passwort. Also müssen wir dieses Passwort irgendwie unglücklich oder entschlüsseln und es dann mit dem Passwort vergleichen, das Sie vom Benutzer gesendet haben. Und dann sage ich, okay, du hast Recht, du bist authentifiziert. Nachdem ich also sicher bin, dass ich einen Benutzer in meiner Datenbank mit dieser E-Mail habe, möchte ich überprüfen, dass, wenn es einen Benutzer gibt, den wir vorher haben und mit Vergleichssing entschlüsseln, ich kann nicht zwei Passwörter mit dem Hash vergleichen. Also werde ich sagen, dass Anfrage dot body dot password, das vom Benutzer gesendet wird, und dann vergleichen Sie es mit dem Benutzer dot Passwort Hash, wie der Benutzer, den ich mit seinem Passwort Hash gefunden. Also, wenn diese Komprimierung erfolgreich ist, werde ich sagen, zum Beispiel, an das Backend oder an das Front-End gesendet. Wir werden sagen, zum Beispiel, Antwortpunktstatus, zum Beispiel, zu einem 100 Punkt senden Benutzer. Sonst. Wir löschen diesen Teil. Und wir sagen, zum Beispiel, mit 400 und sagen, dass das Passwort falsch ist. Probieren wir das aus. Und hier, zum Beispiel, habe ich dieses Passwort, Benutzername. Ich würde sagen, dass das Passwort falsch ist, aber erinnern Sie sich, dass wir das Passwort auf diese Weise von eins bis sechs haben und der Benutzer wurde authentifiziert. Also, wenn das Passwort falsch ist, bekommen wir das Passwort falsch ist. So kommen wir jetzt zu dem wichtigen Teil. Also haben wir vorher gesehen, dass der Server mit JSON-Web-Token reagiert. Also, von wo aus ich JSON-Web-Token im Back-End erhalten werde. In Node.JS gibt es eine Bibliothek namens JSON Web Token. Also müssen wir diese Bibliothek installieren. Also gehe ich in das andere Fenster, das ich vier für die Installation hatte, würde ich sagen npm I. Und dann JSON Web Token. Installation dieser Bibliothek gibt mir die Möglichkeit, JSON Web Tokens zu verwenden. Also lassen Sie uns es in unseren Konstanten oder Importen haben, können wir sagen, okay, College AVT erfordert JSON-Web-Token. Also kann ich diese Variable jetzt oder Konstante verwenden, um das JSON Web Token zu generieren. Wie macht man das? Also, wenn der Benutzer authentifiziert ist und alles gut läuft. Also werde ich sagen const Token. Und dann würde ich diese Bibliothek JSON Web Token verwenden, dieses Zeichen gibt es eine Methode dort. Und diese Methode akzeptiert das Objekt, Objekt mit einer Nutzlast und Geheimnis, die geheime oder private Schlüssel ist. Wir werden über das Geheimnis sprechen. Also dieses JVP, diese Zeichen, wie wir vorher gesehen haben, es fragt nach Objekt. Und dieses Objekt wird haben, zum Beispiel, Sie können nichts passieren. Ich kann zum Beispiel Benutzer-ID sagen. Und die Benutzer-ID wird zum Beispiel die Benutzer-Punkt-ID haben , den Benutzer, den ich hier bekam, und mit seiner ID. Hier können Sie die Daten, die Sie wollen, mit dem Token übergeben. Wir werden sehen, wie man das Token im Frontend auflöst. Und auch, wie wir das Token in der Authentifizierungs-API vergleichen können. Und hier im zweiten Parameter müssen wir ein Geheimnis übergeben. Secret ist so etwas wie zum Beispiel ein Passwort, das verwendet wird, um Ihre Token zu erstellen. So kann es eine beliebige Zeichenfolge sein. Zum Beispiel werde ich sagen, zum Beispiel, Zigarette. Und danach gibt es Optionen. Und in diesen Optionen können wir dem Token einige Optionen hinzufügen, wie das Ablaufdatum, das wir später sehen werden. Und in ihrer Anfrage, die Erfolg sendet, werden wir den Benutzer mit seinem Token senden. Also werde ich sagen, Benutzer und Benutzer senden, zum Beispiel, E-Mail, die nur die E-Mail und das Token senden. Auf diese Weise erhält der Benutzer das Token im Front-End und kann es verwenden, um auf die API zuzugreifen. Probieren wir das aus. Also gehe ich zum Postboten. Ich werde Login verwenden. Auch hier haben wir das Passwort falsch. Lassen Sie uns das richtige Passwort eingeben. Und dann bekam ich die E-Mail und ein Token. Also dieses Token wird durch das Geheimnis geschaffen, das wir hier haben. So kannst du machen, was du willst. Und dieses Geheimnis weiß niemand davon. Also kann er nicht jemand ein Token wie mit den gleichen Token erstellen , die in Ihrem Webshop verwendet werden. In diesem Fall sendet kein Benutzer mit der API, zum Beispiel ein Token, und dann wird es die Antwort haben, die richtige Antwort, weil er das Geheimnis nicht hat. Wir werden sehen, wie man das Token mit dem Geheimnis auflöst, das wir erstellt haben , damit der Benutzer die richtige Antwort erhalten kann. Also, wenn Sie sich erinnern, wir haben hier die Umgebungsvariablen. Also hier können wir unser Geheimnis setzen. Zum Beispiel kann ich hier geheim sagen. Mein Hund ist nett. Also sage ich hier geheim. Und wir werden es hier benutzen. Wir werden sagen, konstant. Und dann sagen wir, Geheimnis ist Prozess, Menge, Umgebungsvariablen, Punktgeheimnis, die ich hier erstellt habe. Also lassen Sie uns dieses Geheimnis anstelle der hartcodierten Zeichenfolge übergeben. Lassen Sie uns noch einmal überprüfen, um sicherzustellen, dass alles gut funktioniert. Also haben wir einen neuen Doc. Manchmal sehen Sie also, dass Sie, wenn Sie am nächsten Tag in eine Website gesperrt sind, automatisch abgemeldet werden. Dies geschieht, weil dieses Token abgelaufen ist. So hat der Server eine gewisse Ablaufzeit. Wenn Sie also versuchen, dieses Token zu verwenden, wird der Server auf Sie antworten, sorry, dieses Token ist abgelaufen. Wie kann ich die Ablaufzeit einstellen? Der dritte Parameter dieses Sinusoids, es hat Optionen. Und diese Optionen können eine von ihnen sein. Beispiel: ablaufen in, ablaufen in, Sie können einen Tag, eine Woche, einen Monat angeben . Ich will einen Tag. Ich sage ein d. Wenn ich eine Woche will, Ich sage 1 w. Also normalerweise, Schauen wir uns, zum Beispiel, für unsere Werkstatt, wir haben das Token für einen Tag. Wenn ich nach einem Tag wieder komme, um eine API zu verwenden und ich das abgelaufene Token zu laden, dann wird der Server sagen, sorry, Sie können diese API nicht verwenden, da sie abgelaufen ist. Lass es uns retten. Und wir werden in der nächsten Vorlesung sehen, wie wir unsere APIs schützen können. Daher können sie keinen IBI nur verwenden, wenn er ein Token hat. 40. Schutz der API und der Authentifizierung JWT: Wir haben vorher gesehen, wie der Benutzer jetzt das Token hat. Jetzt kann er es verwenden, um auf die Daten oder unsere APIs zuzugreifen, aber wie wir unseren Server schützen können. So kann niemand die API ohne Token verwenden. Wie wir zuvor in unserer app.js sahen, hatten wir eine Middleware. Und die Middleware überprüft alles und geht zum Server, bevor es ausgeführt wird. Also hier in diesem Punkt möchte ich überprüfen, ob der Benutzer authentifiziert ist oder nicht. Die Sequenz. Um das zu tun, normalerweise, erstelle ich in meinem, zum Beispiel, ich möchte einen Helferordner erstellen. Und im Helferordner werde ich eine neue Datei erstellen, sie zum Beispiel GBT dot js nennen. Und es gibt und es gibt eine Bibliothek namens Express JWT, die normalerweise verwendet wird, um die APIs in unserem Server zu sichern. Also lassen Sie uns diese Bibliothek installieren, MPM Express JWT. Und lasst uns danach fragen. Also werde ich sagen konstante Express JWT. Und dann wird es Express JWT erfordern. Und die Schutzfunktion wird wie folgt sein. Also werde ich eine Funktion erstellen, es Authentication oder unsere JWT nennen. Und diese Methode wird ausgedrückte DWT als Funktion zurückgeben. Und diese Funktion, es hat Optionen. Wir haben vorher über das Geheimnis gesprochen. Das Geheimnis basiert auf einer Zeichenfolge, in der wir unser Token erstellen können. Also, wenn jemand irgendeinen Token an unser, zum Beispiel, Backend übergeben , müssen wir es mit der Zigarette vergleichen. Wenn das Token basierend auf diesem Geheimnis generiert wird, hat er Zugriff auf die API. Aber wenn sein Token auf einem anderen Geheimnis basiert, dann wird die API nicht funktionieren. Und wie Sie sich erinnern, haben wir dieses Geheimnis importiert oder in die Umgebungsvariablen eingefügt. Also hier werde ich sagen const Geheimnis wieder und dann die Umwelt dot Geheimnis verarbeiten. Eine weitere Option, die wir auch übergeben müssen, ist der Algorithmus, der dieses Token erzeugt. Wenn wir auf die Website von JWT io gehen, werden wir sehen, dass das Token basierend auf vielen Algorithmen generiert werden kann. Hier sind die am häufigsten verwendeten. Für das Beispiel verwende ich HS 256, die auch Bibliothek JSON Web Token verwendet. So können wir haben, zum Beispiel, Algorithmen ist Array HS 256. Jetzt haben wir diese Methode mit dem Modul untersucht, also sagen wir, dass Modulpunkteexporte unser JWT ist. Auf diese Weise werden wir in der Lage sein, es in unserer app.js zu verwenden. Also hier werde ich sagen, nicht unsere JWT verwenden, die von der Konstante von DWT kommt , was erforderlich ist. Helfer JWT. So wird jetzt die Middleware verwendet. Jetzt ist unser Server basierend auf dem Token gesichert. Also jede Anfrage, die wir kommen, werden wir gefragt Authentifizierung JWT. Und dann gehen wir hierher oder drücken JWT aus, wo es für uns gedreht hat. Wenn es möglich ist, dass der Benutzer diese API verwenden kann oder nicht basierend auf seinem Token. Also lassen Sie uns jetzt überprüfen, ob unsere API geschützt ist oder nicht. Also werde ich für eine Liste von Produkten fragen. Ich gehe hierher, ich schicke diese Anfrage und dann sehe ich diesen nicht autorisierten Fehler. wurde also kein Autorisierungstoken gefunden. Express JWT hat für mich diesen Fehler zurückgegeben. Also muss ich diesen Fehler irgendwie behandeln und an den Benutzer gesendet werden, der Daten benötigt hat. Aber zuerst, wie wir der Anfrage ein Token hinzufügen können. Normalerweise kommt das Hinzufügen eines Token mit einer Anfrage mit Autorisierung in Postman. Und auch im Frontend müssen Sie zum Beispiel ein Träger-Token verwenden. Und Träger-Token. Wir müssen das Token übergeben, das Sie nach der Anmeldung mit dem Benutzer erhalten haben. Es gibt verschiedene Arten der Authentifizierung, die wir hier verwenden werden, die größere. Also vorher hatten wir auch hier den Token, nachdem wir uns mit einem Thomas User eingesperrt haben. Und hier werden wir dieses Token übergeben. Also die Autorisierung hier für diese API kommt, die mit diesem Token geladen ist. Also, nachdem ich die Anfrage gesendet habe, werde ich dort i Daten bekommen. Wenn ich diesen Token entferne, werde ich das nicht tun. Ich habe keine Autorisierung vor und wir werden sehen wie man Token über die Anfrage in den Headern lädt. Also jetzt sind wir sicher, dass unser Token funktioniert. Also lasst uns hier etwas ändern. Machen Sie einen Fehler. Wir werden sehen, dass bei autorisiertem Fehler ungültiges Token. Also haben wir hier verschiedene Fehler. Also müssen wir diesen Fehler irgendwie behandeln. werden wir in der nächsten Vorlesung sehen. 41. Authentication: Wir haben zuvor gesehen, dass wir einige Fehler in unserer API haben. Also müssen wir diese Fehler behandeln, um für den Benutzer oder das Front-End in schöner Weise angezeigt werden . Handhabung von Fehlern in RGS kann einfach auf diese Weise erfolgen. Wir gehen zur Middleware und sagen AP US. Und wir erstellen eine Funktion, die Fehler als Callback-Anforderungsantwort enthalten würde. Und als nächstes wird diese Methode in diesem Fall jedes Mal ausgeführt, wenn ein Fehler in unserer API vorliegt. Also hier können Sie überprüfen, ob es einen Fehler gibt. Dann können Sie aufsteigen, zum Beispiel response.status. Wie zum Beispiel, sagen wir 500 und der JSON. Und in diesem JSON USA zum Beispiel, eine Nachricht und diese Meldung sagen Fehler im Server. So kann jeder Fehler im Backend auftreten, wird mit dieser Nachricht aufgerufen werden. Lassen Sie uns das mit dem Fehler versuchen, den wir mit der Autorisierung bekommen haben. Also werde ich hier in diesem Token einen Fehler machen. So werden wir hier sehen, dass wir Fehler im Server haben, weil wir ein Problem im Token haben, aber wir wissen nicht, was genau der Fehler ist. So können wir diese Fehler basierend auf dem Typ klassifizieren. Denn wenn wir diesen Fehler irgendwie drucken, sagen wir anstelle der Nachricht, der Sprint, dieser Fehler, ein Fehler hier und dann versuchen, werden wir sehen, dass der Fehler einen Namen hat. Basierend auf dem Namen. Vielleicht kann ich die Fehler klassifizieren, oder wir können es so behalten. Es liegt an Ihnen, aber wir können es auf die aktuelle Art und Weise schöner machen. Aber zuerst, um eine saubere app.js zu haben, Lassen Sie uns diese Methode zu unseren Helfern verschieben. Also lassen Sie uns hier eine Datei erstellen, nennen Sie es Fehlerbehandlungsroutine für JS. Und wir erstellen eine Funktion, nennen es Fehlerbehandlungsroutine. Und es wird die gleichen Parameter, Fehler, Anfrage, Antwort und nächste haben. Und dann können wir damit umgehen, was wir hier haben. Also können wir das nehmen, wenn Sie es hier einfügen. Und auf diese Weise können wir J so sauber wie möglich halten. Also hier müssen wir Error Handler sagen. Und Fehler-Handler ist konstant. Fehler und Lernen sind von den Helfern und Fehlerbehandlungsroutine erforderlich. Basierend auf dem Typ oder dem Namen des Fehlers können wir unsere Fehler klassifizieren. Zum Beispiel, sagen wir, wenn Fehler Punktnamen, sahen wir zuvor, dass wir einen Namen haben, einen autorisierten Fehler. Also werde ich hier den Status 401 zurückgeben, und der Fehler wird wie eine Nachricht sein. Wir können sagen, dass Nachricht ist, zum Beispiel, ist der Benutzer nicht. Wie wir auch in der Zukunft sehen werden, werden wir Art der Fehler haben, die Validierungsfehler genannt wird. Wir werden sehen, dass später, wenn wir gehen, um Fotos hochladen. Oder wir sagen, Fehlerpunktname wird zum Beispiel Validierungsfehler sein. Dann wird die Antwort die gleiche sein wie diese. Aber zum Beispiel, lassen Sie uns genug sein. Jetzt nur mit dem Fehler, werden wir diese Nachricht ändern, wenn wir den Upload der Bilder und der Dateien durchführen. Und für allgemeine Fehler ist es besser, das auch zu handhaben. Also haben wir hier den Antwortpunktstatus zurückgegeben. Und wenn es einen allgemeinen gibt, können wir sagen, dass es ein Serverfehler ist, also sind es 500. Und dann schicke ich im JSON die Nachricht als Fehler. Oder Sie können den Fehler direkt ohne Nachricht senden. Hier werden wir zurückkehren und auch hier zurückkehren. So haben wir jetzt einen Fehler-Handler für unsere Autorisierung und Validierung. Also jetzt im Front-End, wenn ich etwas unautorisiertes Synchronisieren mache. Wenn ich also nach einer API ohne Token frage , bekomme ich diesen Fehler. Und wenn ich das tue, Zum Beispiel, Ich lade ein PDF hoch und ich bin nicht erlaubt, eine PDF auf unsere Thurber hochladen, so werde ich den Validierungsfehler bekommen. Und auch wenn hier kein klassifizierter Fehler vorliegt , erhalten wir den Fehler im Allgemeinen als Nachricht im JSON. Es ist schön, einige Kommentare immer im Code zu haben. So können Sie einige Kommentare abspielen, um zu erklären, welche Art des Fehlers dies ist. 42. REST von der Authentifizierung: Willkommen zurück. Jetzt haben wir eine völlig sichere API, so dass niemand sie ohne Authentifizierung verwenden kann. Also in diesem Fall muss der Benutzer, wenn er nachsehen wollte, er autorisiert sein. Das ist also nicht logisch für uns. So kann der Benutzer in der Lage sein, einen Login zu verwenden, um ein Token zu erhalten. In diesem Fall müssen wir diese API irgendwie ausschließen, um authentifiziert zu werden. Also hier in Express JWT, kann ich nicht sagen, es sei denn. Und in diesem, es sei denn, ich werde ein Objekt haben, wo ich empathisch finden kann , sind die ganzen APIs, die ich ausschließen möchte. Lassen Sie uns zum Beispiel den Login ausschließen. Tun Sie das. Ich muss alle APIs angeben, die ich möchte, dass sie ausgeschlossen werden. Also kann ich hier sagen, api Schrägstrich, v1 Schrägstrich Benutzer und Login. Also möchte ich, dass das hier hingerichtet wird. Lassen Sie uns versuchen, dass jetzt Postman ist. Und wir sind immer noch nicht autorisiert. Dies liegt daran, dass ich hier einen weiteren Schrägstrich hinzufügen muss. Also gehen wir wieder zum Postman. Wir versuchen es und wir haben das Token wieder. Also musst du vorsichtig sein, dass du hier den Schrägstrich haben musst. So können wir auch das Register hinzufügen. Ich habe bereits hinzugefügt, dass es nur die API, die genau wie der Post ist. Also hier in Benutzern habe ich das Postregister, das genau das gleiche wie Post ist. So kann der Benutzer auch ein Konto im Webshop registrieren. Und hier wird für den Administrator verwendet, der Benutzer entfernen oder hinzufügen möchte. Was ist mit den Produkten? Produkte Außerdem brauche ich irgendwie, um das Produkt kostenlos ohne Authentifizierung zu bekommen. Daher brauche ich nicht, dass der Benutzer authentifiziert wird, um das Produkt zu erhalten, weil ich nicht möchte, dass sich Leute anmelden. Dann können sie meinen Webshop sehen. Ich brauche sie, um die Produktliste ohne Authentifizierung zu erhalten. Also, wie wir das tun können, müssen wir die Methode angeben, die HTTP-Methode. Also kann ich sagen, drucken Sie mich nur, dass GET-Anfragen, aber erlauben Sie keine Post. Andernfalls werden die Leute in der Lage sein, Produkte in meinem Webshop zu posten. Um dies zu tun, diese Pfadmethode akzeptiert Ein Objekt und dieses Objekt hat ein erstes Feld als URL. Und zweites Feld sind Methoden. Und URL, ich kann die URL angeben, wie wir es hier haben. Aber statt dessen werde ich Produkte verwenden. Und die Methoden werden erhalten, zum Beispiel, und Optionen. Und das wird ein Array sein. So sehen wir hier haben wir die API-URL angegeben, und dann geben wir die Methoden an. Lassen Sie uns das versuchen. Ich werde hier gehen, um die Liste der Produkte zu erhalten. Ohne Authentifizierung. Es funktioniert perfekt. Und wenn ich das entferne, wird es nicht funktionieren. Es ist also besser, es so zu haben, damit der Benutzer die Produktliste im Frontend erhalten kann. Ich habe hier den Code umgestellt, also sieht er schöner aus. Also hier haben wir die API-Variable, die wir von der Umgebungsvariablen bekommen. Und hier verwende ich Backticks, um die Variable in die Stärke zu injizieren. Aber jetzt haben wir ein Problem. Erinnern Sie sich? Wir hatten vorher in den APIs für Produkte, wir haben Methoden wie zum Beispiel erstellt, vorgestellt und vorgestellt werden. Wir mussten auch öffentlich sein, weil ich das Feature-Produkt in meinem Front-End ohne Benutzerauthentifizierung zeigen möchte . Also, hier, wenn ich es versuchen möchte, gehe ich zu Postman hier geschrieben und ich sage drei vorgestellte Produkte. Ich werde nicht autorisiert sein. In diesem Fall müssen wir auch diese URL hier angeben. Aber dann werden wir eine sehr lange Liste von APIs haben, vor allem durch die Zeit, wenn wir sehr großen Webshop haben. Weil wir eine Menge APIs brauchen. Nicht nur sagen, zum Beispiel, geben Sie mir das Feature Produkt oder geben Sie mir die Produktzahl. Also das Schöne hier, dass ich STD-String so verwenden kann, kann ich reguläre Ausdrücke verwenden. Reguläre Ausdrücke geben mir zum Beispiel die Möglichkeit , alles nach den Produkten zu spezifizieren. Also hier mit dieser Zeichenfolge kann ich diese verwenden. Also, weil wir hier haben, habe ich diesen Stern. Also alles, nachdem die Produkte funktionieren. Also jetzt, nachdem ich meine Ablehnungen erstellt habe, sage ich hier API Schrägstrich, v1 Schrägstrich Produkte. Hier ist der Escape-Schrägstrich. Es wird also keinen Konflikt mit dem Schrägstrich machen, den wir definieren müssen. In diesem Thema handelt es sich um reguläre Ausdrücke. Sie müssen also mehr über diese regulären Ausdrücke wissen. Ich verwende immer Ablehnung Tester , der immer online befindet. Das ist eine schöne Website namens Regex 101. Und hier können Sie Ihre regulären Ausdrücke testen. Also hier werde ich dieses nehmen und es auf dieser Website versuchen. Also sage ich hier, so etwas wird erlaubt sein, aber wenn ich hier einen Fehler gemacht habe, dann wird es nicht erlaubt sein. Es ist also genau diese Formel. Hier ist es also besser, immer reguläre Ausdrücke zu verwenden , um mehr die APIs anzugeben und weniger Code zu haben. Also lasst es uns jetzt versuchen. Und wir haben unsere vorgestellten Produkte. Lassen Sie uns auch das Gleiche tun, vier Kategorien. Also haben wir hier 1 und Kategorien. Damit wir sie kriegen können. Und zum Beispiel können wir sie nicht essen oder posten. Wenn ich also in Zukunft weitere APIs hinzufüge, müssen wir hier einige Ausschlüsse hinzufügen, immer in diesem Pfadarray. 43. Füge noch mehr Secret zu: Wir sahen vorher, als wir einen Login hatten, dass wir keine Daten innerhalb dieser Antwort oder innerhalb des Token angeben können . In diesem Fall kann ich auch einige geheime Daten übergeben, die ich sein möchte, kommt nur mit dem Token. Wenn der Benutzer diese Informationen nicht im Token hat, werde ich ihm nicht erlauben, etwas zu tun. Eine der geheimen Informationen, die ich hier weitergeben kann, ist admin. So ist admin, ich kann sagen, dass dieser Benutzer admin im Webshop ist oder nicht. In diesem Fall kann ich ihm erlauben, in das Webshop-Admin-Panel zu schauen oder nicht. Der normale Benutzer kann sich also nicht einloggen, aber der Admin, der admin hat, wahr, er hat weiter gesucht. Und natürlich ist es in diesem Fall besser, die Tabellen zu trennen. So kann ich Benutzer und Kunden haben, zum Beispiel, oder Benutzer und Administratoren. Dies werden wir in der nächsten Vorlesung genauer sehen. Jetzt haben wir den Benutzer und dann werde ich überprüfen Benutzer ist admin. Also in diesem Feld, in diesem Token, kann ich den Benutzer senden, wenn er admin ist oder nicht. Vielleicht werden Sie mir sagen, warum Sie das nicht im Frontend tun können, wie überprüfen Sie, ob der Benutzer admin ist oder nicht. In diesem Fall kann der Benutzer zum Beispiel einige Hacker, der Erfahrung in der Programmierung hat, er wird in der Lage sein, sich vom Frontend zum Admin-Panel anzumelden. Sogar er hat diese Fähigkeit nicht. Er kann nur eine gefälschte Daten erstellen, die er Admin ist. Und dann kann er wie in der JSON setzen ist admin wahr. Und dann kann er reinschauen. Und dieser Fall, es ist nicht gut in unserem Webshop, also ist es besser, es hier gesichert zu haben. Wenn der Benutzer also das I-Token nicht hat, das Admin hat, wird er nicht in der Lage sein, in das Admin-Panel zu schauen. Lassen Sie uns das versuchen und unser Token sehen, wenn es validiert ist, richtig, ich gehe zum Postman und drücke Senden. Das ist gut. Wir haben jetzt das Token. Also überprüfen wir dieses Token in DWT dot io. Gehen Sie hier, versuchen Sie es. Ich werde auch sagen, dass dieser Admin und Ablaufzeit. Also in diesem Fall kann die Person kein Token wie das bauen, weil es nicht tut, er hat nicht das Geheimnis. Und wenn Sie sich erinnern, überprüft die API immer dieses Token. Wenn es mit dieser Zigarette gebaut wurde, die wir in unserem Backend angegeben haben. 44. Benutzer und Administratoren: Wie wir bereits gesehen haben , haben wir einige API-Anfragen ausgeschlossen, um nicht authentifiziert zu werden. Zum Beispiel sollten hier die Produkte wie Git und Optionen nicht authentifiziert werden, da sie öffentlich sein werden. So kann jeder öffentliche Benutzer die Produkte in meinem E-Shop durchsuchen. So der Login-Benutzer, der in den E-Shop gesperrt, kann er Produkte posten oder aktualisieren, um Produkte, Elite-Produkte. Aber in unserem Fall jetzt die Benutzer, unsere Kunden. Wenn ich also Kunde bin und mich in das Problem eingeloggt , kann ich in diesem Fall habe, kann ich in diesem FallProdukte löschen. Und in den ersten Sekunden, die ich diese Website online veröffentliche, wird sie zerstört. Wenn Sie sich erinnern, haben wir im Modell ein Feld erstellt, das sagt, ist admin. Also hier geben wir den Benutzer an, ob er admin oder nein ist. In unserem E-Sharp werden wir auch Admin-Panel haben. Und dieses Admin-Panel ist für normale Benutzer nicht erlaubt, nur die Admins zu betreten. Also haben wir hier auf Benutzer-Tabelle, einige Benutzerrollen. Wir haben einen Kunden und wir haben admin, und sie sind beide in der Benutzertabelle. Sie haben hier die Freiheit, zum Beispiel getrennte Tabellen in diesem Fall zu tun . Aber hier wollte ich die Benutzerrollen erwähnen. So können Sie sie auch in derselben Tabelle, aber mit unterschiedlichen Rollen erstellen. Es gibt viele Möglichkeiten, Benutzerrollen in Node.JS zu machen, aber ich gehe mit dem einfachsten Weg, den wir für unseren E-Shop benötigen. Wenn Sie sich erinnern, nachdem der Benutzer sich bei der Anwendung angemeldet hat, wurde ihm ein Token zugewiesen. Und dieses Token ist mit Benutzer-ID überlastet und ist admin. Und hier wissen wir innerhalb des Token, ob der Benutzer admin ist oder nicht. Und wenn der Benutzer eine Anfrage sendet, disassembliert die JWT-Bibliothek dieses Token mit dem geheimen Code, der in unserer API oder in unserem Server bereitgestellt wird. Und es wird sehen, dass, wenn es wirklich von diesem Server generiert wird oder nicht. So können wir den Benutzer identifizieren, wenn er Token aus unserem E-Shop hat oder nein. Bis jetzt ist alles schön. Nehmen wir an, dass ich ein richtiges Token habe. Und ich möchte auch in meinen Job als Admin schauen. Auf diese Weise wird es uns nicht sicher halten, weil der Benutzer, in diesem Fall ist in der Lage, Produkte zu löschen oder hinzuzufügen. Das Express-JWT hat also eine großartige Methode, die es zum Beispiel überprüft oder das Token unter bestimmten Bedingungen widerruft. Um dies zu tun, gibt es ein Feld widerrufen wird, und dies wird widerrufen ist eine Funktion. So können wir auch im Rückruf angeben, ob der Benutzer admin ist oder nicht. Also erstelle ich hier, zum Beispiel, eine andere Methode wird widerrufen. Und dies wird widerrufen wird eine Funktion, asynchrone Funktion sein. Und es wird Anfrage haben, Nutzlast. Und Don. Was sind das für Parameter? Anfrage ist, wenn ich die Anforderungsparameter oder den Anforderungstext verwenden möchte, möchte ich etwas wissen, was den Benutzer sendet. Die Nutzlast enthält die Daten, die sich innerhalb des Token befinden. Zum Beispiel möchte ich admin von dem Token erhalten, das dem Benutzer signiert ist. Und dieser Benutzer sendet es mir mit den Anforderungsheadern. Also hier in diesem Fall kann ich sagen, wenn nicht Payload dot admin ist. Weil ich jetzt Zugriff darauf habe, ist admin für die Nutzlast dieses Tokens. Dann werde ich zurückgeben, dass getan ist null und wahr. Also in diesem Fall sagen wir, dass das Token ablehnen. Wenn also eine autorisierte API aufgerufen wird und unser Benutzer nicht admin ist, wird sie abgelehnt. Und sonst, wenn er admin ist, können wir sagen, getan ohne irgendwelche Parameter. Wie bereits erwähnt, haben wir nur zwei Arten von Benutzern in unserer Ausgabe. So haben wir Admin und Benutzer. Wenn Sie mehr Rollen haben, können Sie hören, klassifizieren. Und hier definieren Sie, was in evozierten ist oder was erlaubt ist. Versuchen wir das mit dem Postboten. Wenn Sie sich erinnern, haben wir hier einen Benutzer, Thomas Jackson, der er nicht Admin im Shop ist. Und das sind seine Daten. So sehen wir hier, dass Admin falsch ist. Und als ich versuchte, ein Produkt in unserer API und neues Produkt zu veröffentlichen, werde ich den Benutzer nicht autorisiert. Lassen Sie uns das Token so ändern, dass es mit admin durch ist. Nun, lassen Sie uns manuell zur Datenbank gehen und diesen Benutzer in einen Admin ändern. Also werde ich hier Admin durch sagen und dann klicke ich auf Update. Wenn ich jetzt versuche, senden zu verwenden, werde ich auch unautorisiert. Warum? Weil ich das Token verwende, mit dem geladen wird, ist admin false. Also müssen wir noch einmal nachsehen, um ein neues Token zu erhalten. Also gehe ich zur Login-API, ich habe den Benutzer und das Passwort. Ich schicke diese Anfrage, ich habe ein neues Token. Und lassen Sie es uns in unseren Post-Anfragen verwenden. Auf Autorisierung. Ich spiele, ersetze es hier und versuche es erneut. Und es ist erfolgreich gepostet das Produkt dank JWT Express, dass es diese Methode hat. So war es in der Lage und machte uns in der Lage, zum Beispiel, diese Benutzerrolle zu tun . Jetzt ist unsere Anwendung völlig sicher und niemand kann sie ohne Autorisierung oder Admin-Rolle verwenden oder darauf zugreifen. 45. User REST-API: Manchmal möchte der Administrator des Workshops wissen, wie viele Benutzer oder Kunden er in seiner Werkstatt hat. In diesem Fall benötigt er eine API, um die Benutzeranzahl zu erhalten. Das haben wir vorher mit den Produkten gemacht. Wir hatten eine API, vor allem um zu bekommen, wie viele Produkte wir in unserer Ausgabe haben. Also lassen Sie es uns kopieren und zur API des Benutzers gehen. Nach dem Login und Registrierung können wir es hier verwenden. Und wir sagen das gleiche GetCount, aber Benutzer. Und hier sagen wir Benutzeranzahl. Wenn kein Benutzer zählt, Sie 500 zurück und dann Ihre Rückkehr für mich Benutzeranzahl. Also lassen Sie uns speichern versucht, um seinen Postboten. Wir gehen zum Beispiel, hier, sage ich Benutzer und bekommen Zählung. Probieren Sie es aus. Wir haben einen Fehler, weil ich einen Beitrag mache. Wir müssen ein GET machen. Wir versuchen es noch einmal. Wir haben Benutzeranzahl für, wir haben wirklich vier Benutzer. Wir haben auch keine Löschanforderung durchgeführt. Also lassen Sie uns es auch aus, zum Beispiel, den Kategorien oder Produkten kopieren . Wir können es von hier aus machen und das hier holen. Und dann stellen wir eine Löschanforderung und ich ersetze Benutzer, Benutzer. Und alles andere ist Benutzer. Wie Sie hier sehen, ist es genau so , wie wir es mit den Produkten gemacht haben. Wir speichern es, und jetzt sind wir völlig fertig mit den Benutzern. Ich bin so froh, dass Sie dieses Modul beenden und Sie werden den Code sehen , wo wir im Ressourcenordner angekommen sind. So können Sie es herunterladen und dann Dinge ausprobieren, Dinge ändern, selbst versuchen und versuchen, Ihren Code mit dem Code zu vergleichen, den ich hochgeladen habe. 46. Backend: Bestellungen: Willkommen in einer neuen Rubrik. In diesem Abschnitt ist völlig auf die Aufträge bezogen. So haben wir ihre Produkte und auch die Benutzer erstellt. Und jetzt werden wir die Befehle aufbauen. Wie jeder E-Shop, der Benutzer wird eine gefüllt seine Karte haben und dann wird er zu überprüfen, um eine Bestellung einzureichen. Diese Bestellung wird mit der Adresse der Person und auch die Versandoptionen und wie er diese Bestellung bezahlen. Und wir werden auch nach dem Einloggen des Nutzers sehen, wie wir auch die Daten des Nutzers erhalten und die Bestelldaten automatisch füllen würden. Also, ohne dass der Benutzer die Rechnungsadresse wieder fühlen. So lassen wir die Daten kommen aus den Benutzerinformationen, die wir zuvor erstellt haben. Und auch in diesem Abschnitt werden wir sehen, wie Sie das Produkt mit der Bestellung verknüpfen können. So werden wir sehen, dass die Bestellung viele Produkte enthält. Also manchmal füge ich zum Beispiel T-Shirt und Hosen hinzu. So werden wir sehen, wie Sie die Bestellung mit den Produkten verknüpfen können. Und im Backend oder im Backoffice wo sich der Administrator einloggen und die Bestellungen kontrollieren kann. Wir werden sehen, wie wir in der Lage sein werden, den Status der Bestellung zu ändern. So wird es von geliefert oder zum Beispiel versandt, oder sogar ist es gesperrt oder storniert. Also hier wird alles völlig mit dem Backend verbunden sein. Wir werden nicht am Frontend arbeiten. Also werden wir mit Postman arbeiten. Schüler können verstehen, wie dieses Backend isoliert vom Front-End funktioniert. Ich hoffe, Sie werden diesen Abschnitt genießen. Dieser Abschnitt wiederholt, wie ich Ihnen sagte, nicht die vorherigen Abschnitte. Es hat keine neuen Dinge. Wie wir die Produkte wie eine Reihe von Bestellartikeln verknüpfen und es auch mit der Bestellung verknüpfen wird fertig. Und fangen wir an. 47. Bestellungen und Bestellungen, Modell und Scheme: Willkommen zurück. Jetzt werden wir das Bestellschema und Bestellpositionen Schema implementieren. Zuvor haben wir die Datenbank implementiert oder wir planten die Datenbank basierend auf dem, was wir für den E-Shop benötigen. Wie Sie auf der rechten Seite des Bildschirms sehen, haben wir die Tabelle bereits Bestellungen und Bestellartikel. Wie in relationalen Datenbank, sehen wir die Verbindung zwischen der Bestellung und Auftragspositionen. Beginnen wir zuerst mit Bestellungen, wie wir zuvor gesehen haben, mit den Produkten und der Beziehung zu Kategorien. Wir hatten auch implementiert, dass die Kategorie einen Typ von Objekt-ID hat und der Verweis auf Kategorie-Tabelle ist. Also lassen Sie uns das Gleiche zwischen der Bestellung und dem Bestellartikel machen. Also werde ich diesen Teil kopieren. Ich werde auf die Bestellung gehen und ich werde hier bestellen Artikel. Und hier haben wir die Objekt-ID und die Tabelle der Bestellung Artikel und erforderlich ja, durch. Aber der Unterschied hier, dass wir vielleicht mehrere Bestellartikel haben, nicht nur eine. Also in Mongoose können wir das implementieren, indem wir dies innerhalb eines Arrays ausrichten. In diesem Fall müssen wir das Order Items Array von IDs von Auftragspositionen übergeben oder haben , die in der Datenbank vorhanden sind. Also in diesem Fall müssen wir Bestellartikel Tabelle erstellen. Also lasst uns hier eine Akte haben. Nennen Sie es bestellen Artikel dot js. Und es wird das gleiche Schema haben, Mongoose all diese Informationen. Die Sache hier werden wir Artikel haben und hier sind die Artikel, die wir nicht haben. Wir werden Menge haben, die Typnummer ist. Und es ist erforderlich. Ja, wahr. Und wie wir auch sehen, dass wir ein Produkt haben. Daher müssen wir diesen Bestellartikel mit dem Produkt verknüpfen. Also werde ich hier sagen, dass ich ID oder Typ der Objekt-ID haben werde. Mungo Schema-Types, dass Objekt-ID. Und das ist Referenz dieses Bestellartikels wird Produkt sein. Und lassen Sie uns als Bestellartikel exportiert und haben es als Bestellartikel. Und hier haben wir Artikel Schema bestellt. So ist unser Bestellartikel fertig, den wir hier importiert haben. Und wir referenzierten mit Objekt-ID in der Ordnungstabelle. Also die Sache hier, dass wir viele Beziehungen haben. So ist die Bestellung bezieht sich auf alle anderen Artikel und Bestellartikel bezieht sich auf das Produkt. , bekomme ich in meiner Bewerbung Wenn ich also nach einer Bestellung frage alle anderen Artikel einschließlich ihrer Produkte und befülle diese Produkte. Zum Beispiel brauche ich auch den Namen und die Kategorie. Hier habe ich schnell die anderen Felder hinzugefügt, die wir brauchen, die Lieferadresse, 12 , Stadt, Postleitzahl, Land, Telefonstatus, die wir sagen, dass ein Standardwert anhängen. Also, wenn die Person eine Bestellung abgibt, dann ist der Standardwert oder der erste Status der Bestellung ausstehend. Und hier haben wir auch den Gesamtpreis. Wie wir sehen, dass wir es intern berechnen würden, wenn wir die Bestellung erstellen. Und hier, ein weiterer Verweis mit Objekt-ID auf die Benutzertabelle. Wir wissen, welcher Benutzer oder seine Störung und das Datum bestellt dann hier, dass der Benutzer es nicht an das Back-End senden muss. Es wird jetzt automatisch mit dem Punkt erstellt. Es wird also die Zeit erstellt, an der die Postanforderung gesendet wird. Und wie Sie sich vorher erinnern, hatten wir hier einen virtuellen Ausweis. Um diese Unterstrich-ID nicht zu haben, können wir auch normale ID haben. Lassen Sie uns es auch kopieren und haben es auf die gleiche Weise. Also hier habe ich das Bestellschema gesagt, erstellen Sie für mich ein virtuelles ID-Feld anstelle von Unterstrich-ID. Also jetzt sind wir bereit, mit diesen Tabellen zu arbeiten. Zum Beispiel haben wir hier Bestell- und Bestellartikel, so dass die Beziehung zwischen diesen beiden Tabellen erreicht wird. Und jetzt sind wir bereit, unsere API mit Bestellungen zu erstellen. 48. Array of Refs für Link Artikel zu Produkten bestellst: So ist die Reihenfolge mit den Auftragspositionen durch Array verknüpft. Also lassen Sie uns sehen und lesen Beispiel, wie das Frontend diese Daten an das Back-End sendet , das ich hier erstellt habe und Objekt, zum Beispiel, wie der Benutzer die Daten an das Back-End sendet. vor, Stellen wir unsvor,dass der Benutzer einen Wagen hat und er zwei Produkte ausgewählt hat, Produkt 1 und Produkt 2. Und sie haben unterschiedliche Ausweise. So Bestellartikel werden Array von zwei Produkten sein, und jedes Produkt wird eine Menge haben. Auf diese Weise habe ich eine Reihe von Bestellartikeln oder ihr Artikel hat eine Menge und das Produkt. Und der Rest wird derselbe sein. Außer hier werden wir sehen, dass der Benutzer den Benutzernamen sendet, aber wir senden die Benutzer-ID, die die Bestellung erstellt. Das Gleiche hier. Wir haben den Produktnamen nicht gesendet, aber wir haben die Produkt-ID gesendet. So ist also die Produkt-ID mit dem Bestellartikel verknüpft und wie Auftragspositionen mit der Bestellung verknüpft werden. 49. Neue Bestellung und Einstellung, die die Posts von neuen Bestellung ist.: Eine Bestellung in unserer Datenbank erforderlich Daten vom Benutzer. Wie wir bereits gesehen haben, haben wir diese JSON-Daten, wo sie Benutzer nach der Kasse, wird er die Bestellung in unserer Datenbank platzieren. Also, was wir zuerst brauchen, um eine Postanforderung in Bestellungen API zu erstellen, haben wir bereits eine GET-Anfrage. Wir müssen jetzt eine Post-Anfrage erstellen, um nicht den gleichen Prozess zu wiederholen, den wir zuvor getan haben. Lassen Sie uns die einfachste Post-Anfrage kopieren, die wir in Kategorien erstellt haben. Und wir gehen hier zwei Kategorien, posten Anfrage und kopieren es, und fügen Sie es in unsere Bestellungen. Also, was von uns erforderlich ist, müssen wir ein Modell der Bestellung und die Felder der Reihenfolge, die wir waren, erstellen wir vor und erstellt das Schema. Nehmen wir also den einfachsten Fall an, da der Benutzer diese Daten sendet. Also hier bekommen wir die Daten. Ich füge sie schnell ein, um den gleichen Vorgang nicht zu wiederholen. Also haben wir vom Benutzer die Bestellartikel alle kommen mit dem Körper der Anfrage , der hier ist. So haben wir alle anderen Elemente und alle Daten , die vom Benutzer vom Frontend gesendet werden. Lasst uns das Zeug hier reparieren. Ich lehre Cue so, wie man es schnell anruft, also müssen wir nicht wieder alles in Bezug auf die Bestellung schreiben, weil wir immer Post Anfrage haben, wir haben immer löschen Anfrage. Es ist also besser, es aus der grundlegenden Anfrage zu kopieren und zum Beispiel die Namensdinge so zu ändern , dass sie in unsere neue API passen. Also hier haben wir alles bestellt jetzt bestellen und die erstellte Bestellung zurückgeschickt. Aber wenn Sie sich erinnern, haben wir Bestellartikel Tabelle erstellt. So weiß der Benutzer im Frontend nicht, dass die Bestellelemente, die in der Datenbank gespeichert sind. Also hier werden Sie einfach diese Daten senden. Er will dreimal dieses Produkts und zwei Mal dieses Produkts. Aber um diese Daten zu holen und sie für den Administrator zu speichern, wird dies zum Beispiel sein, wir können ein Hindernis sagen, ein kleines Hindernis, um sie wieder aus der Datenbank zu bekommen. Aber wir werden das mit Mongoose während dieser Beziehung zwischen Bestell- und Bestellartikeln lösen. Wenn also der Benutzer oder die Post Anfrage gesendet oder erstellt wird, müssen wir die Bestellartikel zuerst in ihrer Datenbank erstellen und dann an sie anhängen oder sie mit der Bestellanfrage beziehen, die wir hier haben. Und wie wir zuvor gesehen haben, dass Artikel bestellen, ist es Array von IDs aus der Bestellartikeltabelle. Also in diesem Fall brauchen wir Array von IDs, IDs, die in der Datenbank dieser unsere Auftragspositionen sind. Also zuerst müssen wir diese IDs erstellen oder wie Mongoose sie für mich erstellen wird. Und dann werde ich sie mit der Bestellung speichern oder sie mit dieser Bestellung in Verbindung bringen. Also hier werden wir nicht direkt vom Benutzer den Bestellartikel bekommen , der das Produkt enthält und die Menge wissen, wir brauchen nur Array von IDs. So können wir sagen, Bestellartikel-IDs. Und diese Bestellartikel-IDs stammen aus unseren erstellten Bestellartikeln in der Datenbank, was wir hier tun werden. Also haben wir diese konstante const Order Item-IDs, von denen wir sie nach der Erstellung des Bestellelements in der Datenbank erhalten. Also brauchen wir irgendwie erste zwei Schleife innerhalb der Bestellelemente, die vom Benutzer gesendet werden. Also werde ich sagen, Anfrage Punkt Körper, Punkt Reihenfolge Elemente Schleife immer verwenden wir Karte, weil wir wissen, dass der Benutzer Array senden wird, Array von Auftragselementen. Und hier werden wir oder ihren Artikel, einen Bestellartikel haben. Und dann innerhalb dieses Bestellartikels, erstellen wir lassen neue Bestellartikel, neues Bestellartikelmodell. So bestelltes Artikelmodell. Wir müssen es von unseren Modellen oder deren Artikel haben. Es ist genau so, als würden wir eine neue Kategorie oder ein neues Produkt erstellen, oder es ist wie eine Post-Anfrage. Also sage ich hier, oder der Artikel, was sind die Felder in der Bestellposition? Wir haben Menge und ein Produkt. Also gehe ich hierher, ich sage Quantität. So haben wir bereits einen Bestellartikel aus der Liste der Bestellartikel, die sie Benutzer. Und so sage ich hier, bestellen Sie Artikel Punkt Menge und auch Produkt, das die Produkt-ID enthält. Also von Bestellartikel dot-Produkt, dann müssen wir diesen Artikel in der Datenbank speichern. Also sage ich lassen oder die neue Bestellposition, die gleiche Variable, die wir verwenden können. Warten Sie auf einen neuen Bestellartikel, den wir zuvor oder das Modell erstellt haben, und nicht sicher. Also hier speichern wir die Bestellposition in der Datenbank. Also, wenn wir in Ordnung Elemente, so für jeden Bestellartikel, werde ich es in der Datenbank speichern. Aber ich möchte, dass diese Karte für mich nur die IDs zurückgibt. Also hier sage ich, dass Sie nicht den neuen Bestellartikel zurückgeben, sondern die neue Bestellposition Punkt-ID. In diesem Fall erhalten wir nur die IDs in einem Array. Also haben wir die Bestell-IDs erstellt und wir fügen sie an die Bestellung, und wir werden die Bestellung speichern. Lassen Sie uns es nicht jetzt in der Datenbank speichern, lassen Sie uns einfach die Bestellung erstellt oder das Bestellmodell an das Front-End an den Benutzer senden , nachdem er Anfrage posten. Also lasst uns das mit Postman versuchen. Ich gehe zum Postboten und ersetze dies durch Bestellungen, die auf unserer API basieren, wie wir es erstellt haben. Und dann werde ich hier die Daten setzen. Lassen Sie uns zuerst das Authentifizierungstoken überprüfen und dann den Körper, was wir dieses JSON haben, zum Beispiel bekomme ich bereits diese IDs aus unserer Datenbank. Also müssen wir diese IDs bereits in der Datenbank haben. Lassen Sie uns die Post-Anfrage senden. Wir sehen, dass wir einen Fehler bekommen haben. Der Fehler kommt, Lassen Sie uns in der Konsole unseres Testservers oder unseres Servers sehen, wir werden sehen, dass wir hier ein Gewicht haben. Dies liegt daran, dass wir hier ein Gewicht haben, aber dies erfordert eine asynchrone Funktion. Ich meine hier. Also hier haben wir ein Gewicht und dies erfordert eine asynchrone Funktion. In diesem Fall können wir nicht in einer normalen Funktion warten. Wir müssen eine asynchrone Funktion platzieren, ist im Grunde diese. Also würde ich hier async sagen und speichern und erneut versuchen. Und wir werden sehen, dass die Anfrage erstellt wird oder die Bestellung neu gekühlt wird, aber die Auftragspositionen sind leer. Lassen Sie uns diese Bestellelemente verfolgen, um zu sehen, warum sie nicht erstellt werden. Um sie zu verfolgen. Wir können Konsolenprotokoll der Bestellung, Artikel, IDs tun. Und lassen Sie uns in der Konsole sehen, was es für uns zurückkehren wird. Also hier habe ich gerettet. Und dann versuchen wir es noch einmal. Lassen Sie uns die Konsole überprüfen. Wir werden sehen, dass wir zu den Versprechen zurückgekehrt sind. Also geben wir nicht tatsächlich die ID zurück, wir geben ein Versprechen zurück. Dies, weil wir hier asynchrone Funktion haben und warten, und wir kehren mit erwarten ein Versprechen zurück. Irgendwie müssen wir diese Versprechen auflösen. Da der Benutzer Array von Auftragspositionen sendet, nicht nur eine. Also müssen wir diese Versprechen miteinander kombinieren. Also hier haben wir eine Reihe von Versprechen, sie zu kombinieren, ich verwende Versprechen Punkt alle. Also hier in diesem Fall werde ich ein Rückgabeversprechen oder ein Versprechen haben, das danach hier gelöst wird, bevor wir die Bestellung erstellen. Also lasst uns versuchen, zu konsolidieren. Wieder. Wir sehen, dass wir ein Versprechen bekommen haben, nicht zu Versprechen wie zuvor. Also müssen wir dieses Versprechen auflösen. Wie wir es lösen können, können wir eine neue Konstante schaffen. Nennen Sie es Bestellnummer ist nur oder Bestellartikel. IDs, zum Beispiel, aufgelöst. Weil das ein Versprechen ist. Also kann ich hier sagen, äh, warten Sie, bis das gelöst ist, und dann drucken Sie die für mich aus. Und dann ersetze ich diese Bestellartikel-ID durch die aufgelösten Bestellartikel-IDs. Versuchen wir es nochmal. Das ist großartig. Wir kamen wieder zu ihnen. Und im Konsolenprotokoll haben wir die beiden IDs, die aus unseren Bestellartikeln erstellt werden. Lassen Sie uns das in der Datenbank überprüfen. Nach dem Einloggen sehe ich hier Bestellartikel Tabelle erstellt wird. Ich habe nicht geschaffen, dass sie Buch Atlas ist sehr klug. Basierend auf dem Modell, das ich in meiner Datenbank oder in meinem Code erstellt habe, erstellt es die Tabelle für mich. Also hier, wenn ich Artikel bestellen gehe, werde ich sehen, um Artikel zu bestellen, die auf dem Postboten erstellt werden und sie haben die gleiche ID, die in der Datenbank sind. Also jetzt sind wir bereit, unsere Bestellung zu erstellen. Also hier haben wir nichts, also haben wir keinen Bestelltisch. Das liegt daran, dass wir das Sparen auskommentiert haben. Also, hier, nachdem die Bestellung erstellt oder gespeichert wurde, werde ich sie erneut senden. Lassen Sie uns dieses Konsolenprotokoll entfernen, um unser Protokoll nicht voller unnötiger Daten zu haben. Also hier werde ich jetzt zum Postboten gehen. Geben Sie eine Bestellung auf. Großartig. Wir haben jetzt einen Auftrag erstellt, und wir haben hier, wird die neue ID der Bestellung erstellt. Also, wenn ich wieder zum Atlas gehe, werde ich mich erfrischen. Und wir werden sehen, dass Bestellungen Tabelle automatisch erstellt wird, weil wir Bestellmodell haben. Also, was ich Mongoose gebeten habe, für mich dieses Bestellmodell zu erstellen, dann hat er den Tisch erstellt. Hier haben wir also noch andere Artikel, Objekt-ID der neuen Auftragspositionen, die hier wieder angelegt werden. Jedes Mal, wenn ich die Bestellung aufgebe, erstelle ich eine neue Bestellung Artikel. In der nächsten Vorlesung werden wir sehen, wie Bestellartikel oder die Bestellung selbst detaillierter Weg zu bekommen. So werden wir nicht nur IDs bekommen, wir werden detaillierter. Wir werden den Bestellartikel sehen, was er enthält, und auch alles. Zum Beispiel, welcher Benutzer es erstellt hat, nicht nur IDs. 50. Bestelle die Bestellungsdetails und Benutzer-Daten in Bestellungen, Benutzer-Daten: Okay, jetzt lasst uns eine Liste von Bestellungen bekommen, da wir jetzt eine Bestellung in der Datenbank haben. Wir haben bereits eine GET-Anfrage für eine Liste von Bestellungen erstellt. Versuchen wir es jetzt mit einem Postboten. Ich werde hier gehen, das gleiche wie Post-Anfrage erstellen, aber es wird ein GET und die Autorisierung sein, denn immer, wenn ich eine neue API erstelle, muss ich sie authentifizieren lassen. Oder wir schließen diese API von der Authentifizierung aus, wie wir zuvor gesehen haben. Also, jetzt werde ich dieses Token Get Liste Mäuse verwenden, wir haben Liste von Bestellungen. So haben wir jetzt nur eine Bestellung in der Datenbank. Und wir bekommen es mit der GET-Anfrage, weil es ein Array ist. Lassen Sie uns den Benutzer füllen, damit wir die Benutzerdetails in dieser Anfrage sehen können. Weil ich zum Beispiel im Admin-Panel in der Tabelle der Bestellungen sehen möchte , möchte ich die Benutzer sehen, die sie bestellt haben. Also hier gehen wir in den Code und wir sagen einfach Punkt füllen. Was soll der Benutzer aufgefüllt werden? Sparen. Versuchen Sie es noch einmal mit Postman. Wir bekommen jetzt das Benutzerdetail, all sein Detail. Aber für mich als Benutzer oder Admin benötige ich nicht alle Informationen des Benutzers. Also will ich nur, zum Beispiel, seinen Namen. Um das zu tun. Wir setzen nur nach der Bevölkerung des Benutzers, wir setzen die Felder, die wir befüllen wollen. Also alles, was ich habe, zum Beispiel, den Namen und in Postman, wenn ich diese Anfrage schicke, bekomme ich nur den Namen. Lassen Sie uns eine andere Bestellung mit anderen Daten posten. Zum Beispiel werde ich hier statt Land sagen, Tschechische Republik, ich werde USA stellen. Also hier werde ich dorthin gehen und sagen, ich benutze keine und eine andere Nummer. Beispiel: 1, 2, 3, 4, 5, 7. Also hier werde ich eine andere Anfrage oder eine andere Bestellung posten. Also in diesem Fall werde ich dort mindestens zwei Bestellungen bekommen. So können wir die Bestellungen auch nach Datum sortieren. Also, weil wir bereits das Datum bestellt Feld haben, so haben wir das Datum hier durch den Punkt. Nun können wir das auch nach Datum sortieren. Um das zu tun, Es ist sehr einfach. Ich gehe einfach hier und nach der Population des Benutzers, sage ich sortieren basierend auf dem Spaltendatum bestellt. Also, hier haben wir, Sie erinnern sich an ein Datum bestellt. Und basierend auf dieser Spalte möchte ich meine Ausgabe sortieren. Also gehen wir hierher, Postbote, versuchen, die Liste wieder zu bekommen, und wir sehen, dass wir sie nach Datum sortiert bekommen. Wie Sie sehen, ist die Reihenfolge hier von der ältesten bis zur neuesten. So haben wir zuvor diese am 23. Dezember zu dieser Zeit. Und jetzt haben wir diesen. So können wir vom neuesten bis zum ältesten bestellen. Und ich denke, das, was den Benutzer interessiert, dies zu tun. Wir richten dies nur in einem Objekt und sagen dann, dass dieses Objekt gleich minus eins ist. Also, wenn ich in der Sortiermethode sage, diesen Fall, dann bedeutet es, dass sie von der neuesten zum ältesten bestellt werden. Also, wenn ich mich erfrischen und sofort zu Postman gehen, und wir werden sehen, dass wir zuerst die neueste 1 und dann die älteste haben. Sie können die Dokumentation der Sortiermethode auschecken. Es hat viele Funktionen. So können Sie sie verwenden, um Ihre Ausgaben basierend auf einem bestimmten Feld oder einer bestimmten Reihenfolge zu sortieren . Lassen Sie uns jetzt eine Anfrage Detail oder eine Bestellung Detail erhalten. Das Gleiche ist hier. Ich poste oder ich bekomme diese Anfrage hier eingefügt. Und dann, anstatt die Sortierung und Population zu haben, haben wir nach ID gefunden. Und hier geben wir die ID an. Und die ID wird Request Dot Params sein. Weil seine Parameter ID angenommen haben. Und wir wurden umbenannt, um nur anstelle der bestellten Liste zu bestellen. Hier haben wir Ordnung, Ordnung, Ordnung. Ich gehe jetzt zum Frontend und ich bekomme zum Beispiel dieses. Danach habe ich diese ID der Bestellung eingegeben und diese Anfrage gesendet. Und ich werde nur diese Ordnung mit der Bevölkerung des Benutzers bekommen. Wir kommen jetzt zu dem wichtigen Punkt. Wir haben hier, die Bestellartikel nur als IDs. Wir wollen sehen, dass die Produkte in diesem Artikel sind und die Menge, die, lassen Sie uns unseren Code ein wenig bereinigen. Also haben wir hier bevölkern. Und wir werden auch gelehrt haben, ein anderes Feld zu bevölkern, das Bestellgegenstände ist. Das probieren wir jetzt aus. Wir werden sehen, dass wir das Produkt und die Menge bekommen haben. Aber was ist, wenn ich dieses Produkt auch so füllen möchte , dass wir das Produktdetail im Inneren oder die Artikel sehen. So wie wir hier gesehen haben, der Benutzer, haben wir alle seine Details. Der Unterschied hier, dass wir Array von ihnen haben. Wir müssen also wissen, wie man das Produkt innerhalb dieses Arrays von Bestellartikeln füllt. Um das zu tun, haben wir hier eine andere Art zu bevölkern. Statt dies zu tun, wird die befüllte Methode ein Objekt sein, das einen Pfad akzeptiert. Und hier habe ich Bestellung Artikel oder Bestellung Artikel. Und in diesem Objekt, sage ich auch füllen Sie für mich das Feld, das Produkt genannt wird. Also werde ich es hier setzen und es noch einmal versuchen. Wir werden sehen wie eine Magie. Wir haben alle Informationen über die Bestellartikel bekommen. Und in unserer Datenbank sieht die Reihenfolge so aus. Wenn wir also aktualisieren, haben wir unsere Bestellung nur mit IDs und Bestellartikel sind nur IDs. Auf diese Weise halten wir eine kleine Größe die Dokumente der Datenbank, und wir tun die Beziehungen mit Mongoose Flexibilität. Wenn wir auch hier sehen, dass das Produkt die Kategorie hat und die Kategorie auch id ist. Wenn ich auch die Kategorie füllen möchte, können wir das nicht tun. Kein Problem. Wir können sagen, auch das ist bevölkert. Dies ist ein Pfad, der Produkt genannt wird und füllen Sie dann Kategorie, die innerhalb dieses Produkts ist. Also, wenn wir wieder gehen, senden Sie diese Anfrage, wir werden sehen, dass die Kategorie auch für die gesamte Bestellung gefüllt ist. Um es sauberer zu machen, können wir diesen Weg hier nicht haben, also können wir verstehen, wie er gebaut wurde. Also hier habe ich hier gesagt, dieser hier. Jetzt habe ich den sauberen Code. Dies ist also die Art und Weise, wie man die Beziehung zwischen den Tabellen in der Datenbank auffüllt. Wir sehen in der Zukunft. Nun, wie wir diese Aufträge löschen und wie wir den Status dieser Bestellung aktualisieren, die in der nächsten Vorlesung sein wird. 51. Ordnung in der Ordnung: Nachdem wir die GET-Anfrage und Post-Anfrage für die Bestellung gemacht haben, Lassen Sie uns die Update-Anfrage als die Anforderungen meines Problems nach oben. Der Administrator des A-Sharp möchte nur den Status der Bestellung ändern. Wenn also ein Kunde eine Bestellung an den E-Shop aufgibt, möchte der Besitzer des Shops diese ältere verarbeiten. Auf diese Weise wird der Auftrag vom Biegen und dann zum Bearbeiten übertragen und dann zum Beispiel zum Verschieben und dann zum Auslieferungszustand. Also müssen wir nur den Status der Bestellung aktualisieren. Wir haben zuvor gesehen, wie wir aktualisieren, zum Beispiel das Produkt. Wir haben alle Felder aktualisiert, so dass der Benutzer oder das Frontend mir alle Felder erneut senden muss. Aber hier in den Bestellungen müssen wir nur ein Feld aktualisieren, das der Status ist , der dieses ist. Um das zu tun, machen wir es so schnell. Wir kopieren eine der Anfragen, zum Beispiel, aus Kategorien. Wir kriegen das hier. Wir kopieren es auf die Befehle. Diese äußere Put-ID. Wir brauchen den Ausweis. Und dann werde ich hier sagen, ich habe den Befehl. Hier. Ich frage nach dem Bestellmodell. Und hier passieren wir nichts, nur den Status. So wird der Status von Anforderung oder Anforderung Punktkörper, Punktstatus kommen. Wenn auf diese Weise keine Bestellung mit dieser ID zugewiesen ist , sende ich einen Fehler. Andernfalls schicke ich die aktualisierte Bestellung zurück. Natürlich können Sie alle Felder hinzufügen, die Sie aktualisieren möchten. Aber die Anforderungen für diesen E-Shop, muss ich nur den Status aktualisieren. Lass es uns speichern und das mit dem Postboten ausprobieren. So haben wir bereits diese Bestellung, Lassen Sie uns aktualisiert. Also werde ich eine Zeile haben und der Typ davon oder ist JSON. Also hier werde ich sagen, dass der Status zum Beispiel verschickt wird. Also habe ich hier versandt. Und wir müssen auch diese Anfrage ändern, um zu setzen. Und wir schicken es. Und wir haben die gleiche Reihenfolge wie eine Schicht. Also lasst uns nochmal die Bestellung bekommen. Wir haben eine hier, überprüfen Sie es. Wir sehen die Bestelldetails bereits und wir haben den Status der Bestellung wird versandt. Das Löschen der Bestellung wird gleich sein. Lassen Sie uns es auch die Löschreihenfolge aus der Kategorie kopieren. Und hier werden wir Ordnung hinzufügen, nach ID finden, und dann wird es für mich Ordnung zurückkehren. Wenn es gibt oder dort, dann geben Sie wahren Erfolg zurück. Andernfalls senden Fehler oder nicht gefunden unsere einige Fehler auf dem Server. Also lasst uns das auch mit Postman versuchen. Ich werde dies von get zu delete ändern. Wir gelöscht und wir bekommen Erfolg. Diese Kategorie wird gelöscht. Wir müssen das beheben, weil es keine Kategorie ist. Wir müssen es als Ordnung schaffen. Und hier auch bestellen. Also jetzt, wenn ich eine Liste der Bestellungen bekommen möchte, wieder, wir werden nur eine Bestellung haben, die ist diejenige, die USA genannt. Und wir hatten jetzt nur einen. Vielleicht wird jemand fragen, was ist mit den Bestellartikeln? Werden sie gelöscht oder nein. Lassen Sie uns das in der Datenbank überprüfen. In unserer Datenbank hatten wir Bestellartikel und wir sollten zwei Bestellungen nur haben, um Artikel zu bestellen, aber wir sehen, dass die Bestellartikel noch hier sind. Also haben wir hier ein Problem. Wir müssen auch die Bestellpositionen der Bestellung löschen, die gelöscht wird. Also werde ich Ihnen das als Übung überlassen. Die Übung wird also nur sein, die bestellten Artikel auch nach dem Löschen der Bestellung zu löschen. Und dann werde ich Sie im nächsten Video sehen, um die Lösung zu sehen, wie wir das Löschen von Bestellpositionen implementiert haben, nachdem wir die Bestellung gelöscht haben. 52. Den Gesamtpreis einer Bestellung mit Mongoose berechnen.: Das Senden des Gesamtpreises vom Front-End ist keine gute Praxis. Zum Beispiel, wenn ein Hacker in der Lage war, eine Bestellung mit einem gefälschten Gesamtpreis zu senden, dann wird es in meiner Datenbank mit einem gefälschten Gesamtpreis gespeichert. Vielleicht hat jemand eine Bestellung von hundert, zehnhundert Dollar, aber er hat es vorgetäuscht und er hat es mit $2 gemacht. Wenn ich einen sehr beschäftigten Webshop habe, werde ich ihn nicht erkennen. Es ist also besser, nachdem der Benutzer die Bestellartikel, IDs oder die Bestellartikel im Allgemeinen an das Backend sendet . Wir berechnen das intern im Backend basierend auf dem, was wir in der Datenbank haben. Die Quelle der Wahrheit ist also eine Datenbank. Was ich also tun muss, ist, die Bestellelemente zu durchlaufen , die ich vom Benutzer oder vom Frontend erhalten habe. Und dann löse ich die Bestellartikel auf. Ich bekomme das Produkt verwandte Produkt. Und mit der Menge multipliziere ich das und errechne den Gesamtpreis. Also kommt alles aus der Datenbank. Also lasst uns versuchen, das zu tun. Hier. Wir haben Bestellartikel-IDs aufgelöst. Irgendwie müssen wir dies durch eine Variable ersetzen, die wir intern berechnen. Also nennen wir es einen Gesamtpreis. Und dieser Gesamtpreis wird von einer Konstante kommen , in der wir diese Bestellartikel lösen werden. Also auf die gleiche Weise klicken wir auf Erstellen Sie eine Konstante, nennen es einen Gesamtpreis. Weil wir hier genau die gleiche Art und Weise bestellen werden. Also werden wir es wie Versprechen Punkt alle tun. Also hier bekomme ich die Bestellartikel aufgelösten IDs und mappe über sie. Und ich bekomme bestellte Artikel-ID. Ich bekomme das Bestellelement aus der Datenbank zurück , da es hier bereits in der Datenbank gespeichert ist. Also genau wie hier, sagen Sie async für unseren Bestellartikel. Und wir bekommen die Bestellung Artikel durch warten. Und wir erhalten auch das Modell des Bestellartikels. Und finden Sie nach ID, die ID, die ich hier von der Karte bekommen habe. Und dann erhalten wir innerhalb dieses Bestellartikels nur die Produkt-ID und die Menge. Also müssen wir auch das Produkt zu befüllen. Und um es schneller zu machen, können wir nur nach dem Preis fragen. Also hier werde ich Bestellung Artikel mit dem Bereich des Produkts in ihm zurückgegeben, nur der Preis. Und dann werde ich zu Create Constant Gesamtpreis gehen, nur einer. Und ich werde sagen, die Bestellposition, die ich aus der Datenbank, Punkt-Produkt, Punkt-Preis, weil wir den Preis bereits aufgefüllt haben, multipliziert mit der Bestellposition Punkt Menge. In diesem Fall bekomme ich auch die Menge multipliziert mit dem Preis. Ich erhalte den Gesamtpreis eines Artikels. Also Mapping über all dieses Array, möchte ich danach, nur den Gesamtpreis zurückgeben. Also hier werde ich eine Reihe von Gesamtpreisen für jeden Bestellartikel haben. Lassen Sie uns also versuchen, dieses Gesamtpreis-Array zu konsolen , um sicherzustellen, dass alles gut funktioniert. Und ich werde eine neue Anfrage oder eine neue Bestellung posten. Ich habe hier einen Fehler erhalten, weil ich Konsolenprotokoll ein Versprechen bin. Also hier, wie wir vorher getan haben, dass wir hier nur ein Versprechen haben, zurückgekehrt, versprochen überhaupt, alle kombinierten Versprechen, wir haben ein Gewicht. Also ist es einfach, wir können hier auch ein Gewicht legen, wie Gewicht und dieses Versprechen auflösen, nachdem alles drinnen erledigt ist. Versuchen wir es noch einmal. Starten Sie unseren Server neu. Versuchen Sie, zu posten. Wir werden hier sehen, dass wir eine Reihe von zwei Artikeln oder Bestellartikel mit ihrem Gesamtpreis haben. Also müssen wir zusammenführen oder diese beiden Preise zu einem zusammenfassen. Um das zu tun, können wir nicht einfach einen konstanten Gesamtpreis machen. Und diese Gesamt-Preis-Array, ich werde es reduzieren. Und es ist eine reduzierte Methode. Es ist eine berühmte Möglichkeit, die Summe aller Zahlen innerhalb des Arrays zu erhalten. Also habe ich a und b, kehre für mich ein Plus B und hier fügen wir eine 0 hinzu. Der Anfangswert ist also 0 und kombiniert dann a und B oder kombiniert jedes Element dieses Arrays. Also hier, nachdem wir den Gesamtpreis erhalten haben, können wir ihn hier platzieren, unseren Server neu starten, eine Anfrage stellen und wir werden sehen, dass wir eine Post-Anfrage mit der Bestellung erstellt haben. Und der Gesamtpreis beträgt 146, der aus zwei Auftragspositionen kombiniert wird. Lassen Sie uns auch diese Bestellung Detail bekommen. Wir gehen hier, wir setzen es in die GET-Anfrage, um die Details zu erhalten. So werden wir das erste Produkt sehen, wir haben eine 32 und die Menge ist drei. Und auch das zweite Produkt ist Menge 2, und der Preis ist 25. Der Gesamtpreis wird 146 sein. Auf diese Weise garantieren wir, dass der Gesamtpreis nur aus unserer Datenbank kommt, nicht aus dem Frontend. Zunächst einmal haben wir die Bestellartikel so erstellt, wie wir es zuvor gesehen haben. Dann erhielten wir den Preis, Gesamtpreis jedes Bestellartikels, und dann kombinieren wir sie oder fassten sie zu einer Nummer zusammen. Und dann haben wir die Bestellung mit dem Gesamtpreis erstellt , der komplett aus der Datenbank stammt. 53. Abonniere den Total E mit $sum: Wie immer. Und am Ende jedes Moduls machen wir immer einige Post oder GET Anfrage von einigen statistischen Daten. Was mir hier in den Sinn kam, dass ich zum Beispiel im Dashboard des Admin-Panels der Anwendung zeigen möchte , wie viel Summen Hügel ich in meinem gesamten E-Shop habe. Also der Besitzer des Shops, als er sich in das Admin-Panel einschloss, sieht er den Gesamtumsatz und er wird glücklich sein. Also, wie immer, lassen Sie uns eine Get-Anfrage erstellen. Und die Route wird erhalten und Gesamtumsatz sein. Und hier werden wir, nachdem wir diese API übergeben haben, nach den Bestellungen, werden wir den Gesamtumsatz erhalten. Also hier haben wir asynchron, Anfrage und Antwort. Und es wird eine ROM-Methode sein. Und wir definieren eine Variable, wir nennen sie Gesamtumsatz. Und wir werden den Gesamtumsatz direkt von MongoDB erhalten. Also, indem ich Mongoose benutze, hier, habe ich warten, das Bestellmodell. Dann verwende ich eine Methode namens Aggregat. Und das Aggregat, ich kann wie Join gruppieren, können wir in relationaler Datenbank sagen, alle Tabellen oder alle Dokumente innerhalb dieser Tabelle zu einem. Und dann bekomme ich eines dieser Felder in dieser Tabelle und verwende eine der Mongoose-Methoden, wie zum Beispiel einige auf diesem Feld. So wird es für mich die Summe aller Felder zurückgeben, welcher Name, Gesamtpreis. Wenn Sie sich erinnern, haben wir bereits einen Gesamtpreis berechnet, wie wir in der vorherigen Vorlesung in jeder Bestellung gesehen haben. Also müssen wir alle diese Gesamtpreise in einem zusammenfassen, indem wir einige verwenden. Um das zu tun, haben wir hier ein Objekt. Wir gruppieren den Tisch. Und hier bei der Methode sagen wir, dass die ID null ist. So ist es. Und wir nennen das Feld, das wir in unserer API zurückgeben möchten. Also sage ich, der Gesamtumsatz ist die Summe. Dies ist ein reserviertes Wort in Mungo des Gesamtpreises. Der Gesamtpreis ist ein Feld in der Reihenfolge, und wir haben es hier berechnet, während wir die Bestellung erstellen. Also dann werde ich den Gesamtumsatz erhalten, indem ich alle Gesamtpreise zusammenfasse. Dann überprüfen wir, ob es keinen Gesamtumsatz gibt, dann kehrten wir für mich zurück, Fehler response.status. Und dann sagen wir zum Beispiel 400. Nicht senden, die Bestellung, Verkäufe können nicht generiert werden. Sonst sagen wir Antwort Punkt senden. Der Gesamtumsatz ist der Gesamtumsatz. Lassen Sie uns versuchen, dass jetzt mit Postman, ich gehe hier, ich sage, Gesamtumsatz zu bekommen. Wir haben eine Anfrage geschickt. Wir sehen, dass wir Array mit ID null und Gesamtumsatz haben. Also haben wir gesehen, dass wir genau das bekommen haben, was wir in der Gruppe gebaut haben. Wenn ich also diese ID null entferne, erhalte ich einen Fehler, weil Mongoose kein Objekt ohne eine ID oder Objekt-ID 2 zurückgeben kann, wie wir hier in diesem Fehler sehen, sagt es, dass eine Gruppenspezifikation eine ID enthalten muss. Also ist es besser, es zurückzulegen. Oder Sie können ID auch geben, indem Sie Mongoose-Spezifikationen verwenden, Es ist besser, es als null zu setzen. Also haben wir hier gesehen, dass wir ein Array haben. Wir können auch direkt BOP dieses Array und nehmen nur den Gesamtumsatz. Also können wir sagen, hier, für mich Totalverkaufs-Dot Pop zurückgegeben, weil es ein Array ist. Und dann Gesamtumsatz. Also in diesem Fall habe ich das erste Element dieses Arrays oder das leichte Element, weil es nur ein Array mit einem Element zurückgibt. Also sage ich, gib mir diesen Artikel und den Gesamtumsatz, den ich hier angegeben habe. Das versuchen wir nochmal. Wir senden diese Anfrage, wir erhalten Gesamtumsatz ist 290 zu diesem, weil wir hier haben, wenn wir die Anfrage bekommen, haben wir Bestellungen. So hat die erste Ordnung 146 und die zweite Ordnung hat auch 146. Wir können auch bekommen, wie viele Bestellungen erstellt oder in meinem Shop platziert werden, bevor wir eine Gesamtzahl der Produkte machen. So können wir dies hier aus der Produkt-API kopieren und in Bestellungen aufgeben. Und wir sagen hier oder da, zählen unsere Unterzählung oder die Kontoinhaber zählen und hier bestellen. Und mit Zähldokumenten werden wir die Zählung bekommen und in unsere Auftragsanzahl zurückkehren, und dann werden wir es bekommen. Versuchen wir das noch einmal in unserem Postboten. Also hier sage ich GetCount. Und wir werden sehen, dass wir drei Befehle haben. So ist jetzt unsere API für die Bestellungen abgeschlossen. Wir sind jetzt bereit, alle API im Zusammenhang mit den Bestellungen im Front-End zu verwenden. Und im nächsten Abschnitt werden wir zum Produkt zurückkehren, um die Bilder hochzuladen. Sie erinnern sich, wir haben hier Bild und Bilder. Das Bild wird das Hauptbild ihres Produkts sein, und die Bilder enthalten die Galeriebilder ihres Produkts. Ich hoffe, Sie haben diesen Abschnitt genossen und sehen uns in der nächsten. 54. User: Im Frontend, wenn der Benutzer eingeloggt ist, muss er wissen, welche Aufträge er in der Historie bestellt hat. Also müssen wir wenigstens eine Bestellhistorie haben. Auf diese Weise wird diese API genau so sein, als würde man am wenigsten Bestellungen erhalten , so etwas, aber sie wird nur für einen bestimmten Benutzer angegeben. Nehmen wir also diese GET-Anfragen und kopieren Sie sie auf die letzte. Und wir werden hier sagen, dass ich zum Beispiel ältere Benutzer oder Benutzerbestellungen bekommen möchte. Und wir müssen als Beispiel als Parameter die Benutzer-ID angeben . Also hier sagen wir Benutzer-ID. Wenn ich also eine Anfrage vom Frontend oder von unserer API sende, müssen wir die Benutzer-ID angeben, für die ich die Bestellungen erhalten möchte. Und als Bedingung für die Suche, sagen wir Objekt, Benutzerfeld muss Anforderung dot params dot sein. Das gleiche Paradigma, das ich hier habe, Benutzer-ID. Und vielleicht müssen wir den Benutzer nicht selbst füllen. Wir müssen die Produkte innerhalb dieser Bestellung füllen. So ist es genau so, wie wir es hier im Bestelldetail getan haben, wie wir die Bestellartikel und Produkte und Kategorie aufgefüllt haben. Wir kopieren das gleiche und wir übergeben es hier. Also in diesem Fall werden wir sehen, dass die Bestellartikel mit den Produkten bevölkert wurden und sie vom neuesten zum ältesten bestellt haben , um keine verwirrenden Namen zu haben. Lassen Sie uns das umbenennen. Zum Beispiel können wir sagen, Benutzer oder ihre Liste. Und hier Benutzerbestellenliste hier auch Benutzer geordnet. Lassen Sie uns den Server laufen. Pm Start. Der Server läuft eine Datenbankverbindung bereit? Das versuchen wir in Postman. Also habe ich hier Bestellungen, bekomme Benutzerbestellungen, und ich gebe die ID des Benutzers, ich seine Bestellungen haben möchte. Also passe ich das hier und ich habe andere Gegenstände. So sieht man sie aus. Und eine andere Bestellung, es hat auch Bestellartikel. Also haben wir die drei Bestellungen für diesen Benutzer. Wir werden hier sehen, der gleiche Benutzername sind die gleiche Benutzer-ID. Es ist immer n gleich 4, 4. Und hier noch eine. Am Ende dieses Abschnitts werden Sie sehen, dass Sie in der Lage sind, alle Anforderungen oder jede API zu erstellen , die Sie benötigen, basierend auf den Anforderungen im Front-End. So haben wir zum Beispiel die Bestellungen des Benutzers bekommen und auch wir haben zum Beispiel, wie viele Bestellungen ich in meiner Ausgabe habe. Das dreht sich alles um APIs. Im nächsten Abschnitt erfahren Sie, wie Sie Dateien auf unseren Server hochladen, wie Bilder oder einige Anhänge im Allgemeinen. In dieser Vorlesung gibt es Anhang des Ressourcencodes, wo wir in diesen Aufträgen angekommen sind. Und Sie können es herunterladen und selbst versuchen, einige verschiedene Dinge mit den APIs zu tun, die auf Ihre Bedürfnisse basieren. 55. Backend: Produktbild & Galerie: Jetzt kommen wir zum letzten Modul an, das sich auf den Rücken und die Entwicklung bezog. Wir müssen jetzt die Bilder mit unserem Produkt hochladen, wie wir bereits gesehen haben, enthält das Produkt zwei Felder. Einer von ihnen ist ein Hauptbild und das zweite Feld sind die Bilder. Also, wo wird mehr Beschreibung über das Produkt wie eine Galerie Bilder sein? In diesem Modul werden Sie sehen, dass der Hauptschritt die Installation der Walter-Bibliothek ist. Library ist eine berühmte Bibliothek, die verwendet wird, um Dateien auf den Server mit Node.JS hochzuladen. Und im zweiten Schritt werden wir die beste Konfiguration für unsere e-Sharp herausfinden, weil wir diese Bibliothek konfigurieren müssen , um die Dateien zu verwenden und auf unseren Server hochzuladen. Die dritte, werden wir sehen, wie man das Ziel verwendet und die Dateinamen hochgeladen. Immer wenn der Administrator eine Datei oder ein Bild hochlädt, muss er den Dateinamen angeben. Aber nein, wir können das nicht für den Admin oder für den Benutzer tun. Wir müssen nicht zulassen, dass er die Akte nennt. Sie können jede Datei hochladen und sie wird in unserem Server codiert werden. Verwendung von Postman ist auch sehr wichtig für unseren Fall hier, um den Bild-Upload zu testen. Wir werden sehen, wie man den Bild-Upload mit einem Postboten testen kann, indem man eine Datei oder mehrere Dateien hochlädt. Und wir werden dem Benutzer nicht erlauben, etwas hochzuladen. Wir brauchen ihn, um nur bestimmte Arten von Bildern hochzuladen, wie mit PNG-Erweiterung für J Beck. Und natürlich, das alles für eine einzige Datei getan. Jetzt müssen wir die Bibliothek erweitern, um es möglich zu machen, mehrere Dateien hochzuladen. Und es werden mehrere Dateien benötigt, damit wir viele Bilder für die Produktgalerie hochladen können. Und schließlich werden wir sehen, wie man dieses Produkt mit den Bildern und den Galeriebildern holt , um sie im Frontend zu sehen. Natürlich werden wir nur die URL des Bildes abrufen. Ich hoffe, Sie werden dieses Modul genießen und sehen Sie in der nächsten Vorlesung, wo wir beginnen, Mörtelbibliothek zu installieren. 56. die Side konfigurieren: Okay, also müssen wir zuerst das Back-End konfigurieren, um das Hochladen der Dateien zu akzeptieren. Um dies zu tun, müssen wir eine Bibliothek namens Walter installieren. Wie jede Bibliothek installieren wir npm Walter. Und damit installieren wir die Bibliothek und verwenden sie, um Dateien auf unseren Server hochzuladen. Und wie immer tun wir konstant, Walter und benötigter Mörtel. Lassen Sie uns die Dokumentation dieser Bibliothek sehen. Wenn Sie zu Google gehen und Motor eingeben, werden Sie die MPM-Pakete sehen, die npm-Website , wo wir die gesamte Nutzung dieser Bibliothek haben. Um eine detailliertere Nutzung oder aktuelle Nutzung zu sehen, können Sie auf die Homepage der Bibliothek gehen. Also hier klicke ich darauf und es würde mich auf die Homepage der Mörtelbibliothek bringen. Die einfachste Verwendung dieser Bibliothek wird also wie folgt sein, wie es in der Dokumentation ist. Also zuerst brauchen wir ein Formular und dieses Formular wird vom Postboten zur Verfügung gestellt, wie wir später sehen werden. Und die erste Verwendung hier, dass wir die molto-Bibliothek aufrufen und dann mit einem Ziel auf unserem Server des Ordners konfigurieren können. Wenn der Benutzer also eine Datei über das Formular hochlädt, wird sie im Upload-Ordner gespeichert, sich im Stammverzeichnis der Back-End-Anwendung befindet. Und danach, in jeder Post-Anfrage, zum Beispiel, haben wir ein Produkt Beiträge müssen wir auch nicht nur die URL und die Funktion der Anfrage und Antwort übergeben , wir müssen auch den Upload übergeben, ich meine den Upload -Konfiguration von Walter. Also hier können wir den Upload übergeben und wir sagen eine einzige, wir übergeben den Feldnamen , der vom Frontend gesehen wird. Wie Sie hier sehen, heißt der Feldname Avatar, und hier wird er in der Anfrage übergeben. Aber hier wird die hochgeladene Datei genau den gleichen Namen haben, wo sie vom Benutzer hochgeladen wurden. So werden wir ein Problem haben, wenn ein Kunde, oder leider, der Administrator wird die Datei hochladen. Er wird zum Beispiel eine andere Datei mit dem gleichen Namen haben. Dann wird diese Datei die alte Datei ersetzen. Und in diesem Fall haben wir ein Problem zwischen den Produkten kann ich einige Produktnamen oder einige Produkte Bilder verlieren. Der beste Weg, den wir brauchen, um mehr Kontrolle über die Benennung der Dateien und die Benennung des Ziels zu haben . Zum Beispiel müssen wir, wenn die hochgeladene Datei hochgeladen wird, müssen wir sie irgendwie in einen eindeutigen Namen umbenennen und dann auf unserem Server speichern. Um dies in mehreren Bibliotheken zu tun, gibt es eine andere Möglichkeit, eine vollständige Kontrolle über den Namen von Dateien zu haben, die als Datenträgerspeicher bezeichnet wird. Und mit diesem Beispiel werden wir unsere Upload-API erstellen. Also werden wir diesen Teil verwenden. Nehmen wir es genau dasselbe und kopieren Sie es in unsere Anwendung. Und wir werden sagen, dass Speicher Walter Disk Storage ist , der zwei Felder hat, die Steuerung des Ziels und die Kontrolle des Dateinamens. Das Ziel wird eine Funktion sein, in der es die Anfrage selbst und die Datei und den Callback hat . Der Rückruf wird zurückgegeben, wenn ein Fehler beim Hochladen vorliegt und wir weisen das Ziel darin zu. Also hier, lassen Sie uns unser Upload-Ziel setzen. Wir können es öffentlich und Uploads nennen. Also wir hier, wir werden einen Ordner namens öffentliche Uploads haben. Wir können diesen Ordner erstellen. Also können wir hier im Back-End sagen, wir können Uploads sagen. Und drinnen, oder tut mir leid, wir könnten zuerst die Öffentlichkeit haben. Öffentlich. Und es ist öffentlich wird in der Root-Ebene sein. So wird es haben, zum Beispiel hier. Und die Öffentlichkeit, der Upload-Ordner wird darin sein. Also hier haben wir jetzt öffentliche Uploads. die Datei also in Zukunft Wenn wirdie Datei also in Zukunfthochladen, werden wir sie hier direkt in den öffentlichen Uploads sehen. Im Dateinamen. Es wird das Gleiche sein. Es enthält die Rock-Anfrage und die Datei. Und wir müssen die Datei irgendwie umbenennen, um sie an unsere Bedürfnisse anzupassen und wie sie in Uploads zu finden ist. Es gibt also einen anderen Weg, wie er hier erschafft. Zum Beispiel, die, einige zufällige Mathematik eine zufällige Benennung der Anwendung oder über die Datei haben. Und dann legte er den ursprünglichen Dateinamen mit Bindestrich und dem einzigartigen Suffix, das er vorher erstellt hat. Lass uns einen anderen Weg machen. Also würde ich eine Konstante schaffen. Nennen wir es feiner Name. Und dieser Dateiname wird die Datei selbst sein, die wir diesen ursprünglichen Namen erhalten haben. Es ist bereits definiert. Und dann sagen wir, irgendwie, um die Leerzeichen zu ersetzen, ist es nicht schön, Leerzeichen in der Benennung der Dateien auf dem Server zu haben. Denn wenn Sie die URL haben, haben Sie eine hässliche URL, wo sie wie durch kaufmännisches Und-Zeichen t2 für die Leerzeichen ersetzt wird. Aber hier können wir genau unsere ersetzt haben die Räume durch Split. Also teile ich den Dateinamen basierend auf dem Leerzeichen und dem Ersetzen oder Verbinden. Wieder dieser Raum mit einem Bindestrich. Sie können auch einen anderen Weg verwenden , der zum Beispiel Punkt ersetzt jedes Leerzeichen durch einen Bindestrich. Beide Wege sind in Ordnung. So können wir auch ein Präfix oder Suffix zu diesem Namen hinzufügen. Also hier können wir den Dateinamen sagen. Und zum Beispiel können wir jetzt Datumsmenge sagen. Also hier DataNode jetzt Methode, wenn wir es sehen, wird es die Nummer des Tages zurückgeben. So können wir es mit der Konsole des Google Chrome versuchen. Du kannst jetzt Date sagen. Und Sie werden sehen, dass Sie jetzt die Nummer des Datums und der Uhrzeit erhalten haben. Dies ist also eine große eindeutige Nummer, um unsere Dateien zu erstellen. Danach haben wir eine Konstante geschaffen. Machen wir es als Konstante, nicht als VAR. Und diese Konstante wird Upload genannt. Nennen Sie es erneut, zum Beispiel Upload-Optionen. Und diese Upload-Optionen, müssen wir es an unsere Post-Anfrage übergeben, wo wir das Produkt genau die gleiche Art und Weise erstellen , wie es in Malta Bibliothek beschrieben wird. Also, wenn wir hier sehen, dass wir auch die Upload-Single und Avatar und den Feldnamen haben. Feldname, wir müssen es vom Frontend senden. Also hier sagen wir Upload-Optionen, Punkt, Single, und der Feldname, an den ich vom Front-End senden möchte. Also sage ich, zum Beispiel, Bild. Aber hier, wenn wir das Produkt erstellen, analysieren wir Anfrage Punkt Körper Punktbild. Das ist falsch. Wir müssen dieses Feld bearbeiten, um den vollständigen Pfad des Bildes zu haben. Also, ich bin Walter hat uns bereits mit dieser Anfrage geschickt, die Akte. So können wir zum Beispiel nicht sagen, Konstante Dateiname ist Anfrage Punkt Datei, Punkt Dateiname. Und dieser Dateiname kommt von hier, wo wir den Dateinamen der hochgeladenen Datei einrichten. Also werden wir den Namen genau so haben, wie wir ihn auf diese Weise haben. Wie der ursprüngliche Dateiname, ersetzt durch Bindestriche und dann Bindestrich, wissen sie es nicht. Machen wir es auf diese Weise. Wir haben einen Dateinamen und dann setzen wir den Dateinamen hier. Aber wenn ich diese Daten im Frontend abrufen möchte, und ich möchte das, ODER zum Beispiel, das Bild im Frontend anzeigen. Ich werde das Problem haben. Ich bekomme nur den Dateinamen. Zum Beispiel würde ich Bild 300, 300 Punkt J Beck bekommen . Und das ist ein Problem für uns, weil im Frontend den ursprünglichen Pfad der Datei nicht kennt. Wir müssen irgendwie den vollständigen Pfad mit der URL auch des Backends haben. Also werde ich http, localhost 3000 und den Upload-Ordner sagen . Und dann das Bild mit dem Namen und der Erweiterung. Wir fühlen uns auch hier, um die Erweiterung hinzuzufügen. Also haben wir den Dateinamen nur so. Wir müssen auch die Dateinamenoptionen hier bearbeiten. Um auch mit der Erweiterung zu haben. Wir werden das sehen, wenn wir die Datei in den nächsten Vorträgen validieren. Aber jetzt konzentrieren wir uns auf diesen Teil, dass wir die vollständige URL benötigen, nicht nur den Dateinamen. Dafür müssen wir irgendwie diese Zeichenfolge bauen. So können wir sagen, konstant. Wir können Basispfad sagen, wie der Basispfad von ihrer Anwendung. Und wir können es irgendwie mit Backticks tun, wie Anfrage Punkt. Es hat ein Feld namens Protokoll. Und dieses Protokoll wird für mich das HTTP zurückgeben. Und dann werden wir sehen, dass wir Doppelpunkt Schrägstrich haben und wir müssen den Host übergeben. So können wir es auch auf die gleiche Weise tun. Wir können sagen, Anfrage dot get, erhalten ein bestimmtes Feld namens Host. Dies ist eine Möglichkeit, den Host von der Anfrage zu erhalten. Jetzt bauen wir unseren Basispfad auf. Lass uns vier hinzufügen. Es ist auch der Teil, wo wir sagen, der Ordner, in dem es hochgeladen wird. Also müssen wir auch diesen Teil hinzufügen. Also können wir es so sagen. Und dann fügen wir nur den Dateinamen hinzu. Also können wir hier sagen, danach haben wir Backticks, Basispfad und den Dateinamen. Auf diese Weise erstellen wir unsere API-URL oder hochgeladene Datei-URL. Auf diese Weise haben wir den Basispfad ist dieser Teil und der Dateiname, der dieser Teil ist. Versuchen wir das jetzt mit dem Postboten. Und probieren Sie aus, ob alles gut funktioniert. 57. Image mit Postman: Jetzt testen wir unsere Änderungen mit Postman. Sie erinnern sich, wir haben hier das Bildfeld erstellt, das den Pfad und den Dateinamen hat, der hochgeladen wird. Ich gehe zum Postboten. Wir müssen eine Post-Anfrage auf der Produkt-API erstellen und die Autorisierung mit dem Barriere-Token hinzufügen, das wir vorher erhalten haben. Und wir haben das Token hier, um Sie daran zu erinnern, dass wir diesen Token haben, nachdem wir einen angemeldeten Benutzer erhalten haben. Also, hier gehe ich. Und dann schaue ich in einen Benutzer mit seiner E-Mail und seinem Passwort, dann bekomme ich das Token. Das hier. Wenn Sie nicht wissen, wie Sie dieses Token erhalten, was wir das im Kapitel des Benutzers erklärt haben. Okay, aber jetzt, wie wir Postman testen können, um Dateien hochzuladen. Sie erinnern sich, dass wir den Text der Anfrage als JSON gesendet haben, und wir haben den JSON hier erstellt und wir haben den Namen des Produkts oder die Beschreibung des Produkts oder die Beschreibung und den Preis angegeben. Aber hier wird es ein bisschen anders sein. Im Frontend wird es so etwas wie eine Form sein. Formular war Felder wie Sie dort rechts auf dem Bildschirm sehen. Also hier haben wir ein Feld, in dem wir es ausfüllen und sie an das Backend senden werden. Und das Dateifeld, in dem der Benutzer eine Datei hochladen kann. Diese wird mit einer Datei Daten gefüllt, und die Dateidaten werden über ein Formular Daten an das Backend gesendet werden. Also müssen wir so etwas wie ein Formular Daten und geprägten Mann erstellen. Wenn Sie ein Formular simulieren möchten, können Sie Formulardaten erstellen und jedes Feld wird hier mit seinem Wert benannt. Zum Beispiel werde ich hier den Namen des Produkts haben. Und zum Beispiel wird das Produkt, das ich posten möchte, Produkt sechs sein. Und ich möchte auch, zum Beispiel, Beschreibung des Produkts. Und hier wird Produkt sucht Beschreibung sein. Also müssen wir irgendwie alle Felder setzen, die wir wollten, wie wir zuvor gesehen haben, das Produktmodell, das wir hier haben. Die Beschreibung liest, Beschreibung, Bilder und alles hier. Also müssen wir das Bildfeld haben, lassen Sie mich die Felder hier im Postboten spüren. Und dann werden wir über die Bilder sprechen. Hier haben wir also alle Formularfelder ausgefüllt , die wir an das Backend senden mussten und mit ihrem Wert. Also für das Bild hier wird es evaluieren, wird zum Beispiel nicht Texte wie hier oder ein Wert oder eine Zahl oder ein Boolescher Wert sein zum Beispiel nicht Texte wie hier . Es wird eine Datei sein. Also, wie können wir das als Akte machen? Es ist sehr einfach. Wir haben Postbote, Es gibt einen Trick, dass, wenn Sie die Maus setzen, das Feld, wo wollen Sie ändern? Sie können festlegen, dass der Typ dieses Feldes eine Datei sein kann. Wenn Sie die Datei ablegen, haben Sie die Möglichkeit, eine Datei von Ihrem PC auszuwählen. Genau so, wie Sie eine Datei im Webformular hochladen. Also lassen Sie uns ein Bild auswählen. Ich habe hier, viele Bilder, zum Beispiel, dieses. Und lasst es uns hochladen und die Postanforderung senden. Wir werden sehen, dass die Post-Anfrage genau so erstellt wird, wie wir es im Back-End gemacht haben. Und wir haben das Bild als vollständige URL. Und die Bilddatei mit der gleichen Erweiterung hier. Aber wenn Sie hier sehen, dass wir eine Erweiterung und dann die Benennung haben, so haben wir ein Problem hier. Also müssen wir diese Erweiterung irgendwie ausschließen und diesen Punkt jetzt nach setzen, und dann setzen wir das Aussterben am Ende. Lasst uns das schnell machen. Wir werden ihre Konfiguration hier der Dateinamen in Walter ändern , um den abgeleiteten Dateinamen mit der Erweiterung zu erhalten. Also lasst uns diesen Teil mit den Backticks ändern wird schöner im Code sein. So können wir den Dateinamen Bindestrich haben, dieses Datum doc jetzt. Und wir müssen hier irgendwie die Erweiterung hinzufügen, damit wir Punkt sagen können und hier wird es die Erweiterung sein, von der ich die Erweiterung bekommen werde. In der nächsten Vorlesung werden wir sehen, wie man diese Dateien validiert, die zum Backend kommen. Daher müssen wir den Benutzer nur bestimmte Art von Bildern hochladen. Wir brauchen ihn, um nur JPEG und PNG hochzuladen. So können wir ihn nicht applaudieren lassen, zum Beispiel eine PDF-Datei oder zum Beispiel eine XML-Datei. Also brauchen wir irgendwie das Back-End, um eine Anfrage abzulehnen, wenn es kein Bild gibt. Das, was wir in der nächsten Vorlesung tun werden. 58. Validiere die hochgeladenen Dateiarten: Okay, jetzt müssen wir unsere Erweiterung erstellen. Aber zuerst sagten wir, dass wir die hochgeladenen Dateien vom Benutzer validieren müssen. Um dies zu tun, müssen wir eine Liste von Dateien erstellen , die das vollständige Backend akzeptieren dürfen. So können wir eine Konstante definieren. Wir sagen, Dateityp-Karte. Und diese Dateitypzuordnung enthält eine Liste von Erweiterungen, die in mein Back-End hochgeladen werden dürfen. Das erste Feld wird Bild PNG sein. Und dann PNG. Warum ich es auf diese Weise getan habe. Also hier haben wir den Schlüssel als Bildpunkt PNG und der Wert ist ein PNG. Dies brauchen wir das wegen des Mime-Typs. Mime-Typ. Wenn Sie es Google, es ist sofortiger Typ und bekannt als Mehrzweck-Internet-Mail-Erweiterungen oder Mime-Typ. Und dies ist ein Standard, der die Art und das Format einer Dokumentdatei angibt. Jede Anfrage wird an das Backend gesendet. Und die Datei, die die Datendatei oder die Dateidaten enthält, hat auch einen MIME-Typ. Ein Mime-Typ hat ein Format wie dieses. Also bekomme ich und PNG-Dokument dxdy. Auf diese Weise kann ich definieren, was der Typ der Datei ist, die zum Backend kommt. Die drei wichtigsten Typen, die wir in unserem Back-End benötigen, sind PNG, JPEG und JPEG. Also hier werden wir diese Typen haben. Und in Walter, wenn ich den Dateinamen konfigurieren möchte, kann ich hier etwas namens Mime-Typ finden. MIME-Typ enthält also die Informationen oder die Dateiinformationen mit der Tintenstation des MIME-Typs hier. Um also das richtige Aussterben zu haben, werden wir es auf diese Weise tun. Const-Erweiterung gleich dem Dateityp lab und den Wert des File-lot MIME-Typ abrufen. Also hier wird es zu diesem Array gehen und den Mime-Typ nehmen , der einer von diesen kommt, und dann die Erweiterung als Wert zuweisen. Und hier bekomme ich den Wert oder die Erweiterung zu meinem Dateinamen. Okay, wir haben über die Validierung der Datei gesprochen. Also müssen wir die Datei irgendwie überprüfen, ob sie hochgeladen werden darf oder nicht. Im Rückruf des Ziels können Sie Fehler definieren. Wenn also ein Fehler vorliegt, wird der Callback es hier werfen. Also zuerst können wir eine Konstante tun ist gültige Datei zum Beispiel. Und wir werden das gleiche Konzept hier verwenden. So wird es den Mime-Typ erhalten und überprüfen ob er in der Karte gefunden wird, die ich in meinem Back-End zugewiesen habe. Und in Node.JS können wir einen Fehler definieren. Also kann ich hier sagen, lassen Sie Upload-Fehler ist gleich dem neuen Fehler. Und wir können sagen, dass der Fehler ein ungültiger Bildtyp ist. Und dann können wir überprüfen, ob es gibt, ist gültig. Dann machen Sie diesen Upload-Fehler als Nonne. Und dann verwendet Upload-Fehler im Callback. Wenn die Datei also gültig ist, gibt es keinen Fehler und der Callback wird ausgeführt. Also erinnern Sie sich, wir haben mit Postman eine Datei hochgeladen und sie hat diesen Namen. Also jetzt werden wir dieses JPEG hier nicht haben. Wir werden es am Ende haben. Vielleicht wird es hier bleiben, aber wir werden zumindest eine Verlängerung am Ende haben. Testen wir das mit einem Postboten. Jetzt, mit unserem Formular, habe ich die gleichen Daten, das gleiche Bild, das ich hochgeladen habe. Senden Sie diese Anfrage, ich habe ein Bild hochgeladen. Und lasst uns die Erweiterung überprüfen. Wir werden sehen, es hat die Erweiterung am Ende und den Dateinamen. Und hier ist das Bild funktioniert gut. Lassen Sie uns jetzt versuchen, eine Datei hochzuladen, aber nicht das Bild. Wir können sagen, zum Beispiel, ein PDF. Also habe ich hier eine Test-PDF. Ich werde es hochladen. Und wir haben den Fehler bekommen. Also haben wir einen Fehler bekommen, diesen ungültigen Bildtyp , den wir hier erstellt haben. Also hier im Frontend sahen wir, dass wir beim Hochladen von PDF das Problem bekommen haben. Aber was zum Beispiel, J peg, senden Sie diese Anfrage. Wir haben kein Problem. Wir haben den vollen Weg und wir haben auch die Erweiterung. Und jedes Mal, wenn ich Upload-Anfragen mache, bekomme ich eine neue Daten und ein neues Datum und die Datei, es ist das gleiche, aber es wird wieder mit einem anderen Namen hochgeladen. Gehen Sie zu unserer Datenbank auf Atlas, können wir die Datei oder das Produkt, das erstellt wird überprüfen. Wir werden sehen, dass das Produkt das Bild hat und es eine vollständige URL hat. Dies wird also von überall in unserer Anwendung zugänglich sein. Aber wir müssen so etwas wie von der Authentifizierung ausgeschlossen haben. Denn wenn Sie sich erinnern, wird alle API authentifiziert. Wir können also nichts tun, ohne sich authentifizieren zu lassen. Aber das muss öffentlich sein, was wir in den nächsten Vorträgen sehen werden. In der nächsten Vorlesung werden wir sehen, ob die Datei wirklich existiert. Wenn es also keine Datei oder kein Bild für das Produkt gibt, müssen wir die Anfrage ablehnen. 59. Image mit Product: Was ist, wenn das Frontend mir ihre Anfrage ohne Datei sendet? Dann würde das erforderliche Bildfeld verweigert werden, damit umzugehen. Lassen Sie uns zuerst überprüfen, ob wir eine Datei in unserer Anfrage haben. Also gehe ich hier und erstelle eine Konstante, nenne sie Datei und gebe dieser Konstante den Wert der Anforderungspunktdatei. Und genau mit der Kategorie können wir es genauso mit der Datei machen. Also sage ich, wenn es keine Datei gibt, dann gebe dem Benutzer einen Fehler zurück, dass es keine Datei gibt. Auf diese Weise werden wir sicher sein, dass unsere Anfrage nicht ohne eine Datei übergeben wird. Wenn wir zu Postman gehen und die Anfrage ohne Datei senden, werden wir bekommen, dass es kein Bild in dort Anfragen gibt. In der nächsten Vorlesung werden wir sehen, wie Bilder verwendet werden, um mehrere Bilder hochzuladen, die zum Beispiel eine Galerie über das Produkt sein werden . In einer Anfrage sendet der Benutzer mehrere Dateien, nicht nur eine Datei. Und das wird im Bildfeld passieren. 60. Image mit Product: Wenn wir ein Produkt aktualisieren, müssen wir uns auch um das Bild kümmern. Was also, wenn der Benutzer ein neues Bild in sein Produkt hochladen möchte, als ob er das Bild selbst aktualisieren möchte. Dafür werden wir die gleichen Schritte machen, die wir für die Post getan haben. Daher müssen wir die Upload-Optionen auch der PUT-Anfrage hinzufügen. Also haben wir es hier hinzugefügt und dann werden wir einige Änderungen hier vornehmen. Also zuerst, wenn der Benutzer kein Bild hochlädt, dann möchte ich das alte Bild behalten, das in der Datenbank ist. Aber wenn er ein Bild hochlädt, dann muss ich das Bild senden und erneut in die Dateien hochladen und dann die neue URL zur Datenbank hinzufügen. Lasst uns diesen Hund zum Echo bringen. Also zuerst möchte ich das Produkt finden. Also füge ich hier eine Konstante hinzu, die ein Produkt genannt wird und das Produkt nach ID finden, beantrage dot powerapps dot ID, und dann überprüfe ich, ob es kein Produkt gibt, dann für mich den Status 400 zurückgegeben, dass es ungültig ist Produkt, Okay, Jetzt ist alles in Ordnung. Dann garantieren wir, dass der Benutzer wirklich ein bestimmtes und angekommenes Produkt eingibt. Eine andere Sache, dann werden wir die Datei selbst bekommen. Also würde ich sagen const Datei und diese Datei, wir haben mit ihrer Anfrage Punktdatei kommen, wie wir es genau mit einer Post-Anfrage getan haben. Und dann werde ich einen Pfad definieren, der Bildpfad genannt wird. Und dieser Bildpfad ist leer. Ich werde es verwenden, um den Pfad des Bildes zu füllen. Entweder wird es das alte sein, das bereits in der Datenbank ist, oder dann Sie Dateipfad, wenn der Benutzer ein neues Bild in dort PUT-Anfrage hochgeladen hat. Also als Logik werde ich sagen, ob Datei, dann genau wie wir mit der Post-Anfrage machen. Ich werde einen Dateinamen und dann den Basispfad definieren. Und ich werde sagen, dass der Dateiname oder der Bildpfad genau so sein wird, wie wir es hier haben. So werden wir den Basispfad und auch den Dateinamen zusammen als Image-Button haben. Und sonst, wenn es kein Bildbad gibt oder wenn es Datei gibt, dann würde ich sagen, dass der Bildpfad der gleiche ist wie der alte Bildpfad, der zuvor definiert wurde, als das Produkt erstellt wurde. Also würde ich sagen Produkt, das Bild, das alte, weil ich das produktive Jahr bekam und ich garantiere Ihnen, dass das Produkt wirklich existiert. Also werfe ich keinen Fehler an den Benutzer. Also sicher, das Produkt hat hier einen Wert. Und dann werde ich sagen, wenn das fünf ist, dann lade die Datei hoch und gib mir die Vergangenheit. Andernfalls geben Sie den Bildpfad wird das Produktbild sein, das vorher war. Und dann werde ich hier sagen, dass das Bild der Bildpfad mit den aktualisierten Daten sein wird. Aber hier lassen Sie uns dieses ein Produkt umbenennen. So können wir hier ein Produkt sagen, um das Produkt zu bekommen. Und wir können hier sagen, aktualisiertes Produkt und das aktualisierte Produkt, ich finde es und dann überprüfen Sie es und senden Sie diese Anfrage mit den aktualisierten Daten zurück. Dies sind also die erforderlichen Änderungen für die PUT-Anforderung. In diesem Fall erhalten Sie keine Fehler und Sie werden Probleme haben, wenn Sie das Bild erneut hochladen oder wenn Sie das Bild nicht hochladen. So hat der Benutzer hier die Option, er kann Bild hochladen oder nicht in den Pool, Anfrage. 61. Product: Okay, hier hatten wir eine einzelne Datei, also haben wir nur eine Datei in die API hochgeladen. Aber hier brauchen wir mehrere Dateien für die Produktgalerie. Auf die gleiche Weise können wir diese Post-Anfrage ändern, um auch mehrere Dateien zu akzeptieren. Aber lassen Sie uns es ein wenig komplizierter machen, ein echtes praktisches Beispiel zu haben. Normalerweise, wenn Sie ein Produkt aktualisieren oder ein Produkt hinzufügen, ist das zweite, was Sie tun, das Hochladen der Bildergalerie. Und das passiert normalerweise in den Webshops. Nachdem Sie ein Produkt erstellt haben, ist alles in Ordnung. Dann gehen Sie und bearbeiten Sie das Produkt erneut, um die Bildergalerie zu löschen. Lassen Sie uns also eine bestimmte API erstellen, die nur zum Hochladen der Galerie ihres Produkts dient. Diese API ist eine Update-Anfrage, keine Post-Anfrage. Also brauchen wir die Post-Anfrage. Also kopiere ich diese Post-Anfrage. Gehen wir zum Ende und fügen Sie es hier hinzu. Und weiter heraus können wir die Produkt-ID behalten und auch können wir ihren Zweifel hinzufügen, wo wir nur die Galeriebilder aktualisieren werden. Also hier können wir Galeriebilder hinzufügen. Und dann die ID des Produkts. Wie wir zuvor in der Post-Anfrage des Produkts gesehen haben, haben wir auch die Upload-Option einzelnes Bild hinzugefügt. Wir können es auch der PUT-Anfrage hinzufügen. So können wir hier Upload-Optionen hinzufügen, aber nicht einzelne. Wir werden Array sagen. Also werden wir vom Frontend unser Array von Dateien erwarten, nennen wir es emittiert. Und wenn Sie hier bemerken, dass die Array-Methode mir auch eine maximale Anzahl gibt. So können Sie maximale Datei-Upload-Größe zulassen. Zum Beispiel würde ich sagen, maximal, ich brauche 10 Dateien oder 20 Dateien in einer Anfrage. Also lassen Sie es uns als 10. Lasst uns mehr unser Code sterben. Also lasst uns das in einer neuen Zeile haben. Also können wir nicht sagen, dass dieser hier ist. Und hier, die asynchrone Methode. Und hier haben wir den Port und wir haben hier den Inhalt unserer PUT-Anfrage. So wird die Update-Anfrage ihres Produkts genau diese Daten aktualisieren, aber wir werden nur die Bilder haben, nicht alle Daten. So können wir das Gleiche tun wie hier. Es ist kopieren Sie diesen Teil, um zu sehen, ob der Benutzer die genaue oder die richtige ID übergeben. Wir müssen ihre Kategorie nicht überprüfen, da wir sie nicht aktualisiert haben. Also lasst uns das auch haben. Aber wie gesagt, wir hatten alle Daten. Wir müssen nur das Bild aktualisieren. So Bildfeld wird Array von Bildern sein. So wie wir hier gesehen haben, Array von Bild-Strings oder Pfad des Bildes. Also müssen wir hier irgendwie Array von Strings bauen. So können wir sagen, Bildpuffer hören. Und dieses Bild Spotter wäre ein wertvolles Array von Strings. Also, wie werden wir dieses Array zuerst in dieser Anfrage bauen, wie wir zuvor gesehen haben, dass wir eine Punktdatei anfordern können. Oder wenn Sie sehen, dass wir eine Datei auch nicht nur Datei haben. So können wir sagen, Dateien werden konstante Dateien sein. Und genau wie zuvor können wir überprüfen, ob es Dateien gibt. Dann werde ich in diesen Dateien Schleife und bauen die Bilder stört Array. Also hier werde ich das nach oben bewegen und sagen Dateien Punktkarte. Und das wird Akte haben. Und innerhalb dieser Methode der Datei können wir sagen, Bildpfad ist Punkt Push, der feine Punkt Dateiname. Aber wir müssen nicht nur den Dateinamen schieben. Wir müssen auch die Basis-URL und auch mit der Erweiterung schieben. Also, wenn Sie sich erinnern, haben wir hier die Basis-URL erstellt, die wir für die Post-Anfragen erstellen. So können wir diesen Teil auch kopieren und zur Put-Methode gehen und hier die Basis-URL oder den Basispfad sagen. Und wir schieben den Basispfad mit dem Dateinamen. Und hier können wir das Produkt zurückgeben. Genau wie die PUT-Anfrage können wir überprüfen, ob es ein Produkt gibt, dann sind das Teiche die Daten des Produkts. Andernfalls wird es ein Fehler sein. Also kopieren wir diesen Teil und platzieren ihn hier. Lassen Sie uns das mit Postman auf das testen, was wir mit Postboten zu tun haben, dass wir mehrere Dateien hier platzieren. Also lassen Sie uns ein Feld erstellen, nennen Sie es zum Beispiel Bild. Und dieses Bild wird eine Datei sein. Und wir wählen zwei oder Bild zum Beispiel. Und wir vergessen das nicht, um die API zu ändern. Also hier wird Galerie Bild und die Anfrage wird gestellt. Und wir brauchen auch die ID des Produkts. Genau das hier. Lassen Sie uns unser Produkt bekommen, oder Produkt ist Produkt sechs, die wir zuvor erstellt haben. Und jetzt werden wir die ID hier hinzufügen. Und wir werden diese Anfrage senden. Wir haben unseren Fehler, ich habe hier vergessen, Produkte hinzuzufügen. Also werden wir den richtigen Weg haben. Jetzt versuchen wir es. Und dann werden wir sehen, dass das Produkt aktualisiert wurde. Und wir haben zwei Bilder in der Galerie und Hauptbild, Es ist immer noch da. Lassen Sie uns unseren Upload-Ordner überprüfen. Wir werden sehen, dass wir zwei Bilder haben, dieses und dieses. Also im Frontend werden wir immer unsere Galerie aktualisieren oder ein Produkt aktualisieren und die Galeriebilder hinzufügen. Das ist alles über diesen Abschnitt. Im nächsten Abschnitt werden wir sehen, wie man die Bild-URL abruft, damit wir sie im Browser und im Frontend sehen können, da sie jetzt gesperrt ist und wir keinen Zugriff darauf haben weil sie mit unserer API geschützt ist -Authentifizierung. 62. Falsche ausführenden Ordner: Lassen Sie uns nun versuchen, diese URL zu erhalten und sie in den Browser, die URL des Bildes. Also legen wir es in den Browser und wir werden sehen, dass der Benutzer nicht autorisiert ist. Dies, weil, wenn Sie sich erinnern, in unserem JWT, haben wir definiert das Bad ist, die für die Öffentlichkeit erlaubt sind. Daher müssen wir den Upload-Ordnerpfad hinzufügen, damit jeder diese Bilder sehen kann. Andernfalls werden wir ein Problem haben. So zeigt der E-Shop die Bilder des Produkts nicht an. Also lasst uns das hier kopieren. Es wird genau die gleichen Git und Optionen sein. Wir müssen diesen auch durch den Pfad des Upload-Ordners ersetzen. Der reguläre Ausdruck dafür ist dieser. Ich habe Schrägstrich, öffentliche Schrägstriche Uploads bei allem kommt danach. Lasst es uns retten. Und lasst uns zu unserem Browser gehen. Aktualisieren. Wir werden einen Fehler sehen, dass wir kein öffentliches Upload-Bild erhalten können. Warum das, weil es sich um einen statischen Ordner handelt. Wir müssen diese öffentlichen Uploads als statischen Ordner in der Middleware unserer Anwendung definieren . Um das zu tun, müssen wir zu unserer app.js gehen. Also gehen wir hierher und sagen, Gebrauch. Und dann definieren wir den Pfad, den wir brauchen, um ihn statisch zu machen. Also öffentliche Schrägstriche Uploads. Und dann gibt es in Express eine Methode zu sagen, dass dies ein statischer Ordner und ein reserviertes Schlüsselwort ist, das für mich den Stammpfad oder den Stammpfad der Anwendung ein schrecklicher Name ist. Und plus der Weg, den ich es als statisch machen wollte. Also, jetzt dieser Pfad, jede Datei kann in sie hochgeladen werden. Es wird nicht als API sein. Es wird wie ein statischer Pfad sein, der die Dateien bereitstellt. Also zurück zum Browser und wir machen eine Aktualisierung. Wir bekommen immer noch den Fehler. Dies, weil ich Schrägstrich hinter der Öffentlichkeit hinzufügen muss. Handeln Sie mit unserem Browser und aktualisieren Sie. Wir werden das Bild sehen, das wir bereits im Frontend ohne Authentifizierung direkt durch die URL hatten. Jetzt ist unser Backend fertig. Wir haben die Routen, vier Kategorien, Bestellungen, Produkte und Nutzer erstellt , die wir genau für unseren E-Shop benötigen. Wir werden jetzt zum Front-End-Teil wechseln und Sie werden mehr als neue Dinge sehen und wie wir wieder zu diesem Back-End verbinden und unsere Webshop-Schnittstelle erstellen. 63. E Commerce NgShop Seitenstruktur: Okay, in dieser Vorlesung werden wir sehen, was das Design oder die Seitenstruktur unseres E-Shops ist. Der Kunde gab mir eine XD-Datei. Xd kann mit Adobe XD geöffnet werden, und diese Anwendung kann zum Erstellen eines Drahtmodells verwenden. Und wie Sie hier sehen, hat mir der Designer dieses Design gegeben und ich kann Komponenten verschieben, einige Layouts machen, etwas Färbung. So kann ich es auch für mein Styling und für mein CSS verwenden. Aber die Seitenstruktur im Allgemeinen, wie Sie hier sehen, dass wir wie einige Kopfzeile haben. Wir haben zum Beispiel ein Banner. Und wir haben auch eine Liste von Kategorien und einige vorgestellte Produkte. Und wenn Sie auf eines der Produkte klicken, erhalten Sie die Produktdetails. Und Sie werden auch in den Warenkorb legen oder in ihren Warenkorb gehen. Wir werden mehrere Seiten haben. So haben wir die Homepage und eine Kontaktseite und die Produktliste. So werden wir sehen, wie wir die Anwendung in Angular strukturieren und wie wir das mit NX machen werden. Wenn wir also zum Beispiel zu einer Programmieransicht oder Entwicklung der Ansicht wechseln , können wir unsere Anwendung auf Komponenten aufteilen. Ich nenne diese Anwendung als NG-Shop, wie Winkelhacken. Wenn wir also zur nächsten Folie gehen, werden wir die Seitenstruktur sehen, die wir für diese Anwendung oder diesen E-Commerce-Shop benötigen, brauchen wir zwei Anwendungen. Zuerst benötigen wir einen e-shop, die das Front-End angezeigt wird oder wie wir sehen, das Produkt verlässt die Warenkorbseite, et cetera. Und auch das Admin-Panel, das Admin-Panel, das alle diese Front-End steuert. Also werden wir einige Werkzeuge und Tabellen haben, bearbeiten, löschen. So können wir alle Funktionen haben, die das Front-End widerspiegeln. Also der Administrator des Problems, kann er einen Blick auf seine Befehle werfen. Er kann einen Blick auf ein Produkt werfen. Bisher von NX werden wir sehen, dass jede Bewerbung eine Homepage benötigt. Wir brauchen eine Produktlistenseite, wir brauchen eine Produktdetailseite, Warenkorb Kasse. Und auch wir brauchen eine Login-Seite, damit der Benutzer sich einloggen und seine Daten und seine Bestellungen auch speichern kann. 64. Projektordner und Installation: Okay, jetzt lasst uns praktische Arbeit machen. Zunächst öffne ich Visual Studio Code und ich werde Angular CLI installieren. Angular CLI, es bedeutet Kommandozeilenschnittstelle. So können wir Kommentare von Angular ausführen, wie das Ausführen von Anwendung oder Service-Anwendung oder Testen, oder Generieren von Komponenten und Modulen, wie wir später sehen werden. Wenn wir also zu Google gehen und Angular CLI eingeben, werden wir auf dem ersten Link die Angular CLI sehen. So Installation von Angular CLI, werden wir mit wie Knoten-Paket global installieren getan werden. So wird dash minus g oder dash g global von Angular CLI installiert. Lassen Sie uns das in unserem Visual Studio-Code versuchen. Also gehe ich zuerst und öffne das Terminal. Wie können wir das Terminal öffnen? Es ist sehr einfach. Sie können nicht Control Shift und J sagen, oder Befehl Shift J. und es wird für Sie das Terminal öffnen. Und in einigen Fällen kann es nur Control J sein. Also hier haben Sie das Terminal geöffnet. Wir können die Angular CLI installieren. Also werde ich diesen Befehl kopieren, der npm install minus global bei eckigem Schrägstrich CLI ist. Und hier beginnt es, global das Paket zu installieren. So kann ich überall auf meinem PC eckige Befehle ausführen. Wenn Sie Mac verwenden, werden Sie vielleicht zu dem Fehler kommen. Sie werden also sehen, dass Sie keine Berechtigungen haben, einige globale Bibliotheken zu installieren. Was machst du normalerweise, kannst du vor dem Holzkommentar Pseudo sagen. Also werde ich sudo password sagen und dann starten Sie die Installation erneut. Und Sie werden sehen, dass Angular CLI erfolgreich installiert wurde. Wenn Sie Windows verwenden, wird dieser Fehler nicht angezeigt. Und wenn Sie es haben, können Sie Visual Studio Code als Administrator öffnen. Versuchen wir also einige eckige Befehle. Wir können sagen, mg Hilfe. Und Sie werden hier sehen, dass Sie Hilfe von Angular-Kommentaren erhalten. Zum Beispiel gibt es einige Werbeanalysen, einige Dokumentation und Linting und dienen. Und wie Sie hier in der Dokumentation der CLI sehen, können Sie alle Kommentare überprüfen. Also müssen Sie hinzufügen und Sie bauen NG config und Sie implementieren, et cetera. Aber wir sind nicht an diesem Kurs über Angular-Befehl interessiert. Wir müssen einen X-Befehl haben. Wie wir später sehen werden, dass NX auch eine globale Bibliothek ist, die sich über eckige Kommentare befindet. Also tatsächlich, wenn wir ausführen und X-Befehl, wir führen eckige Befehle intern aus. Das wichtigste jetzt, dass wir angular global installiert haben und wir können einen Ordner erstellen, zum Beispiel meinen Desktop. Ich würde sagen, CD dieses Top. Und ich werde ein schreckliches Verzeichnis machen. Also werde ich es zum Beispiel mit meinem Firmennamen nennen. Ich werde sagen, zum Beispiel, meine Firma, okay? Und wir können auf meine Firma zugreifen. Und hier werden wir unsere Anwendung haben alles, was wir haben unser Workspace-Repository, das alle Anwendungen und Bibliotheken in Angular und in NX enthalten wird. 65. Komponenten, Module, Dienste in Winkels: Denn dies ist ein praktischer Kurs und wir tun ein Beispiel aus der realen Welt. Wenn Sie Anfänger in Angular sind, vielleicht müssen Sie wissen, was unsere Komponenten, Module, Dienstleistungen. Und wie Sie hier sehen, können Sie sich mit mir vorstellen, dass Sie eine Anwendung in Angular erstellen werden. Ich möchte nicht sagen, was Modul ist, was ist eine Komponente mit dem Dienst? Sehr Theorie-Teil. Nein, Wir werden das in der Praxis tun. Ich möchte nur, dass Sie sich mit mir vorstellen, dass das Modul Container von Komponenten und Diensten ist. Die Komponente in Angular hat also einige Teile, in denen Sie die HTML-Vorlage und den Stil davon definieren können, wie CSS. Und um das Skript zu codieren, das mit dem Dienst und dem Dienst selbst kommuniziert. Es wird sich mit dem Backend Ihrer Anwendung verbinden. Und dann das Back-End, wir holen Daten aus der Datenbank. Sie erhalten also die Daten über das Backend zum Frontend. So haben wir viele Module auch in Angular, so dass sie miteinander verbinden können. So können Sie einige Komponenten dieses Moduls in diesem Modul verwenden. Und vielleicht auch Komponenten werden, können einige andere Komponenten enthalten oder aufrufen, wie wir später sehen werden. Also diese Phantasie, es wird Ihnen viel in diesem Kurs helfen. Sie müssen also nicht wissen, was jedes Detail an diesen Teilen ist. Sie müssen also nur wissen, dass das Modul Container von Komponenten und Diensten ist. Und die Komponenten kommunizieren mit Diensten. Und vielleicht können sich andere Module mit diesem Modul verbinden. Lassen Sie uns ein praktisches Beispiel sehen. Ich habe das Produktmodul in meinem E-Shop. Und ich habe zwei Komponenten, die wir sagen können, Produktlistenkomponente, wo ich alle Produkte aufliste. Und eine andere Komponente, bei der ich das Detail des Produkts sehe , wenn ich auf eines der Elemente hier klicke, innerhalb dieser Komponente gehe ich auf die Seite, wo ich das Produktdetail sehen werde. Und wenn ich sehen möchte, was die Daten davon sind, zum Beispiel Produktliste, muss ich einen Service im Front-End haben und vom Backend in die Datenbank aufrufen. Die Daten, die ich zeigen möchte. Das Gleiche geht hier. Wenn ich auf diese Seite gehe, werde ich darum bitten, dass der Dienst mir Daten über das Backend aus der Datenbank bringt , um die Produktdetails wie Preis, Bild,Name oder Beschreibung anzuzeigen wie Preis, Bild, . In diesem Fall können Sie Angular-Anwendungen erstellen. Also Angular Anwendungen tatsächlich sind sie Module. Und Module können miteinander kommunizieren, um die gesamte Anwendung zu erstellen. In den nächsten Vorträgen werden wir sehen, wie man diese Module baut und ihnen kommunikativ macht , um die gesamten Anwendungen zu erstellen. Und am Ende werden Sie sehen, dass die Anwendung auf diese Weise erstellt wird. So haben wir Benutzer Modulbestellungen, Modul, Produktmodul, und alle von ihnen, sie haben ihre eigenen Dienste und ihre eigenen Komponenten die mit dem gleichen Backend und derselben Datenbank kommunizieren. 66. Was ist NX und MonoRepo?: Herzlich willkommen zum ersten Vortrag dieses Abschnitts. Wir werden wissen, was n-x ist und was Mono REPL ist. Beginnen wir zuerst mit Monod Apfel. Die Bedeutung von Manet rapport als Awards ist in zwei Wörter unterteilt. Erstens, Modell, das bedeutet allein oder einzelne Bericht, die Repository ist. Wie ein GitHub-Repository, in dem wir unseren Code speichern. Und Mano Ripple ist eine Softwareentwicklungsstrategie , bei der Code für viele Projekte ein im selben Repository gespeichert ist. So, wie Sie hier sehen, haben wir hier App 12 und bis drei. Und diese Anwendungen befinden sich alle im selben Repository, das sich unter dem Firmennamen befindet. Darüber hinaus sehen wir, dass diese Anwendungen einige Bibliotheken teilen. Mano ripple ist also ein Repository, mehrere Projekte und gemeinsam genutzte Bibliotheken. Und natürlich hat jede Anwendung ihre eigenen Komponenten oder eigene Module. Dies ist die allgemeine Definition des Mauna-Berichts. Okay, wer benutzt Mono Rapport im Allgemeinen? Die berühmtesten Unternehmen wie Google, Microsoft, Facebook, Uber und Airbnb, und Twitter verwenden heutzutage Mono-Bericht, zum Beispiel, Google Mauna Bericht gilt als der größte der Welt. Und es wird auch als Ultra-Large Scale-System bezeichnet und musstäglich von Zehntausenden von Beiträgen imRepository mit einer Größe von über 80 Terabyte gehandhabt täglich von Zehntausenden von Beiträgen im werden. Okay, warum eine oder Epoche? Warum ist das so wichtig? Was sind die Vorteile von Mono-Ripple? Erstens, einfache Wiederverwendung von Code. Wie wir später in unserem realen Beispiel sehen werden, werden wir sehen, wie wir Module wieder in mehreren Anwendungen verwenden. Ein weiteres Feature ist das vereinfachte Abhängigkeitsmanagement, das sich in einer Umgebung mit mehreren Repositorys , in der mehrere Projekte von der Abhängigkeit von Drittanbietern abhängen. Diese Abhängigkeit kann mehrmals heruntergeladen oder erstellt werden. Also muss ich die Bibliothek für jedes Projekt herunterladen. Aber in Amman, Aleppo gebaut kann leicht optimiert werden. So können wir sehen, dass die Referenz oder die externen Bibliotheken können einmal für mehrere Projekte heruntergeladen werden, wie wir in den nächsten Punkten sehen werden. Das dritte Merkmal von Manana Nilpferd ist atomare Commits. Atomic Commit, was eine Synchronisation zwischen den Abhängigkeiten bedeutet. Wenn es also ein Update für eine der Bibliothek gibt, werden alle Projekte benachrichtigt und sie werden dieses Update erhalten. Und auch Kollaborationen in allen Teams. Also sprechen wir hier über mehrere Projekte. Wir haben mehrere Teams. Und die Kalibrierung über mehrere Teams hinweg wird besser verbessert, wenn sie alle auf die gleiche Weise gehen, indem sie dieselben Bibliotheken oder die gleichen gemeinsamen Bibliotheken verwenden. Und der wichtigste Teil, Einzelpaket JSON-Richtlinie. Wenn Sie zum Beispiel npm oder Node Packaging Management System verwenden, dann haben Sie ein einzelnes Paket, JSON. Sie haben also nicht für jedes Projekt als separater Knoten Modulordner. Und auf diese Weise sparen Sie viel Platz, okay, nachdem wir die Vorteile gesehen haben, lassen Sie uns zu den Widern übergehen. Natürlich hat jede Technologie oder jede Softwareentwicklungsmethode einige Nachteile. Die erste ist die Aufrechterhaltung der Konfigurationen. Also immer, wenn wir mehrere Projekte mit unterschiedlicher Konfiguration haben, werden wir ein Problem haben, wenn einige Update-Spalten. Daher müssen wir alle Konfigurationen nach jedem Bibliotheksupdate, das von den Projekten gemeinsam genutzt wird, beibehalten . Zweitens ist die Koordination eines Release-Prozesses. Dasselbe kann dieser Release-Prozess kompliziert werden, da das Wissen darüber, welche Komponenten freigegeben werden müssen, auf das Entwicklungsteam angewiesen ist. Der dritte Nachteil ist die Einrichtung des gesamten Projekts. Das lokale Einrichten des Projekts kann für jede Komponente eine lange Zeit in Anspruch nehmen , und es hat mehrere Variationen. Wenn wir also ein neues Projekt eingerichtet haben, müssen wir wieder alle Abhängigkeiten mit diesem Projekt verknüpfen. So werden wir uns wie zeitaufwendiger fühlen, um das gesamte Projekt einzurichten. Okay, danach, mal sehen, was ein X ist? Und X ist ein Menorah-Apfel und ist ein DevTools. Und wir können nicht sagen, es ist TypeScript-basiertes Mono- oder EPA-Tool, das auf Angular, taub Kind, CLI und Schaltpläne basiert . Außerdem funktioniert es auch mit anderen Technologien, wie wir später sehen werden. Es bietet auch einen Arbeitsbereich, CLI und ein cloudbasiertes Computation-Caching und eine hervorragende IDE Unterstützung auf Sprachebene. Und x wurde von Angular Team bei Google erstellt. Und dann beschlossen die Kernmitglieder, eine neue Firma namens Roman zu gründen, die eine x Toolchain bereitstellte. Wenn Sie also die NX-Website überprüfen, werden Sie sehen, dass sie von Norval zur Verfügung gestellt wird. Lassen Sie uns wieder sehen, Y und X ist gut. Oder warum wir n-x und x-Werkzeuge benötigen, um Ihnen die Vorteile einer Mono-Welligkeit zu bieten. Ohne das, die Reihensäcke des Symbols genannt Co-Location. Also brauche ich die Menora nicht oder manuell einzurichten. Es gibt Tools oder Kommentare, die mir in NX geholfen haben, alle Projekte zu erstellen , die eingerichtet wurden, ohne eine Erstellungsdatei von Hand zu machen. Auch n Eier Bereitstellung einer schnelleren Kommentarausführung, wie ich Ihnen sagte. Und x ist eine Dateistruktur. Also muss ich die Dateien nicht manuell erstellen. Ich möchte die Komponente nicht manuell in Angular erstellen. Also durch einen Kommentar mache ich eine schnellere Kommentarausführung, um die Komponente und ihre Schuldendatei und die Stile zu generieren. Und es wird auch Chairing genannt. Wenn ich also eine Bibliothek erstelle, sie von jedem geteilt und gesteuert, der Mitglied der Projekte innerhalb der Anwendungen ist, die NX ein genaues Architekturdiagramm bereitstellt. Und dieses Diagramm zeigt Ihnen, dass die Abhängigkeit zwischen den Bibliotheken und den Anwendungen und zirkuläre Abhängigkeit, wenn Sie sie haben und alle Schleifen fixieren, die zu kreisförmigen führen. Und es hat auch sehr viel ich, wir werden es in den nächsten Vorträgen sehen. Und das wichtigste Merkmal, dass, wenn Sie ein Projekt erstellen oder es testen, es nicht so viel Zeit in Anspruch nehmen wird, weil es nur testen wird, was geändert wird. Es wird also nur die betroffenen Dateien testen, die Sie geändert haben. Das ist also auch gut für die Entwicklung. Sie müssen Hall nicht wieder bauen lassen oder den ganzen Test. Wieder. Sie haben Zugriff auf das Git-Repository von NX und es wird für Sie nur die betroffenen oder geänderten Dateien tun. Schließlich, lassen Sie uns sehen, was unterstützt Anhang. Die folgenden Technologien wie Angular, React und NodeJS sind die Frameworks, in denen ein X unterstützt. So können Sie und x mit Angular, React und NodeJS verwenden, Sie können auch ein Projekt oder Repository haben, das alle diese Frameworks eine Bibliothek oder mehrere Bibliotheken teilen. In der nächsten Vorlesung werden wir ein echtes Beispiel über NX sehen. 67. Übersicht zu NX Real World – E-Shop: Nun, lassen Sie uns jetzt zu einem realen Beispiel übergehen. Eigentlich verstehe ich die Ideen nicht nur, wenn ich ein Beispiel aus der realen Welt sehe. Deshalb ist das Ziel dieses Kurses nicht das Lesen einer Dokumentation, aber wir werden reale Beispiele aus meiner Arbeit haben. Eigentlich arbeite ich in einem Unternehmen und möchte Ihnen zeigen, wie wir arbeiten, wie wir die Ressourcen und Bibliotheken mit NX teilen. Also lasst uns weitermachen. Ich nehme an, hier habe ich in meiner Firma, die Projektarchiv an der Spitze ist. In einem Repository platziere ich drei Anwendungen. Die erste ist E-Shop-Anwendung, und die zweite ist interne Blog-Anwendung. Und lassen Sie uns später über das Admin-Panel sprechen. Diese E-Shop-Anwendung hat ihre eigenen Komponenten. Diese Komponenten werden also nicht mit den anderen Anwendungen gemeinsam genutzt. So, wie wir hier sehen, haben wir e-Sharp Home-Komponente, die die Homepage und auch vorgestellten Produkte Banner ist. Also, wo ich die vorgestellten Produkte und auch Kategorien zeigen werde, wie ich die Kategorien meines E-Shop und Produktlistenkomponente auflisten werde, wo ich alle Produkte auflisten und einige Filterung verwenden , damit der Benutzer oder der Kunde das Problem, filtern Sie beispielsweise nach Kategorie, und sehen Sie sich die Produktliste an. Außerdem haben wir eine Produktdetailkomponente, die die Details des Produkts und auch Komponente anzeigt , wo der Benutzer sich anmelden und seine Bestellhistorie sehen kann. Und schließlich, Check out und Karte Komponenten. Die Kasse, an der die Person seine Daten oder Lieferadresse eingibt damit er seine Bestellung aufgeben kann. Der Warenkorb öffnet die Warenkorbseite, um zu sehen, was sich im Warenkorb befindet. Was wir dort einkaufen. Okay, diese E-Shop-Anwendung teilt diese Komponenten nicht mit anderen Anwendungen, da die anderen Verpflichtungen nicht an diesen Komponenten interessiert sind. Beispielsweise ist die interne Bloganwendung nicht daran interessiert, Produktlistenkomponente anzuzeigen, da es sich um einen Blog handelt. So wird die Blog-Anwendung seine eigene haben, so wird es Homepage und auch Beiträge Liste und auch eine Post Dienste haben. Diese Postdienste sind etwas, wo ich Daten aus der Datenbank holen kann. Ich kann meine Beiträge aus der Datenbank holen. Okay, diese beiden Anwendungen teilen sich einige Aktien. Beginnen wir zuerst mit ihrem Login. Also, wenn ich eine Anwendung wie E-Shop erstellen möchte, brauche ich eine Login-Seite und auch das gleiche für die Blog-Anwendung. Ich brauche auch einen Login. Normalerweise, wenn Sie normal Angular mit eigenständiger Anwendung arbeiten, erstellen Sie den Login hier wieder. Und das gleiche, was Sie für den E-Shop tun werden. Und wenn ein Update auftaucht, müssen Sie sich hier anmelden und sich hier anmelden. Dies ist die Anwendung der Arbeit, die Anwendung von Teamwork. Also, in das ist positiv 3, können wir eine Bibliothek erstellen, wie wir in der NX sehen werden. Und wie wir zuvor gesprochen haben, dass wir eine Bibliothek haben werden. Und diese Bibliothek enthält eine Login-Komponente, Seite und Registrierkomponente und Benutzerdienste, wo ich Benutzer greifen und auch sehen kann , wie man Benutzer, registrierte Benutzer usw. hinzufügt kann sich ein- oder abmelden oder andere Dienste wie die APIs schützen. Und wenn der Benutzer sich angemeldet hat, müssen wir, wenn wir die Anwendung aktualisieren oder wenn der Benutzer die Anwendung besucht. Wieder von dem Problem, zum Beispiel, müssen wir ihn eingeloggt bleiben, zum Beispiel, für einen Tag. Dafür werden wir den User State Store und auch für Sitzungen verwenden. Diese beiden Anwendungen teilen also alle diese Funktionen. Also müssen wir eine Bibliothek haben, die für beide geteilt wird. Das Gleiche. Hier geht es zum Beispiel für einige UI-Komponenten, wie zum Beispiel, brauche ich ein Banner. Banner wird einige Dienste haben, um Daten aus der Datenbank zu erfassen. Und wir werden sehen, dass E-Shop ein Banner auf seiner eigenen Seite hat. Und das gleiche für interne Block, auch Schieberegler und Karussell. Okay, Lassen Sie uns jetzt zum Admin-Panel fortfahren. Diese beiden Anwendungen benötigen Admin-Panel. Beginnen wir also zuerst mit dieser Bibliothek. Warum das Admin-Panel, das diese Bibliothek teilt, ist es aufgrund der Dienste freigegeben. Ich muss diese Dienste in Anspruch nehmen. Also muss ich Banner aus der Datenbank holen und zum Beispiel Banner diesen Inhalt in die Datenbank posten. Und wie Sie hier sehen, haben wir Banner und Schieberegler Inhalt bearbeiten. So wird der Admin schauen, ändern Sie das Banner und dann wird es in der Anwendung des E-Shop angezeigt. Außerdem muss die Admin-Anwendung log n, Also müssen wir auch das Admin-Panel sichern. Also müssen wir eine Login-Komponente haben. Aber zum Beispiel brauche ich keine Registerkomponente. Aber weil die Registerkomponente zwischen diesen beiden Anwendungen gemeinsam genutzt wird, muss ich sie hier platzieren. Und das Schöne, wenn ich keine Registerkomponente in Admin-Panel-Anwendung auf Produktions-Build verwende, werde ich diese Registerkomponente nicht sehen. Selbst wenn ich diese Bibliothek benutze. So liefert NX automatisch warm für mich genau das, was ich aus den Bibliotheken verwendet habe und was die Größe der Anwendung oder die Paketgröße widerspiegelt. Okay, was ist mit den Produkten? Die Produkte, die wir hier aus der Datenbank greifen und zeigen sie wie Produkt am wenigsten Produktdetails an. Wir brauchen die Dienste. So können diese Dienste in einem Geschäft lokalisiert werden. Aber jetzt, weil Admin-Panel hat auch Produktkategorie Formular und auch Auflistung einer Produkttabelle hinzufügen . Wir müssen also einen gemeinsamen Dienst zwischen der Admin-Panel-Anwendung und der E-Shop-Anwendung haben. Sie sehen diesen richtigen Weg, wie wir die Ressourcen teilen. Dasselbe für die Befehle. Wir werden sehen, dass die Bestellungen, Ich brauche nur die Dienste und ich teile zwischen der Admin-Anwendung und der E-Shop-Anwendung. Aber interne Blog hat keine Bestellungen. Also muss ich im Admin-Panel das Bestellformular bearbeiten und die Bestelltabelle auflisten. Und das Gleiche hier. Ich muss Bestellung aufgeben, wie Bestellung wie von den Benutzern hinzufügen, wenn sie die Kasse machen. Und auch muss ich die Benutzerbestellungshistorie sehen. Also brauche ich einen Service, um Informationen für mich aus der Datenbank zu holen. Zur gleichen Zeit müssen wir einen staatlichen Laden für den Warenkorb haben. Also, wo ich den Staatsladen aufstellen kann, kann ich ihn in der Bibliothek platzieren, oder ich kann ihn hier platzieren. Kein Problem. Aber ich ziehe es vor, es hier zu haben, selbst es wird nur von der Frage der Anwendung verwendet. Und natürlich haben Sie die Möglichkeit, den staatlichen Laden hier zu platzieren. Nein, irgendein Problem. Okay, um die Idee mehr zu verstehen, würde ich gerne eine andere Anwendung oder vierte Anwendung machen, die auch ein Schuss ist. Also bin ich in einem Unternehmen, wir bauen drei Anwendungen und jetzt kommt ein neuer Kunde. Er will ein anderes Design und ein anderes Layout für seine Ausgabe. Ich werde Ihnen nicht das andere Bild zeigen, aber ich werde Ihnen zeigen, wie ich die Komponenten kategorisieren werde. Lasst uns weitermachen. Also nur ein Tipp für Sie, wie ich dieses Diagramm baue, wie ich es zeichne, ich benutze ein Werkzeug namens Draw Dot io. Dies ist ein sehr großartiges Werkzeug, so dass Sie Ihre eigenen Diagramme erstellen können. Es hat Ihnen viele Formen zur Verfügung gestellt, die Ihnen helfen, Erklärungsdiagramme zu erstellen. Also lassen Sie uns weitermachen und unsere eigene Anwendung erstellen, oder eine andere Anwendung des E-Sharp. Also werde ich hierher ziehen und das etwas größer machen, und wir werden einen Platz für eine andere Anwendung haben. Stellen wir uns also vor, dass wir wirklich in Angular codieren. Also werde ich hier die eine und andere Anwendung haben. Ich werde es hier schaffen. Lassen Sie uns anrufen, dies ist e-shop bis ein oder Kunde 1. Und das ist E-Shop App Kunde, so können wir diesen einen Kunden kopieren. Okay, auch, es wird eine eigene e-sharp-Seite haben. Kann angezeigt werden Banner kann sein, zum Beispiel, Kategorien Liste Banner. Also lassen Sie uns alle diese Elemente kopieren und sie hier platzieren. Lassen Sie es uns zum Beispiel jetzt so behalten. So wie Sie hier sehen, dass wir viele gemeinsame Komponenten haben. Wir müssen diese Komponenten an Orten platzieren, an denen sie gemeinsam genutzt werden können. Ich habe keine duplizierten Komponenten nur, wenn ich eine neue Komponente erstelle, die in einem anderen Problem nicht existiert. Zum Beispiel wird die Homepage zwischen diesen beiden Sharps unterschiedlich sein. Also würde ich diese Komponente hier halten, E-Shop-Homepage, die sich von diesem und vorgestellten Produktbanner unterscheidet. Ich kann es in der gemeinsamen Bibliothek platzieren. Und auch Kategorien Liste Banner. Ich kann es auch in der gemeinsamen Bibliothek platzieren. Produktlistenkomponente, Produktdetailkomponente und auch Benutzerbestellungshistorie. Also sehe ich, dass alles geteilt werden kann. Also platzieren wir sie alle hier und wir löschen alle diese Komponenten von hier. Also der einzige Unterschied zwischen diesem E Shops zu jedem OBS ist nur diese Komponente, die die Homepage ist. Und sie teilen alle diese Komponenten. Also ist es besser, sie hierher zu bringen. Vielleicht wird jemand fragen, was, wenn diese Komponenten unterschiedliche Stile zwischen zwei Aesops haben? Ich werde Ihnen im praktischen Beispiel zeigen, wie wir für jeden E-Sharp im NX-Repository ein spezielles CSS erstellen und das richtige CSS verwenden können, das Sie wollen. Zum Beispiel würde ich sagen, erstellen Sie ein Thema, Thema von CSS. Das Layout wird das gleiche sein, aber das CSS wird anders sein und der Stil. Ich hoffe, Sie verstehen die Art und Weise, wie wir unser Projekt in der realen Welt strukturieren. So werden wir in den nächsten Vorträgen sehen, wie wir diese Struktur mit Angular bauen werden. Wir werden alle ein X-Befehl verwenden, um all dieses Projektarchiv zu bauen. 68. NX installieren: Um unsere Struktur zu erstellen, über die wir vorher gesprochen haben, benötigen wir eine x CLI. Es ist genau so etwas wie Angular CLI. Also werde ich zu Google gehen und ECS CLI eingeben. Und im ersten Ergebnis werde ich zu diesem Link gehen. Und ich werde sehen, dass ich in Excel ein Befehlszeilenschnittstellen-Tool ist, mit dem Sie Anwendungen entwickeln, erstellen und verwalten können. So werden wir sehen, wie man Anwendungen generiert. Wir werden auch sehen, wie ein Webserver laufen. Und auch können wir Abhängigkeitsdiagramm erzeugen, wie wir später sehen werden, und et cetera. Also lassen Sie uns zuerst NX installieren, und es wird global installiert werden. Also zuerst gehen wir wieder zu unserem Visual Studio Code, und wir werden den gleichen Befehl eingeben, wenn wir den Winkel installiert haben. So gut, ich werde hier sagen sudo npm installieren nicht Angular CLI, sondern NX. Wieder wird es mich nach einem Passwort fragen und dann wird es beginnen, die NX-Befehlszeile für mich zu installieren. Es wird mir Fehler geben, weil ich diese NX bereits installiert habe. Wenn Sie diesen Befehl ausführen, wird es Ihnen helfen, NX zu installieren, um sicherzustellen, dass alles installiert ist, tauchen Sie einfach in x und wenn Sie das bekommen, dann bedeutet es, dass Sie ein X haben. für jetzt ist dies Genug. Wir müssen nur sicher sein, dass wir NX installiert haben, um zu den nächsten Vorträgen zu gehen, um zu sehen, wie wir damit arbeiten können. 69. Erweiterungen für die schnelle Programmierung installieren: In diesem Vortrag werde ich Ihnen einige Erweiterungen zeigen , die Ihnen beim schnellen Programmieren helfen. Die erste Erweiterung wird als Winkelsprachdienst bezeichnet. Diese Erweiterung wird Ihnen helfen, einige Befehle in Angular automatisch zu vervollständigen. Wie Sie hier in diesem Give sehen, wird es Ihnen helfen, automatisch zu vervollständigen, was sich im Skript befindet. So haben wir eine Vorlage, wie wir zuvor gesehen haben, dass wir HTML-Vorlage haben. Und in HTML-Vorlage manchmal müssen wir einige Variablen zugreifen, die sie im Skript sind. Diese Bibliothek hilft Ihnen also, auf diese Variablen oder Methoden zuzugreifen , die sich in der Skriptdatei befinden. Eine weitere Erweiterung, die wir auch brauchen, ist eine hübschere. Wir haben zuvor über hübscher gesprochen und wie man es installiert. Ich habe ein spezielles Video für hübscher erstellt, weil es eine gewisse Konfiguration benötigt. Wenn Sie also nichts über hübscher wussten, wird es in den Visual Studio Code-Erweiterungen sein. So können Sie es hier aufrufen und konfigurieren. Eine weitere erstaunliche Erweiterung, die ich immer verwende, heißt Bracket Birne Polarizer. So können wir Bracket Birne Polarisator sagen. Diese Erweiterung hilft Ihnen also auch, die Klammern nach Gruppen zu färben. So auf diese Weise werden Sie wissen, was der Anfang und das Ende Ihrer Klammern ist, vor allem, wenn Sie eine sehr große verschachtelte Objekte, ehrlich und Schließungen. Hier sehen Sie, wie es Färbung basierend auf dem Anfang und dem Ende ist. Es funktioniert für gekrümmte Klammern und normale Klammern. Eine weitere große Erweiterung, die ich verwende, heißt CSS-Navigation. Und diese Erweiterung hilft Ihnen, direkt auf jede Klasse zuzugreifen, indem Sie zur Definition gehen. Wie Sie hier in diesem Geben sehen, werden Sie, wenn Sie auf eine Klasse im CSS klicken, zu dieser Klasse gehen, oder wenn Sie Control drücken und auf die Klasse klicken. So, wie Sie hier sehen, waren wir in HTML-Datei. Wir sind zur App-CSS-Datei gesprungen, wo sich das Glas befindet. Okay, wenn Sie diese Erweiterungen nicht manuell installieren möchten, habe ich mit dieser Vorlesung eine JSON-Datei angehängt, die Sie wie folgt finden können. So gehen Sie zu Ihrem Projektordner. Ich habe hier Mein Ordnerprojekt geöffnet. Also sagen wir, es war auf dem Desktop, meine Firma. Und hier öffne ich das Projekt und erstelle einen Ordner, nenne es dot VS Code. Und in diesem VS-Code werde ich eine Datei finden, die Erweiterungen genannt wird. Also hier erstelle ich eine Datei, ich nenne es erweitern Shells, dass JSON. Und hier in der Erweiterung zu JSON werde ich Ihnen die Datei geben, die Sie kopieren müssen. So wird es auf den Empfehlungen aufgeführt werden. Und Sie werden hier alle Erweiterungen sehen, die Sie für diesen Kurs benötigen. Und nachdem Sie diese Datei speichern und Sie gehen wieder zu den Erweiterungen und geben Sie empfohlen. Also, wenn Sie bei empfohlen setzen, erhalten Sie am wenigsten der empfohlenen Erweiterungen, die sie hier in dieser Datei aufgeführt sind. Sie müssen also nur alle installieren und dann sind Sie bereit zum Codieren. 70. Nx für dein Team oder deine Firma: Okay, Jetzt werden wir eine echte Codierung beginnen und mit einem echten Beispiel mit realen Projekt arbeiten, wie wir zuvor gesprochen haben, dass wir dieses Repository haben, das wir in diesem Kurs implementieren werden. Also müssen wir zuerst einen Arbeitsbereich oder ein Arbeits-Repository erstellen. Und in diesem funktionierenden Repository werden wir ihm einen Namen geben. Normalerweise wird der Name in den Unternehmen, nehmen Sie den Firmennamen. So erstellt das Unternehmen seine eigenen Bibliotheken und eigenen Anwendungen, und alle von ihnen werden gemeinsam genutzt oder das Unternehmen ist sehr groß, Sie können Repositories basierend auf Teams aufteilen. Zum Beispiel würde ich sagen, e-shop-Team, zum Beispiel. Und zum Beispiel maschinelles Lernen Team und zum Beispiel ein weiteres Thema für die mobile Entwicklung. Also in diesem Fall kann ich durch den Namen des Teams teilen. Also werde ich in diesem Kurs davon ausgehen, dass wir Repository für unser Unternehmen erstellen werden. Wir gehen zurück zu Visual Studio Code, schließen alles. Und wir schließen auch diesen Ordner und fügen dann das Terminal wieder an. Und hier geben wir einen neuen Arbeitsbereich mit NX zu erstellen. Wenn wir also zu einem x-dot dev gehen, sehen Sie auf der Homepage und px erstellen Sie einen ECS-Arbeitsbereich. Wenn wir also anfangen, werden wir den ersten Befehl zum Erstellen eines Arbeitsbereichs sehen. Lassen Sie uns diesen Befehl kopieren und zu unserem Visual Studio-Code im Terminal zurückkehren. Fügen Sie es hier ein. Und wir haben eine voreingestellte, eckige, weil NX-Unterstützung und andere Frameworks wie React und auch kein JS. MPI x, ein Kommentar, der mit MPM gebündelt ist, wird für die Erstellung eines Arbeitsbereichs oder von Anwendungen gearbeitet. Wenn wir also die Eingabetaste drücken, wird es uns eine Benachrichtigung geben. Wie lautet der Arbeitsbereichsname? Das habe ich vorher gesagt. Es wird der Firmenname oder der Name des Themas sein. Also für mich mag ich den Namen Blue Bits. Und was ist der erste Anwendungsname? Wie wir zuvor gesehen haben, haben wir mehrere Anwendungen, so können wir den Namen der ersten Anwendung in diesem Repository oder in diesem Arbeitsbereich erstellen oder eingeben. So wird es NG-Shop sein. Und was ist ein Styling wird in diesem N G scharf oder in dieser Anwendung verwendet? Ich bevorzuge Sas. Und was ist mit Fusseln ES LND oder dem Estlund? Das moderne Fusselwerkzeug ist jetzt ES-Schicht, die für Sie alle Fehler beheben wird, die während der Codierung auftreten können. Und es wird Ihnen Fehler geben. So wird es alle Probleme in Ihrem JavaScript-Code finden und beheben, wie wir später sehen werden. Also werde ich ES Lint auswählen, weil TS landet, wie Sie hier in der Benachrichtigung sehen, die von Angular CLI verwendet wird. Und es wurde veraltet und verwendet NX Cloud. Es ist wie etwas, um das Projekt zu erstellen und einige Details und GitHub-Integration auszuführen. Also sagen wir nein. Und wir werden sehen, dass es jetzt den Arbeitsbereich erstellt. Wir werden beginnen, einige Pakete mit MPM installieren zu installieren, alles wird automatisch gemacht. Und wie Sie hier sehen, das Paket erfolgreich installiert. Fügen Sie hinzu, die Installation weiterer Pakete, die für dieses Projekt erforderlich sind , wird weiterhin Anwendungen erstellt. Und Sie kaufen, wie Sie hier sehen und alle erforderlichen Dateien. Und dieser ND-Shop ist Angular Projekt. So sind wir bereit und wir haben alle erforderlichen Dateien für unser Projekt. Also lasst uns das Projekt öffnen. Wir gehen zur Datei oder wir können auf diesen Ordner oder dieses Symbol klicken, und wir klicken Ordner öffnen. Und ich werde dahin gehen, wo ich meine Firma installiert habe, wie Sie sich erinnern. Also hier und ich werden ihren Namen sehen, Blue Bits. Ich gehe in diesen Ordner und klicke auf Öffnen. So wird es für mich das ganze Projekt öffnen. Und wir werden jetzt über diese Akten sprechen. Aber zuerst werden wir sehen, dass es auch eine weitere Auslöschung empfiehlt, die für die Entwicklung notwendig sind. Lassen Sie uns auf installieren klicken. Zum Beispiel, das ist eine Erweiterung namens Jest Runner, die ein Werkzeug für Komponententests ist. Also gehen wir zurück zu unserer Anwendung und lassen Sie uns diese Dateien überprüfen. So, wie Sie hier sehen, haben wir einen Ordner Apps. Also in dieser App, wird es meine Anwendungen wie Süßigkeiten-Shop und auch das Admin-Panel befinden . Also hier werden wir zwei Anwendungen haben. Und was ist das? N G scharf, E bis E. Dies ist End-to-End-Prüfung. Sie müssen also auch eine Anwendung dafür haben, für End-to-End-Tests. Und im Lippenordner werden wir sehen, dass wir hier unsere Bibliotheken finden. Derzeit ist es leer, aber wir werden später sehen, wie man diese Bibliotheken erstellt. Zum Beispiel, die UI-Bibliothek, wie wir zuvor gesprochen, und auch Produkte Bibliothek oder tut Bibliothek, et cetera. Dann denke ich, hier verwenden alle Anwendungen den gleichen Knotenmodul-Ordner. Für jede Anwendung, die Sie hier installieren oder hier erstellen, müssen Sie keinen weiteren Knotenmodul-Ordner erstellen. Das gleiche, was Sie hier haben, ein Paket JSON. So haben Sie die gleichen Bibliotheken, die alle unter diesen Anwendungen verwendet werden. Und das Paket Jason wird automatisch von NX erstellt, um alle erforderlichen Informationen zu erfüllen , die für die Erstellung oder Erstellung von Anwendungen und deren Bereitstellung benötigt werden . Wir werden alle diese Befehle später sehen und diese Bibliotheken auch. Und in diesem Anhang JSON-Datei, werden Sie die aufgeführten Projekte und die Bibliotheken sehen, die wir erstellen werden. Wir werden nicht auch über diese Tags später. Also hier, alle Informationen über diesen Arbeitsbereich. Was uns wichtig ist, ist dieser Teil, wie Sie in den nächsten Vorträgen sehen werden. Und eckige JSON, wie Sie wissen, kommen Angular-Anwendungen immer mit einigen Konfigurationen. Zum Beispiel müssen Sie einige bestimmte Stile einschließen, die sich innerhalb der Anwendung befinden. So wie Sie hier sehen, dass wir hier alle Anwendungen unter Projekte aufgelistet haben. Also haben wir hier jeden Laden. Und wenn wir eine andere Anwendung erstellen, werden wir zum Beispiel Admin-Panel-Anwendung haben. In diesem Fall sehen Sie also alle Konfigurationen, die sich auf diese Angular-Anwendung beziehen. Es ist, als ob Sie an einer eigenständigen Anwendung arbeiten, aber unter Spitzenarbeitsbereich. Also, wenn ich zum Beispiel einen stilspezifischen Stil erstellen möchte, habe ich hier Style CSS, das der Standard ist , der mit Angular kommt. Also, wenn wir hier gehen, abs und G-Sharp, SARC, und wir werden hier sehen Stile, CSS, Assets Ordner, wo Sie die Bilder oder einige Formen finden. So können Sie sich in Assets Ordner befinden und Sie müssen erklären , dass für die Anwendung Haupt ts der Einstiegspunkt für unsere Anwendung ist , wo wir alle Bibliotheken und den gesamten TS-Code booten , den wir an einem Index HTML schreiben, es wird der Einstiegspunkt für unsere Vorlage sein. Wie Sie hier sehen, haben wir hier den Kopf und den Körper, und darin befinden sich blaue Rübenwurzeln. Auf dieser Route werden wir diese Komponente nennen, die Einstiegspunkt für unsere Anwendung ist. Es hat also bereits eine Standardvorlage. Ich denke, wir werden es klären. Aber zuerst werden wir diese Anwendung ausführen, um zu sehen, wie wir sie ausführen können. Und dann werden wir alle diese Inhalte löschen, um unser Problem zu beginnen. Wenn Sie sich erinnern, habe ich Ihnen zuvor gesagt, dass jede Anwendung Komponenten und Module und Dienste enthält. Hier ist also ein Modul, das derzeit eine Komponente enthält, die App-Komponente genannt wird. Sie können beliebig viele Komponenten erstellen. Wir werden das auch später sehen, wie man mit diesen Komponenten kommuniziert und arbeitet. Und das schöne Ding hier und acht Schlangen, dass es auch mit hübscheren Konfiguration kommt. So können Sie Ihre hübscher konfigurieren, wie Sie wollen. Also lassen Sie uns unsere Konfiguration für hübscher hinzufügen, wie wir zuvor konfiguriert, so können wir sie nehmen, kopieren Sie sie. Ich habe sie kopiert. Ich habe sie wieder hierher gebracht. So haben wir Top Breite vier und drucken Tweets 160. Und eine andere Konfiguration, die Sie im Zitat von hübscheren ES Linde getragen haben, ist auch Konfiguration für die Fussel, wie wir auch später sehen werden. Und das nette Feature hier, dass, wenn Sie eine Konfigurationsdatei, zum Beispiel ES lint RC, sehen Sie eine globale und eine spezifische für die Anwendung. Und wenn Sie etwas wie ein spezifisches für diese Anwendung oder besonders LinkedIn für diese Anwendung tun möchten, können Sie hier Ihre Konfiguration hinzufügen. Um jedoch zu warnen, dass Sie eine globale Konfiguration wünschen, können Sie sie hinzufügen. Globaler Ordner dort. Dasselbe für TypeScript-Kaffee. Hier sehen Sie, dass Sie eine allgemeine Konfiguration für das TypeScript haben. Und im Inneren T ist Hustenanwendung. In der Anwendungsebene sehen Sie eine Spezialität ist Konflikt für jede Anwendung, wir werden nicht so viel in Details gehen, unser Ziel, unsere Anwendung zu bauen. Und wir werden sehen, wann immer wir diese Dateien verwenden müssen, und wir müssen das konfigurieren. Lassen Sie uns nun versuchen, diese Anwendung auszuführen. Es wird eckige Anwendung sein, die ND-Shop genannt wird, und wir werden es ausführen. Also öffne ich wieder mein Terminal. Und es ist sehr einfach. Ich tippe einfach x ein, verhungern und dann den Namen der Anwendung. Also werde ich sagen, NG Shop. Also hier wird es beginnen, diese Anwendung zu bedienen. So kann ich es in meinem Browser sehen. Jetzt wird die Anwendung erfolgreich kompiliert. Öffnen wir es in unserem Browser. Also werde ich hier zu meinem Browser gehen und localhost 4200 eingeben, und wir werden sehen, dass die Anwendung läuft. Also, wenn ich wieder zur Anwendung gehe, auf die Homepage dieser Anwendung, löschen Sie alles. Und ich werde H1 setzen und ich werde E scharf oder NG e-shop sagen. Und speichern Sie es und öffnen Sie wieder den Browser, den wir sehen und G-scharf. Auf diese Weise bedienen wir die Anwendung. Wir setzen NX dienen und den Namen der Anwendung. 71. Die Anwendungen erstellen (Admin (Admin: Okay, in dieser Vorlesung werde ich Ihnen zeigen, wie Sie weitere Anwendungen für Ihren Arbeitsbereich hinzufügen können. Also, wenn Sie sich erinnern, müssen wir zwei Anwendungen erstellen. Erstens ist der E-Shop selbst, in dem die Kunden unsere Produkte betreten und durchsuchen. Und die zweite Anwendung wird das Admin-Panel für diesen E-Shop sein. Und im Admin-Panel werde ich sehen, wie ich meine Produkte bearbeiten, Benutzer bearbeiten und Bestellungen bearbeiten kann . Also lassen Sie uns jetzt die Admin-Anwendung erstellen. Also hier im Panel werde ich dies verwenden, um die NDA-Anwendung zu bedienen. Sie können mehrere Terminalfenster öffnen, indem Sie auf dieses Plus klicken. Und hier haben Sie ein weiteres Terminal-Fenster. So können Sie jetzt eine neue Anwendung erstellen. Also müssen wir einige NX ausführen. Und dieser NX-Befehl wird ein Generieren sein. Und bei Roman ist der Name der Firma, die jedes X Mono Repo erstellt hat. Und dann, was der Typ der Anwendung, die ich habe, ist eckig. Und dann werde ich sagen App, erstellen Sie für mich Anwendung. Und dann habe ich die Anwendung genannt, die ich will. Also werde ich hier Admin sagen. So Admin App, oder Admin, oder Admin E scharf, jeder Name, den Sie frei zu wählen sind. Also werde ich einen Admin erstellen und dann werden wir sehen, wie es die Anwendung erstellt. Es wird mich zuerst fragen, was ist ein Styling-System, das ich für diese Anwendung brauche? Ich benutze immer SAS. Sie haben die Freiheit zu wählen, welche Sie wollen. Ich werde SAS benutzen. Und dann wird es mir eine andere Frage stellen, ob ich Routing in dieser Anwendung verwenden werde. Eigentlich wird es ein neues Modul für mich zum Routing generieren. werden wir später sehen. Also mach dir keine Sorgen darüber. Machen Sie einfach ja, und wir werden später darüber reden. Also in diesem Fall, die Anwendung zu erstellen. Und wir werden jetzt in unserem Datei-Explorer sehen, wir werden sehen, dass wir Admin und N G scharf haben, und jede Anwendung hat End-to-End-Test. Lassen Sie uns nun versuchen, mit dieser Anwendung zu dienen. So können wir diese Anwendung in einem anderen Fenster ausführen. Wir haben hier ein Terminal, dass wir unsere Anwendung bereits ausführen, die NGA-e-shop ist. Aber wir können jetzt auch gemeinsam zur Anwendung kommen. Also lasst uns ein klares machen. Und dann werden wir sehen, dass NX dienen, wie wir zuvor gesehen haben, dass wir dienen. Und dann der Name der Anwendung. So wird es admin sein. Und wie Sie hier sehen, ist es sehr schlau. Es sagt mir, dass dieser Port bereits verwendet wird weil ich diesen Port für die vorherige Anwendung verwende, die N G scharf ist. Also hier fragt es mich, willst du einen anderen Port benutzen? Ich werde ja sagen. Dann wird es zufällige Port für mich auswählen. Und dann kann ich es im Browser mit diesem Port öffnen. Wenn Sie einen benutzerdefinierten Bericht auswählen möchten, lassen Sie keinen zusätzlichen Port für Sie generieren. Sie können einfach minus Minos Port und dann die Nummer des Ports, den Sie wollen. Also wähle ich 4.100 und führe diesen Befehl aus. Und dann werden wir haben, dass unsere Anwendung auf diesem Port läuft. Also, wenn wir wieder und zum Browser gehen und zu lokalen Host zu navigieren, haben wir 4.200 ist für Energie Shop verwendet. Öffnen wir einen anderen Tab. Und wir werden versuchen, lokale Gastgeber 4,100 zu sagen. Und wir werden hier den Admin bekommen, der Admin-Anwendung ist. Indem wir also zurück zur Anwendungsroute oder Anwendungsroute gehen, wie wir zuvor gesehen haben, haben wir diesen benutzerdefinierten Code bereits. Lassen Sie uns es entfernen und dann versuchen, jeden zu machen. Und wir werden sagen, zum Beispiel, Admin-Panel. Wir werden es speichern, gehen Sie zurück zu unserem Browser, und wir werden sehen, dass es auf das Admin-Panel aktualisiert wurde. In diesem Fall laufen wir jetzt zu Anwendungen zusammen. 72. Die Anwendung von Level: Zuvor haben wir gesehen, wie man die Struktur für die Anwendung erstellt. Und theoretisch haben wir gesagt, dass einige Anwendungen ihre eigenen Komponenten haben. Zum Beispiel, wie Sie hier sehen, dass die E-Shop-Anwendung hat e-Sharp Homepage-Komponente und auch Banner und Kategorie Banner und Produktlistenkomponente. Da diese Komponenten nicht in anderen Anwendungen verwendet werden. Also setzen wir sie in die Anwendungsebene. Dies ist also die Bedeutung von Komponenten auf Anwendungsebene, aber die Komponenten auf Bibliotheksebene, sie sind die Komponenten, die sich in den Bibliotheken oder in ihren gemeinsamen Bibliotheken befinden, wie die Login-Komponente und Register-Komponente. Und in diesem Vortrag werden wir sehen, was sind die Kommentare, die für mich die Komponenten in der Anwendungsebene schaffen . So werden wir zuerst eine Homepage-Komponente erstellen. Und innerhalb dieser Homepage-Komponente werden wir Kopf- und Fußzeile haben. Machen wir das praktisch und springen weg von der Theorie. Okay, also sind wir jetzt hier. Wir werden Komponenten erstellen, speziell für die NG Shop-Anwendung. Also werden wir nicht für den Admin tun. werden wir im nächsten Schritt sehen. Also zuerst werden wir auch die Befehlszeile zum Erstellen von Komponenten verwenden. Wie Sie zuvor gesehen haben, haben wir bereits eine Standardkomponente, die App-Komponente genannt wird. Diese App-Komponente ist der Einstiegspunkt für unsere Anwendung, und genau das sehen wir im Browser oder im Einstiegspunkt der Anwendung im Allgemeinen. So wie wir zuvor gesehen haben, dass diese Komponente auch andere Komponenten aufrufen kann. So können wir eine andere Komponente erstellen, und nennen wir es hier in der App-Komponente. Also zuerst öffnen wir ein neues Terminal und Erstellen einer Komponente mit n x wird auf die gleiche Weise sein. Wie erstellen wir eine Anwendung, aber es ist meist ähnlich wie Angular. Also werden wir eine x-generierte Komponente haben. Wenn Sie an Angular gewöhnt sind, können Sie sagen, mg erzeugt Komponente. Aber hier sagen wir ein x, g, das ist eine Abkürzung für Generate und dann Komponente. Und dann können Sie den Namen Ihrer Komponente angeben. Zum Beispiel möchte ich sagen, Homepage, zum Beispiel. Und dann, da Sie einen X-Arbeitsbereich verwenden, müssen Sie das Projekt angeben. Also müssen wir die Anwendung spezifizieren. Die Anwendung, die wir hier haben, ist N G scharf. Also werde ich Minus-Minus-Projekt gleich NG Shop setzen. Also hier in diesem Fall werde ich die Komponente im NG-Schock erstellt haben, um sicherzustellen, dass Ihre Komponente auf die richtige Weise erstellt wird, Sie können Ihren Befehl trocknen, damit Sie nichts ausführen werden. Sie werden nur sehen, was ihr Gemeinsames getan hat. So werden Sie hier keine Änderung der Struktur sehen. Sie werden nur hier in der gemeinsamen Linie sehen, was es tatsächlich getan hat. Also können wir Minus, minus einen Trockenlauf sagen . Führen Sie diesen Befehl in der Fernbedienung aus, tun Sie nichts. wir die Eingabetaste. Wir werden sehen, dass wir Fehler haben, ich denke, weil ich Raum hier zwischen Projekt und N G scharf habe. Versuchen wir also, diesen Raum zu entfernen. Und dann versuchen Sie es noch einmal. Wir werden sehen, dass es wirklich funktioniert. Wenn Sie also diesen Fehler erhalten, müssen Sie vorsichtig mit dem Befehl sein, um keine Leerzeichen zwischen dem Befehl und dem Wert zu haben. Und wenn Sie fragen, wie ich zu den vorherigen Kommentaren zurückkehre, verwende ich Auf- und Abwärtspfeile auf der Tastatur. So können Sie in die Geschichte Ihrer Kommentare gehen. Wie Sie hier sehen, benutze ich das als letzte. Wir werden sehen, dass die Komponente in Apps erstellt wird. Sie kaufen, Quelle, App, Homepage und Homepage-Komponente. Und wie Sie hier sehen, sollte es sich hier befinden. Also Apps und Sie shoppen Quellkomponente und dann hier. Aber normalerweise suchen wir die Seiten in einigen Ordnern. Wir lokalisieren die Komponenten auch in einigen Ordnern, die ihre Funktionalität zum Ausdruck bringen, wie wir später sehen werden. Also, weil dies eine Seite ist, würde ich einen Ordner erstellen, nennen es Seiten. Und innerhalb dieser Seiten werde ich die Homepage stellen. Also, wie können wir das tun? Wir können es ganz einfach machen. Wir sagen nur Seiten Schrägstrich und dann können Sie den Namen Ihrer Komponente übergeben. Also, wenn wir drücken Enter mit einem Trockenlauf, werden wir sehen, dass die Komponente in App Pages Ordner erstellt wird , Homepage, Homepage-Komponente. So wie Sie hier sehen, dass wir einen Ordner in der Anwendung erstellt haben. Versuchen wir also, diesen Befehl ohne Trockenlauf auszuführen, um zu sehen, was genau er tut. Wenn ich also auf Enter ohne Trockenlauf klicke, werde ich sehen, dass ich eine Komponente oder einen Ordner mit meiner Komponente erstellt habe. Also auf die gleiche Weise, Lassen Sie uns eine andere Komponente für die Produktlistenseite erstellen. So können wir das Gleiche sagen. Ich sage Seiten. Produktliste und dann Projektname und G-Sharp. Also werde ich die Eingabetaste drücken, und dann werde ich sehen, dass ich eine andere Komponente innerhalb von Seiten erstellt habe. Also habe ich jetzt zwei Komponenten. Und jede Komponente oder jeder Komponentenordner enthält die HTML-Vorlage, in der ich mein HTML und die Styling-Datei schreiben werde, sowie die Testdatei und auch die TypeScript-Datei, wo ich Daten an das Front-End greifen werde. Sie können es auch auf verschiedene Weise strukturieren. Sie können Seiten sagen und dann sagen, zum Beispiel, basic. Und dann im Grunde setzen Sie Homepage Kontaktieren Sie uns, zum Beispiel, über uns, et cetera. Und ein anderer Ordner innerhalb der Seiten, können Sie sagen, ich möchte einen Produktordner erstellen. Und in diesem Produkt-Ordner, Sie legen die Produktliste, Produktdetails, Produktbestellungen, usw. Und wenn Sie in der gemeinsamen Zeile sehen, werden Sie sehen, dass diese Dateien erstellt werden und einige Dateien aktualisiert werden. Welche Datei wird aktualisiert? Es ist das App-Modul in dieser Anwendung. Wie Sie sich erinnern, haben wir zuvor definiert, dass das Modul mehrere Komponenten enthält, so dass sein Container von Komponenten meiner Anwendung. Also hier sage ich, dass dieses Modul mehrere Komponenten enthält, die AB-Komponente, die grundlegende, und dann die Homepage-Komponente und die Produktlistenkomponente ist . Und dann können wir versuchen zu überprüfen, wie diese Komponenten funktionieren. So haben wir hier, zum Beispiel, Homepage-Komponente. Es hat einen PIE-Absatz und Homepage funktioniert. Also lassen Sie uns auf diese Komponente beziehen, beziehen Sie sich auf unsere Anwendung, um diese Komponente zu verwenden. Also in App-Komponentenebene schreibe ich das Tag dieser Komponente. Also, wie wir wissen, dass Tag dieser Komponente, können Sie zu ihrer Komponente ts gehen und Sie werden etwas namens Selektor sehen. Und in diesem Selektor werden Sie sehen, dass es durch unseren Firmennamen und den Komponentennamen erstellt wird. So können wir diese kopieren, den Firmennamen Zuvor haben wir definiert, wenn wir den Arbeitsbereich definieren. Und natürlich können Sie es ändern, wie Sie wollen. So zum Beispiel, Ich werde hier sagen, e-shop Homepage. Also müssen wir das tun. Also kann ich hier tun. Und dann kopiere ich dieses und füge es hier als Element oder als Selektor ein. Und ich drücke Speichern, und ich drücke ein für diesen. Und wir haben zuvor, dass unsere Projekte laufen. So ist es erfolgreich kompiliert. Und wenn wir zum Browser zurückkehren, werden wir sehen, dass diese Anwendung bereits läuft und wir eine Komponente haben, die dort läuft. Lassen Sie uns auch die andere Komponente darunter hinzufügen. So gehen wir zurück zu unserer Anwendung und wir werden auch den Selektor der Komponente verwenden. Also werde ich hier drücken wuchs Bits. Wir können es behalten und natürlich können Sie den Namen ändern, wie Sie wollen, aber es gibt Regeln. Wir werden diese Regeln später sehen. Also hier haben wir die zweite Komponente zu schaffen. Ich speichere, es ist erfolgreich kompiliert. Ich gehe zurück zum Browser, ich sehe, dass diese beiden Komponenten funktionieren. Dies ist eine Möglichkeit, Komponenten mit der NX-Befehlszeile zu erstellen. Und wir werden später sehen, wie man besser und besser strukturiert. 73. Routing auf die Application: Willkommen zurück. In dieser Vorlesung werden wir über Routing, Routing der Komponenten sprechen. Also möchte ich einige URLs haben, die sich genau auf meine Komponente beziehen. Also möchte ich zum Beispiel die Seite für eine Produktliste. Also werde ich einen Link haben, wo es localhost 4000 zu einem 100 Schrägstrich Produkte sagen wird. Und dann wird es mich zum Produkt am wenigsten Komponente führen. Und ich möchte auch die Homepage-Komponente ohne Suffix oder ohne Route haben , als wäre es die Standardroute. Also werde ich hier eine Homepage-Komponente für die Standard-Route haben und für die Produktliste werde ich localhost Slash Produkte haben. Also lassen Sie uns das tun und sehen, wie wir die Routen generieren können. Die Routen beziehen sich im Wesentlichen auf die Anwendungsebene. Sie müssen also das Outs in der Anwendung angeben. Außerdem können Sie Routen in der Bibliothek angegeben haben, wie wir später sehen werden. Aber jetzt lassen Sie uns das Routing auf Anwendungsebene durchführen. Also werde ich hier zum Anwendungsmodul gehen. Und beim Import gehe ich hierher und sage Router-Modul. Rufen Sie für mich Router-Modul an. Du siehst diese Erweiterung, wie sie sehr großartig ist. Es importiert automatisch die Komponenten, die ich möchte, alle Module, die ich möchte. Also muss ich das import-Router-Modul nicht von Angular outer eingeben. Ich tauche einfach die Klasse und dann wird sie wirklich automatisch importiert, wenn sie verfügbar ist. Um eine bestimmte Route hinzuzufügen, müssen Sie einen Router-Modulpunkt für root haben. Und hier werden Sie Ihre Routen angeben. Also hier haben wir den ersten Parameter, ist das raus? Zunächst einmal benötigen wir eine Route für die Homepage und eine Route für die Produktlistenseite. Und diese Route ist normalerweise eine Reihe von Routen. Also brauchen wir, vor allem Array und innerhalb dieses Arrays haben wir die Objekte davon heraus. Jedes Objekt von diesem out, müssen Sie den Pfad angeben, den Sie definieren möchten. Zum Beispiel möchte ich den Standardpfad und die Komponente definieren , auf die dieses Bad sich bezieht. Also werde ich sagen, dass die Komponente die Homepage-Komponente sein wird. Und auch ich werde einen anderen Pfad haben , der zum Beispiel der Produktlistenpfad ist. Also werde ich hier Badeprodukte sagen. Und in diesem Pfad werde ich sagen, dass die Komponente eine Produktlistenkomponente ist. Und dann, wenn wir zum Browser gehen, werden wir sehen, dass, wenn ich zu localhost gehe , dass ich immer noch Homepage-Arbeit habe, Produkt am wenigsten funktioniert. Warum? Weil ich ihre äußere Steckdose angeben muss, die in der Anwendungskomponente oder in der Stammkomponente basiert. Um das zu tun, gehen wir zur App-Komponente und dann müssen wir diese entfernen und sagen Router-Steckdose. Wir müssen dieses Tag oder diesen Selektor angeben, um die Router-Steckdose anzugeben. Diese Router-Steckdose führt mich also zu der richtigen Komponente basierend auf dem Link, den ich bereitstelle. Wenn ich also speichere und zum Browser zurückgehe, wird es erfolgreich kompiliert. Und dann werde ich nur in der Route sehen, dass die Homepage-Komponente. Und dann, wenn ich eine Produktliste hinzufügen möchte, werde ich sagen, Produkte, wie ich in diesem Outs angegeben, Ich werde sehen, dass Produktliste funktioniert. So definieren wir also die internen Routen, die sich auf andere Komponenten beziehen. Aber zuerst möchte ich einen sauberen Code haben. Also lasst uns etwas Refactoring machen. Wir können dieses Array in eine Variable setzen, so dass wir eine saubere für geschrieben haben können. Also definiere ich hier eine Konstante, nenne es Routen. Und diese Routen haben einen Typ Routen und die auch automatisch importiert wird. Und das ist gleich meinem Array. Also lasst uns hier etwas bessere Formatierung machen. So haben wir hier den Pfad, ersten Pfad und auch die Komponente. Und dann übergebe ich diese Routen Konstante 2, 4 Wurzel, und speichere sie. Dann werden wir unsere Routen hier haben. In fortgeschrittener Ebene, einige Leute erstellen ein spezielles Modul für ihre Routen. Aber Sie können es auch auf diese Weise tun. Aber kein Problem, wir können es nicht auf diese Weise behalten. Und wir werden später sehen, wenn wir unsere Anwendung umgestalten, wie wir ein spezielles Modul für das Routing erstellen würden. Für den Moment brauchen wir genau das. Wir haben jetzt interne Routen. Wir haben den Pfad, der der Standardpfad ist, geht auf die Homepage-Komponente und auch das Produkt, das zur Produktlistenkomponente geht. 74. Master-Seite mit Header und Footer: Okay, in diesem Vortrag werden wir eine Kopf- und Fußzeile für unsere Anwendung in der G-Sharp erstellen. Und natürlich werden wir wissen, wie man eine Masterseite erstellt. Jede Seite in unserer Anwendung wird also Kopf- und Fußzeile haben. Wenn Sie sich also daran erinnern, dass die Erstellung von Komponenten in Angular oder in NX in diesem Kommentar war, wie wir vor der Produktliste erstellt haben, geben wir den Projektnamen an. Also hier werde ich diese Typen ersetzen. Also werde ich hier zum Beispiel einen freigegebenen, freigegebenenOrdner haben zum Beispiel einen freigegebenen, freigegebenen , der wie eine freigegebene Komponente ist. Und ich werde zuerst einen Header nennen und drinnen und Sie kaufen ein. Und natürlich möchte ich auch eine andere haben, die Footer genannt wird. Und jetzt, wie Sie hier sehen, haben wir einen freigegebenen Ordner mit Fußzeile und Kopfzeile. Also lassen Sie uns diese Komponenten auf unserer Homepage nennen. Also können wir hier sagen, rufen Sie für mich die erste Komponente. Lassen Sie uns zur ts Datei gehen, um den Selektor zu finden. Ich werde das hier setzen. Und auch das Gleiche für die Fußzeile. Fügen Sie hinzu, wenn wir speichern und gehen Sie zu unserem Browser. Wir befinden uns jetzt auf der Produktlistenseite. Also lasst uns zur Homepage gehen. Ich werde sehen, dass ich Kopfzeile, Homepage selbst und Fußzeile habe. Was passiert, wenn Sie vorher sehen, dass das Produkt keine Kopf- und Fußzeile hat. Also müssen wir sie auch dort hinzufügen. Also der beste Weg, dies zu tun, müssen wir die Kopf- und Fußzeile wie etwas wie geteilt machen. Also können wir wieder hierher gehen und diese Berufung absagen. Wir gehen auf App-Komponente. Und in dieser App-Komponente werden wir die Header-Komponente und die Fußzeilenkomponente und die Steckdose platzieren , wo wir die Komponenten rendern, es wird in der Mitte sein. Also, wenn ich jetzt wieder zu meinem Browser gehe, nachdem ich diesen von der Homepage gelöscht habe. Also brauchen wir sie nicht mehr. Wir haben sie jetzt in App-Komponente. Ich gehe zu dem Browser, dass die Produktliste auch Kopf- und Fußzeile hat. Also gehe ich wieder auf die Homepage. Ich werde sehen, dass die Homepage auch Kopf- und Fußzeile hat. Auf diese Weise garantiere ich, dass ich eine Masterseite habe, die immer Kopf- und Fußzeile enthält , und der Inhalt ändert sich basierend auf der Route, die ich angebe. Und falsche Dateistruktur. Auch hier können wir sagen, dass wir eine gemeinsame Komponenten und Seiten haben. Und Seiten. Wir haben produktbasierte Homepage und auch die gemeinsam genutzten Komponenten Fußzeile und Kopfzeile. Und auch das App-Modul wurde mit der neuen Komponente aktualisiert, die wir bereits hinzugefügt haben. Also haben wir hier Header-Komponente und Fußzeilenkomponente. Wir werden später sehen, wie man die Stile macht und die Header und auch die alle Komponenten und die Homepage-Komponente strukturiert , genau wie wir es als Design bekommen haben. 75. Benennung von Component mit ESLint: Ich möchte hier auf die Namenskonvention unserer Komponenten eingehen. Wie Sie hier sehen, beginnt es immer mit dem Namen des Unternehmens oder dem Namen des Arbeitsbereichs, den wir erstellt haben. Es ist also besser, einen speziellen Namen zu haben, der auf der Anwendung basiert , wenn Sie Komponenten verwenden, die nur mit dieser Anwendung zusammenhängen. Also würde ich sagen, vielleicht können wir dies zum Beispiel umbenennen, um Sie Shop zum Beispiel, Header zu beenden. Und es wird auf diese Weise sein, wir haben es als eine spezifische Komponente für den Energieschuss. Also das gleiche werde ich für die Fußzeile tun, und dann müssen wir die Benennung auch in den Komponenten selbst angeben. Also müssen wir die Selektoren ändern. So ersetzen wir dies durch den NG-Shop. Und auch für den Header werden wir diesen Namen in Shop ändern. Nachdem wir diese Dateien gespeichert haben, müssen wir sie auch irgendwo in der ES-Spur ändern. Die Ohren Land ist ein Werkzeug, wo es die Fusseln für meine Anwendung spezifiziert. Es wird also meine Fehler beheben, wenn ich meine Anwendung erstellen oder wenn ich die Anwendung bereitstellen werde. Also, hier, wenn ich die ES-Fussel betreibe, dann wird es mir sagen, nein, Sie haben ein Problem in Ihrer Selektorbenennung. Also bitte ändern Sie es basierend auf der Regel, die in der ES Fussel ist. Also, wenn ich zur Eastland RC-Datei gehe, wo wir die Konfiguration haben, werden wir in einer der Zeilen dieser Konfiguration über Eastland sehen. Sehen Sie, dass wir haben, was ist der Direktive-Selektor und was sind die Komponenten des Vektors. Das Präfix ist also immer blaue Bits, weil wir unseren Namespace oder den Workspace basierend auf dieser Firma benannt haben. Also müssen wir es einfach ändern, um Sie zu beenden Shop, dann werden wir keine Ohren verlängern Probleme haben. Außerdem können Sie angeben, was der Stil der Namenskonvention ist. Du kannst also sagen, ich habe einen K-Pop-Fall , wie es sein wird, wie wir ihn hier haben. Und Sie kaufen minus Fußzeile, oder Sie können einen Kamelfall angeben. Ein Kamelfall kommt so, also haben wir kein Minus, wir haben eine Großschreibung. Normalerweise haben wir in Angular die Direktive mit CamelCase und ihre Komponenten Wähler kommen als K-Pop Fall. Und denken Sie daran, dass wir die ES-Lint-Datei bearbeiten, die sich innerhalb der Anwendung befindet. Wir bearbeiten nicht die Haupt ist verknüpfte Datei, weil, wie Sie sich erinnern, wir ES lint file, allgemeine eine, und dann haben wir eine Anwendung spezielle ES lint Datei. Also hier müssen wir unsere Migration setzen, die genau mit dieser Anwendung verwandt sind. 76. Die Enabling aktivieren: In der vorherigen Vorlesung sahen wir, dass wir etwas namens Linting brauchen und wir sahen, dass wir die ES-Fusseldatei modifizieren. Und wir sagten, dass die ES-Fussel uns hilft, Probleme in unserem Code zu beheben. Aber wie kann ich diesen leistungsstarken ES Fussel sehen, der mir hilft, meinen Code live zu reparieren. Wie wenn ich Code tippe, möchte ich sehen, welche Fehler ich auf diese Weise nach der Installation der Erweiterungen mache, der empfohlenen Erweiterungen, die wir vorher haben, und auch der empfohlenen Erweiterungen, die mit dem NX geliefert werden. Wir sehen, dass ES Land noch nicht aktiviert ist. Also müssen Sie in VS-Code, Sie müssen hier auf ES Lint klicken, um die Live-Ausleihe Ihres Codes zu ermöglichen. Wenn Sie darauf klicken, werden Sie gefragt, dass die ES Lint Erweiterung Node Modul Eastland für die Validierung verwendet, die lokal installiert ist. Willst du das also aktivieren? Willst du das zulassen? Dann würden Sie einfach überall ein Tief sagen. Wenn du das zulässt, dann kommt sie ES Fussel aktiv. Und dann werden Sie beginnen, Fehler und Fehler Ihres Codes zu bekommen. Wie Sie hier sehen, habe ich hier und roten Fehler. Warum? Weil es zum Beispiel sagt, dass ich keinen Konstruktor leer haben kann. Oder zum Beispiel, ich komme nach oben haben leere Funktion. Das sind Fusselregeln. Und natürlich können Sie diese Ausleihregeln wie gewünscht in Ihrer EMS-Lane-Datei ändern. Ein weiteres Beispiel hier, dass ich einen Fehler beim Benennen des Selektors dieser Komponente erhalten habe. Weil wir vorher gesagt haben, dass wir eine Regel setzen, dass jeder Komponente mit N D scharf, E scharf vorangestellt werden muss. Also hier funktioniert es gut. Wir haben keinen Fehler und irgendein Problem, weil wir angegeben haben, dass wir in der ES fussel-Datei gesagt haben, dass alles oder jeder Komponente mit dem NG Shop vorangestellt werden muss. Also, wenn ich wieder zu dieser Komponente, die mich und ein Problem verursacht und ich NG Shop. Ich werde direkt sehen, dass ich das bekommen habe, ist alles in Ordnung. Manchmal sind diese Fehler ärgerlich, so dass Sie sie auch ausschließen können. Also brauchen wir auch eine Regel, um es zu dieser ES fussel-Datei hinzuzufügen. Also können wir nicht sagen, dass nicht für mich über leere Kernfunktionen überprüft wird. Sie haben also viele Regeln, die Sie ändern können. Dann können Sie Ihre Umgebung so erstellen, wie Sie möchten um Ihnen zu helfen, auf die beste Art und Weise zu programmieren, die Sie möchten. Manchmal ist es ärgerlich, diese Fehler zu sehen, auch wenn Sie keine großen Fehler machen. So können Sie einige dieser Fehler deaktivieren, die Sie stören. Wenn Sie also die Maus auf den Fehler setzen, werden Sie nach einem unerwarteten leeren Konstruktor gefragt. Also müssen Sie das beheben. Also, wie kann ich das beheben? Sie werden die Regel von diesem Link kennen. Wenn Sie also auf diesen Link klicken, werden Sie aufgefordert, ihn im Browser zu öffnen. Und wenn wir zu acht gehen, werden wir sehen, dass diese Rolle, so können Sie zu Ihrer ES fussel-Datei diese Regeln hinzufügen, so dass Sie es deaktivieren können. Also, wenn Sie das tun wollen, kopieren wir das einfach und gehen zurück zu unserem Code. Und in der ES Fussel-Datei, wo ich meine ES Fusselregeln platzieren, wo wir diesen NG-Shop geschrieben haben. Wir können eine neue Regel hinzufügen, indem wir Komma tun, und wir kopieren diese beiden Regeln. Also ist keine leere Funktion ausgeschaltet. Und auch möchte ich die leere Funktion für TypeScript ES-Länge ausschalten. So können wir einfach auch diesen Teil entfernen. Wir sagen nicht, gib mir Fehler. Wir sagen, schalte es einfach aus. Wenn ich diese Regel ausschalte, werde ich sehen, dass dieser Fehler verschwunden ist. Und auch wir haben hier einen weiteren Fehler. Wir werden sehen, dass seine Lebenszyklusmethode auf, darin sollte nicht leer sein. Es ist auch eckig ES Fusseln breit. Also auch diese Regel machen, diese Regel drehen, wird es Ihnen helfen, diesen Fehler auch auszuschalten. Aber für mich würde ich es gerne behalten. Es gibt viele Rollen, die Sie in Ihrem EMS-Land konfigurieren können. So können Sie sie auch basierend auf der Dokumentation der ES Lint Library konfigurieren. Wenn Sie auf die Website gehen, wenn Sie zu Google gehen, finden Sie diese Bibliothek. Es heißt Eastland. Eastland hat viele Rollen. So haben Sie zum Beispiel Regeln, Komponententest, aber Sie sind an den Regeln interessiert. Sie können in der Dokumentation, alle Regeln, die Sie interessieren, einsehen. Ich denke, das, was wir jetzt haben, ist genug. Nur noch einmal, eine Erinnerung, dass Sie diese Regel nicht nur auf Anwendungsebene konfigurieren müssen. Denn wenn Sie sich erinnern, haben wir eine ES verknüpfte Datei auf der Anwendungsebene und auch eine globale Datei. Sie können es in der globalen konfigurieren. Auf diese Weise erhalten Sie keine Fehler unter allen Anwendungen und Bibliotheken, die Sie erstellen werden. Also habe ich hier hinzugefügt, speichern Sie es, und wir speichern es hier. Wir entfernen es aus einer bestimmten Anwendungsregel. 77. NX VSCode: In den vorherigen Vorträgen haben wir gesehen, wie wir Komponenten über die Befehlszeile mit einer EQ-CLI erstellen. Aber NX machte das Leben leichter durch die Erstellung und Erweiterungen, was eine Beschleunigung für unsere Codierung und Generierung von Komponenten, Modulen, Diensten usw. machen wird . Wenn Sie einen Arbeitsbereich einrichten, kommt das Projekt immer mit der Empfehlung von Erweiterungen, wie wir zuvor gesehen, neuartige Winkelkonsole. Und diese Erweiterung ist bereits in den Erweiterungen verfügbar , indem Sie nach NX oder in der ECS-Konsole suchen. So können Sie diese Erweiterung starten, indem Sie hier klicken. Und Sie sind immer in der Lage, die gemeinsame Zeile von NX zu verwenden, aber in einigen GUI grafischen Benutzeroberfläche. So möchte ich zum Beispiel eine Komponente generieren. Also gehe ich hier zu NX und klicke auf Generieren. Und dann bekomme ich eine Liste der Generator-Elemente in Angular. Wir sahen zuvor, dass die Befehlszeile, wie wir die Anwendung erstellen. Wir haben auch gesehen, wie wir eine Komponente erstellen, wie wir hier sehen. Wir können auch Direktiven generieren. In bewaffneten Wachen, viele Arten von Elementen, die durch eckige zur Verfügung gestellt werden. Sie können hier erstellt werden. Lassen Sie uns zum Beispiel eine Komponente erstellen. Wieder, wie wir zuvor gesehen haben. Ich werde einige Informationen erhalten, dass ich den Namen der Komponente, den Namen des Projekts und auch das Modul setzen muss. Wenn ich ein bestimmtes Modul und den Stil möchte, der für diese Komponente verwendet wird, können Sie zum Beispiel CSS oder SCSS hängt von Ihrer Wahl und vielen anderen Optionen ab, wie Sie hier sehen. Also, wenn Sie sich daran erinnern, dass wir hier zwei Projekte haben. Also haben wir Admin und ND-Shop, und wir werden an diesem Kurs auf beiden von ihnen arbeiten. Lassen Sie uns also zum Beispiel eine Seite für das Admin-Dashboard generieren . So können wir sagen, dass ich Komponente möchte, nennen Sie es ein Dashboard. Und der Projektname ist admin. Und wie Sie hier sehen, jedes Mal, wenn ich etwas tippe, wird es hier ausgeführt, den Befehl, aber mit dem Dry Run-Flag. Wie Sie sehen, erstelle ich ein Dashboard im Admin-Projekt und dann habe ich es bekommen. Dashboard-Admin-Projekt Aber ich wollte in einem bestimmten Ordner. Also werde ich sagen, Seiten Schrägstrich Dashboard. Und es wird wieder als Trockenlauf laufen und wir werden es hier bekommen. So wie Sie sehen, dass wir alle Fähigkeiten die gleiche wie eine Befehlszeile haben. Also werde ich dieses Feld ausfüllen. So haben wir hier Seiten Schrägstrich Dashboard. Das Projekt ist admin. Wenn ich ein bestimmtes Modul möchte, noch möchte ich es im App-Modul behalten, wie Sie hier sehen. Und auch sie verwenden einen Stil ist SCSS, Ich bevorzuge, dass, und auch die Änderungserkennungsstrategie. Und wir können es vorerst als Standard behalten. Und es gibt noch eine andere, und es gibt noch andere Optionen, die für uns zum Beispiel wirklich nicht so wichtig sind , aber wir werden sie später brauchen, wie wir sehen. Aber hier brauchen wir auch einen Selektor. Sie können einen benutzerdefinierten Selektor angeben, wie wir zuvor für die Komponenten gesehen haben. Also kann ich Admin-Dashboard sagen. Also hier haben wir Admin-Dashboard und dann können wir Test übersprungen haben. Zum Beispiel möchte ich das Spezifikations-TS nicht generieren, das ist dieses, das immer für Komponententests verwendet wird. So können Sie das auch überspringen. All das kann also innerhalb dieser Benutzeroberfläche möglich sein. Wenn ich also auf Ausführen klicke, wird der Befehl ausgeführt. Also lasst uns das jetzt versuchen. Ich klicke auf Ausführen und ich sehe, dass der Kommentar natürlich ohne den Trockenlauf ausgeführt wird , also wird er wirklich ausgeführt. Also sehe ich hier die Dashboard-Komponente wird hier erstellt und das App-Modul wird aktualisiert. Also haben Sie hier zwei Möglichkeiten. Sie können immer ein x verwenden, um Projekte zu generieren, auch auszuführen, und auch einen Test durchzuführen und sie zu erstellen, was wie eine GUI ist, um Ihnen alles leicht zu machen, nicht in die Befehlszeile einzugeben. So möchte ich zum Beispiel den Projektadministrator ausführen. Also gehe ich hierher, um zu rennen. Dann wähle ich dienen oder bauen. Also werde ich Admin Center auswählen, und dann werde ich auf Ausführen klicken. Und dann wird es auch die Zelle für mich tun. Also ein Tool wählen Sie einen Port und ich kann es auf dem Browser ausführen. Wie Sie hier sehen, heißt es, dass das Projekt auf dem Browser läuft, auf dem Port 400, 4200. Also, wenn wir hier gehen, gehen Sie wieder zum Projekt, führen Sie es aus, und dann werden wir das Admin-Panel haben. Wie Sie sehen, ist das alles über GUI möglich, aber es liegt an Ihnen, wenn Sie die gemeinsame Zeile oder diese GUI verwenden möchten. 78. Erstellen von geteilten Bibliotheken durch die Befehlszeile: Okay, jetzt gehen wir zu einem neuen Schritt. Wir werden eine gemeinsame Bibliotheken zu bauen. Wie wir bereits gesprochen haben, sahen wir, dass diese Anwendungen einige Bibliotheken für ein bestimmtes Ziel teilen. Einer von ihnen, zum Beispiel, u i Bibliotheken und auch Sie dort und Authentifizierungsbibliothek. Eine weitere Bibliothek ist Produkt- und Kategoriebibliothek. Und wir haben vorher gesprochen, warum wir das tun müssen. Und als kurze Erinnerung würde ich sagen, dass der Grund dafür war, dass wir dieselben Komponenten zwischen diesen Anwendungen teilen werden. Also muss ich eine Login-Komponente für das Admin-Panel und das Problem der Anwendung in der gleichen Zeit haben wir zuvor gesehen wie wir Komponenten für eine bestimmte Anwendung erstellt haben. Jetzt werden wir sehen, wie Bibliotheken zu erstellen und Komponenten in diesen Bibliotheken zu erstellen. Ich werde es jetzt mit der gemeinsamen Linie tun. Und in der nächsten Vorlesung werden wir es mit einem x2 tun. Ich habe die Erweiterung in VS-Code geworfen. Also gehen wir zurück zu unserem Projekt und ich werde ein neues Terminal eröffnen. Also, indem Sie auf dieses Plus hier klicken. Und dann werde ich den Befehl zum Erstellen einer Bibliothek ausführen. Dieser Befehl, der zum Erstellen der Bibliothek verwendet wird, ist NP x und x generieren. Und dann Roman, das ist der Name der Firma, die in x erstellt. Und dann werde ich sagen, Arbeitsbereich. Und der Typ des Arbeitsbereichs wird lib sein, was bedeutet, dass es Bibliothek ist. Und dann können Sie den Namen der Bibliothek übergeben, die Sie wollen. Zum Beispiel würde ich mit der ersten Bibliothek beginnen, die UI genannt wird. Und lassen Sie uns versuchen, es auch im trockenen Modus zu machen. Mit Trockenlauf stelle ich sicher, dass die Gesetzbibliothek nicht erstellt wird, aber ich werde nur sehen, was der Befehl tut. Also lassen Sie uns die Eingabetaste drücken. Und wie Sie hier sehen, dass die Bibliothek speziell in diesem Pfad Lippen UI und mit seinen eigenen ts config Quellen und Code erstellt wird. Und natürlich könnten andere Dateien es wie die ts config aktualisieren. Wir werden sehen, warum und auch Angular JSON, NX-Paket JSON, et cetera. Also, was wir später sehen werden, dass diese Bibliothek in den Lippen erstellt wird , weil wir Lippen UI Quellcode haben. Und wie Sie hier sehen, haben wir Anwendungsbibliotheken, die von diesen Anwendungen gemeinsam genutzt werden. Versuchen wir also, diesen Befehl ohne den Trockenlauf auszuführen. Wie Sie hier sehen, wurde die Bibliothek erstellt. Und wir sehen hier im Datei-Explorer, wir sehen, dass es eine eigene Bibliothek oder eigene Module hat. So sehen Sie hier, dass die Benutzeroberfläche eine Quelle und einen Sprung hat und dieses Bein hier. Und Sie können Indexdatei für Exporte haben, wie wir später für den Aufruf dieser Bibliotheken sehen werden. Sagte ich hier denke auch, dass Sie eine Lese mich für diese Bibliothek angeben können. Zum Beispiel können Sie UI sagen, und Sie können zum Beispiel eine Beschreibung für diese Bibliothek geben . Ich würde sagen, diese Bibliothek enthält die UI-Komponenten, die zum Beispiel in der Firma verwendet werden. Und welche Komponenten, zum Beispiel haben wir Banner-Komponente, haben wir Schieberegler. Wir haben zum Beispiel eine andere Sache wie Stepper usw. Also, wie Sie hier sehen, haben wir alles für diese Bibliothek beschrieben und es hat eine eigene README-Datei. Okay, lasst uns mehr in die Akten eingraben. So sehen wir, dass die Bibliothek hier erstellt wird. Also in dieser Ebene, nicht nach der Quelle und in der Lippe, werde ich meine Komponenten erstellen. So werden wir sehen, wie man Komponenten später erstellt. Und jetzt haben wir diese UI, Sie entweder TS, die an der Datei Beispiel, nur um Ihnen zu zeigen, wie Sie Funktionen exportieren, Methoden exportieren, Module exportieren, wie wir später sehen werden. Und auch wir haben index.js. Dieser Index ts wird verwendet, um alles aus dieser Bibliothek zu exportieren. Zum Beispiel werde ich Modul exportieren. Ich werde zum Beispiel Komponenten-Service exportieren . Also müssen wir hier alle Exporte auflisten, die wir exportieren müssen. Und dann können wir sie an anderen Orten verwenden, wie in Anwendungen oder in anderen Bibliotheken, wie wir später sehen werden, wir müssen nicht jetzt in dieser Indexdatei graben, wir werden es unpraktisch sehen, wie wir verwenden können. Und wieder, wir brauchen auch speziell Estlund Konfiguration für diese Bibliothek. Wenn Sie etwas nicht allgemeines und spezifisches für diese Bibliothek angeben möchten, können Sie die Regeln hier hinzufügen. In diesem Fall wird nur diese Bibliothek für ES Linting sensibel sein, basierend auf diesen Konfigurationsregeln wird nur für Tests und Komponententests verwendet. Wir werden auch sehen, wie man eine Unit-Tests innerhalb der Bibliotheken in anderen Abschnittenverwendet oder Unit-Tests innerhalb der Bibliotheken in anderen Abschnitten wenn Sie auch eine spezielle TypeScript-Konfiguration wollen, anstatt die im Allgemeinen sind. Weil, wie Sie hier sehen, haben wir ts config dot pace, das ist die wichtigste ts config, die hier erstellt wird. Und auch gibt es eine ts config oder TypeScript-Konfiguration spezifisch. Wieder, für diese Bibliothek, was der Unterschied zwischen diesen Dateien war, ist nur, wie man eine Referenzen erstellt. Es ist nur ein Aufräumen der Akten. Du musst dich also nicht so sehr darum kümmern. Also, wenn Sie Änderungen vornehmen möchten, wie wir später sehen werden, können Sie sie in ts config dot Bibliothek angeben, die die Haupt ts config erweitert, die sich im gleichen Ordner befindet. Okay, was die Dateien werden aktualisiert, wie wir hier sehen, ts config Bayes, JSON wird aktualisiert. Also, warum es aktualisiert wurde? Es wurde aktualisiert, da es einen neuen Pfad für diese Bibliothek hinzugefügt hat. Wir werden sehen, wie dieser Pfad zu verwenden, wenn wir diese Bibliothek aufrufen oder wenn wir Komponente in dieser Bibliothek verwenden werden. Also hier werden wir diesen Pfad irgendwie speichern. Und wir werden später sehen, wen Sie diesen Pfad nicht zum Importieren von Komponenten oder Importieren von Modulen oder Diensten verwenden werden. Aber um diese Verknüpfung oder diesen kurzen Teil zu verwenden, eckige JSON auch aktualisiert, können wir sehen, warum, weil Sie wissen, dass Sie in Angular jedes Projekt angeben und definieren müssen, das in Ihrem -Bibliothek oder in Ihrem alten Projekt. Wie wir hier sehen, haben wir Anwendungen, und dann haben wir unsere Bibliothek. Und wir sehen die Wurzel dieser Bibliothek. Wir sehen die Quellroute und alle Konfigurationen, die benötigt werden, um Angular zu konfigurieren, damit diese Bibliothek in einem guten Weg funktioniert. Und x JSON wird auch aktualisiert, weil wir eine neue Bibliothek hinzugefügt haben. So hat es auch UI und Tags. Wir werden die Verwendung dieser Tags später sehen. Ok, cool. Was ist also wichtig für uns jetzt, da wir eine Bibliothek erstellt haben? Wir werden später sehen, wie man die Bibliothek wieder erstellt, aber mit, nicht mit gemeinsamer Linie, sondern mit dieser Erweiterung. Also würden wir diese generierte oder NX-Erweiterung verwenden, um eine Bibliothek zu generieren , die wir implementieren und diese Bibliotheken in unserer Anwendung verwenden werden. 79. Erstellen von geteilten Bibliotheken durch Creating: Okay, Zuvor haben wir die Bibliotheken mit der gemeinsamen Zeile erstellt. Jetzt werden wir die Erweiterung verwenden, die Erweiterung, die ich Ihnen zuvor in den vorherigen Vorträgen gezeigt habe, die wir in Visual Studio-Code heruntergeladen haben. In dieser Vorlesung werden wir also alle restlichen Bibliotheken erstellen, die wir brauchen, um unser Projekt zu erstellen. Zuvor haben wir die UI-Bibliothek erstellt. Jetzt werden wir Benutzer und Authentifizierungs-Bibliothek, Produkte und Kategorie-Bibliothek und all diese Bibliothek zu bauen . Also zurück zu Visual Studio Code, klicken wir auf die NX-Erweiterung und dann gehen wir zu Generieren. Und für generieren werden wir eine Bibliothek auswählen. Also hier müssen wir den Bibliotheksnamen setzen, so dass wir IT-Produkte nennen. Also, weil wir zuvor UI und jetzt haben wir die Produkte und wir erstellen später die Benutzer und das Verzeichnis. Wenn Sie ein spezielles Verzeichnis angeben möchten, das wir nicht benötigen, möchten wir es in die Lippen legen, wie Sie hier sehen. Wir haben hier Lippen und wir wollen es hier platzieren. Also läuft alles gut. Und wir werden auf Ausführen klicken. Und nachdem wir diesen Befehl ausgeführt haben, werden wir das Labor sehen, das ich hier kaum erstellt habe. Und wir werden sehen, dass wir jetzt UI und Produkte haben. Lassen Sie uns nun zur zweiten Bibliothek wechseln, die Benutzer und Authentifizierung ist. Wir nennen es Benutzer ist genug. Und dann wird es auch einen Trockenlauf schaffen. Und lasst uns mehr über die Kommentare oder Parameter dieser Bibliothek graben. Erster Parameter ist das Styling oder das Styling-System , das innerhalb der Komponenten dieser Bibliothek verwendet wird. Ich würde immer scss verwenden. Natürlich haben Sie die Freiheit zu wählen, welches System Sie mögen. Wenn Sie ein bestimmtes Verzeichnis zum Erstellen dieser Bibliothek haben möchten, können Sie nicht nur Ellipse definieren, sondern auch ein anderes Verzeichnis definieren. So können Sie das Verzeichnis hier angeben, aber wenn Sie es leer lassen, wird es innerhalb Lippen Ordner erstellt werden und Modul Spezifikation hinzufügen, die ein Modul ist, das hier erstellt wird. Und dieses Modul hat eine Testdatei. Also, wenn Sie diese Testdatei aktivieren oder wenn Sie diese Option aktivieren, dann haben Sie eine Testdatei-Unit-Testdatei, Etwas wie diese. Wenn Sie das nicht erwähnen, dann werden Sie diese Spezifikationsdatei nicht haben, aber es ist einfach und Sie können sie später manuell erstellen. Buildable ist eine baubare Bibliothek erzeugen. Natürlich müssen wir immer alle Bibliotheken bauen , die wir für unsere Produktion benötigen. Aber standardmäßig kann diese generierte baubare Bibliothek ausgeführt werden, wenn Sie den Build-Befehl für diese Bibliothek ausführen, wie wir später sehen werden, aktivieren Sie IVY ist für die Aktivierung für eine Bibliothek, dann würden Sie diese Kompilierungsmethode in Angular. Angular hat viele Möglichkeiten zur Kompilierung. Einer von ihnen ist IVY. Ivy ist eine komplette Neufassung der Angular-Rendering-Engine. Wenn Sie mehr darüber wissen, haben Sie ein o t und auch das ist IVY. Ivy verspricht enorme Verbesserungen für Ihre Anwendung. Mit IVY können Sie auch Komponenten unabhängig voneinander kompilieren. So können Sie das für diese Bibliothek aktivieren und kein Problem. Also habe ich hier einen Fehler bekommen, der IVY aktivieren muss nur mit buildable verwendet werden. Also müssen wir auch diesen für diesen Bibliotheksimportpass aktivieren. Wir haben vorher gesehen, dass in der ts config, dass wir einen bestimmten Pfad haben, der generiert wird. So können Sie hören auch geben Sie Ihre Partner basierend auf, was Sie brauchen. Beispielsweise wurden die Produkte mit dem Firmennamen Linda, mit AD und dann mit dem Namen der Bibliothek generiert . Und das Gleiche. Wenn Sie eine bestimmte Benennung wünschen, nicht so, können Sie sie dort angeben. Aber ich möchte die gleichen faulen Lademodule haben auch verwendet werden, um das Modul nicht direkt zu laden. Wenn Sie die Anwendung ausführen, verwenden Sie diese Module oder Bibliotheken nur, wenn Sie sie benötigen. Wie wir später sehen werden, werden wir die beiden Typen verwenden. Wir werden die Lazy-Loading-Module und das unmittelbare Molekül verwenden. Dann wiederum, wie wir zuvor gesehen haben, wird für diese Bibliothek ein Winter verwendet. Ich ziehe es immer vor, ES Fusseln zu verwenden. Wenn Sie das Lazy Loading-Modul angeben, müssen Sie das Pilotmodul angeben. Welches Modul werden wir dieses Modul nennen. Normalerweise wird es das Anwendungsmodul sein, wie wir auch später sehen werden. Wenn Sie ein spezifisches Präfix für die Bibliothekskomponenten oder Direktiven wünschen, wie wir zuvor gesehen haben , können Sie es hier angeben, damit Sie die ASM-Datei nicht bearbeiten müssen. Zum Beispiel würde ich auch hier verwenden, Benutzer veröffentlichbar. Ich denke, nein, wir brauchen diese Bibliothek nicht veröffentlichbar. Routing es auf die gleiche Weise, wie wir Routen auf Anwendungsebene gesehen haben. Außerdem können wir Routing für die Bibliotheksebene haben, so dass wir das auch konfigurieren können. Und es gibt auch andere Optionen wie übersprungene Formatierungsdateien für, zum Beispiel für hübschere und auch überspringen Paket JSON, um keine Abhängigkeit zum Backend JSON hinzuzufügen , auch um ts config zu überspringen, was bedeutet, dass ts config für die Entwicklung nicht aktualisiert wird Erfahrung. Nein, wir brauchen all das Zeug und Tags. Wir werden später darüber sprechen, wenn wir diese Bibliotheken in unseren Anwendungen aufrufen. Unit Test Runner ist auch für Unit-Tests werden wir so verwenden, wie wir auch in der Zukunft sehen werden. Also lassen Sie uns diesen Befehl ausführen und ausführen. Und wir werden sehen, dass der ganze Befehl hier mit allen Parametern geschrieben wurde, die ich brauche. Also müssen wir nicht in der Befehlszeile pipe. Also müssen wir nur einige Klicks machen, um diese Kommentare zu generieren. Und wie wir sehen, dass wir jetzt die Bibliothek des Benutzers haben den Unterschied hier geschaffen, dass wir fairest ausgewählt haben, dass wir es mit einem Router konfigurieren. So haben wir bereits das Router-Modul, aber zum Beispiel hat die Produktbibliothek kein Router-Modul. Und wir sprachen auch über einige spezifische Präfix für Direktive und Komponenten. Wir werden sehen, dass wir es hier auch haben. Wir haben also Benutzer, nicht den Firmennamen. Also haben wir CamelCase für Direktiven und K-Pop Fall für Komponenten, und das Präfix ist immer muss Benutzer sein. Lassen Sie uns nun die letzte Bibliothek erstellen, die wir brauchen, die Orders genannt wird. So haben wir bereits Produkte UI-Benutzer. Lassen Sie uns auch die Ordnungsbibliothek erstellen. Also werde ich dies durch Befehle ersetzen. Alles gleich. Wir haben hier, kein Verzeichnis, alles ist bereits definiert. Und wir ersetzen das Präfix und alle anderen Informationen, die bereits definiert sind. Also klicken wir auf Ausführen und wir generieren diese Bibliothek, und sie wird in der Nähe der anderen Bibliotheken befinden. Wenn wir jetzt wieder auf die ts config Basis gehen, die diese Bibliothek alle hier erstellt. 80. Komponenten in Bibliotheken erstellen und sie in den Apps verwende: Okay, in dieser Vorlesung werden wir wissen, wie man eine Komponente in der Bibliothek erstellt. Zum Beispiel die Banner-Komponente, die sich innerhalb der UI-Bibliothek befindet. Und wir werden auch sehen, wie wir diese Komponente in der Anwendungsebene verwenden können. Zum Beispiel können wir in N G scharfe Anwendung auch hier die Befehlszeile verwenden , um die Komponente oder die NX-Erweiterung zu erstellen. Ich werde das auf beide Arten tun. So haben wir zuvor diese Bibliotheken, UI-Produkte, Benutzer und Bestellungen erstellt . Lassen Sie uns zunächst die Komponente mit der NX-Erweiterung erstellen. Ich werde zur Erweiterung des Anhangs gehen, darauf klicken, und dann generieren. Und ich würde das Generieren von Schaltplänen aus Angular verwenden weil ein x diese Generation für die Komponenten nicht hat. Also würden wir diese verwenden, Schaltpläne Winkelkomponente, die eine Winkelkomponente erzeugt. Lasst uns darauf klicken. Und dann können wir Ihnen ihren Namen für ihre Komponente geben, die ich erstellen möchte. Zum Beispiel würde ich es geben, wie wir vorher gesehen haben, dass wir Banner und das Projekt haben. Das Projekt ist der Name der Bibliothek, in der ich diese Komponente erstellen möchte. Wie wir bereits gesehen haben, haben wir viele Bibliotheken. Einer von ihnen ist UI-Bibliothek. Und dann werde ich die anderen Optionen nutzen. Lasst uns schnell über sie gehen. Also werden wir zuerst gehen, dass wir dieses Modul sehen werden. Was ist ein Modul, für das Sie diese Komponente definieren möchten? Wie ich Ihnen bereits gesagt habe, haben wir das Modul, das mehrere Komponenten enthält , und jede Komponente muss mit unserem Modul in Verbindung stehen. Wir können dieses Modul leer halten, dann wird es das Standardmodul dieser Bibliothek verwenden. Denn wie wir hier sehen, dass Produkte zum Beispiel ein Standardmodul namens Products Modul haben, dann wird die Komponente hier platziert oder die Deklaration der Komponente wird hier platziert. Also gehe ich wieder zu unserem Generator. Ich werde das Stilsystem auswählen. Was ist das Style-System, das ich verwenden möchte, ist SCSS, wie wir von Anfang an in diesem Projekt vereinbart haben. Außerdem müssen wir über Änderungserkennungsstrategie wissen. Diese Strategie definiert, wie die Komponente aktualisiert wird. So habe ich zum Beispiel eine Komponente, die den Text enthält, zum Beispiel das Banner selbst. Also möchte ich den Text dieser Komponente, dieses Banner von außen, von einer anderen Komponente aktualisieren . Also hier kann ich die Strategie wählen, wie sie aktualisiert wird. Standard ist immer die Komponente, hört auf die Änderungen auf Push bedeutet, dass jedes Mal, wenn ich sage Bitte aktualisieren Sie sich, dann wird es aktualisiert. Aber wenn ich einen neuen Text an die Komponente schiebe ohne die Komponente darüber zu informieren, dass ein Update kommt, wird nichts passieren. So können Sie immer die Strategien wählen. Ich werde das während der realen Erklärung unseres Projekts erklären. Für jetzt, lassen Sie es als Standard behalten. Einige Leute bevorzugen es, einen Anzeigeblock auf der Host-Ebene zu haben, wie die Komponente selbst einen Anzeigeblock hat. Für mich. Ich halte es leer, weil ich es nicht brauche. Eintrag Komponente, ist dies veraltet Methode. Wir brauchen es nicht mehr. Exportieren, müssen Sie immer, manchmal, um die Komponente zu exportieren, wenn Sie es in anderen Modulen verwenden möchten. Wenn ich also diese Banner-Komponente in anderen Modulen verwenden möchte, muss ich sie exportieren. Lassen Sie uns es also vorerst so behalten oder Sie können dies als exportierte Komponente definieren. Flach bedeutet, dass wir diese Dateien dieser Komponente auf der Stammebene dieses Projekts erstellen möchten. Zum Beispiel, wenn ich diese Komponente erstelle, wird sie hier und sie mit einer eigenen Datei erstellt, nicht innerhalb eines Ordners. Also für mich würde ich es in einem Ordner behalten und es in dieser Bibliothek verwenden. Es ist also besser, diese Wohnung im Lebensstil nicht zu überprüfen , wenn ich Inline-Stile in diese Komponente einfügen möchte, wie Sie in der Angular Inline-Vorlage wissen, dass ich keine getrennte Datei für die Vorlage haben möchte. Diese Komponente enthält also den HTML-Code oder Sie können ihn in eine getrennte Datei einfügen. Wenn Sie dies überprüfen, wird die Komponente mit einer eigenen Vorlage erstellt, ohne HTML-Datei. Da jede Komponente in Angular eine JavaScript-Datei, HTML-Datei und die Styling-Datei enthalten muss , die CSS oder SCSS sein kann. Aber für mich würde ich sie getrennte Dateien aufbewahren. Lint Fix, das ist veraltet. Es wird nicht mehr benutzt. Der Pfad, wenn Sie einen bestimmten Sachverhalt in Ihrer Komponente definieren möchten, können Sie ihn hier definieren. Sie können den Ordner angeben, in dem Sie diese Komponente erstellen möchten. Aber für mich halte ich es leer, dann wird es in der Bibliothek erstellt, die ich anvisiere. Präfix, wie wir zuvor gesehen haben, dass wir jede Komponente hat Selektor. Also müssen wir definieren, was das Präfix dieses Selektors. Also für mich würde ich immer sagen, jede Komponente in der UI-Bibliothek wird Präfix UI haben. Und auch hier der Selektor, wird es Sie fragen, was der Selektor ist? Der Selektor sollte hier erstellt werden. Also würde ich sagen Banner, überspringen Import. Es bedeutet, dass keine Komponente innerhalb des Moduls platzieren, wie wir zuvor gesehen haben, dass das Modul mehrere Komponenten enthält. Also muss ich es nicht hier setzen. Skip Selector gibt an, ob die Komponente einen Selektor haben soll oder nicht. Jetzt brauchen wir einen Selektor. Überspringen Sie Tests, dann wird es nicht die Testdateien erzeugen, die wir für Unit-Tests benötigen, die mit SPECT of Ts endet. Und am Ende müssen wir wissen, was der Typ dieser Komponente oder der Typ dieses Artikels ist. Es kann Direktive oder Komponente sein. Wir behalten es als Komponente, die sich im Namensrecht befindet. So werden wir wie banner.com dot ts Ansicht Kapselung ist die Ansicht Kapselung Strategie in dieser Komponente zu verwenden. Damit Sie das vorerst leer halten können. Wenn ich diesen Befehl ausführe, werde ich sehen, dass ich immer Fehler bekomme. NG-Modul kann nicht gefunden werden, die Importoption beibehalten verwendet, um den Import eines Moduls zu überspringen. Nein, wir brauchen das im Modul, weil wir es in einer anderen Komponente oder in der Anwendungsebene verwenden werden, wie wir es vorher gesehen haben. Dafür brauchen wir ein Modul. Warum bekommen wir diesen Fehler? Dieser Fehler kommt, weil Sie, entweder Bibliothek hat kein Modul und weil wir es über die Kommentarzeile mit MPI x erstellt haben , wie wir zuvor gesehen haben. Aber die anderen Komponenten oder die anderen Bibliotheken, die wir dort haben, die wir mit NX-Erweiterung erstellt haben. Sie haben ein Modul, aber die UI-Bibliothek hat kein Modul. Also lassen Sie uns auch das schaffen. Sie können dieses Modul manuell wie die anderen erstellen, oder wenn Sie möchten, können Sie auch den NX-Generator verwenden. Mit einem x-Generator können Sie auch Module erstellen, wie Sie zum Beispiel sehen, hier haben wir Schaltpläne, Winkelmodul, und dann geben Sie die Bibliothek an und Sie geben den Pfad an. Und das war's. Genau wie wir es mit ihren Komponenten machen. Für jetzt. Lassen Sie uns es halten, zum Beispiel, tun Sie einige professionelle Arbeit, um es manuell zu tun. Also zuerst werde ich eine neue Datei erstellen. Ich werde es UI Dot Modul dot ts nennen. Und jedes Modul in Angular muss mit Annotation NGO Modul beginnen. So wie wir hier in Produkten Modul sehen, die zuvor generiert wird, haben wir das NG-Modul und Importe und dann den Namen als eine Klasse dieses Moduls. Lassen Sie uns dieses kopieren und es in unserem UI-Modul verwenden. Nur müssen wir Produkte in UI umbenennen. Und in diesem Fall werde ich meinen Generator oder mein Modul bereit vom Generator verwendet werden. Versuchen wir es erneut und lassen Sie es uns ausführen. Und wir werden sehen, dass der Kommentar erstellt oder generiert wird. Wir sehen, dass n degenerate Schematics Winkelkomponente Name Banner-Projekt UI-Stil CSS oder SCSS ist und dann exportieren. Und wenn ich zum Modul selbst gehe, werde ich sehen, dass es Deklaration und Exporte des Moduls oder der Komponente gibt, die ich erstellt habe. Und hier ist die Komponente. Wir haben HTML-Vorlage, wir haben die CSS, wir haben auch die Schreibtisch-Datei und die TypeScript-Datei. Lassen Sie uns also eine andere Komponente mit der gemeinsamen Linie erzeugen. Wie wir zuvor gesehen haben, können wir mit einer Erweiterung oder mit der gemeinsamen Linie ausführen. Manche Leute mögen die Erweiterung nicht, also machen sie gerne einige gemeinsame Linien. Die gemeinsame Linie, die wir hier haben, ist Andy erzeugt Schaltpläne, Winkelkomponente, und dann geben Sie einige Eigenschaften an, die wir wollen. Also werde ich das kopieren und ein neues Terminal öffnen. Und dann werde ich es einfügen, und dann werde ich das Banner umbenennen, um zum Beispiel Schieberegler zu sein. So werden wir Schieberegler und hier auch als Schieberegler haben. Durch die gemeinsame Linie machen wir diese Kommentare. Also, was ich ändern muss, ist nicht mg, es wird ein x sein, weil wir NX-Kommentar ausführen. Also hier werde ich sagen, NX Schematik-Winkelkomponente generieren, und dann gebe ich die Eigenschaften an. Und wenn wir es ausführen, werden wir sehen, dass es mit genau den gleichen Werten generiert wird, die ich wollte. Und es wird in der Nähe seines Bruders sein , der Banner genannt wird. Okay, jetzt sehen wir, wie wir diese Komponenten in meiner Anwendung verwenden können. Da wir uns jetzt in einer Bibliothek befinden, sind wir nicht in der Anwendungsebene. Wie wir sehen, haben wir Anwendungen und Bibliotheken. Und in der Anwendung möchte ich diese Komponenten verwenden. Also zum Beispiel, lasst uns dieses Banner 1 bekommen. Wir können zum Beispiel alles in ihm erstellen , wie wir sagen können, ein Absatzbanner funktioniert. Und wir würden diese Komponente in dieser Bibliothek verwenden. Also, wie wir eine Komponente im Allgemeinen verwenden, gehe ich einfach und wähle den Selektor aus. Ich werde sagen, zum Beispiel, es sollte wie dieses UI-Banner sein. Und dieser Selektor. Ich nehme es und lege es in meine Bewerbung. Also werde ich hier AB-Komponente sagen. Und ich werde sagen, zum Beispiel, wir können es hier hineinlegen. Und ich möchte dieses sagen, UI-Banner ist UI-Banner. Aber wir haben Problem hier, dass u i Banner ist nicht bekannt Element y weil es nicht als Modul in dieser Bibliothek oder innerhalb dieser Anwendung bekannt ist. Also muss ich das Modul der Benutzeroberfläche nehmen und hier importiert werden. Dann wird die Anwendung wissen, dass es eine Komponente namens UI-Banner gibt. Ich kann es aus der Bibliothek verwenden, die UI genannt wird. Wie können wir das UI-Modul oder die UI-Bibliothek importieren. Es ist sehr einfach. Ich gehe zum App-Modul. Dann schreibe ich hier UI, wie wir zuvor gesehen haben, Modul. Und dann dieses UI-Modul, es wird aus dem Pfad importiert werden. Also werde ich sagen, importieren Sie UI-Modul von, und dann werde ich den Pfad angeben. Wir haben den Namen der Organisation und dann die Benutzeroberfläche. Damit habe ich Zugriff auf das UI-Modul in der UI-Bibliothek. Wie wir zuvor gesehen haben, als wir die Bibliothek erstellt haben, wird die ts config geändert, um für uns einige Partner zu definieren , die ich aus anderen Bibliotheken verwenden musste. Aber ich bekomme immer noch Fehler hier. Warum? Da sich das UI-Modul nicht in diesem Pfad befindet. So elipse UI Quelle index.js. Gehen wir zu diesem. Ich werde gehen und es überprüfen, und ich werde sehen, dass ich keinen Export des Moduls habe. Also, was wir tun müssen, ist nur Stern exportieren von dann werde ich sagen lib und dann das Modul selbst. Und wenn ich speichere und gehe zum App-Modul, und dann werden wir sehen, dass alles in Ordnung ist und definiert ist. Und wenn ich zur App-Komponente gehe, wieder, Ich werde sehen, dass ich hier keinen Erwachsenen haben, weil Sie, Ich Banner ist von der Anwendung bekannt, weil ich das Modul des UI-Moduls importiert. Lassen Sie uns nun die Anwendung ausführen und das ausprobieren. Also zuerst speichern wir alles und Sie können Ihre Anwendung mit der Befehlszeile ausführen, wie wir zuvor gesehen haben. Oder Sie können auch die NX-Erweiterung verwenden. Also sagen Sie einfach NX serve, und dann würden Sie angeben, welche Anwendung Sie wollen. So läuft unsere Anwendung jetzt, und wie wir hier sehen, dass sie unter dem lokalen Host 4200, dem Port, läuft. Also gehe ich zum Browser und dann werde ich sehen, dass wir diesen haben. Und dann aktualisiere ich die Seite, und dann sehe ich, dass sich das Banner innerhalb dieser Anwendungsebene befindet. Also verwenden wir tatsächlich die Komponente, die innerhalb der Bibliotheks-UI innerhalb der Anwendungsebene erstellt wird . 81. So siehst du die Pfade: Okay, jetzt ist alles gut. Wir haben unsere Komponente spezifiziert, wir haben sie aus der Bibliothek importiert und wir verwenden sie in der Anwendung. Also lassen Sie es jetzt von hier entfernen, weil wir es an anderen Orten verwenden werden, nicht hier, wie wir später sehen werden. Jetzt werde ich die gleiche Idee wiederholen, nur um es zu bestätigen und es für Sie zu reparieren. Wenn ich also ein Modul importieren möchte, kann ich immer den Pfad verwenden. Der Pfad wird in der Datei ts config definiert. Und innerhalb der Konfigurationsdatei können wir diesen Pfad immer ändern, wie wir wollen. Wir sehen also, dass sich dieser Pfad auf diese Datei bezieht und immer in Angular oder in TypeScript im Allgemeinen, wenn Sie einige Module oder Klassen oder zum Beispiel Modelle exportieren möchten , können Sie dieses Konzept immer verwenden. Also habe ich eine Indexdatei, in der ich immer alle meine Komponenten aufliste, die ich exportieren möchte, oder Module oder Dienste. Zum Beispiel habe ich in der Benutzeroberfläche den Dienst zum Abrufen von Daten aus der Datenbank. Dann muss ich es hier in diese Akte legen. Also werde ich sagen, zum Beispiel, Export, dann alles aus der Datei, zum Beispiel, die Bibliothek genannt wird. Und in dieser Datei gibt es zum Beispiel diesen Dienst. Also alles, was Sie außerhalb dieser Bibliothek verwenden möchten, müssen Sie es exportieren. Und dann werden Sie dieses Bad verwenden, das in der Basis oder in der ts config Bayes angegeben ist , um es in jeder Anwendung oder sogar in einer anderen Bibliothek zu verwenden. Zum Beispiel möchte ich im Produkt auch die Benutzeroberfläche verwenden. Also gehe ich hier, dann sage ich, dass ich das UI-Modul innerhalb dieses Produktmoduls verwenden möchte. So immer auf die gleiche Weise. So sparen wir diese Zeit oder finden den Pfad, wo wir das Modul finden wollen, oder wir wollen, um zu lokalisieren, was wir importieren möchten. Also in diesem Fall haben wir einen einheitlichen Pfad und es ist überall definiert, die gesamte Anwendung und ihren gesamten Arbeitsbereich, sehen Sie es. Dann. Ich werde keine Probleme mit der richtigen Definition des Pfades haben. 82. Was wäre mit geteilten Stildateien: Okay, wie wir zuvor gesehen haben, dass wir eine Komponente erstellt haben, und diese Komponenten kommen mit einer Stylingdatei. Und in dieser winzigen Datei können Sie die Stile speziell nur für diese Komponente angeben. Daher können Sie diese Stile nicht außerhalb dieser Komponente verwenden. Also würde ich zum Beispiel sagen, ich werde diesem ein Klassenbeispiel geben. Ich werde es wie Farbe rot geben. Und innerhalb des Stils oder der CSS-Datei werde ich Farbe sagen. Ich werde eine Klasse geben, es Farbe rot nennen. Und die Farbe wird zum Beispiel rot sein. Und wenn ich zum Browser gehe und es überprüfe, und dann werde ich sehen, dass die Komponente hier nicht angezeigt wird , weil wir den Aufruf dafür entfernen. Also rufen wir es nochmal zurück. Und wir gehen wieder zur App-Komponente. Ich sage dir, ich Banner. Wir werden es wieder entfernen. Es ist nur zum Testen. Ich sehe, dass diese Farbe hier funktioniert. Also, wenn ich diese Klasse in einer anderen Komponente verwende, dann werden wir sehen, dass diese Klasse keinen Effekt gibt , weil wir außerhalb dieser Komponente verwenden. Gehen wir also wieder zur Homepage-Komponente und lassen Sie uns versuchen, diese Klasse zu verwenden. Also hier haben wir diese Klasse Farbe rot. Wir sind in Banner-Komponente. Ich gehe jetzt zu der Homepage-Komponente, die wir zuvor erstellt haben. Also werde ich hierher gehen und Farbe rot sagen. Gehe nochmal zu meiner Seite. Und ich werde sehen, dass es keine Färbung gibt weil dies Styling ist spezifisch für diese Komponente. Sie können es nicht außerhalb dieser Komponente verwenden. Das ist zum Beispiel Ansicht, für mich ist es nicht so sehr gut, weil ich möchte, dass alles geteilt wird, weil ich eine gemeinsame Bibliothek benutze. Also verwende ich einen freigegebenen Arbeitsbereich. Also möchte ich auch die Stile haben, die unter allen Anwendungen geteilt werden. Dies ist einer der Gründe. Also meine Idee, das zu vermeiden, dass wir einen Ordner in der Nähe dieser Ordner erstellen können, damit wir darin die Stile machen können und jeder in diesen Anwendungen und Bibliotheken kann diese Stile verwenden. Also lassen Sie uns das mit dieser Klasse versuchen und wir werden die Ergebnisse sehen. Also zuerst werde ich ein neues Terminal eröffnen. Und dann bin ich in meinem, zum Beispiel, in der Organisation, im Arbeitsbereich. Ich werde ein Verzeichnis erstellen, ich nenne es Stile. Und dann werden wir sehen, dass dieser Stil hier geschaffen wird. Lassen Sie uns eine Datei innerhalb der Stile erstellen. Nennen Sie es zum Beispiel style.css. Okay, und jetzt können wir diese Wahl SCSS in jeder Anwendung verwenden. Also zum Beispiel werde ich es drinnen benutzen und Sie einkaufen. In jedem Geschäft haben wir bereits eine Style-Datei. Und in dieser Stiledatei können Sie importieren, was Sie wollen von außerhalb dieser Bibliothek. So kann ich die Datei, die ich außerhalb erstellt habe, innerhalb dieser Datei importieren. Die Eintragsdatei für das Styling dieser Anwendung ist also diese Datei, weil sie in der Angular-Konfiguration angegeben ist. Wenn ich hier zur Winkelkonfigurationsdatei gehe. Also werde ich in den Assets oder den Stilen sehen, dass es diese Datei verwendet. So Apps und Sie Shop-Quell-Stile, SCSS. Also werde ich wissen, dass mein Projekt nur diese Stiledatei als Einstiegsstil verwendet. Also lassen Sie uns wieder zu dieser Datei gehen und die externe Datei importieren, die ich zuvor erstellt habe. Also werde ich hier ein Zitat öffnen, und ich werde Schritt für Schritt außerhalb dieses Ordners gehen, außerhalb der Anwendungsebene. Also über mehr. Und dann bin ich auch hier. Ich kann sehen, zum Beispiel, Apps, Lippen. Dann kann ich vielleicht die Stile hier, die Ordnerstile nicht sehen und dann den Stil CSS verwenden. Also, hier, wenn ich diese Datei importiere, alle Komponenten in dieser Anwendung diesen Stil. Also, wenn ich zurück zu der Komponente und ich werde sagen, zum Beispiel, in ihren Lippen, gehe ich hier zu der Komponente, Schnitt, dem Stil. Lass es uns schneiden. Wir brauchen es hier nicht mehr. Also müssen wir es in den öffentlichen Stil oder die Shirt Stil Datei platzieren. Also lege ich es hier und wir erinnern uns, dass wir diese Klasse hier in dieser Komponente nennen. Und auch in der Homepage-Komponente, wo ich färben wollte, funktioniert auch die Homepage. So werden wir am Ende sehen, dass diese beiden Komponenten einen Klassentyp geteilt haben oder ihn von nur einem internen klassifizierten pausieren. Wie Sie hier sehen, haben wir Homepage-Arbeit und Bannerarbeiten, und sie sind rot gefärbt. Beide Klassen oder diese Komponenten haben also eine Klasse gemeinsam genutzt. So können wir alle diese verwenden, zum Beispiel gemeinsame Klassen in allen Anwendungen und alle Bibliotheken, die wir wollen. also besser, immer einen separaten Ordner für Ihre Stile zu erstellen und alle Klassen innerhalb dieser Kacheln zu teilen. Sie können auch Bibliotheken importieren, wie wir später sehen werden. Sie können beispielsweise auch Material definieren. Sie können einige Variablen definieren. Die anderen Vorteile auch beim Extrahieren der Stile außerhalb der Anwendung oder Komponenten spezifisch ist, dass wir die gemeinsam genutzten Variablen verwenden können. Wenn ich zum Beispiel eine Variable in meiner Summenkomponente definiere, kann ich sie nicht auch in einer anderen Komponente verwenden. Sie wissen also, dass Sie in SAS eine Variablen definieren können. Zum Beispiel würde ich sagen, primäre, zum Beispiel, Farbe für meine Firma. Zum Beispiel ist Farbe und die Primärfarbe für mein Unternehmen grün. Also möchte ich das wertvoll überall in meiner Anwendung verwenden. Aber wenn ich es innerhalb der Komponente definiere, kann ich diese wertvollen nicht verwenden. In diesem Fall kann ich dieses wertvolle überall verwenden, wo ich die Stile-Dateien in diesem Ordner oder im freigegebenen Ordner erstellen kann . Vielleicht würde ich sagen, dass wir all diese internen Komponenten loswerden können , weil wir auch hier keinen guten Vorteil haben , dass wir die Variablen, die in diesem freigegebenen Ordner verfügbar sind, nicht sehen können . Denn jedes Mal, wenn ich die Primärfarbe verwenden möchte, wertvoll, dann nein, muss ich die Stile wieder importieren. Also muss ich immer sagen, dass ich in dieser Komponente alle Stile oder den Stil importiere , den ich hier erstellen wollte. Wenn ich das mache, dann sehe ich wieder die Primärfarbe grün. Sonst wird es für mich ein Kopfschmerz sein, denn jedes Mal, wenn ich diese Datei in diese Komponente importiere, wird es viel Import sein und wir werden mit einer sehr komplizierten Struktur enden. Also für mich würde ich sagen, versuchen, Komponenten Stylings zu vermeiden, damit wir diese Datei löschen können In den Komponenten und auch jedem Komponentenstil können wir die völlig löschen, können wir eine schöne Struktur im Stil oder im öffentlichen Stil erstellen. So können wir angeben, dass dies für das Banner ist, dies ist für die Homepage des Admin-Panels oder zum Beispiel, dies ist die Homepage des E-Shops. In diesem Fall werden Sie in der Lage sein, mehr Kontrolle über alle Ihre Variablen und auch über alle Ihre Stile zu haben . Denken Sie daran, nachdem Sie die Stile gelöscht haben, müssen Sie auch aus der ts-Datei gelöscht werden. Sie werden also sehen, dass Sie hier einen Fehler erhalten, weil Sie den Komponentenstil von hier gelöscht haben. Deshalb müssen wir auch vorsichtig sein. Also danach werden wir sehen, wie wir langsam diese Dateien oder diesen Ordner oder die externen Stile Ordner basierend auf unserer Notwendigkeit strukturieren können , basierend auf der Anwendung oder basierend auf der Bibliothek, das wichtigste für Sie jetzt, da wir eine Öffentlicher Ordner enthält dieser Öffentliche Ordner einen öffentlichen Stil. Und dieser öffentliche Stil, können Sie es in der Eintragsdatei für das Styling in der Anwendung verwenden. Also hier können wir es hier definieren. Und dann können wir die Klassen verwenden, die in diesem Ordner oder innerhalb dieses Zifferblätter verfügbar sind . 83. Strukturieren von Stildateien für Anwendungen (NgShop + Administration): Okay, jetzt lasst uns die Dateien strukturieren, basierend auf der Praxis, die Ayesha zu bauen, wie Sie hier sehen, dass, wenn Sie sich vorstellen, dass die Struktur, Sie es vor Ihnen sehen, Sie, wir haben, zum Beispiel, einen Header. Wir haben die Fußzeile, und wir haben auch einige Komponenten dazwischen. So können wir unsere Struktur bereits auf dieser Grundlage definieren. Zum Beispiel würde ich eine Datei Styling, vor allem für das Banner, für wo die besten Produkte geschrieben wird. Also hier wird dieses Banner seine eigenen Styling-Dateikategorien haben, wie Sie sehen, können wir auch ihre eigenen Stile und ihre eigene Komponente definieren. Und auch diese Komponenten, die für Feature-Produkte definiert sind, können sie auch als separate Styling-Datei verwendet werden. Aber wie Sie auch wissen, haben wir ein Admin-Panel. Und Admin-Panel verwendet auch einige Funktionen des Produkts. Oder zum Beispiel werden wir einen anderen E-Shop haben, aber mit unterschiedlichem Stil. Auf diese Weise müssen wir unsere Stylingstruktur basierend auf diesem Bedarf definieren. Es gibt viele verschiedene Möglichkeiten, die Styling-Dateien zu strukturieren, aber Sie können wählen, was genau für Sie benötigt wird. Es bedeutet nicht, dass das, was ich hier mache, da ist. Ich denke, es ist genau das, was ich mag, die Struktur, die ich mag. So können Sie auch Ihre eigene Struktur machen. Ich werde Ihnen zeigen, wie ich die Struktur für E-Shop gemacht habe, die das Admin-Panel und den Shop selbst kombiniert, und vielleicht für einen anderen zukünftigen Shop. Wenn wir also zu unserem Projekt zurückkehren, sehen wir hier, dass wir einige Dateien strukturiert haben. Lassen Sie uns die Apps Lippen schließen und geht auf den Stil. Bei, in den Stilen, werden wir die folgende Struktur definieren. Zuallererst werde ich eine bestimmte Datei für jede Anwendung haben. Zum Beispiel werde ich diesen Stil CSS als Admin-CSS umbenennen. Und ich werde eine andere Datei erstellen, ich werde es nennen, und Sie kaufen dot SCSS. Also in diesem Fall werde ich ein spezifisches Styling für jede Anwendung haben, okay, vor allem, jede Anwendung braucht eine Konfiguration. Styling-Konfiguration. Zum Beispiel müssen Sie definieren, was die Farben sind, was eine Schriftart ist und wie sie aussieht oder welche Bibliotheken Sie als extern für Ihre Anwendung verwenden werden . Wie zum Beispiel, Angular Material, schreckliches Beispiel Bootstrap oder Ende u-prime, wie wir in diesem Kurs tun werden. Aus meiner Sicht werde ich zuerst einen Ordner erstellen, werde ich zuerst einen Ordner erstellen ihn innerhalb der Stile nennen, ihn als Basis nennen. Und in dieser Basis werde ich alle Dateien kombinieren, die immer für jede Anwendung und jede Bibliothek benötigt werden. Ich gebe Ihnen ein Beispiel. Also zuerst können wir eine Datei erstellen, nennen sie Farben. Aber SCSS im Inneren dieser Farben, werden wir die Farben definieren, die innerhalb der Anwendungen verwendet werden. Zum Beispiel ist die primäre Farbe meiner Anwendung die Orange oder die Markenfarbe. Also hier werde ich zwei Variablen definieren, die sie eine, primäre Farbe genannt werden. Und diese Primärfarbe wird sein, zum Beispiel FF drei a 000, das ist zum Beispiel die Orange. Und dann brauche ich vielleicht eine andere Farbe, Primärfarbe, aber auf dunkle Weise. Zum Beispiel, wenn ich über eine Schaltfläche schwebe, möchte ich sie wie eine dunklere zeigen. Also hier können wir es dunkel nennen. Und dann können wir unsere eigene Farbe definieren, zum Beispiel 29 000. Das ist also ein dunkleres, etwas dunkleres Orange. Also diese beiden Variablen werde ich in allen Anwendungen verwenden. Ok? Eine andere Datei wird benötigt. Zum Beispiel muss ich eine Konfiguration oder einen Konflikt haben. In dieser Konfiguration werde ich also definieren, was ein Körper ist, wie er aussah, und auch die, zum Beispiel, die Links und zum Beispiel die Schriftarten. Also fangen wir an, zum Beispiel, konfigurieren Sie den Körper. Also im Körper möchte ich eine Schriftfamilie verwenden. Sagen wir Open Sans. Auch zum Beispiel sendet mir der Standardbrowser immer die Links mit zugrunde liegenden. Ich möchte dies standardmäßig unterstrichen entfernen. Also werde ich Textdekoration des a oder des Links selbst sagen. Es wird zum Beispiel keine sein. Normalerweise kommt es unterstrichen, aber wir müssen es als nicht tun. Also hier lege ich die Grundkonfiguration, die ich für meine Anwendung oder für meine gesamten Anwendungen benötige. Okay, vielleicht muss ich auch die Schriftarten definieren, die ich in der Anwendung verwenden werde, wie Sie wissen, font-face. So werde ich zum Beispiel eine andere Datei erstellen. Nennen Sie es Schriftarten. Du hast Freiheit. Sie können alle diese Dateien in einer Datei ablegen. Zum Beispiel können Sie die Farben und Schriftarten, alles in der Konfigurationsdatei einfügen. Aber ich definiere oder teile das basierend auf Dateien oder basierend auf Funktionalität, die ich brauche. In Google gibt es also einige Schriftarten, die direkt verwendet werden können. Wir können sie Schrift Gesichter nennen. Wenn Sie also einen von ihnen verwenden möchten, müssen Sie nur zum Browser gehen und nach Google Fonts und Google Fonts suchen. Im ersten Link finden Sie viele Schriftarten, die Sie verwenden möchten. Zum Beispiel müssen wir offene Sounds verwenden, wie wir zuvor gesehen haben. Basierend auf unserem Design sagte mir der Designer, dass ich diese Schriftart verwenden muss. Also werde ich es haben. Zunächst einmal können Sie den Stil auswählen, den Sie verwenden möchten. Welches Beispiel werde ich dieses verwenden. Und ich möchte auch das Styling haben. Also muss ich das CSS nehmen, das dafür benötigt wird. Also haben Sie hier zwei Möglichkeiten. Link im Allgemeinen, können Sie es genau in Ihrer HTML-Datei verknüpfen oder importieren. Für mich werde ich diesen Import verwenden. So können wir dieses verwenden und zur Anwendung gehen und es hier einfügen. Also hier werden wir diese Datei oder diese CSS-Datei importieren. Manche Leute machen es auf diese Weise. So kopieren sie zum Beispiel diese Datei oder diesen Link, sie gehen zum Browser. Und dann haben sie es zum Beispiel in der URL basiert. Und dann werden sie diese Liste bekommen. Einige Benutzer verwenden oder kopieren diese Liste und verwenden sie in der Anwendung. Denn in Google-Schriftarten können Sie festlegen, welche Schriftart Sie benötigen. Zum Beispiel können Sie Licht 300, kursiv normal haben. Sie können sie alle in einem Styling kombinieren. Auf diese Weise können Sie alle in einem Link importieren. Für mich ziehe ich es vor, diesen Weg zu benutzen. Also zuerst werde ich diese entfernen, zum Beispiel diese kursiven Formen. Also können wir drei Gewichte haben. Auf diese Weise können wir diesen Import haben, wir können es nehmen, kopieren Sie es ohne diese Styling-Tags, weil die Styling-Tags im HTML verwendet werden. Aber hier verwenden wir den Import in einer CSS-Datei. So können wir diesen Import kopieren, gehen Sie zurück zu unserer Anwendung, und fügen Sie ihn dann hier. Hier werden Sie sehen, dass wir alle diese Schriftart in unsere Anwendung importiert haben. Okay, also versuchen wir jetzt, das zu testen. Das ist die Struktur. Zum Beispiel möchte ich sehen, dass ich diese Schriftart wirklich in meiner Anwendung verwende. Zunächst einmal sehen Sie hier, dass wir einen Fehler haben, und dieser Fehler besagt, dass wir ein falsches Stylesheet verwenden, weil, wenn Sie sich erinnern, wir hatten die Datei hier heißt Stil SESS. Was wir also tun müssen, müssen wir zum Beispiel zu den Stilen dieser Anwendung gehen. Und wir führen die Motorenwerkstatt, wie Sie sich erinnern. Also gehe ich hier zur Style-Datei dieser Anwendung in der Anwendungsebene. Also, hier gehe ich. Und dann Styles und benennen Sie dies in ihre Datei um, die ich in den Stilen oder öffentlichen Stilen erstellt habe. Also, wenn Sie hier sehen, dass wir Admin und NG-Shop haben, so dann werde ich ND-Shop anrufen. Okay, jetzt haben wir keinen Fehler. Lassen Sie uns versuchen zu sehen, wie wir diese Datei verwenden können. Denn wenn ich jetzt zum Frontend gehe, werde ich nichts sehen. Ich werde diese Schriftart nicht sehen, die ich verwenden wollte, weil wir die Dateien, die in die Anwendung benötigt werden, nicht importieren. Also der erste Schritt, den wir tun müssen, müssen wir zu diesem spezifischen Stil dieser Anwendung gehen. Zum Beispiel, dieses eine Ende Sie einkaufen. Und wir müssen diese Dateien importieren, diese Farbe, Konfiguration und Schriftart. Beginnen wir also zuerst mit, zum Beispiel, den Farben. Ich werde hier Buchten in Farben gehen. Ich werde diese Datei importieren. Und auch kann ich eine andere Datei importieren, die die Konfiguration ist. Und dann kann ich auch die Schriften importieren. Wie Sie hier sehen, habe ich alle diese Dateien importiert und dann wird diese Datei hier verwendet. Wenn ich also speichere, wird die Anwendung neu kompiliert, würde ich den Browser tricksen. Ich werde immer noch sehen, vielleicht wird es nicht mehr verwendet, diese Schriftart. Warum? Denn wenn Sie das Inspect-Tool öffnen, können Sie Inspect-Element mit Chrome oder Safari verwenden. Es spielt keine Rolle. Wir werden Chrome in diesem Kurs verwenden, aber für dieses Niveau, Ich werde Ihnen zeigen, ist Safari. Also hier haben wir das, wir haben auf diesem Element inspiziert. Und wenn wir gehen, sehen wir, dass wir diese Schriftart nicht verwenden weil es etwas gibt, das zwei sans serif überschreibt. Also, wie das passiert, geschah dies, weil, wenn wir auf die Anwendung gehen, Anwendungsebene, sehen wir, dass wir die Stile haben, okay, alles ist in Ordnung, aber wir haben hier Anwendungskomponente hat einige bestimmte Stile, die standardmäßig mit dem Index geliefert werden. Also lasst uns diese CSS-Datei komplett löschen. Wir brauchen sie nicht. Also gehe ich zuerst zur Komponente und entferne das. Diese Datei hat kein Styling, da wir das öffentliche Styling verwenden werden. Und dann verwende oder lösche ich diese Datei und speichere dann die Komponente. Und wir gehen zurück zur Anwendung. Wieder. Wir werden alle wirklich sehen, dass wir die Schriftart oder die richtige Schriftart verwenden und wir haben offene Sätze. Ich möchte hier etwas erwähnen, dass die Reihenfolge dieser Einfuhr sehr wichtig ist. Wenn Sie beispielsweise die Farbe nach der Konfiguration einfügen, wird die Konfigurationsdatei nicht sehen, was sich in den Farben befindet. Die Reihenfolge dieser Datei ist also sehr wichtig. Also würde ich sagen, vielleicht muss ich zuerst die Schriftarten importieren. Es funktioniert, weil es zum Beispiel ein Styling, Styling ist, dass der Körper diese Schriftart verwendet. Also, wenn es geladen ist, dann wird es verwendet. Aber es ist sehr wichtig, die Reihenfolge so zu halten. So haben wir zum Beispiel Farbe, Schriftarten und Konfiguration. Und auf diese Weise können wir diese Datei strukturieren. Lassen Sie uns das gleiche kopieren, um in der Admin-Datei zu sein. So haben wir Anwendung auch Admin genannt, die das Admin-Panel sein wird. Auf die gleiche Weise werden wir das für das Styling verwenden. Also in den Stilen werde ich die Shop-Stylingdatei nicht verwenden, aber ich werde die Basis verwenden. Also werde ich hier sagen, dass gehen Sie zurück eine Ebene und eine andere Ebene und dann Styles und dann verwenden Sie die Admin-CSS. Also hier wird diese Admin-Anwendung das Admin-CSS verwenden, das sich in den öffentlichen Dateistilen befindet, und das Gleiche. Lassen Sie uns auch die Komponente von hier löschen. So können wir das Styling dieser Komponente löschen, die App-Komponente oder diese alte Komponente ist. Okay, wenn Sie auf unsere Ergebnisstruktur zurückgehen, können Sie hier auch noch andere Dinge einbeziehen. Zum Beispiel können Sie etwas hinzufügen, das ich mag, um sie auch in einer separaten Datei zu halten, die Mixins genannt wird. Und wenn Sie SPSS oder SAS kennen, verwenden Sie Mixins. Mixins sind Funktionen, die überall in der Anwendung verwendet werden. Sie müssen also keinen Code erstellen. Sie können diese Reihe von Stilen innerhalb mit einer Zeile verwenden. Ich möchte einen Mixin erstellen. Lassen Sie uns es zum Beispiel zurücksetzen Liste nennen. Und diese Reset-Liste. Zum Beispiel wird es einen Rand 0 haben. Und zum Beispiel ist Knospen 0, und auch zum Beispiel wird List-Stil keine sein. Also spreche ich über die UL-Komponente, die u l hier. Also, wie ich es verwenden kann, Lassen Sie es verwenden, zum Beispiel, verwenden Sie dieses Mixin in der Konfigurationsdatei. Also zuerst, ich werde es importieren und sagen hier Buchten und dann Sinn machen. Also hier habe ich es bereits importiert und ich werde es in der Konfiguration verwenden. Aber seien Sie vorsichtig, hier werden wir Problem haben, dass die Konfiguration Mixins nicht sehen wird. Sie müssen zuerst diese Konfiguration unter diese Mixins setzen. Auf diese Weise, die Konfiguration, werden wir diese Mischungen sehen. Also werde ich hier zur Konfiguration gehen und dann werde ich UL sagen, Reset-Liste einschließen. Und wenn ich speichere, werde ich sehen, dass ich immer noch Fehler bekomme , weil ich denke, weil ich diese Datei nicht gespeichert habe. Also, wenn ich es speichern und speichern, wieder, die Konfiguration, alles könnte gehen. In Ordnung, also mal sehen, wie, wenn ich diese Reihenfolge umkehre. Wenn ich sie umkehre, lege ich die Konfiguration vor die Mixins und speichere diese Datei. Du wirst sehen, dass ich den Fehler bekommen habe. Es sagt, weil ich zum Beispiel nicht sehen kann , gibt es zumindest Mixin. Auf diese Weise ist es sehr wichtig zu wissen, dass die Bestellung für Ihren Mantel sehr wichtig ist. Also müssen wir es zurücksetzen, speichern und wir werden sehen, dass die Anwendung erfolgreich läuft. Okay, die Struktur dessen fortzusetzen, was wir für unsere öffentlichen Stile brauchen. Werfen wir einen Blick auf unsere Anwendungen. Zum Beispiel, gehen wir zum Ende, das Sie einkaufen. Wir werden sehen, dass wir Homepage haben und wir haben zum Beispiel, Fußzeile Header und auch einige Produktliste. Und alle von ihnen, sie haben immer noch ihre eigenen Stile. müssen wir löschen. Wir müssen sie in den öffentlichen Stil bringen, damit wir dort alles sehen können. So wird zum Beispiel alles geteilt und wir können es überall in einer anderen Ausgabe oder in einer anderen zusätzlichen Anwendung verwenden . Also meine Idee, es ist meine, meine Idee. Sie können Ihre eigene Struktur erstellen, die Sie wollen. Vielleicht werden Sie diese Struktur nicht mögen, aber ich gebe Ihnen die Idee. Und dann können Sie basierend auf der Struktur Ihres Projekts entscheiden. Also werde ich hier sagen, ich habe die Stile, die ich erstellen würde, zum Beispiel Apps-Ordner. Und in diesem App-Ordner erstelle ich einen Ordner für jede Anwendung, die ich in meinem Arbeitsbereich habe. Also werde ich hier Shop im Allgemeinen sagen. Und dann werde ich einen anderen Ordner für das Admin-Panel erstellen. Also werde ich diese Ordner verwenden, um die Stile bestimmter Anwendungen, Komponenten und Komponenten zu haben , die wirklich mit dieser Anwendung verwandt sind. Es hängt nicht mit der Bibliothek oder einer öffentlichen Konfiguration zusammen. Also erstelle ich hier einen anderen Ordner neu, nenne es admin. Und zum Beispiel, in diesem Shop, hatten wir, zum Beispiel, die Kopf- und Fußzeile innerhalb der gemeinsamen, können Sie die gleiche Struktur hier folgen, um nicht verloren zu gehen. Oder Sie können auch, Sie erstellen Ihre eigene Struktur basierend auf Ihrer Notwendigkeit einen Code nicht zu duplizieren oder einige Stile zu duplizieren. Also hier würde ich einen Ordner erstellen, ich werde es Seiten nennen. Und einen anderen Ordner werde ich es freigegeben nennen. Genau wie wir es in den Apps haben. Und innerhalb des geteilten, werde ich eine Datei Tour Punkt SCSS und eine andere Datei erstellen, die Header dot SCSS sein wird. Und wenn Sie wirklich ein Styling für diese Seiten benötigen, können Sie eine Datei, Styling-Datei für diese Seite erstellen . Also in meinem Fall werde ich eine Bibliothek verwenden. Ich werde zum Beispiel den Bootstrap verwenden. Dann brauche ich keine Struktur- oder Stylingdatei für die Seite da ich diese Bibliothek verwenden werde, um das Raster und die Komponenten zu organisieren, die ich brauche. So zum Beispiel, wie Sie in dieser XD-Datei sehen, werde ich alles als Komponente haben. Ich werde Navigationskomponente haben. Ich werde zum Beispiel nicht Navigation haben. Wir können eine Kopfzeile und eine Fußzeile haben. Und zum Beispiel werden diese Komponenten nur das sein, was ich für die Seite brauche oder die Homepage ist das Raster. Und das Gitter wird aus der Bibliothek kommen, die ich benutzen werde. Aber wie auch immer, lassen Sie uns jetzt die Datei erstellen. Und wenn wir es in Zukunft nicht brauchen, können wir es löschen. Also sagen wir auf Seite Punkt SCSS und dann Produkte am wenigsten Seite Punkt SCSS. Und hier habe ich jetzt zwei Dateien und oder vier Dateien. Und dann diese Dateien, ich muss sie in NDI Shop importieren, aber diese Dateien werden nicht verwendet werden. Also muss ich sie nicht dort importieren. Also lasst uns das machen. Was ich dieses kopieren würde, oder nennen wir Import-Apps, gestochen scharfe Seiten und dann Homepage. Und noch eine für die Produktliste. Also werde ich hier sagen, dass die Produktliste, so haben wir, können wir nennen dies ist die Basis. Wir können dies als Beispielseiten nennen und wir werden weitere Abschnitte sehen, wie wir später sehen werden. Und wir werden auch geteilt haben. Und diese freigegebenen werden zum Beispiel der Import für die Kopf- und Fußzeile sein. Also haben wir hier den Shop Shared Header und einen anderen für die Fußzeile. Also wird alles, was ich in diesen Dateien schreibe, was widerspiegeln? Es wird das Ende widerspiegeln, das Sie einkaufen, weil ich sie hier importiere. Und diese Datei wird in der Anwendungsebene von N D scharf verwendet. In diesem Fall brauche ich diese Wahl für diese Komponenten nicht. Also lasst uns sie löschen. Also zuerst gehe ich hierher, lösche diese Datei. Ich mache hier eine Säuberung. Und auch wir löschen diesen. So löschen wir auch das Styling und die Kopfzeile, die gleiche Fußzeile, das gleiche. Daher müssen wir nichts im Zusammenhang mit Stilen in diesen Komponenten behalten. Ist es im Idealfall, dieser, habe ich es getan, der Header-Komponentenstil und auch dieser. So funktioniert jetzt alles reibungslos. Okay, zurück zu unserer Dateistruktur, wie wir hier sehen, dass wir die Struktur basierend auf unserem Bedarf erstellt haben. So haben wir jetzt eine bestimmte Anwendung Dateien und auch die Basis. Was ist mit den Bibliotheken? Wir können auch den gleichen Weg folgen. Zum Beispiel möchte ich etwas für die Benutzeroberfläche erstellen. Ich möchte einen Stil für das Banner erstellen. Also lasst uns dorthin gehen. Erstellen Sie einen neuen Ordner. Wir können es Lippen nennen. Und in diesen Bibliotheken oder Bibliotheken können wir hier genau die gleiche Struktur erstellen. So können wir eine UI-Komponente haben. Und in diesem UI-Ordner können wir einen Banner-Punkt SCSS erstellen, genau wie die Komponente, die ich in der Benutzeroberfläche verwende. Ich kann als auch Schieberegler erstellen. Also in dieser Benutzeroberfläche werde ich Schieberegler Punkt SCSS erstellen. Außerdem kann ich andere Bibliotheken, zum Beispiel Produkte, einbinden. Und in diesen Produkten sollte es innerhalb von Bibliotheken sein. Ich werde zum Beispiel haben, wir können eine andere Komponente nennen, die wir noch nicht erstellt haben. Es ist nur zum Beispiel, Produkt Artikel SCSS. Es ist genau der Artikel wird ein Produkt zeigen. Also, wenn ich diese Komponenten verwenden werde oder diese Kachel auch im Frontend ist, muss ich sie importieren. Also gehe ich hierher, ich sage Lippen, hier ist Abschnitt 4 Ellipse. Ich werde auch diese Sprünge-Komponente importieren. Also haben wir hier U, ich, wir haben ein Banner, wir haben Schieberegler hier. Ich muss hier auch ein Semikolon setzen. Und dann haben wir diese Akten hier. Aber stellen Sie sich vor, wenn wir alle Bibliotheken Stile hier importieren, werden wir hier eine sehr riesige Datei haben. Also, was ich bevorzuge, dass ich eine Datei in jeder Bibliothek erstelle. Zum Beispiel nenne ich diesen UI Punkt SCSS, der die Stile für beide enthält. Damit ich das hier kopieren kann. Ich kann nicht sagen, Sie, aber genau direkt auf dem Ordner. Also haben wir hier den Schieberegler CSS und Banner CSS. Und in meinem ND-Shop, anstatt die Komponente selbst zu verwenden, kann ich direkt die UI-Bibliothek verwenden. Also werde ich hier sagen, nicht die Apps, aber wir sagen Lippen UI und verwenden Sie die UI SCSS auf diese Weise, wenn ich gehe, indem ich auf Kontrolle zu dieser Datei, Ich werde sehen, dass auch diese Dateien importiert werden. In diesem Fall verwende ich das Banner und den Schieberegler. Aber wenn Sie nur den Schieberegler verwenden möchten, können Sie ihn natürlich hier importieren. Sie müssen nicht alles für Sie aus der Benutzeroberfläche importieren, um die Dateigröße des Build CSS zu reduzieren , da Sie wissen, dass SCSS in CSS konvertiert wird , um für den Browser geeignet zu sein . Diese Datei enthält keine zum Beispiel den Schieberegler, weil Sie ihn nicht im Shop verwendet haben. Also in diesem Fall können Sie nur die Art und Weise importieren. Sie müssen nicht alles importieren. Aber für mich in diesem Fall möchte ich alles importieren. Also setze ich UIs, CSS, und diese UI UX CSS ist bereits hier. Lassen Sie uns also Ordner für die anderen Bibliotheken erstellen. So haben wir Benutzer, die verwendet wird, enthalten, zum Beispiel, die Login-Komponente und Register-Komponente, auch Bestellungen. Und alle von ihnen werden ihre eigene Komponente haben, alle Stylings, wie wir sehen werden, wie wir diese Anwendung erstellen werden. In Ordnung, also haben wir gesehen, dass der Energieladen seine eigenen Importarten hat, und auch der Admin hat seine eigenen Importe. Also in der Anwendung, die ich hier habe, der Admin, habe ich hier den Shop selbst, die spezifischen Komponenten für die spezifischen Komponenten für den Admin. Und hier importiere ich die Stile für sie. In den nächsten Vorträgen werden wir all diese Struktur aufbauen. Wir werden es langsam bauen. Und Sie werden sehen, wie ich jede Datei in einer bestimmten Anwendung verwenden werde und wie ich entscheiden werde, an welchem Ort sich dieses Komponenten-Styling befindet. So möchte ich zum Beispiel eine Produkt-Artikelkomponente erstellen. Ich habe es hier gesteckt. Wenn ich eine erstellen möchte, zum Beispiel, eine Checkout-Seite, Ich werde es zum Beispiel in der Shop-spezifischen Anwendungsseite. Wie ich Ihnen sagte, ich wiederhole noch einmal, Sie völlig eine große Freiheit haben, Ihre Struktur auf Ihre eigene Art und Weise zu bauen, wie Sie möchten. Aber hier ist die Struktur sehr wichtig für mich und sehr benutzerfreundlich oder entwicklerfreundlich. Da ich als Angular Entwickler SCSS verwenden und diese Dateien werde, basierend auf dem, was ich brauche, umverschiedene Anwendungen mit einem X zu erstellen. , um verwendenwerde, basierend auf dem, was ich brauche, umverschiedene Anwendungen mit einem X zu erstellen. wie Bootstrap, beenden Sie u-prime, und importieren Sie die Dateien hier. Und wir werden die großen Merkmale der Verwendung eines öffentlichen Stils sehen. Wie wichtig es ist, diese Dateien in einem öffentlichen Ordner im Stammverzeichnis unseres Arbeitsbereichs zu platzieren. 84. PrimeNG zur Installation 3rd-Partei-Bibliotheken und zur Einfügung von Stilen: Okay, in dieser Vorlesung werden wir lernen, wie man externe Bibliotheken wie Bootstrap oder Prime End D einschließt , die wir in diesem Kurs in unserem Projekt verwenden werden. Zuerst müssen Sie manchmal einige externe bereits Stilkomponenten haben , die Sie in Ihrem Projekt verwenden können. Also gehe ich zu anderen externen Bibliotheken wie Bootstrap und installiere es dann, und dann baue ich mein Projekt basierend darauf. Und in dieser Vorlesung möchte ich Ihnen zeigen, wie Sie externe Bibliotheken in unsere Styling-Dateien einbinden können. zunächst Lassen Sie unszunächsteine Bibliothek installieren. Gehen wir zum Beispiel zu Bootstrap. Bootstrap ist nur Styling-Bibliothek. Es enthält zum Beispiel nicht die eckigen Komponenten wie prime end g , also gehen wir zum Beispiel zum Bootstrap. Ich erinnere Sie daran, dass wir es in diesem Kurs nicht verwenden werden. Es ist also nur ein Beispiel. Also würde ich gehen und einen Bootstrap auswählen, zur Bootstrap-Website gehen, und dann gehe ich, um loszulegen. Und hier sehen Sie mehrere Optionen für die Installation der Bibliothek. Die erste Möglichkeit zum Verwenden oder Einbinden einer Bibliothek besteht in der Verwendung des direkten CDN, einer URL, die Sie in Ihrem Projekt angeben können, und dann verwenden Sie diesen Stil. Zum Beispiel, der einfachste Weg dafür, kann ich diesen Link kopieren, der von Bootstrap zur Verfügung gestellt wird. Und dann gehe ich zum Projekt. Also gehe ich zu einer Stelle meiner CSS-Datei wo ich die wichtigsten CSS-Dateien einschließe, wie wir zuvor gesehen haben. Und geben Sie import URL ein. Und hier fügen wir die URL ein, die Sie kopiert haben. Also fügen wir es hier ein. Und dann laden wir das Projekt. Alles ist in Ordnung. Das Projekt wird bereits ausgeführt. Und lassen Sie uns eines dieser Module ausprobieren, die mit Bootstrap enthalten sind. Zum Beispiel wähle ich eine Schaltfläche aus. Lassen Sie uns diesen Teil kopieren. Einer der Schaltflächen, die ich jetzt laufe, der Projekt-Motor-Shop. Also gehe ich zum Ende, Sie kaufen, zum Beispiel Homepage und App-basierte diesen Button hier. Also versuchen wir es, wir führen es aus, und ich sehe, dass wir hier die Schaltfläche gestylt haben, also haben wir direkt online die Bootstrap-Bibliothek in unser Projekt importiert. In diesem Fall müssen Sie jedoch über eine Internetverbindung verfügen. Wenn Sie also das Internet trennen, können Sie nicht offline arbeiten und dann können Sie die Stile nicht sehen. Sie können die Stile nicht aus der Cloud laden. Es gibt eine andere Möglichkeit, dass wir garantieren können, dass wir offline arbeiten, was, wie wir hier sehen, dass wir in den ersten Schritten einen Download haben. Sie können die Dateien selbst herunterladen und in das Projekt einbinden, oder Sie können die npm-Paketverwaltung verwenden. Also, wenn Sie diesen Befehl in unserem Projekt ausführen, also öffne ich hier eine neue Registerkarte für die Ausführung des Befehls, füge ihn hier ein und führe die npm install Bootstrap aus. So wird es für mich die Bibliothek lokal installieren, damit ich offline arbeiten kann , weil wie wir hier gesehen haben, dass wir hier den Remote-Link haben. Also, wie wir einschließen können, was wir in Law Library installiert haben. Es ist also sehr einfach. Normalerweise kommt die Bibliothek mit einem Namen. Dies ist also der Name, in dem die Bibliothek einen Ordner im MPM-Modul hat. Sie haben also die Wahl. So können Sie die Bibliothek einschließen, indem Sie zu MPM-Modulen navigieren. Also gehe ich hier und gehe eine Ebene nach oben, ich gehe zu Knotenmodulen, suche nach Bootstrap und dann das und dann das CSS. Und hier haben Sie die CSS-Dateien. Oder eine andere Möglichkeit, es zu tun, ist sehr einfach, dass Sie nur dieses Zeichen verwenden müssen. Und dann rufen Sie den Bibliotheksordner auf, den Sie möchten. Also sage ich Bootstrap und dann möchten Sie wissen, in welche CSS-Datei Sie einfügen möchten. Normalerweise ist es in der Dokumentation der Bibliothek geschrieben. Es sagt Ihnen also, dass ich in diesen Ordner gehe, um das Paket zu haben und es zu installieren oder in meinem Projekt enthalten. Aber wenn Sie es nicht finden, wie wir hier in Bootstrap haben, können Sie nicht selbst im Node-Modulordner navigieren. Und dann können Sie zu dem CSS navigieren, das Sie wollen. Ich zeige Ihnen auf diese Weise, um mehr Wissen darüber zu haben, wie man innerhalb von Knotenmodulen spielt. Also gehe ich zu Knotenmodulen und dann finde ich das Bootstrap, und dann werden wir normalerweise sehen, dass jede Bibliothek mit einem Ziel-Build kommt. Wenn Sie also diesen Halter sehen, bedeutet dies, dass dies eine Build-Version ist. Also das, was Sie normal verwenden möchten, oder Sie haben eine SAS Virgin hat Sie hier in Bootstrap sehen. So hat das Bootstrap Sass-Datei und es hat auch die CSS-Datei. Und das ist CSS-Datei auch so verkleinert. Also ist der Pfad für uns am wenigsten CSS und dann Bootstrap CSS min, oder wir haben einen anderen Pfad, der SCSS ist. Und dann navigieren Sie zur SCSS-Datei von Bootstrap, wo sie alle Dateien enthält, die wir hier benötigen. Sie können auch nur einige bestimmte Dateien einschließen. Sie müssen nicht alles so einschließen, wie Sie ein Raster verwenden möchten , und Sie möchten nicht alle anderen Dinge verwenden. So können Sie einschließen, was Sie wollen. Also für mich werde ich diese Datei Bootstrap einschließen. Also werde ich nach diesem Zeichen Bootstrap hier gehen, I-Type SCSS als Ordner zeigte mir. Und dann habe ich Bootstrap SCSS. Es ist genau der gleiche Pfad in alten Modulen. In Node-Modulen haben wir also einen Bootstrap-Ordner , der dieser ist, und dann SCSS. Und dann gehe ich direkt zu Bootstrap SCSS, um es aufzunehmen. Auf diese Weise habe ich alles von Bootstrap aufgenommen. Lassen Sie uns speichern und versuchen Sie es erneut in unserem Browser. Dann werden wir sehen, dass die Schaltfläche funktioniert, auch wenn Sie mit dem Internet getrennt sind , weil die Bibliothek bereits auf Ihrem Computer installiert ist. Also zurück zum Browser, werden Sie sehen, dass die Schaltfläche hier ist und starten. Es gibt eine andere Möglichkeit, Stile in Ihr Projekt aufzunehmen. Normalerweise in Winkelform. Verwenden von Angular JSON. Angular JSON ist eine Datei, in der Sie Ihr Projekt mit Dateien konfigurieren können, die standardmäßig in das Projekt eingeschlossen werden können , wenn Sie das Projekt erstellen oder kombinieren. Wenn ich also zu Angular JSON gehe, sehe ich, dass jedes Projekt eine bestimmte Konfiguration hat. Eine dieser Konfiguration ist also ein Stile. Styles ist ein Array, in dem Sie alles hinzufügen können , was Sie für Ihr Styling des Projekts wollen? Wenn ich also den Bootstrap einschließen möchte, würde ich die gleiche Zeichenfolge verwenden und Eingaben für dieses Array hinzufügen, aber der Pfad wird ein Knotenmodul sein. In diesen Modulen haben wir Bootstrap und dann, wie wir zuvor gesehen haben, dass wir ein CSS haben und dann Bootstrap ein anderes SCSS. Also hier haben wir das CSS in unser Projekt aufgenommen. Denken Sie daran, dass Sie Ihr Projekt nach dieser Änderung neu starten müssen, da es sich bei dieser Änderung um eine Konfigurationsänderung handelt, müssen Sie das Projekt erneut neu starten. Also lassen Sie es aus der SCSS-Datei entfernen und dann das Projekt neu starten. Also, um den Compiler zu stoppen, Control C auf dem Compiler. Und dann führe ich es wieder. Es wurde erfolgreich kompiliert und zur Projektaktualisierung zurückgeführt. Sie sehen, dass die Bibliothek wirklich aus der SCSS-Datei verschoben hat, aber wir haben es in Angular JSON-Datei enthalten, wo ich die Stile einschließen kann. Was ich bevorzuge, auf welche Weise bevorzuge ich die Art und Weise, wo wir die Dateien hier einbeziehen. Da auf diese Weise, wenn Sie insbesondere SCSS-Datei einschließen, können Sie Zugriff auf einige Variablen dieser Bibliothek haben. Wie Sie wissen, können Sie in SPSS eine Variablen definieren. Und diese Variablen können Ihnen helfen, diese Bibliothek genau an Ihr Projekt anzupassen. Zum Beispiel, wenn wir wieder zu Bootstrap gehen und wir zum Grid-System gehen. Und im Grid-System, wie Sie wissen, haben wir einige vordefinierte Variablen oder Werte für Größen , die für mobile oder für Computer oder für ein Tablet verwendet werden können. Aber wie ich Ihnen bereits sagte, der Vorteil der Aufnahme der SAS-Datei ist, dass wir einige Funktionen dieser Bibliothek verwenden können, dieses Grids. Wir können es anpassen. So haben wir zum Beispiel hier SAS-Dateien oder die SAS-Variablen wie Gitterspalten oder vereinbarte Rinnenbreite. Also, wenn ich hierher gehe und diese Variable basierend auf dem ändere, was ich in meinem Projekt brauche, wird sich alles Bootstrap basierend auf dieser Änderung der Variablen verhalten. Das Gleiche. Zum Beispiel gibt es einige Mixins. Ich kann sie auch benutzen. Wir werden sehen, dass tief später, nachdem wir das Projekt erstellt haben, wie wir diese Variablen verwenden werden, wie wir diese Mixins dieser Bibliothek oder jeder Bibliothek verwenden , um unseren E-Shop in der richtigen Weise zu bauen. 85. PrimeNG installieren: Okay, Wie wir uns zuvor entschieden haben, werde ich Ihnen zeigen, wie Sie Prime N D-Bibliothek in Ihrem Projekt installieren , um damit zu laufen und zu gehen. Zunächst einmal müssen wir auf ihre Website von Prime NGA gehen, die prime faces.org ist. Und dann klickst du auf Prime NG und dann Demo. Und hier werden Sie auf Winkelkomponente unter Prime NG spezialisiert sein. Wenn Sie also zur Demo gehen, werden Sie alle Komponenten sehen, die wir für unsere Bibliothek benötigen. Wir werden alle Komponenten später sehen, wenn wir mit dem Projekt arbeiten. Aber jetzt lassen Sie uns die Bibliothek in unserem Projekt installieren. Und in der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie mit diesen Komponenten dieser Bibliothek arbeiten. Also zuerst müssen Sie gehen, um loszulegen. Und fangen Sie an, Sie werden zwei Dinge sehen, die Sie installieren müssen. Zuerst Prime NG und dann Prim-Symbole. Da m prime NG-Bibliothek und Komponenten, gibt es Symbole und diese Symbole sollten separat installiert werden. Also lasst uns das in unserem Projekt machen. Lassen Sie uns zuerst Prime NG und dann Prime-Symbole installieren. Zurück zu unserem Code öffnen wir ein neues Terminal für die Installation. Und wir geben npm install, und dann prime end und speichern Flag, um es in Tiefe Abhängigkeiten geben und wir werden es in unserer Maschine installiert haben. Eine andere Bibliothek, die wir installieren müssen, heißt es Prime-Symbole. Also lassen Sie es uns auch installieren. Wir gehen zu npm installieren Prime-Symbole, und dann speichern, okay, Jetzt haben wir alles installiert und erfolgreich installiert. Also zuvor haben wir ein Update auf Angular JSON gemacht, dass wir Bootstrap-Bibliothek hinzugefügt haben. Lassen Sie uns es entfernen, um keine Konflikte mit der Prime NG-Bibliothek zu haben. Sie müssen also sicher sein, dass Sie nicht mehrere Bibliotheken installieren , um Konflikte nicht zusammenzukommen, besonders wenn sie manchmal die gleiche Benennung von CSS-Klassen verwenden. Also speichern wir den eckigen JSON und dann starten wir das Projekt wie hier neu, wir haben es läuft, dann müssen wir es stoppen. Und dann führen Sie es erneut aus. Und danach werde ich bis zum Ende gehen Sie einkaufen und importieren Sie die Bibliothek prime N G. Ich werde die Art und Weise verwenden , wo ich werde, um die Dateien von Prime End zu meinen wichtigsten Motorwerkstätten, SESS, importieren. Also hier können wir einen Abschnitt erstellen, der es Bibliotheken genannt wird. Und hier müssen wir importieren. Und dann haben wir das Zeichen gesetzt, über das wir uns vorher geeinigt haben. Und wir haben Prime N G , aber ich weiß nicht, welche Akte. Sie haben zwei Möglichkeiten, um zu wissen, welche Datei. Sie können zu Knotenmodulen gehen, wie wir zuvor gesehen haben. Oder Sie können hier in der Dokumentation gehen, um zu sehen, welche Datei Sie einschließen müssen. Hier steht also, dass Sie diese Dateien einschließen müssen. Also lassen Sie uns dieses einschließen, das wir durch Symbole enthalten sind, die wir brauchen, wie wir zuvor gesehen haben. Und der zweite ist Thema. Wir müssen ein Thema installieren. Das schöne Ding mit Prime Energie, es kommt mit mehreren Themen. Um das richtige Thema für Ihr Projekt auswählen zu können. Wählen wir zum Beispiel diese aus. Es gibt ein lila, es wird sich sofort auf dieser Ansicht ändern. So haben Sie ein dunkles Thema, Sie haben mehrere Themen, die Sie verwenden können. Für diesen Kurs werde ich saga blue verwenden. Also genau so, müssen Sie diesen Teil kopieren. Oder Sie können eines dieser Themen hier kopieren. Also werde ich Saga Blue verwenden, wie wir uns einig waren. Also hier werde ich noch einen Import und Unterschrift haben, und dann werde ich hier das Ding einschließen. Das letzte, was wir einschließen müssen, ist die Bibliothek selbst. Also kopieren wir das hier. Und dann machen wir noch einen Import. Wieder. Wir legen die CSS-Datei dieser Bibliothek. Also hier haben wir alles in Bezug auf diese Bibliothek aufgenommen. Wir speichern, dass wir alles erfolgreich kompiliert sehen. Wir haben kein Problem, weil wir auf dem richtigen Weg sind. Wir hatten hier keinen Pfeil. In der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie eine dieser Komponenten in dieser Bibliothek verwenden. Es ist also sehr einfach. Wir müssen nicht viel Arbeit machen. Es ist genau so, wie es hier implementiert wird. Prime Energy ist sehr gut dokumentiert, wie wir in der nächsten Vorlesung sehen werden. 86. Verwendung von PrimeNG in unserem Projekt: Okay, jetzt, wie versprochen, werde ich Ihnen zeigen, wie Sie eine dieser Komponenten dieser Bibliothek verwenden. Also zuerst gehen wir in diese Bibliothek. Lassen Sie uns einige Komponenten durchsuchen. Zum Beispiel haben wir das Akkordeon Prime NG kommt mit sehr schöner Dokumentation für jede Komponente und es zeigt Ihnen, wie man jede Komponente verwendet. Also zuerst können wir zur Dokumentation dieser Komponente gehen. Wir müssen das Akkordeon-Modul in unser Anwendungsmodul importieren. Also lassen Sie uns diese Zeile kopieren und wir gehen zu unserem Projekt. Und wir werden sehen, dass wir zwei Anwendungen haben. Und jede Anwendung hat ein Anwendungsmodul. Natürlich werden wir vielleicht mehrere Module haben, wie wir später sehen werden, aber jetzt haben wir nur ein Anwendungsmodul. Also lasst uns hier arbeiten. Also werde ich dieses Akkordeon-Modul zuerst importieren. Und wir gehen zu den Importen hier, um es in unser NG-Modul des Anwendungsmoduls aufzunehmen. Und dann schauen wir uns die Dokumentation an. Was uns eines dieser Beispiele sagt zeigt uns, dass wir diesen HTML-Code kopieren müssen. So wird dieser HTML auf der Seite eingefügt werden, wo wir diese Komponente verwenden werden. Gehen wir zum Beispiel auf die Homepage. Also, wenn wir hier in unserer Anwendung gehen, haben wir Seiten. Eine dieser Seiten ist die Homepage. Wir können diese Schaltfläche entfernen, die wir zuvor erstellt haben. Und dann fügen wir diesen Code hier ein. Okay, wir führen das Projekt, es wurde gespeichert. Wir gehen wieder. Und dann haben wir zwei lokale Gastgeber, 4200, den Hafen. Und wir werden sehen, dass wir das Akkordeon haben, aber wir vermissen immer noch etwas. Es gibt ein Problem, weil wir die Animationen nicht verwenden. Wenn wir gehen, um wieder in dieser Bibliothek zu beginnen, Sie, wir müssen die Animationen installieren. Alles, was wir brauchen, um Animationsmodul zu importieren. Also müssen wir dieses Modul importieren, das bereits mit Angular installiert ist. Wir gehen wieder zu unserem Code-Modul. Und dann setzen wir es normal nach ihrem Browser-Modul. Und wir haben hier importiert. Also dann haben wir die Animation importiert, weil diese Bibliothek dieses Modul verwendet. Wenn wir also zurück zum Browser gehen, zu unserem Projekt zurückkehren, werden wir sehen, dass das Akkordeon meistens genauso funktioniert wie für alle Komponenten. Es ist sehr gut dokumentiert. Du kannst tun, was du willst. Wir werden die meisten dieser Komponenten verwenden, die in dieser Bibliothek sind, wenn wir unser Projekt bauen werden. 87. Overrride PrimeNG Schriftarten: Ich möchte zusätzlich erwähnen, dass wir, nachdem wir die nk prime-Komponenten installiert haben, feststellen, dass es die Schriftarten überschreibt. Die Schriftart, die wir zum Beispiel haben wir geplant, Open Sans zu verwenden, die wir zuvor installiert haben, aber ich möchte zum Beispiel, um zu installieren oder zu verwenden, dass in der primären Engine. Das Problem ist, dass es für Prime NG einen bestimmten Fall gibt. Es ist nicht das einzige Sprichwort, dass wir Körper wollen, und dann benutzen wir Open Sans. Aber Sie müssen auch nach dem Import sagen, natürlich Prime Energy, müssen Sie B-Komponente sagen, wie diese Klasse, P-dash Komponente. Und dann können Sie weiter arbeiten. Also in diesem Fall ist p Komponente der Einstiegspunkt für die Schriftarten der Prime-Energie. So Körper ist nicht genug, sondern auch p Komponenten. In diesem Fall lassen Sie Ihre Anwendung und die Komponenten von prime NG die Schriftart verwenden, die Sie hier angegeben haben. Also für das, die Anwendungsebene, wenn ich hier zum Beispiel zum NG-Shop gehe, habe ich die Konfiguration nicht hier am Anfang, sondern nachdem ich die Prime NG verwendet und alle Bibliotheken von Prime NG importiert habe. Nachdem wir also alles von Prime Energy bekommen haben, gehe ich und aktualisiere die Konfiguration der Peak-Komponente und des Körpers, um diese Schriftart zu verwenden. Nur um diesen Punkt für Sie zu erwähnen, falls Sie nicht sehen, dass Ihre Schriftart in Ihren Anwendungen anwendbar ist. 88. Installieren des Rastersystems: Okay, ich weiß, dass Sie sehr motiviert sind, mit dem Programmieren zu beginnen und das reale Projekt zu starten. Aber das Letzte, bitte verzeihen Sie mir, dass ich Ihnen zeigen möchte, wie Sie ein Gitter installieren. In jeder Anwendung brauchen wir ein Gittersystem. Ein Rastersystem, das die Struktur der Anwendung anzeigt. Du willst wissen, was ich meine. Wenn Sie zu einer Bibliothek gehen, sehen Sie etwas, das als Prime Flex bezeichnet wird. Und dieser Prime Flex ist ein System, das Ihnen das Raster zeigt , um Ihre Komponenten basierend auf diesem Raster zu legen. Und es hat eine sehr schöne Funktionalität und es ist sehr dynamisch. So können Sie es verwenden und Ihre Anwendung auf jeder Plattform anpassen, wie ein Handy, Tablet oder einen Desktop. Wenn Sie nichts über das Grid-System wissen, werden wir das später im Detail sehen, wie wir unsere Anwendung basierend auf dem Grid-System erstellen können. Aber zuerst, wenn wir zu diesem Grid-System gehen, hat es sein eigenes Setup. Also zuerst müssen wir das Setup durchlaufen. Wir müssen wieder eine Bibliothek installieren, Weinbibliothek. Es nennt sich Prime Flex. Genau so etwas wie Prime-Symbole oder Prime NG selbst. Also zuerst müssen wir zu unserem Projekt gehen und prime flex installieren. Also eröffnen wir ein neues Terminal. Und dann gehen wir hier, wir sagen npm install prime flex, und dann sagen, OK, jetzt ist dieser prime flex installiert. Mal sehen, wie wir es benutzen können. Lassen Sie uns ein Beispiel aus der Bibliothek selbst abholen. So sehen wir hier, dass Prime Flux mehrere Grid-System hat. Einer von ihnen ist das Grid-System und die Flexbox. Also werden wir in diesem Kurs das Grid-System verwenden. Dieses Grid-System ist sehr dynamisch, was zu unserer Anwendung auf mobilen Tablets oder Desktops passt. Wie Sie hier sehen, gibt es mehrere Beispiele. Lasst uns eines dieser Beispiele aufgreifen. Also haben wir hier zuerst dieses Gitter sein. Aber bevor wir sehen, dass wir hier eine Klasse haben. Aber diese Klasse kommt von dort, wo wir sie verwenden müssen. Zunächst einmal müssen wir diese Datei in unsere Bibliothek aufnehmen, genau so , wie wir es zuvor mit anderen Bibliotheken gemacht haben. Also kopieren wir diesen Pfad. Wir gehen zum Projekt. Wieder im Energieshop dot SCSS. Wir importieren diese Bibliothek mit diesem Zeichen und wir haben es jetzt als CSS. Wenn wir also speichern, sehen wir, dass das Projekt erfolgreich läuft. Jetzt sind wir in der Lage, ein Beispiel zu finden. Zurück zum Bibliotheks-Gittersystem, das eines dieser Beispiele aufnimmt. Wie zum Beispiel, können wir das sagen. Gehen Sie zurück zu unserem Code, wir gehen auf die Homepage und dann fügen wir diesen Code hier ein. Wir gehen zum Browser. Für unser Projekt werden wir sehen, dass dieses Gittersystem funktioniert. Denn wenn ich diese Bibliothek deaktiviere, Lassen Sie uns diese Bibliothek auskommentieren. Gehen Sie zurück zu unserem Projekt. Wir werden sehen, dass sie untereinander ausgerichtet sind weil Standard, dass div Tag den ganzen Raum. Mit einem Grid-System, das wir installiert haben, werden wir das System haben, das für unsere Anwendung geeignet ist und wir brauchen es für Mobilgeräte, Desktop und Tablet. Wie ich Ihnen später gesagt habe, werden wir alle Funktionen dieses Rastersystems nutzen. Jetzt sind wir bereit. Wir haben die Struktur der Stile gebaut. Wir haben die Struktur der Dateien und der Ordner. Jetzt sind wir bereit, mit dem Programmieren zu beginnen und die Anwendung zu erstellen. Ich werde zuerst mit dem Admin-Panel beginnen. Das Admin-Panel, in dem wir Produkte, Benutzer, Bestellungen und auch Kategorien hinzufügen und alle groben Operationen auf ihnen durchführen. 89. Einführung: Admin: Willkommen in einer neuen Rubrik. Hier werden wir die Admin-Panel-Anwendung erstellen. Das Admin-Panel, in dem wir Bestellungen kontrollieren werden. Wir werden Produkte, Kategorien und alle Operationen auf ihnen steuern , wie hinzufügen, bearbeiten und löschen. Also als Übersicht werde ich einen Login-Bildschirm haben. Ich werde mich hier mit meinem Konto einloggen. Also werde ich zum Beispiel dieses Konto verwenden . Ich bin Admin, natürlich die normalen Benutzer nicht auch nachsehen. So können wir nur als Admins suchen, wir werden ein Dashboard haben, wie Sie hier sehen. Wie viele Bestellungen ich habe, wie viele Produkte, wie viele Benutzer in meinem Shop und wie viel Gesamtumsatz ich für meinen Shop getätigt habe. So haben wir auch einen Überblick über die Produkte. So können Sie auch unterstützte Produkte. Sie können sie löschen. Sie werden sehen, wie Sie genauso gut wie Konformation machen können. Sie sind Protokolle und Sie können bearbeiten und Produkte. Zum Beispiel werde ich diese aktualisieren. Sie können auf Update klicken und Sie würden alle diese Benachrichtigungen erhalten. Und auch, wir können mit Kategorien arbeiten. Wir werden sehen, wie wir auch den Farbwähler verwenden würden. Wir würden wie grundlegende Formulare hinzufügen, wie Sie hier sehen. Und wir werden die Symbole und natürlich die Aufträge verwenden, bei denen wir den Status der Aufträge haben, die es biegt oder verarbeitet wird. Und der Benutzer oder der Administrator kann den Status der Lieferung oder der Bestellung ändern. So kann er gerne verschickt oder geliefert haben. Und darauf basiert, werden die Daten auch hier aktualisiert. Wir werden wie eine gewisse Kontrolle über die Benutzer oder ihre Kunden haben. Wir werden sehen, wer Admin ist, wer nicht ist. Wir werden wie Liste der Länder haben, wie wir wissen, aus welchem Land er ist. Und wir werden die Informationen hinzufügen, ein Passwort verwenden, und dann senden wir diese Daten an das Back-End in der richtigen Weise für die Funktionalität des Admin-Panels, ohne etwas zu fehlen, wir werden auch sehen, wie wir Bilder hochladen können und wir müssen Reach-Editoren verwenden. Wir werden alle Informationen sehen, die wir wirklich brauchen, um eine reale Welt Anwendungen zu bauen und Daten aus der Datenbank als auch zu erfassen. Sie verwenden den Abmelde-Button, damit der Benutzer sich abmelden und wieder zur Anmeldeseite zurückkehren kann . Wir werden sehen, wie wir unseren Weg zu schützen ist, so dass der Benutzer nicht auf jede Seite gehen kann , bis er autorisiert wird. Wir werden sehen, wie wir ein Token hinzufügen, wie wir dieses Token in unseren lokalen Speicher greifen und es verwenden werden. Wie können wir es aus der Datenbank oder aus dem Backend bekommen und es im Frontend verwenden, um zu wissen, ob der Benutzer admin ist oder nicht. All dies wird in den nächsten Abschnitten sein. Und wir werden das Schritt für Schritt mit Prime NG und auch anderen Technologien, die wir dafür brauchen, aufbauen . 90. Die Schale erstellen: Okay, jetzt werden wir die Schale bauen. Was ich mit der Shell meine, wie Sie auf diesem Foto sehen, dass wir eine Seitenleiste haben und wir einen Inhalt auf der rechten Seite haben. Dieser weiße Bereich wird also voll von den Inhalten sein, zu denen ich navigieren werde. Also, wenn ich auf Produkte klicke, werde ich Tabelle der Produkte sehen, oder zum Beispiel werde ich Tabelle der Kategorien sehen. Ich werde den Editor für das Produkt sehen. Also in diesem Fall brauche ich die Schale. Ich nenne es eine Shell, weil es wie eine feste Seite enthielt , wo seine Sidebar fixiert ist. Ich muss die Sidebar nicht jedes Mal aktualisieren, wenn ich zu einer neuen Seite navigiere, aber ich muss nur den Inhalt aktualisieren. Wie Sie hier sehen, brauchen wir zwei Komponenten. Eine Komponente ist die Shell selbst, wie die Seite, auf der ich das Dashboard und die Elemente und auch die Sidebar finden werde. Die Sidebar, sie ist auch eine eigene Komponente, enthält das Logo und eigene Links. Also lassen Sie uns das im Code tun und wir werden sehen, was wir dafür brauchen werden. Okay, als erstes, was wir tun müssen, müssen wir die richtige Anwendung konfigurieren. Wie Sie sich erinnern, haben wir zwei Anwendungen erstellt. Also erste ist die Admin-Verpflichtung und die zweite ist ND-Shop. Dafür werden wir an der Admin-Anwendung arbeiten , weil wir jetzt das Admin-Panel erstellen. Also lassen Sie es uns konfigurieren. Nun, also müssen wir zuerst die Stile importieren, die in den öffentlichen Stilen enthalten sind, und das haben wir vorher gemacht. Zweitens möchte ich Eastland konfigurieren. Eastland, wie wir uns erinnern , repariert es unseren Code, wenn wir einige Fehler machen , seltsam, wenn wireinige unnötige Bibliotheken importieren usw. , wenn wir -Komponenten in Angular. Wie Sie sich erinnern, haben wir eine Komponente erstellt, die diese Komponente über einen Selektor verfügt , und die ausgewählte sollte einer Regel folgen, wie einem Präfix. Also müssen wir ein Präfix Admin für jede Komponente haben. Natürlich müssen Sie diese Regel nicht befolgen. Sie können Ihre Komponenten beliebig benennen. Aber für organisatorische Sachen ist es besser, es so zu haben. Also würde ich zu ES Fusseln gehen. Und hier in diesem Teil wird das Attribut dieser Elektrodenrichtlinie als admin vorangestellt und auch der Komponente würde als admin vorangestellt werden. In diesem Fall muss jeder Komponente das Präfix admin sein. Außerdem muss der App-Komponente „admin“ vorangestellt werden. Aber wie Sie sich erinnern, haben wir in Angular N3-Komponente, die App-Komponente ist, die eine Index-HTML-Datei des Projekts genannt wird. Also bin ich in der Projektebene oben. Und hier habe ich Index. Und diesen Index nennen wir die grundlegende HTML, die für das Projekt benötigt wird. Also dafür haben wir hier auch admin. Und hier auch Admin für ein schließendes Tag. Jetzt sind wir bereit und unsere Anwendung nach den Regeln von ES fusselt. Natürlich können Sie weitere Regeln basierend auf Ihren Bedürfnissen hinzufügen. Ich werde sie nicht alle haben. Ich möchte Ihnen nur zeigen, dass es eine Datei namens Eastland gibt , die Sie einige Regeln befolgen, die Sie für Ihren Code tun müssen. Wie wir zuvor gesprochen haben, müssen wir eine Shell erstellen. Shell enthält eine Seitenleiste und den Inhalt. Dafür müssen wir zwei Komponenten generieren. Eine ist Shell und die andere ist eine Sidebar. Wir können das über eine x-Konsole tun. Wir klicken auf Generieren und suchen nach einer Komponente. Wir klicken darauf und wir geben ihm einen Namen, zum Beispiel Shell. Und das Projekt ist admin. Wir haben zuvor über alle anderen Optionen gesprochen. Also werde ich dies einem CSS geben und dann werde ich auf Ausführen klicken. Aber zuerst muss ich eine Struktur für die Dateien und die Komponenten haben. Also wäre es besser, wenn wir es in einen Ordner legen. Zum Beispiel haben wir hier etwas für die Seiten und wir können einen anderen Ordner erstellen. Wir nennen es geteilt, weil die Shell von der gesamten Anwendung geteilt wird. So können wir den Pfad überprüfen. Wir sehen, dass, okay, bis Shared Shell und dann die Komponente erstellt wird. Lass es uns laufen. Und wir werden die Datei haben oder die Komponente wird hier erstellt. Schön. Also lasst uns etwas aufräumen. Wie zum Beispiel müssen wir das Admin-Präfix machen und auch wir müssen das CSS entfernen, weil wir das CSS im öffentlichen Status haben. Also lasst uns diese Datei entfernen. Und das Ziel für diese Datei, wir werden das für jede Komponente tun, die wir erstellen. Eine andere Komponente, die ich haben muss, ist die Sidebar selbst. Also gehen wir wieder Komponente zu generieren. Wir wählen dieses aus und wir sagen geteilt und dann Sidebar und im Projektadmin und alle gleich. Also führen wir diesen Befehl aus. Wir werden in unserer Dateistruktur, wieder eine Sidebar haben. Wir bereinigen es und wir machen dieses Präfix als Sidebar-Admin und wirklich verschieben die SCSS-Datei. Wir speichern und wir werden sehen, dass die Komponenten bereits in das Modul importiert sind. Gehen wir zurück zu unserem Compiler. Wir laufen bereits diese Anwendung und D-Sharp, wir müssen die Admin-Anwendung ausführen, so können wir wieder gehen und x dienen. Aber wir sagen, der Anwendungsname ist admin. Also führen wir es jetzt aus, um zu überprüfen, ob alles gut funktioniert. Wir bekommen hier einige Pfeile, weil wir die Datei der Stile dieser Admin-Anwendung nicht aktualisiert haben. Also, wenn Sie sich erinnern, wir arbeiten nur auf ND-Shop, nicht auf dem Admin. Also lassen Sie uns die gleichen Dinge kopieren, die wir in G scharf hatten, und fügen Sie sie in den Admin ein, außer dem Teil, der wirklich, wirklich spezifisch für die Anwendung ist . Also haben wir hier Apps Shop. Nein, das brauchen wir nicht im Admin. Wir brauchen nur etwas Spezifisches für den Anwendungsadministrator. So können wir diesen Teil entfernen und das Projekt erneut ausführen und überprüfen, ob alles gut funktioniert. Wir gehen zurück zu Stil CSS, wo wir den Admin nennen. In der Stil-Anwendungsebene drücken wir erneut Speichern, und wir werden sehen, dass alles erfolgreich kompiliert wurde. Jetzt als Komponentenstruktur sind wir bereit, zum nächsten Schritt zu gehen, wo wir diese Komponenten wie die Shell und die Sidebar aufrufen , um sie in der Anwendung zu zeigen. Dafür müssen wir Routen konfigurieren. Und das, was wir in der nächsten Vorlesung sehen werden. 91. Die Routen erstellen: Okay, wir haben vorher über die Routen gesprochen. Jetzt werden wir einige Routen für das Admin-Panel importieren oder bauen. Zuallererst müssen wir dieses Array füllen. Also müssen wir, wie wir zuvor gesprochen, einen Pfad zu definieren ist, und diese Durchgänge werden sich auf die Komponenten beziehen. Aber wie werden wir es in der Art und Weise tun, wie wir die Anwendung erstellen. Bei Bedarf habe ich das Array der Route erstellt. Das Array dieser Route, das Komponenten oder Objekte hat, und jedes Objekt hat den Pfad und die Komponente, auf die sich dieser Pass bezieht. So wird zum Beispiel die Standardkomponente auf die Shell-Komponente verweisen. Wenn wir das speichern und wir versuchen unsere Anwendung, werden wir sehen, dass wir immer noch Admin-Panel haben, weil wir die App-Komponente haben, haben immer noch diesen Titel. Also müssen wir zu dieser App-Komponente sagen, der Messe und dem Benutzer heraus, wie wir das tun können. Wir sagen nur Router-Steckdose und wir schließen als Tag-Router-Steckdose. Wenn wir dies ausführen, werden wir sehen, dass es sich genau auf die Shell bezieht , da sich der Standardpfad auf die Shell-Komponente bezieht. Okay, wie wir zuvor gesprochen haben, müssen wir die Shell in zwei Teile teilen, eine Seitenleiste und einen Inhalt. Tun Sie das. Also werde ich zur Shell-Komponente gehen, diesen Teil entfernen, ich werde ein div erstellen, es Admin-Wrapper nennen. Es liegt an dir. Sie können den HTML-Code basierend auf Ihren Wünschen erstellen. Und in diesem Gummi möchte ich die Admin-Sidebar aufrufen, die wir zuvor erstellt haben. Und in der Nähe der Seitenleiste müssen wir den Inhalt erstellen. Also sage ich Live-Admin, zum Beispiel Inhalt. Und was hier drin sein wird, wird darin sein, der Inhalt. Also, wie können wir das verweisen? Lassen Sie uns zuerst sehen, ob alles noch funktioniert. Wir gehen wieder zum Browser, okay, Sidebar funktioniert. Wir brauchen hier, um den Inhalt zu spüren. Zum Beispiel benötigen wir das Dashboard, wie wir zuvor gesehen haben, dass die Sidebar-Methode viele Links wie Produkte, Dashboard und Bestellungen enthält. So wird der Inhalt immer anders sein. In diesem Fall müssen wir dynamische Inhalte erstellen. können wir auch über ihre Routen tun. Also werde ich sagen, dass dieser Weg die Scherkomponente hat und diese Pfade ein Kind haben und die Kinder werden auch Routen sein. Also werden die Kinder auch Array sein und es wird Objekte und jedes Objekt enthalten, wir werden einen Pfad haben. Wir können es nennen, zum Beispiel, Dashboard und auch Komponente. Also müssen wir auf Dashboard-Komponente verweisen, die wir auch zuvor erstellt haben. Wenn ich also speichere und dann zum Browser gehe, sehe ich immer noch alles leer. Wenn ich direkt zum Dashboard navigiere, werden wir sehen, dass nichts passiert ist, weil das Dashboard, okay, wir sind auf dem richtigen Weg, aber wir können nichts in den Inhalten sehen. Also, wie können wir das beheben? Wir werden zur Shell-Komponente gehen und sagen , dass dieses Kind oder diese Komponente auch Router-Steckdose hat. Wenn Sie also die untergeordneten Elemente dieser Komponente oder ihre untergeordneten Pfade dieser Komponente anzeigen möchten , müssen Sie auch eine Router-Steckdose platzieren. Wir speichern das zurück im Browser. Wir werden sehen, dass wir Sidebar arbeiten und Dashboard-Arbeiten haben. Und wenn Sie hier zum Beispiel einen anderen Pfad erstellen , nennen wir ihn für Produkte. Dann werden Sie auf Produkte Komponente beziehen, und es wird aufgerufen und in der Shell gerendert werden. In diesem Fall aktualisiere ich nicht jedes Mal die Sidebar, ich aktualisiere nur diesen Teil. Und diese Art, wie wir mit dem Weg umgehen, ist in unserer Anwendung und wir werden in Zukunft sehen, dass wir all diese Routen schützen können, wie all diese Vergangenheit schützen, so dass niemand Zugang zu seinen Kindern haben kann. In der nächsten Vorlesung werden wir Admin-Wrapper und Admin-Inhalte stylen , um das Zieldesign zu haben, das ich Ihnen zuvor gezeigt habe. 92. Admin: Okay, fangen wir mit der ersten Sache an. Zuerst möchte ich diese Sidebar erstellen. Wie Sie hier sehen, haben wir das Logo und wir haben einige Navigationstasten. Innerhalb dieser Navigationstasten haben wir Symbole. Also lasst uns das schaffen. Okay, wie wir zuvor gesehen haben, dass wir einen Admin-Wrapper erstellen. Dann haben wir die Sidebar. Wir gehen zur Sidebar-Vorlage. Wir werden das div machen. Div ist Sidebar oder Admin-Sidebar. Und dann möchte ich zunächst in der Seitenleiste definieren, wie wir vorher sehen, dass wir ein Logo auf der Oberseite haben. Und ich möchte auch die Links definieren, die Links, die unter dem Logo kommen. Also hier muss ich auch ein Bild importieren. Das Bild ist bereits, ich habe es in meinem Assets-Ordner. Und wenn Sie zum Ordner „Assets“ gehen, hole ich es vom Design ab und lege es dann an diesem Speicherort des Ordners. Das Assets ist also die Anwendungsebene. Gehen wir also zurück und erstellen Sie die Links. Das Links wie normal, wir müssen unsortierte Liste erstellen. Und diese unsortierte Liste hat eine Liste in einem Listenelement und jedes Listenelement wird einen Link haben. Und in diesem Link definiere ich meine Strings, die ich brauchte. Zum Beispiel brauche ich ein Dashboard. Ich brauche auch, zum Beispiel, die Produkte und die Bestellungen, et cetera. Wie Sie sich erinnern, hatten wir ein Symbol vor dem Text. Also nach dem Text haben wir ein Symbol. Lassen Sie uns zum ersten Ende der Bibliothek gehen, weil wir diese Bibliothek bereits installieren, kopieren wir diese beiden Codezeilen oder diese eine Codezeile für den Import des Symbols. Also zuerst gehe ich wieder zum Dashboard oder zu meiner Sidebar, und ich habe hier eingefügt. Für alle anderen Links können wir also eine andere Liste erstellen. Und dann können wir diese Elemente wie Produkte umbenennen. Und wir haben zum Beispiel Kategorien umbenannt. Und auch wir brauchen Befehle. Und auch am Ende brauche ich Benutzer. Und natürlich brauchen wir einen Link, der als Abmelden bezeichnet wird, wo sich der Benutzer vom Admin-Panel abmeldet. Aber zuerst lassen Sie uns die richtigen Icons setzen, weil wir hier Pi-Check haben, so dass Sie die Icons finden, die ich auch in der Icon-Bibliothek. Also haben wir hier alle Symbole. Also nehmen Sie einfach den Namen auf und fügen Sie ihn ein. Zum Beispiel, für Armaturenbrett, brauche ich zu Hause, für Produkte, ich brauche eine Aktentasche, vier Kategorien. Ich brauche eine Liste und für Bestellungen brauche ich zum Beispiel den Warenkorb. Und zum Beispiel, für die Benutzer, brauche ich Benutzersymbol. Jedes Symbol braucht also den Namen, der aus der Bibliothek abholen kann. Und für die Abmeldung habe ich etwas namens Abmelden. Lassen Sie uns speichern und zur Anwendung gehen und sehen, ob alles gut funktioniert. Okay, wir haben alles in Ordnung, aber ohne Stil. Lassen Sie uns also die Seitenleiste in unserem Ordner für öffentliche Stile formatieren. Also zuerst werde ich zu den öffentlichen Stilen gehen. Und hier habe ich bereits den Admin-Ordner definiert. Also in diesem Admin-Ordner müssen wir etwas namens Shell, Shell Punkt SCSS haben , und dann haben wir in den Admin importiert. Also hier habe ich ein geteiltes Und ich sage Import von, zum Beispiel gibt es Apps und dann Admin, und dann Shell. Also muss ich das importieren. Also nach hier müssen wir unsere Stylings hier schreiben. Also zuerst muss ich zum Beispiel ihren Wrapper, den Wrapper und den Main haben, damit unser Obermaterial alle möglichen Sidebar darin hat. Also lasst uns zuerst ihre Oberseite haben. Also in der Shell erstelle ich Admin-Klasse. Und diese Admin-Klasse wird einen Rapper haben. Und in diesem Wrapper habe ich zum Beispiel eine Höhe von 100%. Und zum Beispiel habe ich eine Batting 0, nur um es zu initialisieren. Und dann wird eine Marge eine 0 haben. Ich initialisiere nur die ganze Pipette. Und dann müssen wir die Sidebar-Klasse und die Sidebar-Klasse erstellen, wie wir zuvor gesehen haben, dass es innen ist und ihr Admin vorangestellt ist. Deshalb verwende ich diese kaufmännisches Und-Minus-Sidebar. Die Position der Sidebar wird fixiert, weil ich die Sidebar nicht scrollen möchte, wie ich es Ihnen später zeigen werde. Und die Breite wird 175 sein. So habe ich es aus dem Design und der Hintergrundfarbe bekommen. Zum Beispiel habe ich einen schwarzen und auch wir haben eine Höhe. Wir können es 100% geben, so dass es Fuß auf der ganzen Seite sein kann. Was ist mit dem Hauptinhalt? Der Hauptinhalt, der in der Nähe der Seitenleiste kommen wird. Also hier muss ich auch kaufmännisches Und-Haupt haben. Und in diesem Haupt werde ich eine Breite haben. Was ist die Breite wird eine Berechnung von 100% minus 175 Pixel sein, da die Seitenleiste 175 Pixel hat. Also hier habe ich auch eine Marge. Ich muss diesen Hauptinhalt meistens nach rechts schieben. Also werde ich sagen, Rand links, es wird 175 Pixel sein. Also, wenn wir hier gehen, werden wir sehen, dass wir die Sidebar haben und auch wir den Inhalt hier haben. Und wie Sie sich erinnern, hatten wir die Dashboard-Route. So die Dashboard-Route, wir sehen, dass es wirklich sind und in ihren Inhalten. Und wir können sicher sein, dass meine Öffnung die Tools haben und dann überprüfen wir Admin-Haupt- oder den Admin-Wrapper selbst, um zu sehen, dass alles in Ordnung ist. Also lasst uns mehr Styling machen. Zuallererst muss ich das Logo in schöner Weise haben. Also werde ich ein Logo haben, und dieses Logo wird eine Polsterung wie 20 Pixel haben, und dann wird es eine Breite von etwa 100% haben. So kann es genau auf die Seitenleiste passen, innerhalb des Hauptinhalts der Seitenleiste. Im Inneren des Logos, bemerken wir, dass wir ein Bild haben und in diesem Bild, Ich werde es maximale Breite 100% geben, um nicht aus ihrem Inhalt zu gehen. So ist alles in Ordnung in der Seitenleiste und im Bild. Lassen Sie uns jetzt binden sie Links sind, dass Links auch sie ihre eigene Klasse haben, die Links genannt wird. Und dann muss ich jedes Element der Links stylen. Also werde ich die Klassenlinks an einer Seite haben, diese Klasse habe ich URL, und die URL wird mit Marge 0 und Padding 0 initialisiert, weil es manchmal mit einigen Werten kommt, also müssen wir sie initialisieren. Und am wenigsten, wir werden einen Anzeigeblock haben, um es wie ein div anzuzeigen. Und der geringste Stil wird nicht tutti sein, mehr von diesen Punkten in der Nähe des Listenelements, und auch die Breite wäre 100% ihres Kontakts. Und wie Sie sich erinnern, in diesem Listenelement, haben wir einen Link und diesen Link werden wir jetzt, um es zu stylen. Also zuerst geben wir eine Klasse, und diese Klasse hat eine Farbe, und diese Farbe kann weiß sein. Und wir können diese Links Watte geben. Es kann also mehr Leerzeichen zwischen diesen Links sein. Aber zuerst, was die Farbe betrifft, möchte ich dir einen Trick zeigen. Wie Sie sich erinnern, habe ich über einige, einige definierte Variablen von Farben gesprochen , die in ihrer Bibliothek von Prime NG definiert sind. Und diese Variablen können Sie sie nicht in den Entwicklungstools sehen. Wie Sie in dieser Liste sehen, gibt es bereits CS als Variablen für ihre Farben definiert. So können Sie die Farbe, die Sie mögen und vor allem sind verwendbar, weil Sie sie überall in Ihrem Stil verwenden können, die mit diesem Thema kommt. Um diese Farbe zu verwenden, müssen Sie var sagen und Sie den Namen der Variablen setzen, und dann wird es die Farbe haben. Und wenn wir es überprüfen, sehen wir, dass es wirklich diese Farbe hat. Okay, jetzt ist alles fertig. Wir müssen einen Anzeigeblock für die eine Verbindung haben, so dass sie effektive Breite und auch effektive Polsterungen haben können. Und wie wir hier sehen, dass alles gut funktioniert. Aber zuerst müssen wir etwas Hover-Farbe geben, wie wenn ich die Maus auf einen Link setze, werde ich eine Farbe haben. Also zuerst habe ich zum Beispiel einen Hintergrund. Lassen Sie uns etwas Farbe von unserer Liste hier abholen. Also werde ich die blauen 500 oder 600 und 700 jederzeit alles stecken. So können Sie zum Beispiel var und dies über blau 700 setzen. Und was für ein Winkel? Aber wir haben einen Browser. Ich navigiere und IC, dass der Halter gut funktioniert. Also lasst uns diese Symbole mehr stylen, damit wir wie mehr Leerzeichen geben können. Also, wenn Sie sich daran erinnern, dass wir ich Element innerhalb des Links haben, wie Sie hier sehen. Also haben wir das Ich, wir müssen es stylen. Und das werde ich haben, zum Beispiel, eine Marge, Marge, oder? Als ob ich es vom Text wegschieben möchte. Ich gebe ihm das achte Pixel. Und auch wenn Sie wollen, können Sie wie einige Rand oben geben. Wir können es wie eine 0 geben, um es zu initialisieren, wenn es vorher etwas Marge hat. Und auch können wir einen Schwimmer links geben, so dass er meistens nach links geschoben werden kann. So sparen wir und wir sehen, dass alles gut funktioniert. Lassen Sie uns nun einige spezielle Styling Viertel ihr Logo Alt Button geben. Also werde ich hier Klasse sagen, dass es eine bestimmte Klasse hat, die Abmeldung genannt wird. Und diese Klasse werde ich es hier innerhalb der a definieren.Und der Logout-Button wird eine Farbe haben, was zum Beispiel ist , können wir ihm eine hellere Farbe geben, wie ein Blau. Wir können 500 sagen. Und in diesem Fall werden wir sehen, dass es wirklich andere Farbe hat. Wie Sie hier sehen, gibt es einige Leerzeichen, wie die Seitenleiste nicht direkt auf die Seitenränder passt. Dies, weil die HTML-Komponente oder HTML-Element ist nicht initialisiert Welt. Zum Initialisieren der Elemente würde ich empfehlen, eine Bibliothek namens normize dot css zu verwenden. Und diese Bibliothek wird Ihre Webseite oder HTML-Code von Anfang an initialisieren, und dann können Sie mit ihr auf die richtige Weise arbeiten. Es macht also einige Initialisierungen für die Anwendung oder den HTML, bevor Sie mit dem Code beginnen. Deshalb werde ich es auf die Oberseite meiner CSS-Datei setzen. Also hier werde ich es nennen, und es wäre die gleiche Weise, wie wir jede MPM-Bibliothek aufrufen. Denn wenn Sie in diese Bibliothek gehen, wenn Sie steuern und zu dieser Bibliothek drücken, werden Sie sehen , dass wir Initialisierungen von allem haben, wie HTML-Sidebar Fortschritt alles. Also hier haben wir die Initialisierung und wir werden sehen, dass es wirklich gut funktioniert. Aber wir haben immer noch diesen Platz oben. Dies, weil ich auch die Sidebar initialisieren möchte, um oben zu sein. Wie Sie sich erinnern, habe ich dieses Zifferblatt auf fixiert. Also, wenn ich es fest setze, muss ich das Top auf 0 setzen. Also gehen wir zurück zu unserem Code und wir sagen top 0. Deshalb möchte ich kein Scrollen im Inhalt haben , weil es eine feste haben wird. Wenn ich also den Inhalt scrolle, bleibt die Seitenleiste auf der rechten Seite fixiert und sie wird nicht gescrollt. Ich möchte auch etwas Farbe anstelle von Schwarz in die Seitenleiste geben , um netter zu sein und mit dem Design zu passen. So wie Sie hier sehen, dass alles gut funktioniert. Also jetzt muss ich zwischen diesen Symbolen oder diesen Links navigieren. Wenn ich auf sie klicke, navigiere ich zur Seite. Also, wenn Sie sich in Angular erinnern, haben wir etwas namens Router-Link und Sie können es dem HTML-Element hinzufügen, wie einen Link oder wie einen Link oderein. Also werde ich jeden Link basierend auf der Route hinzufügen , die im Modul definiert ist, wie wir in der vorherigen Vorlesung gesehen haben. So werde ich hier zum Beispiel ein Dashboard und Produkte und andere Dinge wie die Kategorien haben. Und wie Sie sich erinnern, haben wir alles im Modul definiert. Denn jetzt haben wir nur das Dashboard, aber ich werde für den Rest hinzufügen. Also werde ich dieses Video überspringen, um es schnell zu tun. Jetzt haben wir alles, was sich ändert, aber seien Sie vorsichtig. Ich habe es vom a oder vom Auge zum a verschoben, denn wenn Sie, wenn Sie es in das Auge legen, dann funktioniert die Navigation nur, wenn Sie auf das Symbol klicken. Lassen Sie uns das versuchen. Und wir werden sehen, dass wir navigieren, oder? Aber wenn ich auf Produkte klicke, bekomme ich einen Fehler. Dies liegt daran, dass die Produktnavigation im App-Modul nicht vorhanden ist. Also müssen wir hier hinzufügen, wie wir später sehen werden. 93. Backend für API's für API's: Okay, zurück zum Backend. Wie Sie sich erinnern, dass wir die Authentifizierung für unsere APIs erstellt haben. Und diese APIs sind jetzt geschützt. Wir können also nichts tun, ohne sich für die Erstellung der Systemsteuerung anzumelden. Ich möchte diese Authentifizierung deaktivieren, weil die Authentifizierung kommt, nachdem wir alles wie die Leckereien, Produkte, Erlen und auch die Benutzer vorbereitet haben. Wenn also der Authentifizierungssubjekt für das Front-End kommen wird, können wir sie wieder aktivieren. Um die Authentifizierung zu deaktivieren, gehen wir zu JWT, JS-Datei in unserem Backend. Dann werde ich all diese auskommentieren, es sei denn, und dann rein, es sei denn, ich werde alles zulassen. Also werde ich hier eine Zeile hinzufügen, ich werde es URL nennen, und dann wird es eine Regex akzeptieren. Und diese Ablehnungen werden genau das gleiche sein wie hier, aber mit Ausnahme dieses Präfix. Auf diese Weise werde ich erlauben, dass alle URLs ohne Authentifizierung oder Autorisierung zum Back-End aufgerufen werden . Das ist vorübergehend. Also einfach diesen Teil auskommentieren und diesen Teil hinzufügen, weil wir ihn löschen werden , nachdem wir wirklich das Back-End aktiviert haben. Aber vorerst möchte ich diese APIs ohne Authentifizierung verwenden. Und in einem späteren Video, nachdem wir vollständig im Backend und im Frontend fertig sind, werde ich Ihnen sagen, wie Sie sie aktivieren und wir testen unsere Anwendungen mit Authentifizierung. 94. Kategorien Service Daten von Backend: Okay, jetzt füllen wir unsere Tabelle mit den realen Daten, Daten , die aus dem Back-End kommen. Dafür müssen wir einen Dienst erstellen, der Category Service genannt wird. Und wie wir in diesem Diagramm sehen, haben wir die Kategorie Service befindet sich in der Produktbibliothek. Auf diese Weise müssen wir es dort erstellen und mit dem Admin-Panel verknüpfen. Also lasst uns das praktisch machen und wir werden sehen, wie wir das an den Tisch packen können. Also haben wir unsere Tabelle bereit und wir müssen zum Beispiel dieses Array aus Daten füllen, die nicht hartcodiert sind, sondern aus dem Back-End. Also fangen wir an, das zu tun. Zunächst einmal, wie wir bereits gesagt haben, dass wir den Service in der Produktbibliothek haben. Daher werden wir den Dienst nicht auf der Anwendungsebene haben , da der Dienst auch mit der anderen Anwendung geteilt wird. Also müssen wir es irgendwo platzieren, wo es für alle Anwendungen hier geteilt werden kann. Also, wenn wir zur Produktbibliothek gehen, die Ellipsenordner ist, lassen Sie uns alles wie Anwendungen schließen. Wir haben Ellipse und in den Schleifen, wir werden in Produkten, unsere Oberfläche haben. So können wir Service mit einer ECS-Konsole erstellen. So können wir gehen und generieren und nach Service suchen. Und hier haben wir die erste Option. Und wir müssen nur den Namen des Dienstes setzen. Also möchte ich es in einem Ordner, Diensten und dann Kategorien haben. Dies haben wir immer noch den Namen und beobachten immer, was hier mit einem Trockenlauf vor sich geht , weil es Ihnen zeigt, wo die Datei generiert wird. Projekt wird Produkte sein, die Produktbibliothek ist. Und ich möchte diese Tests überspringen. Wann generieren Sie und klicken Sie auf Ausführen? Sehen Sie, dass diese Bibliothek generiert wird. Sie können diesen Link nicht steuern und klicken. Sie werden dies sehen, dass wir direkt zu diesem Service gesprungen sind. Also hier haben wir Contiguity Service. Wir werden hier Daten erfassen, okay, wie Sie sich in einem Postboten erinnern, dass wir vom Backend-Dienst oder localhost 3000 API Version 1 Kategorien haben. Wenn ich also eine Anfrage sende, bekomme ich die Daten aus dem Backend. Also möchte ich diese Daten im Frontend in unserer Tabelle sehen, die wir hier sehen. Also zunächst einmal, lassen Sie uns die HTTP-Anfrage haben, weil wir die Daten über HTTP-Protokoll anfordern können. Also zunächst müssen wir HTTP-Client importieren, sich bereits in der Angular-Bibliothek befindet. Also zuerst muss ich Import anrufen. Und dann HTTP-Client von wird bei eckigen und dann Schrägstrich Befehl, Schrägstrich HTTP. Aus dieser Bibliothek kann ich alle HTTP-Clients greifen, damit ich HTTP-Aufrufe tätigen kann. So, wie wir diese Bibliothek oder diesen Dienst verwenden können, weil dies auch Service ist. Also hier gehe ich zum Konstruktor des Dienstes der Kategorie Service. Und ich sage privat, ich definiere eine Variable, die der Typ davon HTTP-Client ist. Und auf diese Weise kann ich eine HTTP-, GET-, Delete-, PUT-Anfragen erstellen . Also lasst uns jetzt unser erstes Ziel machen. So haben wir eine Methode, die wir nennen können Get Categories. Und diese Methode wird für mich Daten zurückgeben, die von diesem HTTP-Dienst stammen. Also werde ich sagen, dieser Punkt http dot get, ich möchte einige Daten erhalten. Und diese Daten werden über die URL kommen, die ich hier zugewiesen habe. Also werde ich diese URL kopieren und dann zu meinem Code zurückkehren. Und ich werde sagen, geben Sie mir diese Daten von dieser URL. Danach werden wir alle diese Daten haben. Aber in TypeScript möchte ich, dass Sie die Eingabe haben. Also möchte ich Typen für jede Art von Daten angeben, die ich bekomme. Dafür müssen wir Typen erstellen. Zuallererst, was diese Rückkehr für mich, es kehrt für mich mindestens von Kategorien zurück. Und diese Kategorie kann ein Modell sein. So kann dieses Modell hier erstellt werden. Und ich sage, dass ich Kategorie-Array will. Also lassen Sie uns hier eine Datei erstellen. Sie können auch in ECS-Konsole verwenden oder Sie können auch das normale wie Handbuch verwenden. Also erstelle ich hier einen Ordner, ich nenne es Modelle, denn in Zukunft werden wir auch das Produktmodell finden. Also zuerst müssen wir Kategorie-Modell haben, genau wie wir es im Back-End gemacht haben. So Contiguity Modell wird auch Typ Ts sein und wir sagen Export. Wir erstellen einen Typ. Sie haben die Option, Sie können es als Schnittstelle erstellen oder Sie können es als Klasse erstellen. Also für mich werde ich es als eine Klasse erstellen. Und diese Klasse namens Kategorie. Und diese Kategorie wird ID haben. Genau die gleichen Daten, die wir vorher hatten. Und diese ID hat eine Typzeichenfolge. Und auch wir haben einen Namen, der einen Typ auch String hat. Ich setze dieses Fragezeichen ein, um sie optional zu machen. Also, wenn ich eine Kategorie oder zum Beispiel eine Kategorie erstelle , dann wird es mir nicht sagen oder Sie fehlen die ID. Also, wenn ich das Jod oder tastend vermisse, will ich nur mein Frontend stabil haben. Also hier schaffen wir kein Objekt, wir schaffen Variablen, Namen und Symbol, wie wir Front-End sahen. Also hier haben wir jetzt das Modell. Und ich möchte, dass dieses GetCategories für mich Array von Kategorien zurückgibt. Also werde ich hier sagen, dass ich zurückkehren kann, oder diese Methode haben wir für mich Array der Kategorie zurückgegeben. Aber wir haben hier ein Problem, weil GET-Anfrage oder GetMethod vom HTTP-Dienst die Daten nicht genau so zurückgibt, wie wir wollen. Es gibt sie unter etwas, das beobachtbar genannt wird. Und dieses Beobachtbare ist so etwas, wie Sie sich vorstellen können, dass dieser Service darauf wartet, dass das Back-End reagiert und dann beobachtet es die Daten, bis sie kommen und sie sagen: Okay, jetzt habe ich die Daten, können Sie sie greifen. Dieses Thema ist für unsere x js, ich werde tiefer gehen, wenn wir NG RX verwenden werden, Sie werden mehr das beobachtbare für jetzt verstehen. Und das Frontend wartet auf die Daten und das Warten, das durch Observables kommt. Es wird also nicht für mich Kategorie-Array zurückgeben, es wird für mich beobachtbar zurückkehren. Und in diesem beobachtbaren ist Kategorien Array. Also zuerst müssen wir hier 0 servable haben. Und wenn Sie nicht wissen, wie Sie es importieren, steuern Sie einfach und Platz unter Windows oder Steuerpunkt auf Mac. So wird es Ihnen sagen, dass Observable automatisch importiert wird. Also sehen Sie es hier, und wir sehen, dass es hier wichtig ist. Also, und dann möchte ich einen Typ angeben. Also sage ich, dass die Art von dem, was in dieses Beobachtbare kommt, Kategorie ist. Und wir müssen auch diese Kategorie importieren , die wir zuvor aus dem Kategoriemodell erstellt haben. Aber auch auf diese Weise müssen wir sagen, um zu erhalten, dass es Kategorie-Array zurückgeben wird. So kann es nicht sein. Also müssen wir sagen, dass GET, seien Sie vorsichtig, dass wir eine Daten zurückgeben werden, die Kategorie-Array sind. So können wir auch der GetMethod erzählen. Also dann werden wir diesen Fehler nicht haben, weil es hier besser ist , den Datentyp anzugeben, der aus dem Darm kommt. Diese GET-Anfrage wird also wissen, dass sie das Kategorie-Array zurückgibt. Und ich habe die Verbindung am Ende und jetzt ist alles in Ordnung. Also sparen wir. Und dann werden wir diesen Service in unserer Aggregation nutzen. So werden wir sehen, wie wir diese Kategorie Service importieren und es innerhalb der Anwendung von Kategorien oder Admin verwenden. Und hier werden wir sehen, wie wir es in diesen Kategorien Liste verwenden würden , um diese hartcodierten Daten mit einem Back-End-Daten zu ersetzen. 95. Verwendung von Kategorien in der Kategorien: Okay, so für jetzt werden wir die Kategorien oder GetCategories Methode in Kategorie-Service innerhalb der Kategorieliste verwenden . Also, wie ich Ihnen gesagt habe, dass wir einen Service HTTP-Client auf die gleiche Weise importiert haben , wie wir in Kategorien Listenkomponente tun werden. Also möchte ich den Dienst in den Konstruktor importieren. Also definiere ich eine Variable. Wir können eine Instanz dieses Dienstes definieren. Also sage ich private Kategorie Service. Und innerhalb dieser Kategorien oder der Typ dieser Kategorie Service werden Kategorien Service sein. Aber von wo aus ich diese Kategorie Service aus der Bibliothek der Produkte greifen werde. Also, wenn ich hier gehe und ISA, wie wir zuvor gesehen haben, importieren Sie die gute oder Service aus. Und dann werde ich bei Blue Bits und dem Namen des Unternehmens und der Produkte sagen, ich werde feststellen, dass es keine Art hat. Ich habe immer noch das Fehlermodul. Produkt hat kein Mitglied exportiert, also müssen wir es irgendwie exportieren. Also gehen wir zurück zur Bibliothek, wieder, werden wir sehen, dass wir hier index.js haben. Also muss ich aus Diensten exportieren, die sich in der Bibliothek befinden. Also werde ich hier Service gehen und dann werde ich Kategorie Service sagen. Und wir müssen auch das Modell exportieren, das wir erstellt haben. Also, weil wir es dort benutzen werden. Also sage ich auch leben und dann Modelle und dann Kategorie. So wird jetzt alles exportiert. Wir werden sehen, dass wir diesen Fehler nicht mehr haben. Also hier werde ich sehen, dass die Kategorie Service, Ich kann es jetzt verwenden. Also brauche ich diese hartcodierten Daten nicht mehr weil wir dieses Array vom Back-End aus füllen werden. Aber wir können sagen, dass diese Kategorien eine Typkategorie hat , die auch aus diesen Produkten Bibliothek kommt. Wir haben es importiert. Also, und hier wird es Array sein, und dann wird es am Anfang ein leeres Array sein. Und nachdem diese Komponente initialisiert wurde, werden wir dieses Array fühlen. Also, wie können wir das tun? Ich sage, dass dieser Punkt einen guten Service erhält, benutze die GetCategories Methode. Und dann, wenn Sie sich daran erinnern, dass wir eine beobachtbare und ich sagte Ihnen , dass das Front-End wartet auf jede Aktion kommt von dieser beobachtbaren, also jeder Bewegung jeder Änderung der Daten. Also zuerst muss ich sagen, dass ich mich selbst abonnieren und diese Daten beobachten möchte. Also, wenn sie eine Änderung sind, dann fangen Sie es und lassen Sie uns Daten verwenden. Also möchte ich dieses Observable verwenden oder abonnieren, das von GetCategories zurückgegeben wird. Weil du dich daran erinnerst, dass es für mich beobachtbar ist, welche Typkategorie zurückkehrt. Also hier haben wir beim Abonnieren und dann geben wir im Rückruf an und in ihrem Rückruf werden wir die Antwort der Daten erhalten. Also für mich werde ich sie Katzen nennen, zum Beispiel Kategorien. Und dann wird Callback eine Methode sein. Und bei dieser Methode sage ich diese Punktkategorien, die Variable, die ich hier definiert habe, wird Katzen sein. Und dann rette ich. Wir sehen hier, dass wir im Compiler kein Problem haben. Aber hier denke ich, wir haben Problem. Öffnen wir die Konsole und überprüfen Sie sie. Wir sehen, dass wir einen Fehler erkannten Kreisabhängigkeit und den Nullinjektorpfeil haben. Dies liegt daran, dass das Anwendungsmodul das HTTP-Modul nicht importiert hat. Jedes Mal, wenn ich eine Bibliothek verwenden möchte, wie wir zuvor gesehen haben , müssen wir dieses Modul importieren. Wir haben in der Kategorie Service, der HTTP-Client verwendet. Also müssen wir auch das Modul anbringen. Sie haben die Möglichkeit, dieses Modul innerhalb des Produktmoduls zu verwenden, oder Sie verwenden es im Anwendungsmodul selbst. Ich ziehe es vor, es im Anwendungsmodul zu verwenden , weil wir mehrere Bibliotheken importieren werden. Dann, wenn wir in jeder Bibliothek wichtig sind, dann wird es dupliziert. Wir werden wie HDTP-Modul viele Male importiert haben. Um das zu tun, gehen wir zum App-Modul. Dann sagen wir hier in den Modulen Importe, sagen wir, dass mir HTTP-Client-Modul geben. Und dies wird automatisch importiert , weil Sie das Plugin verwenden und wir es hier haben. Ich mag es auch, den Code ein wenig zu organisieren. Also habe ich die Importe, die grundlegenden Importe hier, und dann die Komponenten, und dann die UX-Komponenten oder Module lyse, alles funktioniert gut. Ich gehe wieder geschützte Kategorien und ich werde die Köpfe mydata Spiele erfolgreich sehen. Manchmal erhalten Sie vielleicht einen Fehler, als es keinen Anbieter gibt. Vier Kategorien Service. Also ist es besser auch im Anwendungsmodul, sagen Sie, dass ich diesen Dienst bereitstellen möchte, um in dieser Anwendung verwendet zu werden. Also, weil wir diesen Dienst innerhalb der Komponente verwenden , die sich innerhalb der Anwendung befindet. Also muss ich es auch importieren. So können wir diesen Service importieren. Wir können direkt sagen, dass Anbieter bieten für mich Kategorien Service. Und dieser Kategorie-Service würde hier zur Verfügung gestellt werden. Und wir sparen und versichern, dass alles gut funktionieren wird. Wie Sie hier sehen, haben wir die Daten, die aus dem Backend stammen, genau wie wir es im Postboten haben. Als eine kurze Zusammenfassung haben wir, wie Sie sich erinnern, den Service importiert, das Modell und dann diese Kategorien verwendet. Wir entfernen die hartcodierten, und dann verwenden wir sie in dieser Tabelle. Und diese Tabelle rendert die Daten basierend auf dem, was sie aus dem Backend stammen. Und wie Sie hier sehen, haben wir in den Daten oder in den HTTP-Netzwerkanfragen, wir haben unsere Anfrage, die mit den Kategorien kommt, die sich hier befinden. Wir sehen genau die gleichen Daten, die aus dem Backend stammen. 96. Kategorien aus der Verwendung PrimeNG hinzufügen: Okay, jetzt haben wir unseren Tisch bereit oder Daten aus dem Backend. Lassen Sie uns Kategorien hinzufügen. Wie Sie sich erinnern, haben wir zuvor die Authentifizierung für das Back-End deaktiviert. So können wir jetzt Kategorien hinzufügen, ohne authentifiziert worden zu sein. Wir werden das wieder aktivieren, wenn wir den Login und die Benutzer haben. Moment werde ich eine neue Kategorie hinzufügen, wie wir das tun werden. Normalerweise wird das Benutzerverhalten zu einem neuen gehen und dann werde ich eine andere Komponente hinzufügen. Und ich werde eine andere Komponente hier sehen, um den Namen der Kategorie und das Symbol hinzuzufügen. Und dann drücke ich „Speichern“. Ich zeige dem Benutzer eine Benachrichtigung, dass der Kategoriedarm erfolgreich hinzugefügt wurde. Und wir müssen wieder zur Tabelle gehen und unsere Kategorie zur Datenbank hinzugefügt sehen und diese Tabelle tun. Also sagte ich, dass wir auf eine neue Seite gehen, wenn ich auf Neu klicke, also brauche ich eine neue Komponente. Also lasst uns diese Komponente generieren. Ich muss eine neue Komponente generieren, die in der Admin-Anwendung unter Kategorien sein wird . Also zuerst gehen wir zu der NX generieren Komponente, und dann wird diese Komponente unter Getty sein und der Name der Komponente wird die Form der Kategorie sein. Und dann wird das Projekt admin sein. Und wieder machen wir die anderen Sachen, die wir vorher gemacht haben, Styling und überspringen Tests. Und dann sind wir sicher, dass alles in Ordnung ist, also es zu diesem Weg hinzugefügt. Ok, perfekt. Wir klicken auf Ausführen und dann sehen wir, dass die Kategorien Formular erstellt wurde. Also hier ist die Komponente fertig, wir müssen nur noch die Navigation zu 84 Kategorien hinzufügen, die Sie sich erinnern, dass wir den Router-Link und diesen Router-Link erstellt haben, werde ich es geben, zum Beispiel, Form. Und dann müssen wir im Modul einen neuen Pfad hinzufügen. Und dieser Weg wird die gleiche Struktur haben und wir geben ihm Antiquitäten Schrägstrich Form. Und hier werden wir die Kategorien Form Komponente nennen wir speichern. Gehen wir zurück. Wir klicken auf Sie. Wir sehen, dass wir zum Formularmodul oder Formularkomponente navigieren. Also jetzt werden wir die Struktur hier haben. Wir werden das Formular hier haben. Also würde ich gerne das gleiche wie seine Struktur haben wie wir diese Karte und auch Titel Untertitel haben, und dann kommt der Inhalt mit Steuerelementen hierher. Also lassen Sie uns das gleiche kopieren, was wir in der Kategorieliste getan haben. Also kopieren wir alles und fügen es hier ein. Wir entfernen die Tabelle, die wir bereits hatten, also brauchen wir sie nicht mehr in dieser Komponente und dann sind wir bereit dafür. Also hier brauchen wir nicht mehr und neu, wir müssen es auch als AD machen. Erstellen Sie zum Beispiel. So speichern wir, wir gehen zu Neu, wir sehen, dass wir eine erstellen. Also lasst uns den Text hier ändern. Zum Beispiel können wir sagen Kategorie hinzufügen. Und hier können wir auch sagen, hier. So haben wir nun den Titel und den Untertitel erstellt. Und auch wir brauchen, zum Beispiel, Benutzer wird verwendet, um die Kontrollen hier haben. Zum Beispiel, erstellen und einen Rat. Also lassen Sie uns eine weitere Schaltfläche in der Nähe erstellen. Und auch können wir dies ändern, um Khan Molkerei zu sehen und auch diese beiden primären. Und hier haben wir schaffen und das nennen wir es nicht schaffen, sondern abbrechen. Und danach haben wir alles erschaffen. Aber wie wir hier sehen, dass wir wie die Kunst, die aneinander kleben, diese Knöpfe, dies, weil wir brauchen, um einen gewissen Spielraum zu schaffen, oder? Aber dann denke ich, dass Sie in prime NG keine Klassen-Michelle-Klausel erstellen müssen und zum Styling gehen und dann diese Marge hinzufügen und ist nicht prime NG, die Ihnen im Raster so etwas wie fertige Klassen zur Verfügung stellt , , die Abstände genannt werden. Und diese Abstände, wie Sie hier in diesem Beispiel sehen, können Sie zwischen der Komponente zwischen den Blättern, zwischen den Spalten Abstand nehmen. So können Sie es auf eine Art und Weise verwenden, die Sie wollen. Also, wie können wir das benutzen? Er sagte hier, dass wir ein B erstes b minus und die Eigenschaft wie Marge, zum Beispiel, oder Polsterung haben müssen. Und dann können Sie sagen, Position oben, rechts, links zum Beispiel. Und dann der Wert, und der Wert kann von 0 bis sechs sein, und es hängt vom Raum ab. So können wir zum Beispiel für diese Schaltfläche verwenden. Wir können sagen, dass für mich dieser Knopf, B minus Marge, rechts vier sein wird, zum Beispiel. Also, wenn ich gehe, werde ich diese Räume hier sehen. Also lass es uns kleiner machen. Wir können zwei machen, und wir haben diese Basis hier. Also muss ich die Knöpfe rechts setzen, damit wir das nicht tun können, wie wir es vorher gesehen haben. Wir müssen das nur nach rechts ändern. Aber wir sehen keine Änderung, weil dies, Sie brauchen auch für Toolbar-Komponente, Sie müssen auch die linke angeben. Also selbst es ist leer, also mach es einfach so und du wirst es auf der rechten Seite haben. Also lasst uns auch das Symbol ändern, damit wir es nicht mehr brauchen. Wir brauchen ein Symbol, wie gehen Sie zurück oder gehen Sie aus. Also habe ich das Icon schon fertig. Also heißt es Pfeil. Geh. Links. Hier speichern wir und wir haben, das Symbol ist bereits hier. Okay, jetzt gehen wir zurück zu unserem Formular. Also, was ich tun muss, ist einfach etwas aufzuräumen. Wir müssen diesen Router-Link entfernen, da wir nicht auf Erstellen klicken. Also hier, wenn wir auf Erstellen klicken, müssen wir dies als Formular in der Datenbank speichern. Also zuerst müssen wir das Formular erstellen. Werfen wir einen Blick. Zwei Prime End. Gee, wie es das Formular für mich verwendet, ich muss Textfeld 14 auf den Namen der Kategorie und eine für das Symbol der Kategorie. Also zuerst gehen wir zu prime NG und wir überprüfen, wie wir die Eingabe verwenden. Zum Beispiel sehen Sie hier eine Menge von Eingabetypen, die Eingabe sind, die Eingabemaske der Gruppe, Eingabeschalter und auch Eingabetext. Und wie Sie hier sehen, haben wir diesen Eingabetext. Aber wenn ich dieses verwenden möchte, muss ich der Dokumentation folgen. Also muss ich auch Textmodul importieren und dann kann ich es verwenden. Also lasst uns das machen. Ich importiere das Textmodul in meine Module. Wenn Sie sich erinnern, wir haben U xs Modul hier. Also importiere ich es hier. Wieder, legen Sie es hier. Also haben wir Eingabetextmodul bereit, so dass ich ihre Komponente verwenden kann. Also lasst uns einfach anfangen. Ich möchte das hier benutzen. Ich habe hier. Und ich gehe zum Formular, oder zum Beispiel, hier erstelle ich ein Formular. Und diese Form wird zum Beispiel leer sein. Und in dieser Form werde ich wieder ein Gitter benutzen. Also werde ich wieder ein div dot py grid geben, weil ich sie nahe beieinander stellen möchte. Also habe ich hier div aufgerufen, zum Beispiel, für und auch um hier nicht das p. und auch ein anderes für einen anderen Text zu verpassen . Also hier, 12, speichern wir es, gehen zurück zur Anwendung, wir sehen, dass sie nahe beieinander sind. Lassen Sie uns also einen gewissen Rand hier im Raum zwischen der Symbolleiste und dem Formular selbst hinzufügen. So wie Sie sich erinnern, wir haben hier die Eigenschaft em, Marge oder zum Beispiel, Marge unten sein. Ich muss zum Beispiel fünf angeben. So werden wir hier sehen, dass es uns etwas Platz gibt, aber hier brauchen wir ein Etikett. Also lassen Sie uns auch einige Labels hinzufügen, oder C-Beispiel in prime NG. Also haben wir hier mehrere Etiketten. Aber jeder leidet, wie man diesen Eingabetext ausrichtet und zum Beispiel ein Kontrollkästchen oder wie wir diese Symbole mit den Lehrbüchern oder in der Nähe der Schaltfläche ausrichten, ist immer ein Leiden mit einer Form. Aber prime N G lösen dieses Problem durch die Schaffung vereinbart, vor allem für die Form. Es ist sehr großartig. Wenn Sie also zum Rastersystem ODER Prime Flex gehen, gibt es etwas, das Formularlayout genannt wird. Und im Formularlayout können Sie das Layout auswählen, das Sie Torheit Reform wollen. So wie Sie hier sehen, das, was wir brauchen genau vertikal und ein Gitter. So können wir hier gehen und sehen, den Code dieses Formulars. Also gehen wir hier wieder runter zur Vertikalen und abgestuft. Wir sehen, dass es eine Klasse namens Floyd verwendet. Und es verwendet auch Formularraster und das Gitter. Also lassen Sie uns diesen Teil kopieren und in unsere Anwendung einfügen. Also innerhalb des Formulars habe ich ein Gitter, ich entferne hier alles und eingefügt gehen Sie zur Anwendung. Wieder. Ich werde sehen, dass sehr schön und geführt für. Also lasst uns die Dinge umbenennen, damit wir das als Namen machen können. Und auch hier Name, das Etikett ist wie Name der Kategorie benannt und alles ist in Ordnung. Und dann Symbol. Und ich brauche hier auch Icon. Und hier klicke ich auf Speichern. Wir haben jetzt alles funktioniert perfekt. In der nächsten Vorlesung werden wir sehen, wenn wir auf Erstellen klicken, werden wir die Daten aus dem Formular lesen und die Kategorie in der Datenbank erstellen. 97. Kategorien Form hinzufügen: Okay, In dieser Vorlesung werde ich Ihnen zeigen, wie Sie Daten aus dem Namen binden, ein Symbol der Kategorie, wenn wir auf Erstellen klicken. Zunächst einmal werden wir nichts zur Datenbank hinzufügen. Wir müssen nur die Daten binden. Also brauche ich zum Beispiel, wenn ich auf Erstellen klicke, werden Sie hier in der Konsole die Daten sehen, die ich hier abgelegt habe. Also dafür müssen wir reaktive Form verwenden und wir müssen auch für das Modul verwenden. Also, um das zu tun, Lassen Sie uns Schritt für Schritt beginnen. Zunächst werde ich zum Formular Kategorien gehen. Ich habe alles hier. Also muss ich ein Formular erstellen, ein interaktives Formular, das mit Angular interagieren kann. Ich kann die Daten lesen, wenn ich das Formular absende oder wenn ich auf eine Schaltfläche klicke. Bisher haben wir in Angular etwas, das als Gruppe bezeichnet wird. So hat jede Form eine Form eine Gruppe. Und diese Formulargruppe enthält alle Steuerelemente wie diesen Namen und Symbol. Dafür müssen wir definieren, dass unser Formular eine Formulargruppe ist. Also können wir diese Eingabe oder Eigenschaft nicht angeben. Und wir sagen, dass wir diese wertvolle Form in meinem Gebäude verwenden werden, diese Form. So sehen wir, dass wir Fehler nicht Formulargruppe binden können , da es nicht bekannte Eigenschaft der Form ist. Warum? Weil wir für Modul importieren müssen. Also müssen wir zwei Dinge importieren. Zunächst einmal das Forummodul, das von Angular kommt. Und auch gibt es etwas, das reaktive Formularmodul genannt wird. Hier haben wir also zwei Komponenten oder zwei Module, die wir in unser App-Modul importieren müssen. Dann werden wir sehen, dass diese Richtlinie hauptsächlich funktionieren wird. So speichern wir App-Modul und wir müssen wissen, wie man dieses Formular erstellt. Also in dieser TypeScript-Datei oder der Codedatei dieser Komponente gehe ich hierher und ich muss wertvolle Form definieren. Wie Sie wissen, muss ich in Angular alles, was hier definiert ist, nachdem ich eine Eigenschaft oder Direktive oder die Eingabe definiert habe, nachdem ich eine Eigenschaft oder Direktive oder die Eingabe definiert habe,eine Variable haben. Diese Variable ist verfügbar oder muss in der TypeScript-Datei verfügbar sein. Also können wir das tun und sagen, dass das Formular für mich eine Art Formulargruppe ist. Und diese Formulargruppe, wie Sie sehen, ist es wichtig, automatisch von eckigen Formen eine reaktive Form in Angular zu erstellen, wir müssen einen Dienst verwenden, diesen Dienst namens Formulargenerator. Und um diesen Dienst oder einen Dienst anzurufen, verwenden wir private Formular-Builder. Wir geben einen Namen und ich importiere diesen, Formular-Builder und kommt auch aus der Angular-Bibliothek von Formularen. Wie Sie hier sehen, haben wir jetzt den Formular-Builder. Und bei der Initialisierung dieser Komponente muss ich definieren, was die Gruppenmitglieder dieser Komponente sind, all diese Form. Also muss ich das Formular irgendwie erstellen. Also sage ich, diese Punktform ist gleich diesem. Der Dienstformular-Generator. Gib mir eine ehemalige Gruppe oder eine Gruppe. Und diese Gruppe enthält mehrere Mitglieder, die Steuerelemente sind. Und die Steuerelemente, die wir in der HTML-Datei gesehen haben. Sie sind der Name und das Symbol, und sie werden hier gesteuert. Also müssen wir sie auch hier definieren. Ich werde Ihnen später sagen, weil wir dafür den Validator verwenden müssen. So wird angular mit diesem Formular interagieren, um jeden Fehler zu erkennen, den der Benutzer portieren kann. Also gehe ich hierher und sage diesen Namen. Also muss ich genau als die Eingaben angeben, die ich für diese Schriftart habe. Also habe ich hier Namen, wie der Name dieser Kategorie, und es wird Array sein. Und dieses Array, zum Beispiel, jetzt Standardwert davon ist leer und dann definiere ich das Symbol und das Symbol als auch. Es ist leer bei der Initialisierung dieser Schriftart. Und auch brauchen wir eine Eigenschaft, die Farbe genannt wird. Ich werde Ihnen später zeigen, wie Sie den Farbwähler verwenden, um eine Farbe aufzunehmen und in die Datenbank implementiert und eingefügt. Denn wie Sie sich erinnern, hat unsere Kategorie auch eine Farbe. Aber jetzt fange ich einfach wie möglich an. So lassen wir nur Namen und Symbol. Also, jetzt dieses Formular, erwartet, dass es Name und Symbol im Inneren hat. Und das kann in der HTML-Vorlage sein. Aber wie können wir sagen, okay, Sie, dieses Steuerelement, Sie sind mit dieser Formulargruppe verwandt. Wir können angeben, dass durch eine Eigenschaft, die Form Control Name genannt wird. Und dieser Name des Formularsteuerelements wird den gleichen Namen haben, den ich in der Formulargruppe angegeben habe. Also hier muss ich auch den Namen haben. Also hier sage ich, dass, dass diese Eingabe und dieses Feld genau dem Namen der Kategorie folgen. Dasselbe tue ich auch für die Ikone. Also gebe ich hier wieder Symbol an. Auf diese Weise habe ich das Formular verbunden. Mit reaktiver Form, die hier ist. Okay, warum machen wir das alles? Sehen wir uns nun an, wie man die Daten bindet und von den Eingaben liest. Nun, da alle unsere Schaltfläche erstellen, die jetzt kommt. Also müssen wir eine Funktion an diese Schaltfläche binden. Wenn ich darauf klicke. Wie wir das machen, ist sehr einfach. Ich gehe auf die HTML-Vorlage, ich gehe auf die Schaltfläche, und dann sage ich, dass eine Clique. Und dann sage ich auf Senden zum Beispiel, dies jede Methode, die Sie definieren können, jede Methode, die Sie für diese Schaltfläche wollen, und wir können diese Methode nicht testen. Also gehe ich hier und mache die TypeScript-Datei, die ich aus Energie darauf definiert habe. Ich definiere eine Methode, die onsubmit genannt wird. Lassen Sie uns Konsole so etwas wie zum Beispiel protokollieren, so etwas wie ich die Schaltfläche bin. Also hier haben wir die Schaltfläche, die geklickt wird und es wird für mich in der Konsole loggen ich bin Taste. Wenn ich darauf klicke, müssen wir solide, um auch die Vorlage zu speichern. Also, wenn ich darauf klicke, Ich habe, Ich bin der Knopf. Okay, lasst uns jetzt die Daten binden. Wir müssen also eine Möglichkeit haben, die Daten zu lesen, die ich hier eingebe. Und dann habe ich sie in die Konsole gesteckt. Wie können wir das machen? Zuerst müssen wir auf die TA zu gehen ist abgelegt und onsubmit Methode, Steve of Ion am unteren Ende sage ich diese Punktform, die wir bereits bauen, Punkt-Kontrollen. Und dann gebe ich das Feld an, zum Beispiel Name. Und dann sage ich Wert. Also muss ich den Wert dieses Feldes haben. Dasselbe tue ich auch für die Ikone. Also gehe ich hierher, speichere, und dann erstelle ich, und ich sehe, dass ich leer habe, weil ich nichts angegeben habe. Ich gebe hier an. Und ich werde sehen, dass ich die Daten bekommen habe. Also werde ich sagen, Kategorie ist Gesundheit. Und auch das Symbol ist zum Beispiel Symbolgesundheit. Wenn ich also speichere oder klicke, werde ich sehen, dass ich die Daten erhalten habe. Also jetzt müssen wir diese Daten lesen und sie in die Datenbank legen. Aber zuerst lassen Sie uns eine Validierung durchführen. Zum Beispiel, wie Sie hier gesehen haben, dass, wenn ich einen leeren Wert setze, ich sehe, dass ich keinen Fehler erhalten habe und die Daten gesendet werden. Also muss ich dem Benutzer zeigen, dass Sie zum Beispiel Mt Name und leeres Symbol nicht senden können . Also lasst uns das machen. Es ist sehr einfach, dass wir beim Erstellen der Formulargruppe oder des Formulargenerators angeben müssen, dass dieses Feld erforderlich ist. Und wie wir das machen. Wir tun in einer Weise, die wir eine Bibliothek namens Validators nennen. Und diese Validatoren haben eine Eigenschaft, die als erforderlich bezeichnet wird. Und es hat auch eine andere Eigenschaft wie max oder max Länge oder E-Mail usw. Für jetzt, was ich brauche, ist nur ein erforderliches. Daher wird dieses Feld erforderlich sein. Daher kann ich das Formular nicht nur senden, wenn es voll ist. Also, wenn nur, wenn der Benutzer Daten in dieses Textfeld, Okay, jetzt, wenn ich klicke, Ich sehe, dass ich immer noch in der Lage sein, zu senden. Lassen Sie uns dies beispielsweise so tun, dass, wenn das Formular ungültig ist , nichts in der Konsole protokollieren. Aber wenn es gültig ist, dann protokollieren Sie die Konsole für mich den Namen und das Symbol. Also, wie wir das tun können, Es ist sehr einfach. Ich sage, wenn dieses Punktformular gültig oder ungültig ist, dann tun Sie nichts, wenn Sie auf die Schaltfläche klicken. Also kehren Sie einfach zurück. Andernfalls protokollieren Sie die Konsole und führen Sie den Namen und das Symbol aus. Denn wenn Sie wissen, dass, wenn ich auf Zurück klicke oder wenn ich hier geschrieben habe, alles danach wird nicht ausgeführt. Also hier speichere ich. Und dann sehe ich, dass ich keine leeren Zeilen bekomme. Aber wenn ich Daten einfüge, sehen wir, dass wir die Daten bekommen haben. Von hier aus garantieren wir, dass das Formular wirklich gültig ist oder nicht. Aber was ist mit der Anzeige einer Nachricht an den Benutzer? Wie hier, zum Beispiel, sagen wir, dass ihr Name erforderlich ist, wenn er leere Daten einreicht. Also können wir das nicht sehr einfach machen. Wir gehen einfach zur Vorlage und nach der Eingabe können wir kein anderes Element haben, das klein genannt wird. Und dieses kleine hat Glas, das als ungültig bezeichnet wird. Und diese Klasse kommt mit Prime NG. Und darin können wir definieren, was die Methode für den Benutzer sein wird. Beispiel: Name ist erforderlich. Ich rette. Und wir werden sehen, dass dies immer angezeigt wird. Und was für mich ein Problem ist. Ich brauche nur, wenn es nichts in diesem Bereich gibt, möchte ich diese Nachricht anzeigen. Aber zuerst sehen wir, dass es nicht da an der, weil ich denke, die Klasse ist falsch. Wir können es in Fehler ändern. Und wir werden sehen, dass es redet. Ja. Also, jetzt haben wir es gelesen. Basierend auf der Fehlerklasse P, Error-Klasse. Also hier müssen wir angeben, wann es angezeigt wird. Wie Sie in Angular wissen, gibt es Energie, wenn ja in ng-wenn ich sage, wenn der Formularpunkt den Punktnamen ungültig ist, dann zeigen Sie diese Meldung an. Formularpunkt steuert Punktnamen, Punkt ungültig. Zeigen Sie dann diese Meldung an. Also jetzt haben wir es ungültig, aber wenn ich Text setze, sehe ich, dass es verschwunden ist. So jetzt, wie Sie hier sehen, Dinge zeigen und verstecken. Aber das Problem hier, dass, wenn ich zur Kategorie gehe, wusste ich , dass ich direkt sehe, dass der Name erforderlich ist. Ich möchte den Benutzer nicht direkt mit Fehlern überraschen. Ich möchte ihm nur den Fehler zeigen, wenn er auf Erstellen klickt und er ein leeres Feld hat. Also, wie wir es zuerst verstecken können. Also müssen wir überprüfen, ob der Benutzer auf die Schaltfläche geklickt hat oder wissen, wie wir tun können, das ist sehr einfach, dass ich hier zur ts-Datei gehe und ich sage, dass eingereicht wird, ist eine Variable, wo ich definieren kann immer platzieren Sie Ihre Variablen, immer oben vor dem Konstruktor, dann dem Konstruktor und dann der Initialisierung. Und ich werde Ihnen auch über die privaten Methoden erzählen. Also hier wird Typ Boolean gesendet, und es hat einen Standardwert, der falsch ist. Also am Anfang ist das Forum noch nicht eingereicht. Hier habe ich einen Tippfehler oder habe eingereicht. Und dann können wir jetzt auf die Schaltfläche auf Senden gehen und IC zuerst, dieser Punkt ist eingereicht ist wahr. Also hier haben wir die eingereichte ist wahr. Also kann ich jetzt sagen, dass, wenn dieser Fehler ng-if ungültig ist und das Formular gesendet wird , mir den Fehler anzeigen, aber nichts einreichen, dann nicht anzeigen. Also hier am Anfang haben wir nichts. Wir haben keine Pfeilpfeiler. Aber wenn ich das habe, habe ich keinen Fehler. Ich kann mich einreichen. Aber wenn ich es leere, sehe ich es wieder. Gehen wir wieder zurück. Zwei Kategorien werden ihn wieder von der Konsole hören. Also hier sagen wir, dass, wenn ich einreiche, ich diesen Fehler bekomme. Name ist erforderlich. Also muss ich hier ein paar Daten spüren. Auf diese Weise zeige ich, dass dies fremd erforderlich ist. Lassen Sie uns ein paar schnelle Refactoring machen. Also zuerst möchte ich in meiner HTML-Vorlage keinen sehr langen Namen haben. Also kann ich das tun und ich kann diesen Typ hier in einer Variablen machen. Es ist also sehr einfach. Sie können set und get verwenden. Also, wie wir das tun können, können wir definieren, zum Beispiel, erhalten Kategorie Form wird eine Methode sein und es wird für mich diese Punktform Punktsteuerelemente zurückgeben. Wenn ich also auf die Konturen dieses Formulars zugreifen möchte, sage ich einfach diesen Punktnamen oder dieses Kategorieformular, Symbol usw. So kann ich auf diese Weise auch darauf zugreifen und ersetzen. Also kann ich hier sagen, nicht Formularsteuerelemente, sondern Kategorie 4. Also speichere ich es, teste alles. Wir haben alles gut funktioniert. Also jetzt müssen wir es auch für das Symbol setzen, das ich hier gehe. Auch müssen wir das gleiche kopieren. Ich sage, dass Symbol erforderlich ist. Und hier anstelle des Namens, sage ich das Symbol. Also jetzt haben wir das Symbol und die Namensfelder sind erforderlich und wir sind in der Lage, die Daten zu binden und sie im Konsolenprotokoll zu sehen. In der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie diese Daten an die Datenbank senden , damit wir sie nicht auch auf unserer Kategorie-Tabelle sehen können. Was wir hier hinzugefügt haben. 98. Kategorien absendenden Daten zu Backend: Nun lassen Sie uns die Daten an das Back-End senden. Also habe ich hier einen Namen und ein Symbol, und ich werde eine Kategorie im Back-End erstellen. Also, wie können wir das tun? Zuallererst haben wir alles gesammelt. Also haben wir hier die Daten, die wir gesammelt haben, das Objekt, wir haben den Namen und das Symbol gesammelt. Also, jetzt brauchen wir auch einen Service. Wenn Sie sich erinnern, hatten wir einen Service, um die Kategorien zu erhalten. Jetzt brauchen wir den Service zum Hinzufügen der Kategorien. Also, was wir brauchen, ist, Kategorie Service zu importieren und fügen Sie die Kategorien hinzufügen Kategorie Methode. Also zuerst importieren wir es private Kategorie Service. Und dann sage ich Kategorien Service. So wird es automatisch wichtig sein, wie wir hier aus den Produkten sehen. Und wir müssen dorthin gehen und auch unsere Methode definieren. Also hier, irgendwie werde ich sagen, dass, wenn es ungültig ist, dann zurückkehren, sonst den Dienst verwenden und Kategorien hinzufügen finden. Aber jetzt haben wir es noch nicht definiert. Lass uns gehen und es tun. Um schnell zu gehen, innerhalb dieser Dateien ist, dass es so einfach ist, dass Sie nur Control und p drücken müssen und dann wird es für Sie alle Dateien öffnen. Sie können sie nach Namen dienen und dann können Sie Kategorien, Service sagen , und dann werden Sie direkt in die Datei springen. Das ist also so, als würde es Ihnen mehr Produktivität geben. Suchen Sie nicht nach der Datei in der Liste der Dateien. Also möchte ich, dass du den Ruhm erschaffen hast und sie Kategorie schaffen. Wir müssen auch die Daten senden. Also müssen wir die Daten der Kategorie senden. Also muss ich sagen, Kategorie hat eine Typkategorie. Also möchte ich die Kategorie selbst mit dieser Methode an das Backend senden. Und diese Methode wird dies durch die HTTP-Anfrage Punkt Post zurückgeben, weil wir Daten veröffentlichen. Und diese Daten werden zuerst die URL haben. Wie Sie bereits wissen, haben wir diese URL hier. Also haben wir die gleiche URL für das Posten der anderen, wie wir im Back-End gesehen haben. Und auch müssen wir die Daten angeben. Also die Daten, ich habe sie von hier, ich sage, setzen Folgt mir dieser Kategorie, das war's. Also, jetzt haben wir Kategorie erstellen. Ich gehe zurück zum Formular und dann werde ich sehen, dass in der Produkt- oder Kategorie-Services wir Kategorie erstellt haben, was ich brauche, um unsere Daten zu übergeben. Also müssen wir zuerst eine Konstante erstellen, nennen Sie es Kategorie. Diese Kategorie hat eine Typkategorie, und diese Kategorie hat den Eigenschaftsnamen, woher sie stammt, aus dem Kategorieformular, Punktname, Punktwert, wie wir zuvor gesehen haben. Und Konsole protokollieren sie und Symbol. Diese Kategorie bildet also das Symbol, diesen Wert. Auf diese Weise habe ich ein Objekt erstellt. Hier. Es ist kein Semikolon, aber es ist Komma, weil ich ein Objekt erstelle und dann werde ich diese Kategorie an diesen Dienst senden. Also lasst uns das versuchen. Jetzt. Ich gehe zu Erstellen. Ich füge hinzu, zum Beispiel, Gesundheit und sah für das Symbol, Ich klicke auf Erstellen. Und ich sehe, dass nichts passiert ist, denn auch wenn ich ins Netzwerk gehe, sehe ich, dass das Front-End keine Anfrage sendet. Deshalb, weil ich Ihnen gesagt habe, dass wir alles abonnieren müssen , was der Datenserver mich zurückschickt. Wie Sie sich erinnern, wenn Sie es hören, dass dieses Gute für mich beobachtbar zurückkehrt. Das gleiche, Boss ist auch wieder beobachtbar. Und wie wir zuvor im Backend gesehen haben, sendet mir das Backend zum Beispiel, wenn ich eine Kategorie erstelle, dass die Kategorie erfolgreich hinzugefügt wird. Dafür müssen wir nur diese Daten abonnieren, damit ich den Dienst nicht so nutzen kann, wie er hier ist. Also muss ich nur sagen, abonnieren. Also, wenn wir abonnieren und auf diese Weise bedeutet es, dass wirklich geben Sie mir eine Daten ausführen. Also hier habe ich Gesundheit und dann P Gesundheit. Und ich beobachte hier das Netzwerk. Wenn ich auf Erstellen klicke, sehe ich, dass die Kategorie erstellt und hinzugefügt wurde. Und wenn ich zu ihrer Liste der Kategorien gehe, werde ich sehen, dass es hier hinzugefügt wird. Also denken Sie daran, dass Sie immer abonnieren müssen, denn wenn Sie nicht abonnieren, Es ist wie Sie die Methode aufrufen, aber Sie haben nichts getan. Diese HTTP-Anforderung verfügt daher nicht nur ausgeführt werden, wenn Sie es abonnieren. Okay, ich bemerkte, als ich das hinzugefügt habe, Ich habe dem Benutzer nicht angezeigt, okay, Dies wird erfolgreich hinzugefügt, oder er hat Fehler oder etwas. Wir müssen irgendwie mit dem Benutzer interagieren. Ich muss hinzufügen, zum Beispiel, eine Benachrichtigung sagt, dass, okay, Die Kategorie wird erfolgreich hinzugefügt und automatisch zurückgehen. Zwei Kategorien, Tabelle in Prime Ende Sie, gibt es ein Modul namens Toast. Und dieser Toast, können Sie immer Benachrichtigungen für den Benutzer anzeigen, so etwas. So können Sie dem Benutzer immer eine Benachrichtigung anzeigen und diese verschwinden automatisch nach einiger Zeit. Also müssen wir das umsetzen. Also zuerst müssen wir das Modul importieren. Wie immer tun wir es. Also hier brauchen wir das Modul. Ich gehe zur UX der Module. Einer von ihnen hier, wie wir bereits gesagt haben, Lassen Sie uns die Kernmodule zuerst an der Spitze setzen. Also, um keine Probleme zu haben. Und dann haben wir auch die UX-Module zusammengefasst. Also hier haben wir ein Toastmodul. Okay, nett. Alles wird importiert. Kein Problem, wenn Sie diesen Fehler irgendwie erhalten, dass Sie das Frontend neu starten müssen. Wenn Sie also diesen Fehler erhalten, müssen Sie nur die Front und wieder neu starten, und es wird verschwinden. Und um diese Benachrichtigung zu verwenden, müssen Sie nur P toast anrufen. Also, wenn wir hier gehen und kopieren dieses HTML-Tag und wir gehen auf das Formular oben vor dem Formular hinzugefügt, Ich sage Pete verloren. Also speichere ich es hier, und dann müssen wir diesen Toast abfeuern. Also, wie wir gesagt haben, wenn ich auf Erstellen und alles erfolgreich klicke, dann werde ich diese Toast-Benachrichtigung auslösen. Also, wie machen wir das? Wenn wir in der Dokumentation fortfahren, müssen wir einen Dienst aufrufen, der Nachrichtendienst genannt wird. Und diese Nachrichtenserver werden ADD haben. Und dann würden Sie ihre Farbe angeben, die Erfolg ist, und die Zusammenfassungsdienstnachricht und die Details der Nachricht. Also lassen Sie uns den Dienst importieren. Ich gehe privaten Nachrichtendienst. Ich gehe auch hier zum Formular. Und auch wir haben hier viele private Methoden. Also hier haben wir auch den Nachrichtendienst. Sie müssen es also nur aus der Prime End API importieren. Danach funktioniert alles gut. Also muss ich wissen, nachdem ihre Kategorie zu Steuern hinzugefügt wurde, denn ich möchte eine Erfolgsmeldung anzeigen. Und wenn ein Fehler passiert ist, dann war ich eine fehlgeschlagene Nachricht. Also, wie Sie sich erinnern, haben wir gesagt, dass die Kategorie erstellen wird beobachtbar sein und es wird für mich einige Daten zurückgeben. So, wie Sie hier sehen, dass dieser Service rühmen wird beobachtbar mit den Daten. Also, was diese Daten, es wäre die Kategorie selbst, wie wir im Back-End erstellt haben. Also die neue Kategorie. Also hier werde ich einen Beitrag beobachtbar haben. Also hier werde ich einen Rückgabetyp haben, der beobachtbar ist, aber nicht beobachtbar ist, wird es eine Kategorie nur einzelne Kategorie, kein Array sein. also zur Komponente selbst des Formulars zurückgehe, sehe ich, dass ich, wenn ich eine Antwort erhalte , eine Erfolgsmeldung anzeige. Und wenn ich keine Antwort sehe oder Fehler von hinten erhalte und dann zeige ich eine Fehlermeldung an. Also, wie wir das tun können, die Antwort, ich verstehe es. Und dann werde ich hier sagen, dass dieser Nachrichtendienst Schweregrad angezeigt wird. Und dann werde ich Erfolg und die Zusammenfassung der Botschaft und das Detail davon sagen. Also hier werde ich sagen, dass ich zuerst die Erfolgsmeldung habe und der Typ ist Beispiel, Erfolg oder die Zusammenfassung ist Erfolg. Und dass ich sagen kann Kategorie oder Like Nachricht für die Menschen oder für den Benutzer, Kategorie erstellt. Und auch wir haben, wenn wir Fehler bekommen, dann müssen wir eine Fehlermeldung anzeigen. Also, wie wir das nach dieser Klammer tun können, haben wir ein Komma und wir sagen, dass Fehler, und dieser Fehler wird eine Funktion sein. Es wird für mich die Fehlermeldung zurückgeben, die ich in meinen Daten sehe. Also werde ich das Gleiche hier tun. Ich werde das hier holen. Ich werde sagen this.me dot add cyber t ist Fehler. Und dann werde ich zum Beispiel anzeigen, unsere Kategorie ist nicht erstellt. Aber zuerst müssen wir etwas hinzufügen, was sehr wichtig ist. Das ist die Vorlage, die Vorlage des Hosts selbst. Also haben wir hier die HTML-Vorlage. Wir werden sehen, normalerweise fügen Sie sie an den Anfang der Vorlage. So sparen wir, wir gehen zurück zu unserer Anwendung und wir gehen zu Neu. Wir bekommen immer noch Fehler. Dies ist ein Injektorfehler, da wir den Nachrichtendienst verwenden und er nicht in meinem App-Modul bereitgestellt wird. Also zuerst gehen wir wieder zum App-Modul. Und bei den Anbietern, wie wir zuvor gesprochen haben, müssen wir den Nachrichtendienst hier hinzufügen. Und dann müssen wir es importieren. Und wir sparen, und wir sehen, dass wir haben, alles funktioniert gut. Also lassen Sie uns jetzt eine Kategorie hinzufügen und wir sehen, ob wir die Toastnachricht bekommen oder nicht, die zum Beispiel Computer genannt wird. Und dann wird das Symbol sein, zum Beispiel können wir ein beliebiges Symbol auswählen, PCI, PCI, zum Beispiel. Ich weiß nicht, ob es existiert, aber das können wir später nicht sehen. So wie wir hier sehen, dass wir einen weiteren Fehler bekommen. Dies, weil wir kein Browser-Animationsmodul enthalten haben. Wenn Sie sich erinnern, im NGI Shop haben wir dieses Modul hinzugefügt, aber hier haben wir es nicht hinzugefügt. Also lassen Sie es uns noch einmal zu unserem Modul hinzufügen. Also, wenn Sie sich erinnern, haben wir hier ein Browser-Modul. Also müssen wir das, auch das Browser-Animationsmodul importieren . Und das wird wichtig sein. Hier. Wir sagen Browser-Modul, Animationsmodul von Angular und dann Plattform-Browser. Und nach dem Plattform-Browser sagen wir Animationen. Also hier haben wir das Animationsmodul importiert. Also lassen Sie uns diese Kategorie wieder erstellen. Wir müssen sagen, Computer und wir können PCI, PCI zum Beispiel sagen. Und wir schaffen, und wir sehen, dass Kategorie erstellt wird. Und lassen Sie uns unseren Tisch überprüfen. Wir sehen, dass es wirklich erstellt wurde und das hier erstellt wurde, weil es erstellt wurde und dann haben wir die Nachricht nicht bekommen. Deshalb ist es hier zwei Mal entstanden. Lassen Sie uns also einen Fehler machen, um zu sehen, ob der Fehler wirklich funktioniert. Also gehe ich zu ihrem Dienst, den wir geschaffen haben. Lassen Sie uns zum Beispiel einen Fehler in der ABI machen, können wir mit einem solchen Brief sagen. Also, wenn wir eine Kategorie hinzufügen, gehen wir wieder zu neuen. Ich würde sagen, wieder Computer. Und wir sagen PI BC ich erstellen, und dann bekomme ich Fehlerkategorie nicht erstellt wird weil die zurück und reagieren auf 4.4 nicht gefunden. Also lassen Sie es uns zurücklegen und alles funktioniert gut. Und wir haben die erstellte Kategorie. Lasst uns gegen ein Beispiel kämpfen. Setzen Sie den Benutzer automatisch wieder in die Kategorie-Tabelle , nachdem wir die Kategorie erfolgreich erstellt haben. Also, wie können wir das tun? Ich gehe wieder zu den Kategorien Formularkomponente. Nach dem Erfolg zeige ich die Meldung an. Ich werde einen Timer und diese Timeout einstellen, nachdem es fertig ist, dann gehen wir zurück zu Kategorien. Also zuerst müssen wir ein Timeout, Timeout haben oder Sie können es von note, unsere x js verwenden. Und Sie können innerhalb dieses Dimers angeben, wie viele Millisekunden Sie es ausführen möchten. Und dann sage ich, dass ich es verspreche. Also Diplome, wie nachdem es hingerichtet wurde, nach zwei Sekunden, dann, was Sie tun wollen, sagen Sie, zum Beispiel getan. Um also zurück zu Kategorien zu gehen, müssen wir einen anderen Dienst verwenden, der Location genannt wird. Und dieser Ort ist ein Service. Sie können es einfach importieren. Also hier haben wir auch einen anderen Service. Wir können es so privat nennen, und wir nennen es Location. Und diese Position ist Typ aus Position, diese Position von Angular gemeinsam. Okay, so wie wir hier sehen, haben wir Knotenmodule, eckig üblich. Also haben wir importiert und wir sehen, dass es wirklich von Angular gemeinsam ist. Also hier verwenden wir auch diese Methoden oder diesen Service. Wir sagen, diese Punktposition und dann schwinge ich zurück. Also will ich nur dahin zurückgehen, wo ich vorher war. Wir speichern alles als Stil. Wieder. Wir fügen hinzu, zum Beispiel, eine andere mit sagen, zum Beispiel, Ich möchte Elektronik hinzufügen. Und dann wird das Symbol PI elektronisch sein. Dies ist ein Icons sind nur zufällig, wir müssen sie später beheben. Also drücke ich Create. Und nach zwei Sekunden gingen wir automatisch zurück. So wie wir hier sehen, dass alles gut funktioniert. Wir haben, dass diese beiden, wir haben die Botschaften und wir haben auch Kategorien erstellt. In der nächsten Vorlesung werden wir sehen, wie man eine Kategorie löscht und wie man die Kategorie bearbeitet. 99. Eine Kategorie mit with löschen: Okay, in dieser Vorlesung werde ich Ihnen zeigen, wie Sie eine Kategorie und einen Bestätigungsdialog für den Benutzer löschen , wenn er eine Kategorie löschen wollte. Zunächst einmal gehen wir zurück zu unserer Tabelle der Kategorien. Wir müssen hier einige Aktionsschaltflächen für jede Kategorie hinzufügen, wie eine Schaltfläche zum Löschen und Botton für die Bearbeitung. So gehen wir zurück zu unserer Kategorie-Listentabelle. Und wenn Sie sich erinnern, haben wir hier die Kopfzeile der Tabelle und die Felder. Also muss ich hier zuerst einen anderen Header oder eine andere Spalte in der Kopfzeile haben. Lasst es uns leer lassen. Und hier möchte ich zwei Schaltflächen hinzufügen, eine zum Bearbeiten und eine für das Löschen. Statt dieses Kategorie-Symbols entfernen wir es und fügen hier zwei Schaltflächen hinzu. Der erste ist ein Knopf, den ich von oben kopiert habe. Es wird eine Straße oder Gefahr haben. Wir können es nennen, wie hängt davon ab, welche Klasse wir Label verwenden werden. Wir brauchen kein Etikett. Wir können es einfach löschen, weil wir nur Symbol für diese Schaltfläche und den Namen des Symbols brauchen, es ist nicht plus es wird PI, Soor und dieser Papierkorb sein. Für mich gibt es einen Router-Link löschen. Wir wollen keinen Router-Link, aber wir brauchen einen Klick. Wir werden das hinzufügen, wenn wir dafür bereit sind. Wir müssen eine weitere Schaltfläche hinzufügen. Und diese Schaltfläche wird für die Bearbeitung sein. Also haben wir hier eine andere Schaltfläche, aber es wird keinen Papierkorb haben, es wird ein Symbol namens Bleistift haben. Und wie Sie hier sehen, haben wir PI Bleistift und dann speichern wir. Und wir werden sehen, dass unsere Anwendung aktualisiert wurde. Aber hier müssen wir mehr Abstand zwischen diesen Tasten hinzufügen. Ich werde hier eine Klasse hinzufügen. Ich werde sagen, p minus Marge, oder? Dann fügen wir speichern und es wird diesen Abstand haben. Also lassen Sie uns überprüfen, wie wir die Tasten färben können. Wenn Sie sich erinnern, wenn wir zu Prime NG gehen, gehen wir wieder zu den Tasten und dem Knopf, dass wir eine andere Farben haben. So werden diese Farben zum Beispiel als Gefahr bezeichnet . Wenn Sie den ganzen Code sehen möchten, gehen Sie einfach zur Quelle und Sie werden alle Farben hier sehen, den ganzen Code, der dort geschrieben wird. Also lasst uns zwei Farben verwenden. Erstens können wir eine Gefahr zum Entfernen oder Löschen verwenden. Und auch können wir zum Beispiel Succes mit einem Grün verwenden , das zum Bearbeiten dient. So sparen wir, gehen zurück zu der Anwendung, Lügen, wir haben alles in Ordnung hier. Also lasst uns ein Klick-Ereignis auf dieser Schaltfläche haben. Also vor allem können wir hier addieren Methode, die onclick oder click genannt wird. Dann haben wir hier, zum Beispiel, Löschen Kategorie. Und ich möchte auch die Kategorie-ID übergeben, die ich löschen möchte, also kann ich Category dot ID sagen. Auf diese Weise garantiere ich, dass ich die richtige ID lösche. Diese Methode wird in der TypeScript-Datei deklariert werden. Ich gehe zur TypeScript-Datei der Kategorieliste und füge eine neue Methode nach NGOs hinzu. Ich nenne diese Methode DDD-Kategorie, und es hat Kategorie-ID als Parameter, der eine Zeichenfolge ist. Also, dafür müssen wir Kategorie Service Contiguity Service verwenden wird für mich eine Kategorie durch das Back-End löschen. Dafür müssen wir den Dienst erstellen, der für mich eine Kategorie löscht. Also gehen wir zu unserem Dienst. Ich sagte, Kategorie Service. Und ich habe hier in der Lead-Kategorie hinzugefügt, die Kategorie-ID als String akzeptiert. Und es gibt beobachtbar, vielleicht der führenden Kategorie oder vielleicht zum Beispiel nur ein Objekt zurück, ohne etwas anzugeben. Und auch die HTTP-Anfrage wird gelöscht. Also hier haben wir auch ein Objekt zurückgegeben, denn wenn Sie sich im Back-End erinnern, übergebe ich die ID an die URL und dann wird es gelöscht. Wie Sie hier sehen, haben wir hier die Backticks und auch die URL. Und dann habe ich die Kategorie-ID verwendet, die diese Methode durchlaufen wird. Wir sparen zurück zu unserem Bauteil. Wir würden die Kategorie Service nutzen. Also sagen wir dies obwohl, Kategorie Service Dot Delete Kategorie. Und dann übergebe ich Kategorie-ID, die ich von der HTML-Vorlage erhalten habe. Aber wie Sie wissen, wird diese Löschung nicht ausgeführt. Also gehe ich hier, ich sage abonnieren, und dann ging ich zur Antwort. Und diese Antwort kann ich eine Erfolgsmeldung oder eine fehlgeschlagene Nachricht anzeigen. Dafür müssen wir den Nachrichtendienst haben, den wir zuvor hatten, und auch die Toastnachricht. Also haben wir hier den Toast, wir kopieren ihn aus dem Formular. Und auch wir haben hier an den Anfang der Liste in der Komponentenliste hinzugefügt. Also hier haben wir diesen und wir rufen den Nachrichtendienst wieder an. Also, was ist das hier? Wir werden es erneut in unsere Komponente oder Kategorie-Listenkomponente kopieren, und wir nennen es, und wir sagen genau die gleichen Nachrichten, die wir dem Benutzer anzeigen wollten. Also möchte ich, wenn es einen Erfolg ISA gibt, dass Erfolg und Kategorie gelöscht wurden. Also sage ich hier Nachrichten oder Nachrichtendienst Succes Kategorie gelöscht wird. Und auch wenn es einen Fehler gibt, möchte ich dem Benutzer zeigen, dass es ein Problem gibt. Die Kategorie kann nicht gelöscht werden. So wie hier, die Klammern nach, vor dem Beenden des Abonnements, füge ich den Fehler ISA hinzu, die Kategorie wird nicht gelöscht. Also sparen wir, wir haben alles funktioniert jetzt gut. Und wenn ich versuche, zum Beispiel zu löschen , löschen wir diejenige, die sich doppelt befindet. Und dann sehen wir, dass die Kategorie gelöscht wird. Aber es wird nicht nur aus der Liste gelöscht, wenn ich zu einer anderen Seite gehe, zum Beispiel zum Dashboard und zur Kategorie zurückgehe, dann werde ich sehen, dass Kategorien wirklich benötigt werden. Wenn ich also etwas löschen möchte, möchte ich diese Tabelle aktualisieren. Es ist also sehr einfach. Wir rufen den Service einfach noch einmal an. So auf Erfolg der Löschung, können wir sagen, auch wieder aufgerufen für mich dies. Also lassen Sie uns Kategorie-Service, Kategorien wieder in eine Methode zu bekommen. Wir nennen diese Methode zum Beispiel privat, weil sie sich nur in dieser ts-Datei befindet, sie nirgendwo anders verwendet wird. So können wir sagen Get Categories. Es ist eine Methode. Innerhalb dieser Methode rufe ich diesen Dienst auf. Also zuerst rufe ich die Methode für NGO auf Edit auf, die diesen Punkt GetCategories aufruft. Und auch ich gehe nach einer erfolgreichen Nachricht oder einer erfolgreichen Antwort. Ich möchte diese guten Kategorien wieder haben. Also speichern wir, wir gehen wieder zum Frontend, versuchen etwas zu löschen. Schön. Wir haben aktualisieren, dass sie werden, und wir haben die neuen Daten als Löschen wieder. Schön, es ist gelöscht und wir haben Daten aktualisiert. Aber für mich als Benutzererfahrung fürchte ich, dass, wenn ich versehentlich darauf klicke und es gelöscht wird. Also möchte ich dem Benutzer einen Bestätigungsdialog anzeigen. Also, wenn er etwas löschen wollte, dann bekommt er eine Bestätigung. Wenn er wirklich die Löschung bestätigt oder nicht. Prime N G hat auch eine Komponente namens bestätigten Dialog. Und wenn Sie gehen, um den Dialog zu bestätigen und es auszuprobieren, zum Beispiel dieses, gibt es eine Bestätigungsmeldung mit einem Symbol und etwas Text. Ja und nein. Das ist genau das, was wir für die Besprechung und Bestätigung für unsere Löschung der Kategorie benötigen. Also, wie wir diese Komponente verwenden können, können wir zuerst auf die Dokumentation gehen und wir werden sehen, dass wir zwei Module oder ein Modul und einen Dienst importieren müssen. So wird das erste Modul Dialogmodul bestätigt. Wir können dieses kopieren und zum App-Modul gehen , wo wir das Modul oder das UX-Modul importieren. Und dann fügen wir es zu unseren UX-Modulen hinzu. Und wir müssen auch einen Bestätigungsdienst importieren. Und dieser Service, wir werden es in unseren Kategorien verwenden, am wenigsten Komponente. Aber zuerst müssen wir auch etwas HTML verwenden. Also muss ich diesen Code auch kopieren. Ich werde sagen, dass wir hier Bestätigung und Ikone und auch einen bestätigten Dialog haben. Oder es ist besser, auch das Beispiel genau zu verwenden, das hier ist, weil es mehr Eigenschaften hat, denn wie Sie wissen, hat jede Komponente viele Eigenschaften. Also, wenn Sie die Eigenschaft finden, die Sie wollen oder das Beispiel, das Sie wollen, verwenden Sie es einfach dasselbe. Also, wenn Sie das Beispiel dafür sehen möchten, bestätigen Sie, gehen Sie einfach zur Quelle und Sie werden hier das genaue Beispiel sehen. So wie wir hier sehen, dass in der grundlegenden, er verwendet dieses HTML-Tag p Bestätigungs-Dialog, und er gab ihm etwas Stil und auch Buchten Z, Index und etwas Styling für die Schaltfläche. Damit wir das hier kopieren können. Gehen Sie zu Kategorien Liste, und wir setzen es, zum Beispiel hier am Ende. Und jetzt müssen wir den Service haben, also wie er den Service Bestätigungsdienst benutzt. Also werde ich sehen, dass er ging, er auf die Schaltfläche klickt, er führt eine Bestätigungsmethode aus. Und diese Methode wird diese Eigenschaften haben. So hat dieser Bestätigungsdienst eine Bestätigung und es hat einige Optionen wie eine Nachricht, Header, Symbol, und auch wenn Akzeptanz und Ablehnung. Wenn ich also akzeptiere, lösche ich die Kategorie und zeige eine Erfolgsmeldung an. Aber wenn ich ablehne, tue ich nichts. Damit wir diesen Teil kopieren können, alles. Und wir gehen zu unserer Kategorieliste. Wenn der Benutzer also auf die Bedarfskategorie klickt , möchten wir ihm zunächst einen Dialog zeigen. Und dieser Dialog wird genau vom Bestätigungsdienst sein. Aber zuerst müssen wir Bestätigungsdienst importieren, wie wir zuvor gesehen haben. Also müssen wir ihren Bestätigungsdienst haben, der aus der Prime-Energie importiert wird. So haben wir hier Message Service und auch Bestätigungsdienst. Und wenn Sie Steuertaste oder Steuerpunkt drücken, würden Sie den Auto-Import erhalten. Jetzt zurück zu der Methode, werden wir sehen, dass, dass wir die Bestätigungsnachricht haben. So können wir das durch etwas wie ersetzen, wollen Sie diese Kategorie löschen? Und auch die Kopfzeile wird Delete Kategorie sein. Es ist also wie ein Titel dieses Bestätigungsdialogs. Und wir geben Ausrufedreieck als Symbol, um zu zeigen, dass es Gefahr ist. Also bewegen wir dieses Balkendiagramm, wo ist dieser Kategorie-Service? Und wir kopieren alles mit dem Pfeil selbst, und wir legen es in die Akzeptanz. Schön. Also jetzt haben wir den Bestätigungsdialog, Bestätigungsdialogdienst, und dann haben wir den Fehler und die Meldungen. Aber bei der Ablehnung werde ich nichts tun. Ich werde es einfach so behalten, damit wir nichts damit machen müssen. Wir sparen. Und wie ich Ihnen sagte, vielleicht werden Sie diesen Fehler sehen. Starten Sie einfach das Front-End neu und Sie werden es wieder an das Front-End loswerden. Wir probieren es aus. Wir werden sehen, dass der Bestätigungsdienst nicht zur Verfügung gestellt wird. Also gehen wir zum App-Modul, und wieder müssen wir den Bestätigungsdienst bereitstellen, wie wir mit dem Nachrichtendienst gesehen haben. Also kehren wir zurück zum Frontend und wir versuchen, eine Kategorie zu löschen. Ich sage, lösche das hier, okay, wir haben die Lead-Kategorie. Wollen Sie es in dieser Kategorie bekommen? Und wenn ich dann auf Ja klicke, sehe ich, dass es gelöscht wurde. Und auch Tisch wird aktualisiert, und ich habe eine Nachricht bekommen. Aber wenn ich jetzt klicke, passiert nichts. 100. Bearbeiten einer Kategorie: Okay, in dieser Vorlesung werde ich Ihnen zeigen, wie Sie eine Kategorie bearbeiten. Zuvor haben wir das Löschen gemacht. Jetzt wollen wir die Bearbeitung durchführen. Also wollen wir diese Schaltfläche funktionale Bearbeitung Kategorie wird genau die gleiche Form für eine neue Kategorie sein. Nur der Unterschied, dass wir die Daten der Kategorie bereits hier füllen. Und wir müssen auch diesen Titel ändern, um Kategorie zu bearbeiten und auch diese Schaltfläche zu sein, zum Beispiel, aktualisieren. Beginnen wir also von Anfang an. Lassen Sie uns eine Funktion geben, die wir 20 haben. Klicken Sie darauf, wir gehen zur Komponente des neuen. Also zuerst müssen wir diese Methode erstellen. Also gehen wir wieder, zwei Kategorien, Listenkomponente. Hier ist Kategorien am wenigsten Komponente. Und auf der Schaltfläche Update hatten wir hier, löschen, und auch wir hatten ein Update oder bearbeiten. Wir müssen eine Funktion hinzufügen. So wird es genau das gleiche sein, wie wir mit dem Löschen gemacht haben. Also muss ich einen Klick haben, und dieser Klick wird Update-Kategorie sein. Und ich will auch passieren. Sie Kategorie ID, weil ich die ID brauche, um die Daten der Kategorie zu erfassen. Also hier geben wir Kategorie ID. Wir gehen zurück zur TypeScript-Datei, wir gehen zur Kategorieliste, und wir fügen eine neue Methode hinzu. Wir nennen es Kategorie Update. Also hier aktualisiere Kategorie, und dann habe ich Kategorie-ID, die eine Zeichenfolge ist. Und diese Methode wird mich zur Form der Kategorie navigieren. Also wird es für mich zwei Kategorien für navigieren, so dass wir auf diese Weise einen Navigator brauchen. Also brauchen wir einen Weg, dass, wenn wir darauf klicken, es uns zu dieser Komponente navigiert. Natürlich können Sie es tun und weg auch in der HTML-Vorlage, Sie müssen kein Click-Ereignis haben, aber Sie können es auch direkt als Router-Link tun, wie wir vorher mit einem normalen Link gemacht haben. Aber ich möchte Ihnen auch zeigen, wie Sie navigieren können, wenn Sie das brauchen. Die TypeScript-Datei in Angular, gibt es eine Klasse, die Router genannt wird. Wir können es auch in den Konstruktor-Router importieren. Und es ist Router, und es kommt von Angular Router. Und wenn wir diesen Router verwenden möchten, gehen wir wieder zur Kategorie aktualisieren. Und ich sage, dieser Punkt Router Punkt navigieren durch URL. Und hier gebe ich die URL an, die der Router mich nehmen wird. Es wird also für die neue Komponente sein, die die Formularkomponente ist. Und hier sagen wir, wir haben Backticks. Wir, sagen wir Kategorieform. Und dann kann ich die ID angeben, die ich an diesen Link übergeben möchte. Und dann sagen wir hier, dass Kategorie-ID diese Kategorie-ID ist. Also möchte ich zu diesem Link wie ISA-Kategorieformular gehen, und dann übergebe ich die ID, zu der ich navigieren möchte. Aber das Problem hier, dass wir nicht diesen Link haben, haben wir nur wie das Forum. Wenn ich also auf Neu klicke, wird es mich zum Forum bringen, aber ich habe nichts mit der ID. Also lassen Sie uns das zum App-Modul hinzufügen. Wir gehen zur App-Moduldatei, und dann haben wir hier die Routen. Wir werden eine neue Route haben, die genau die gleiche wie die neue sein wird. Aber wir müssen hier eine ID hinzufügen. Wenn Sie dies also mit ID oder einem Schlüssel zuweisen, den Sie verwenden möchten, wird es wie ein Parameter haben, wie eine Variable. So können Sie das als Parameter verwenden und Wert davon in Winkel lesen. Und wir wollen auch auf Kategorien Form beziehen. Also lassen Sie uns überprüfen, ob alles gut funktioniert. Ich werde alle speichern, so dass alle Änderungen gespeichert werden. Wir gehen zurück zu unserer Anwendung, sie wird automatisch aktualisiert. Wir klicken auf Bearbeiten, wir sehen, dass alles stimmt. Wir haben zur richtigen URL navigiert. Und auch wir haben hier die Id, die Id ihrer Kategorie, auf die ich geklickt habe. Wenn ich also auf dieses klicke, werde ich eine andere ID haben. Wenn ich auf dieses klicke, habe ich auch eine andere ID. Basierend auf dieser ID werde ich angeben, dass dieses Forum zum Bearbeiten oder zum Hinzufügen einer neuen Kategorie dient. Dafür gehe ich zu ihren Kategorien und definiere eine Variable. Wir nennen es Editiermodus. Und dieser Bearbeitungsmodus wird am Anfang einen Wert erhalten, oder als Standard wird falsch sein. Es ist also nicht standardmäßig Bearbeitungsmodus, aber wir müssen es als Bearbeitungsmodus machen, wenn wir zur Bearbeitung einer Kategorie navigieren. Okay, Also, wie ich wissen kann, dass dieses Formular im Bearbeitungsmodus ist oder nicht, dies wird bekannt sein, wenn es Parameter nach diesem Link gibt, dann bin ich im Bearbeitungsmodus. Und wenn ich diesen Parameter nicht habe , bin ich nicht im Bearbeitungsmodus. Also, wie wir wissen können, dass ich zuerst eine Methode zur Energie beim Bearbeiten erstellen würde. Ich nenne es zum Beispiel diesen Punkt. Wir können diese Methode prüfen Bearbeitungsmodus aufrufen. Auf diese Weise werde ich in dieser Methode überprüfen, ob ich im Bearbeitungsmodus bin oder nicht. Also lassen Sie uns diese Methode definieren. Geh runter. Und wenn Sie es bemerkt haben, zeige ich die internen Methoden. Ich benutze Unterstrich hinter ihnen und eine Flagge sie mit einem privaten. Also brauche ich eine Möglichkeit, Parameter von ihrem Link, von der URL zu lesen. Ich muss wissen, ob es 3D-ID gibt oder nicht, wie wir das tun können. Wenn Sie sich erinnern, verwenden wir etwas namens Route. Aber hier im Herbst gibt es etwas namens aktivierte Route. Und das können wir es von Angular verwenden, um zu wissen, ob wir einen Parameter in der URL haben oder nicht. Also lassen Sie es uns nennen. Wir haben einen privaten oder Router. Und dieser Router, er nennt sich aktivierte Route. Und diese aktivierte Route kommt auch von Angular Router, oder es ist besser, Lassen Sie uns es nur eine Route nennen. Wir gehen zurück zu unserer Methode, die den Bearbeitungsmodus überprüfen ist. Wir gehen hier und wir sagen diese Punkte, Route Punkt, Parameter, wie die Parameter, überprüfen Sie für mich die Parameter, die in der aktuellen URL sind und dann abonnieren. Also möchte ich abonnieren, um den Link zu sehen und zu beobachten, wenn ich zu dieser Komponente gehe. Also erinnern Sie sich, wir abonnieren Observable. Und beobachtbar ist immer, uns einen neuen Wert zu geben. Es ist wie ein Herzschlag, Sie können sich jedes Mal vorstellen, wenn es mit einem neuen Wert kommt. Also verschwenden Sie sich auf den Täter, was er klickt, wenn er auf Hinzufügen zu dieser Komponente kommen und er hat ID oder Parameter im Allgemeinen in ihrem Link, dann würde das Abonnement abgefeuert werden. Und dann kann ich die Parameter lesen, die mit der URL kommen. Also, um diese Parameter zu lesen, die Abonnentenrückgabe für mich, Feuerwaffen, zum Beispiel, können Sie hier eine Variable definieren. Dann haben wir offene Pfeilfunktion und die Pfeilfunktion darin. Ich kann damit umgehen, was ich tun will. Zum Beispiel, wenn es Parameter gibt, ID, wenn es ID in diesen Parametern gibt, und dies wird genau das gleiche sein, das ich in einem Modul definiert habe. Also hier, wenn ich ID sage, dann muss ich auch nach ID suchen. Aber wenn ich es zum Beispiel Kategorie-ID nenne , dann muss ich hier auch nach Kategorie-ID suchen. Also, wenn es eine ID gibt, wie der Benutzer auf den Bearbeitungsmodus geklickt hat und es ID-Parameter in dem Link gibt. Dann machen Sie den Bearbeitungsmodus als wahr. Okay, jetzt sind wir im Bearbeitungsmodus, wir sind sicher, dass der Benutzer auf die Schaltfläche Bearbeiten geklickt hat und wir die Werte lesen, die von dieser Kategorie-ID kommt. Perfekt, Lassen Sie uns jetzt sparen und mal sehen, ob wir schwächeren Start einfach mögen. Wir können zum Beispiel sagen, lassen Sie uns diesen Text ändern, um Anzeige ist TD bearbeiten, wenn ich eine neue Kategorie hinzufüge. Und auch bearbeiten ist Td der Anzeige, wo ich Luftkategorie bearbeiten. Und auch diese Schaltfläche wird hier aktualisiert werden, wenn ich die Kategorie aktualisiere, wenn ich im Bearbeitungsmodus bin oder erstelle, wenn ich eine neue erstelle. Also lassen Sie uns tun, es ist sehr einfach. Also gehen wir auf die Vorlage, HTML-Vorlage, und wenn Sie ternäre Bedingungen kennen, Es ist wie in-line. Wenn ja, wenn ich diese Eingabe als bidirektionale Bindung definiere, kann ich die Werte hier lesen. So kann ich zum Beispiel Variablen sehen. Ich kann den Bearbeitungsmodus nehmen, wenn es möglich ist, ihn zu ändern oder nicht, oder darauf basierend lesen. Auf diese Weise kann ich den Bearbeitungsmodus wertvoll lesen. Also sage ich, wie war definitiv die Inline wenn Bedingung konditioniert, Ich sage Editiermodus. Wenn ich den Bearbeitungsmodus habe. Dann für mich hier, setzen Sie für mich hier, Kategorie bearbeiten. Aber wenn ich keinen Bearbeitungsmodus habe, dann mach es als Kategorie hinzufügen wie zuvor. Also hier haben wir basierend auf dem Wert des Bearbeitungsmodus angegeben. Wenn es wahr ist, dann ist es Bearbeitungsmodus. Aber wenn es falsch ist, dann ist es Kategorie oder Hinzufügen eines neuen Kategoriemodus. Speichern wir es und versuchen es noch einmal. Wir werden sehen, dass wir ADT Kategorie haben, aber wenn ich zurück zu Kategorien gehen, Ich klicke auf Neu, Ich werde sehen, dass ich Kategorie hinzufügen. Aber wenn ich hier gehe und auf diesen Bleistift klicken, werde ich sehen, dass ich Kategorie bearbeiten. Das gleiche, was ich tun werde, ist mit diesem Knopf. Also, wenn der Bearbeitungsmodus ist, dann machen Sie es als erstellen, aber sonst machen Sie es als bearbeiten. Also ist die Schaltfläche bereits in der Symbolleiste und ist sie hier? Also haben wir es hier als Create. Wir sagen also, dass das Label basierend auf dem Bearbeitungsmodus verfügbar sein wird. Also, wenn es Editiermodus ist, dann gib mir als Update. Und wenn es nicht Bearbeitungsmodus ist, machen Sie es wie erstellt oder wenn wir speichern, wir sehen, dass es ein Update hat, weil ich oder ich ID hier bin. Also, wenn ich zurück in die Kategorie. Nicht wahr, dass es Create ist. Gehen Sie zurück zu Kategorien, bearbeiten, dann wird es aktualisiert. So haben wir jetzt als taktische Veränderung vorgenommen. Also haben wir nur diesen Austausch basiert, wenn ich hier eine ID habe oder nicht. Also lassen Sie uns jetzt die Daten fühlen, die mit dieser Form kommen. Also brauchen wir eine API oder die Ecole, dass es für mich diese Kontiguität mit dieser ID ergreift. Dann fühle ich die Daten dieser Kategorie in diesen Feldern dieser Form. Und natürlich wird das alles im Bearbeitungsmodus sein. Wenn wir also zu unserer Funktion zurückkehren, die wir hier erstellt haben, müssen wir überprüfen, ob wir eine Kategorie mit dieser ID haben oder nicht. Also haben wir bereits diese Parameter ID. Also lese ich hier die ID. Also brauche ich einen Service, um eine Kategorie nach ID zu erhalten. Und das haben wir bereits im Backend erstellt. Wenn Sie sich erinnern, wenn ich in die Kategorie gehe und ich es nach ID nenne, folgt zum Beispiel, ich nenne diese. Und ich habe die ID nach ihrer Verbindung gesetzt. Und wenn ich schicke, bekomme ich diese Kategorie aus der Datenbank, die genau mit dem Detail wie Name, Symbol und Farbe ist. Also brauchen wir auch einen Service. Also, wenn wir zurück zu unserem Service, die Kategorie Service, wir müssen eine get Kategorie haben, Kategorien, aber eine Kategorie, so wird es die gleiche sein. Aber hier übergebe ich die Kategorie-ID, die eine Zeichenfolge sein wird. Und auch das Beobachtbare wurden für mich nur eine Kategorie zurückgegeben, nicht mehrere Kategorien. Also werde ich nur einen bekommen. Und am Ende werde ich hier die Kategorie-ID haben. Also werde ich hier wie plus Kategorie-ID haben. Oder wenn Sie möchten, können Sie die Backticks-Funktion verwenden. Also können wir hier wieder ankreuzen und auch wieder hören Tick und das Dollarzeichen und dann Isaac Kategorie-ID. In diesem Fall haben wir also die Kategorie-ID. Wir haben es genau mit diesem Service, aber wir müssen das umbenennen und wir haben es als gute Kategorie. Also gehen wir wieder zu unserem Formular zurück. Also können wir hier gehen, zwei Kategorien bilden. Und dann werde ich sagen, diese Punkt-Kategorie, Service dot get category. Und diese Kategorie akzeptiert Kategorie-ID, die in den Parametern ist. Also werde ich sagen params dot ID und dann abonnieren wie immer. Dann bekomme ich, okay, also Anfrage. Und dann werde ich etwas tun. Ich möchte die Felder der Kategorie so einstellen, dass sie in der Form mit dieser Kategorie sind, die ich vom Back-End erhalten habe. Wenn Sie sich erinnern, können wir diese Steuerelemente erreichen, indem Sie dieses Kategorieformular verwenden. Also sagen wir, diese Punkt-Kategorieform, Punkt-Name, Punkt-Soll-Wert. Also möchte ich den Wert dafür setzen. Also habe ich Wert Kategorie Punktnamen gesetzt. Also bekomme ich diese Kategorie und ich benutze den Namen davon, den ich vom Backend bekam, um den Wert des Feldes festzulegen, das sich in diesem Steuerelement befindet. Es ist also sehr einfach. Also hier haben wir dieses und auch ein anderes für das Symbol. Also werde ich sagen, obwohl Symbol Punkt Wert gesetzt und dann Kategorie Punktsymbol. Also lassen Sie uns das speichern, versuchen Sie es. Okay, wir haben schwer, was in Ordnung ist. Also haben wir, wieder, wir gehen zurück zu Kategorien. Wir haben hier eine Schönheit und wir haben Gesundheit. Wenn ich auf Gesundheit klicke, dann würde ich hier Gesundheit, Gesundheit bekommen. Und auch wenn ich auf Schönheit klicke, habe ich hier Schönheit, Schönheit. Und jedes Mal, wenn ich klicke, rufe ich das Back-End auf, um die Kategorie der aktuell besuchten Kategorie oder besuchten ID zu erhalten. Okay, was wir jetzt brauchen, ist, wenn ich diese Felder ändere und dann auf Update klicke, dann wird es wirklich in der Datenbank aktualisiert. Also, was wir brauchen, müssen Sie mit mir zuerst wiederholen, ein Service, der für uns in der Datenbank aktualisiert wird. Und wir müssen auch die Logik definieren. Wenn ich auf die Schaltfläche klicke, wird es eine Update-Anfrage senden, keine Anfrage, denn wenn Sie sich erinnern, wird dieses Formular nur zum Erstellen einer neuen Kategorie gemacht, wir müssen auch den Bearbeitungsmodus überprüfen, und dann entscheiden wir, ob es sich um ein Update handelt oder ob es eine neue Kategorie erstellt. Also lasst uns zuerst die Logik der Schaltfläche machen. Wenn ich auf diese Schaltfläche „Aktualisieren“ klicke, ist es, wie Sie sich erinnern, nur eine Schaltfläche. Wir ändern nur den Text. Also hier haben wir nur aktualisieren oder erstellen, und dann haben wir die Methode auf einreichen und einreichen. Ich überprüfe, ob dieses Formular gültig ist oder nicht, und erstelle dann eine neue Kategorie. Also vielleicht, nachdem wir die Daten ihrer Kategorie gesammelt haben, wie wir wissen, was der Benutzer in das Formular eingegeben hat. Wir können den Bearbeitungsmodus überprüfen. Wenn diese Punkte, Bearbeitungsmodus. Dann aktualisieren Sie für mich diese Kategorie. Sonst. Dann tun Sie für mich, Ich erstelle Kategorie. Dafür können wir eine Methode definieren. Wir können es diese Punkt-Update-Kategorie nennen. Es wäre eine private Methode. Und diese Methode wird für mich eine Kategorie akzeptieren. Also werde ich diese Kategoriedaten senden, die vom Benutzer gesammelt werden, und dann werde ich sie an diese Methode senden. Sonst. Dann werde ich auch eine andere Methode sagen, nur um unseren Code sauberer und lesbarer zu machen, können wir sagen, Kategorie hinzufügen oder erstellen. Und dann gebe ich wieder diese Kategoriedaten. Also müssen wir zwei Methoden definieren. So ist diese Methode bereits hier definiert, wir haben sie bereits hier. Also sagen wir nur private Kategorie hinzufügen, und diese Kategorie wird Kategoriedaten akzeptieren. So können wir sagen, dass wir hier auch Kategorie haben. Und dann können wir diesen Teil des Codes hier ausschneiden und dann in Kategorie einfügen. Also haben wir Kategorie innerhalb dieser Methode hinzufügen. Also müssen wir Update-Kategorie hinzufügen. Es wird das Gleiche sein. Also haben wir hier private Update-Kategorie und dann wird es eine Kategorie sein und es wird auch Art der Kategorie sein. Ich versuche immer, Ihnen zu zeigen, dass Sie immer Typen hinzufügen. Also wäre es besser für dich. Und mehr Code freundlich oder Entwickler Freund. Wir werden später auf der Grundlage der Regeln einige Refactoring durchführen. Zum Beispiel verwende ich keine Getriebe, damit ich diesen Parameter loswerden kann. werden wir später sehen. Also möchte ich, dass Sie das Video sehen, das ich über Refactoring machen möchte. Wir refactorieren all diesen Code, überprüfen unsere Probleme. Alles wird gereinigt, um es auf sehr saubere Weise zu liefern. Was ist der Unterschied zwischen Kategorie erstellen und Kategorie aktualisieren? Der Unterschied, dass die Kategorie erstellen, muss ich keine ID ihrer Kategorie übergeben, die ich aktualisieren oder erstellen möchte. Aber in der Update-Kategorie muss ich die neuen Kategoriedaten und auch die ID der Kategorie übergeben , die ich aktualisieren möchte, was diese ist. Also, ich denke, dass alle diese Methode genau die gleiche wie Add-Kategorie sein wird, außer dass wir auch die ID haben müssen. Also werde ich hier sagen, dass wir hier alles kopieren und hier einfügen können. Aber wir haben hier keine Kategorie erstellen, aber wir brauchen eine Update-Kategorie. Aktualisieren Sie also eine Kategorie mit der Kategorie, die ich aktualisieren möchte. Aber wie ich Ihnen schon sagte, brauchen wir auch den Ausweis. Also lassen Sie uns diesen Dienst erstellen. Zuerst gehen wir wieder zwei Kategorien, Service, wir erstellen den Dienst und dann werden wir über die ID diskutieren, wie wir es bekommen können. Also zuerst haben wir hier Kategorie erstellen, es wird genau das gleiche sein. Wir müssen nur diese auch ersetzen, Datumskategorie. Und dann lesen wir diese Kategorie. Es wird für uns eine neue Kategorie zurückgeben, die veraltet ist. Aber hier anstelle von Post müssen wir setzen hinzufügen. Und mit dieser PUT-Anfrage können wir die Kategorie aktualisieren. Und auch wir hören, wie Sie sich erinnern, bei der Aktualisierung der Anfrage müssen wir gehen, um zu setzen, wir müssen alle passieren. Also die ID der Kategorie mit neuen Daten. Es geht also nicht nur darum, neue Daten zu erhalten und zu senden, sondern wir müssen auch die ID übergeben. Also brauchen wir hier irgendwie, wie wir sagen, plus Kategorie-Punkt-ID. Ok? Aber das wird undefiniert sein, denke ich, weil wir in dieser Kategorie nicht angegeben haben, dass wir auch ID haben. Also, wie wir das tun können, gehen wir zurück zu unserem Formular hier. Also sagen wir, dass, okay, ich habe hier Update-Kategorie. Aber wenn Sie sich an die Kategorie erinnern, die hier in der Methode übergeben wird, hat sie nur den Namen, ein Symbol, aber sie hat nicht die Kategorie-ID. Okay, wenn Sie sich erinnern, wir haben die Kategorie-ID von wo aus, als wir den Bearbeitungsmodus überprüft haben. Im Bearbeitungsmodus kann ich also auch eine globale Variable wie in diesem Bearbeitungsmodus definieren, ich nenne es aktuelle Kategorie-ID. Also sage ich aktuelle Kategorie-ID. Und das wird zum Beispiel eine Zeichenfolge sein. Und am Anfang ist es nicht so, weil es am Anfang keinen Wert hat. Wenn wir also wieder in den Bearbeitungsmodus zurückkehren, müssen wir diesen Prüfbearbeitungsmodus haben. Und dann, nachdem ich den Bearbeitungsmodus zugeteilt habe, sage ich, dass dieser Punkt aktuelle Kategorie-ID params dot ID sein wird, denn wenn es ID gibt, dann weisen Sie es der aktuellen ID zu. Also, wenn wir sparen, denke ich, hier haben wir ein Problem. Wir vermissen das Ende des Abonnements. Bracket, also müssen wir es hier hinzufügen. Also seien Sie vorsichtig, wenn wir kopieren einige Mitarbeiter einfügen, um einige Klammern nicht zu verpassen. Wir überprüfen unser Terminal. Wenn wir hier kein Problem haben, dann sehen wir, dass, okay, wir haben fehlt, dass die Kategorie nicht definiert ist. Dies liegt daran, dass ich ihren Kategorie-Service nicht gespeichert habe. Also speichern wir es wieder. Ich klicke auf Kategorien. Ich möchte auch das Symbol Schönheit aktualisieren, also nicht, nicht löschen oder aktualisieren. Also werde ich hier eine Schönheit zum Beispiel sagen, wir beheben dieses Problem und wir entfernen dieses Symbol. Und dann klicken wir auf Update. Wir sehen, dass wir Fehler bekommen und unser Backend sagt, dass es undefiniert ist. Das ist undefiniert. Warum? Weil ich die Kategorie-ID gelesen habe, sie aber nicht an den Dienst weitergegeben habe. Wir haben hier die aktuelle Kategorie-ID. Also müssen wir nur das Objekt ihrer Kategorie erstellen das ich übergebe, um zu aktualisieren oder zu löschen oder zu entschuldigen, fügen Sie mit einer ID hinzu. Also werde ich sagen, ID wird diese aktuelle Kategorie-ID sein. Wenn es also eine ID im Bearbeitungsmodus gibt, schicke ich sie in den Bearbeitungsmodus. Aber wenn es keine gibt, dann schicke ich es sogar Es gibt keine, weil die Idee in der Datenbank erstellt werden würde , wenn ich eine Kategorie erstelle. Also lasst uns das retten. Noch einmal versucht, entfernen wir dieses Symbol und fügen Sie hier Schönheit wieder und hier eine Schönheit wieder, und wir klicken auf Update. Wir sehen, dass Kategorie aktualisiert wurde und wir gingen zurück zu der Liste dies, weil wir den gleichen Code kopiert haben, die 4 Kategorie hinzufügen. Also lasst uns einfach die Texte auswählen. Alles, was wir hier brauchen, wird aktualisiert. Kategorie wird nicht aktualisiert, wenn ein Fehler vorliegt. Also, wenn wir speichern, versuchen Sie, diese zu bearbeiten. So können wir sehen, hier Gesundheits-Update, Läuse, erhalten eine gute aktualisiert wird und es ist automatisch ging zurück. Und wir haben hier die aktualisierte Kategorie. Also als Zusammenfassung und schnell, so müssen wir angeben, ob wir bearbeiten oder wir haben NU. Wir verwenden das gleiche Formular, weil wir den Code nicht doppelt negieren müssen. Ich möchte keine weiteren vier erstellen, um eine Kategorie zu erstellen oder zu bearbeiten. So können wir die gleiche Komponente verwenden, aber unter verschiedenen Bedingungen. Also zuerst, wenn ich eine neue habe, erstelle ich einfach eine Komponente, kein Problem oder Kategorie. Und wenn ich bearbeitet habe, übergebe ich die ID ihrer angeklickten Kategorie. Und basierend auf dieser ID habe ich meine Sachen definiert und meine Logik definiert. Ich sage, das ist Edit, das ist Update oder nicht. Und auch ich fühle die Daten der Kategorie. Und wie wir das gemacht haben, sahen wir, dass wir diesen Wert aus den Parametern lesen. Und durch die Parameter schicke ich die Funktion wieder basierend auf dem Bearbeitungsmodus. Wenn ich im Bearbeitungsmodus bin oder nicht. Und dann aktualisiere ich diese Kategorie oder füge Eliyahu Kategorie basierend auf der Bearbeitungsmodusbedingung hinzu. Und natürlich brauchte ich für jede Bewegung, in der ich tun möchte , einen Dienst, der für mich die ausgewählte Kategorie aus der Datenbank packt. Und auch wenn ich die Kategorie aktualisieren möchte, habe ich einen Update-Kategorie-Service erstellt , der sich auch im Dienst befindet, um die Dinge aus der Datenbank über das Backend zu aktualisieren , das wir hier die API verwenden. 101. Farbauswahl für die Kategorie hinzufügen: Willkommen zurück. In dieser Vorlesung werde ich Ihnen zeigen, wie Sie einen Farbwähler erstellen. Denn wie Sie sich erinnern, dass unsere Kategorie auch mit einer Eigenschaft kommt , die als Farbprimzahl bezeichnet wird. Ng kommt auch mit einem Farbwähler-Steuerelement. So können Sie eine Farbe aufnehmen und den Wert verwenden und in der Datenbank speichern. Wie können wir diesen Farbwähler verwenden? Zunächst müssen wir das Color Picker-Modul importieren und es dann in unserem Anwendungsmodul verwenden, wie ich es hier getan habe. Also habe ich hier das Farbwählermodul und ich importiere es zu unserer YOU Belichtung. Als nächstes müssen wir eine Komponente verwenden, die Erbsenfarbwähler genannt wird. Also lasst uns das kopieren und zu unserem Formular gehen. Also möchte ich es auch in der Nähe des Symbols und des Namens platzieren. So können wir auch hier eine Farbeigenschaft haben. Ich zeige Ihnen dies, weil ich möchte, dass Sie wissen, wie Sie andere Eigenschaften hinzufügen so dass wir nicht nur Namen und Symbol in der Kategorie natürlich können wir Farbe haben, wir werden Bild haben, wir werden mehrere Dinge haben. So können Sie Ihre eigenen Eigenschaften basierend auf Ihren Bedürfnissen hinzufügen. Also zeige ich Ihnen diesen speziellen Vortrag, nur um Ihnen zu zeigen wie Sie weitere Eigenschaften hinzufügen, um praktischer zu sein. Also gehen wir zurück zu unserem Formular und finden das Feld. Also haben wir hier ein Feld erstellt, wie wir einen Namen und ein Symbol haben. Lassen Sie uns ein anderes Feld erstellen. Ich sage div. Ich gebe ihm eine Klasse, die B-Feld ist, und auch eine andere Klasse, die P-Aufruf genannt wird. Wenn ich also die Tabulatortaste drücke, werde ich sehen, dass sie einem div als Klasse zugewiesen sind. Also brauchen wir auch ein Etikett. So können wir dieses Etikett für Farbe haben. Und in diesem Etikett wird die Textfarbe sein. Und dann werden wir unsere Komponente hier platzieren. Also haben wir hier Farbwähler und Sie Modellfarbe. Aber wie Sie hier sehen, verwenden wir kein NG-Modell. Wir verwenden Formular-Steuerelement Name. Natürlich, diese Farbauswahl, ich bin sicher, in der Dokumentation, die sie darüber erwähnt haben. So können wir sehen, dass in modellgesteuerten Foren oder in reaktiven Formen, Farbauswahl auch in einer modellgesteuerten Form verwendet werden kann. Wie wir das tun können, geben wir ihm einfach einen Eigenschaftsformular-Steuerelementnamen, was ziemlich einfach ist. Also entfernen wir diesen Teil. Wir sagen, OK, Formular-Steuerelement Name. Aber wie Sie sich erinnern, haben wir gesagt, dass jeder Steuerelementname innerhalb unserer Formulargruppe sein muss, die wir in der ts Datei oder in der Codedatei erstellen. Also gehe ich wieder zu meinem Formulargenerator und einer Gruppe und füge dann die Farbeigenschaft hinzu. Also sage ich hier, füge für mich Farbe hinzu. Der Standardwert kann beispielsweise FFF sein. Also diese Farbe, die Breite, die ein Standard sein wird, wenn es keinen Wert gibt, kommt aus der Datenbank. Also lassen Sie uns alles speichern, um zu sehen, ob alles gut funktioniert. Zurück zu unserer Anwendung, sehen wir großartig, dass wir die Farbe hier haben. Also haben wir alles. Wir haben einen Farbwähler und was wir jetzt vermissen, da wir brauchen, wenn wir die Farbe aktualisieren, müssen wir sie an das Back-End senden. Also zuerst, wie Sie sich erinnern, wenn ich eine Kategorie hinzufüge, müssen wir eine Farbe aufgreifen. Und auch, wenn wir die Kategorie aktualisieren werden. Also fügen wir zuerst eine Kategorie hinzu. Wenn ich also eine Kategorie hinzufüge und auf die Schaltfläche Erstellen klicke, wenn Sie sich erinnern, erstellen wir das Kategorieobjekt. Wir haben ID, Name und Symbol, die wir aus dem Formular selbst abholen. Und dann schicke ich sie basierend, wenn ich im Bearbeitungsmodus bin und alles, wenn ich im Add-Modus bin. Also haben wir vorher darüber gesprochen. Also muss ich auch die Farbe senden. So wäre es genau die gleiche Art und Weise. Also werde ich auch sagen, Farbe wird diese Punktkategorie Form sein weil wir die Form in der Form definieren, dass wir auch eine Farbe haben. Also werde ich Farbe Punktwert sagen. Aber hier bekommen wir immer noch ein Problem. Wir haben ein Problem zu sagen, dass die Farbe nicht der Kategorie zugeordnet werden kann, wie die Farbe im Kategorietyp nicht existiert. Wenn ich also zu dieser Kategorie gehe, werde ich sehen, dass ich diese Eigenschaft bereits nicht habe, also können wir sie nicht hinzufügen und sie auch als optional hinzufügen , weil ich sie manchmal nicht brauche und sie auch optional ist. Danach, als ich es hinzugefügt habe, erscheinen diese Fehler. Lassen Sie uns nun versuchen, Kategorie basierend auf dem, was wir hier getan haben, hinzuzufügen. Also gehe ich zu unserer Anwendung, gebe einen Namen, zum Beispiel PC-Spiele. Und das Symbol wird ein PC sein. Und dann werde ich eine Farbe geben. Zum Beispiel, dieser eine rot. Oder lassen Sie es uns so geben, wie erkennbar zu sein. Und dann klicke ich auf Erstellen, achten Sie einfach auf Ihr Netzwerk, was wir an das Back-End senden. Wenn ich also auf Erstellen klicke, sehe ich, dass eine GUI erstellt wird. Und die Farbe, die ich gesendet habe, ist genau die Farbe, die ich ausgewählt habe. Und wenn ich wieder gehe, um diese Kategorie zu bearbeiten, werde ich sehen, dass die Farbe zurückgesetzt wird, um dies zu kleben, weil wir nicht initialisieren. Auch, wenn ich auf den Bearbeitungsmodus klicke, wie Sie sich erinnern, initialisieren wir diese Felder, diese Werte. Also, was wir brauchen, um die Farbe zu initialisieren. Das zu tun ist ziemlich einfach. Wir gehen einfach wieder zu unseren Kategorien Formular. Wenn Sie sich erinnern, wir tun den Bearbeitungsmodus überprüfen und den Bearbeitungsmodus injizieren. Wenn ich den Bearbeitungsmodus habe, setze ich die Werte dieser Felder auf den Anfangswert, den ich von der Datenbank bekomme. Also müssen wir nur diese Kategorie Form Punktfarbe hinzufügen und dann den Wert der Farbe auf Kategorie Punktfarbe setzen, die ich vom Back-End bekommen habe, das ich von der Datenbank bekommen habe. Denn wenn Sie sich erinnern, sendet uns unser Backend die Farbe, weil wir sie im Backend gespeichert haben. Also, wenn ich auf Speichern klicke, okay, gehen Sie zurück zur Anwendung. Wir sehen, dass die Farbe initialisiert ist und was eine tolle Sache ist. Also hier habe ich diese Farbe. Manchmal habe ich gar nichts. Also, weil es eine schwarze oder so etwas wie breit. Dies hat also bereits eine Farbe in der Datenbank. Also, wenn ich zu Kategorien gehe und ich bearbeiten möchte, werde ich die ursprüngliche Farbe sehen. Aber wie Sie sehen, mag ich es nicht so haben. Es ist in der gleichen Zeile ihres Labels. Also müssen wir nur dieses Symbol oder diese Farbe setzen, um in der gleichen Zeile mit diesen Eingaben zu sein. Also, um das Etikett oben und darunter zu haben, ist eine Farbe. Es ist sehr einfach hier. Ich werde tun, es ist sehr schnell. Ich werde nur eine BR hinzufügen. Br ist eine Bruchlinie. Wenn ich also speichere, werde ich sehen, dass ich hier eine Bruchlinie habe und diese Farbe habe, die ich auswählen und meine Kategorie aktualisieren kann. Fügen wir also auch diese Spalte zur Liste der Tabelle hinzu. So können wir hier ID, Name, Symbol und eine Farbe haben. Um das zu tun, können wir auch auf die Liste gehen. Ich habe hier eine andere td, die Kategorie, die Farbe ist. Und auch ich habe einen Header. So werden wir eine Kopfzeile der Tabelle haben, die Farbe genannt wird. So können wir es als Farbe haben. Und auch der Wert oder der TD ist diese Kategorie Punktfarbe. Wenn wir also dieses Formular oder diese Tabelle speichern, werden wir sehen, dass wir die Farbe haben. In der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie diesen Tisch verschönern können. Wir möchten, dass der Benutzer freundlicher mit der Benutzeroberfläche ist. Wie ich möchte, dass er das Symbol selbst sieht und auch möchte ich ihm das Recolor Lot, Texte und Codes wie diese zeigen . Also wollen wir dem Benutzer die reale oder die Realität der Kategorie zeigen, wie es aussehen wird. 102. Code überdecken: In diesem Vortrag möchte ich Ihnen zeigen, wie wir die Farbe und das Symbol auf der Tabellenliste der Kategorien anzeigen können . Also zunächst einmal, wie Sie sich erinnern, dass wir Icon Library verwenden, die von prime end zur Verfügung gestellt wird. Und diese Icon Library kommt immer mit einer Klasse II und dann BI, die Abkürzung für Prime-Symbol ist. Und dann geben Sie den Namen des Symbols an. Natürlich haben Sie die Möglichkeit, diese Symbolbibliothek nicht zu verwenden. Es gibt viele Symbolbibliotheken. Sie können sie verwenden, nur müssen Sie die Stylingdatei ersetzen , die wir zuvor hatten und die wir in den öffentlichen Dateien erstellt haben. Also müssen Sie nur hier gehen und sagen, dass ich zum Beispiel keine Prime-Symbole verwenden möchte . Ich möchte zum Beispiel Google-Materialsymbole verwenden. In diesem Beispiel zeigen wir, wie man Prime-Symbole verwendet. Also, wenn Sie sich in unserer Datenbank erinnern, dass wir nur den Icon-Namen speichern. Wenn ich zum Beispiel eines dieser Symbole verwenden möchte, möchte ich einen Kompass. Ich gehe einfach hierher und sage, dass das Symbol dieser Kategorie ein Kompass sein wird. Und dann klicke ich auf Update. Hier haben Sie zwei Möglichkeiten. Sie können den gesamten Namen des Symbols, wie PI-Symbol, speichern und dann speichern Sie es hier. Oder Sie können auch, Sie setzen einfach dieses Präfix und Hardcode, dieses Präfix, das wir hier in der Tabelle im HTML-Code brauchen. Dies hängt davon ab, ob Sie diese Symbolbibliothek verwenden möchten oder nicht. Also, wenn Sie eine andere Symbolbibliothek verwenden möchten, dann rate ich Ihnen, den ganzen Namen des Symbols zu speichern, das in diesem Feld ist. Oder wenn ich nur Prime N G-Symbole verwenden werde, wie ich hier tun werde. Dann speichere ich nur das Suffix dieses Symbols, das der Name des Symbols ist. Und hier im Code gehe ich zu dem Feld, wo ich den Symbolnamen bekomme. Ich genau, wie wir das Symbol verwenden. Und dieses Symbol wird eine Klasse haben, die P-Symbol und dann das Präfix selbst genannt wird. Aber wir machen es auf andere Weise. Also sagen wir, ng-class wird genau wie sein, zum Beispiel, wir setzen es auch in Klammern, so dass wir eine Variablen innerhalb der NG-Klasse verwenden können. Also wird die ng-Klasse in diesem Fall das Präfix selbst sein, wie PI plus Kategoriepunktsymbol. Also sage ich hier, dass ich kein Präfix oder Suffix haben möchte, aber ich möchte dieses Kategorie-Symbol verwenden, aber alles ist hier hartcodiert. Wenn wir also speichern, können wir sehen, dass wir das Symbol in der Tabelle bekommen. Also hier haben wir den, zum Beispiel, den Kompass. Ich möchte das auch ändern, zum Beispiel Gesundheit. Wir können ihm ein anderes Symbol geben, wie zum Beispiel, wir können dieses Herz haben, also können wir hier gehen und dieses ersetzen. Wir sagen Update, okay, gib es mir als Herz. Und auch können wir dies in so etwas wie In der Ikone ändern, so etwas, th groß. So können wir dieses sowie ein Icon haben, das ich aktualisiert habe. Und dann werden alle genau so platziert, wie ich sie in der Tabelle vorstelle. Andernfalls, wenn der Name falsch ist oder nicht in der Symbolbibliothek vorhanden ist, dann ist er hier leer. Sie können auch die Größe dieses Symbols ändern und es vergrößern. Es ist auch in der Dokumentation geschrieben, die Sie nur hinzufügen müssen. Auch Font-Stil, der hier kommt. Also Stil, Schriftgröße, geben Sie es, zum Beispiel, R, m, damit wir es so haben können. Also hier habe ich ich und dann gebe ich es als Zeit. Dieser Stil wird in unserem EM gespeichert. Und dann werden wir sehen, dass das Symbol als Benutzer oder Front-End-Benutzer wirklich größer wurde, ich interessiere mich nicht für die ID, weil es so lang ist und ich bin nicht interessiert, wie diese ID angezeigt wird. Vielleicht können wir diese ID-Spalte von hier entfernen, damit wir sie nicht mehr brauchen. Also entfernen wir es einfach und wir können nur den Namen und dann das Symbol und die Farbe haben. Wie Sie hier sehen, haben wir eine neue Tabelle und dann haben wir die Farbe für die Farbe. Ich rate Ihnen auch, dies zu ersetzen, um die gleiche wie die Farbe zu sein. Und es wird eine Hausaufgabe für dich sein. Ich werde nach dieser Vorlesung eine Hausaufgabe erstellen, ich möchte, dass Sie mir zeigen, wie Sie diesen HashCode durch die rote Farbe ersetzen können. Also möchte ich zum Beispiel hier ein div, das zum Beispiel die Farbe dieses HashCodes anzeigt . Okay, was ist mit dem Hinzufügen einer Sortierfunktion für die Tabelle? Wenn ich zum Beispiel auf die Kopfzeilen klicke, kann ich diese Spalten sortieren. So kann ich in diesem Fall nach Namen sortieren. Also lasst uns das aktivieren. Ich gehe zum Prime Endtisch und überprüfe, wie wir die Sortierung aktivieren können. Wie Sie hier sehen, haben wir einen Tisch und dann haben wir hier eine Sorte. Und dieses Beispiel zeigt uns, wie er nach dem sortiert, was Sie auf die Spalte klicken. Für mich möchte ich nur eine Spalte, auf der die Quelle aktiviert werden soll. Wenn wir also zur Dokumentation gehen, werden wir sehen, dass er ein Attribut an den Header der Tabelle anfügt. Also, wo er alle sortieren die Tabelle basierend auf zeigen will. Also möchte ich zum Beispiel basierend auf der Spalte sortieren, die Code genannt wird. Oder ich kann basierend auf einer Spalte sortieren, die name benannt ist. So können wir das auch für unseren Tisch tun. So kann ich hier gehen und kopieren Sie diesen Teil, wo es geeignete Spalte. Also gehe ich hier und gehe zum Namensfeld oder ihrem Namen Header, wo ich nach Namen sortieren und hier platzieren möchte. Also, dann werden wir eine Art von einem Spaltennamen haben. Und wenn ich speichere und zu unserer Anwendung zurückgehe, dann werden wir sehen, dass sie klickbar ist und sortiert wird. Aber es zeigt mir nicht das Icon, wo ich sortieren möchte, wie zum Beispiel von a nach Zed oder von Z zu a. Dann möchte ich auch ein weiteres Feld hinzufügen, das P-Quellsymbol genannt wird. Und dies ist eine Komponente, die verwendet werden kann, um das Symbol der Sortierung anzuzeigen. Und wie Sie hier sehen, dass er nach ihrem Namen platziert, wird es nach dem Namen, den wir hier erstellt haben, der Text selbst sein. So wird es das Symbol angezeigt, das wir in unserer Anwendung wollen. Also, wenn wir zurück gehen und wir werden das Symbol sehen, dann werde ich wissen, wie ich sortiere. Es gibt weitere Features, die der Tabelle hinzugefügt werden können. Aber lassen Sie uns es jetzt so für die Kategorie behalten. Denn wie gesagt, wir beginnen einfach, aber in den nächsten Vorträgen für Produkte und Benutzer, werden wir einige Filter hinzufügen, wie die Suche nach Produkt oder zum Beispiel, umschalten oder zum Beispiel, ändern Sie die Spalten. Das ist es, was wir tun müssen, was hier vorerst dokumentiert ist. Wie ich sehe, dass wir einen schönen Tisch haben. Es sei denn, wenn Sie dies tun und Sie die Färbung anzeigen, werde ich es auch zu ihrem Code dieser Vorlesung hinzufügen. Aber zuerst möchte ich, dass Sie es als Hausaufgaben machen und Ihre Aufgabe im Code-Repository oder auf der Codebasis der Hausaufgaben veröffentlichen im Code-Repository oder auf der Codebasis , die ich nach diesem Vortrag anhängen werde. 103. ESLint: Okay, in diesem Abschnitt haben wir eine Menge Code erstellt und viele Dinge geschrieben. Also bin ich sicher, dass wir auch viele Fehler gemacht haben. Also lasst uns sie mit Eastland reparieren. Eastland, wie Sie sich erinnern, ist Erweiterung, die wir auf Visual Studio Code installiert haben und die standardmäßig mit der NX Konfiguration kommt. Also hier, wie Sie sich erinnern, haben wir ein Präfix wie admin und auch einige andere Regeln, die Sie angeben können. Also lasst uns das durchmachen, was wir erschaffen haben. Zuallererst haben wir Kategorien Form. Wir sehen, dass wir hier einen Fehler bekommen, dass dies Präfixe als Admin sein sollte. Also lasst uns das reparieren. Also zuerst haben wir dies behoben, ich habe einen anderen Pfeil, den wir hier haben, dass Typ boolean Boolean ist. Wir definieren hier einen Boolean und wir sagten wieder, dass es Boolean ist, es ist kein guter Weg. Also in ES sagt lint Sie nur sagen, dass, wenn es boolesch ist oder es einem booleschen Wert entspricht. Also hier haben wir jetzt, dass nur falsch, dann wird der Code oder der Compiler automatisch wissen, dass dies eine boolesche Variable ist. Also lassen Sie uns hier den anderen Code überprüfen, wie Sie hier sehen, dass wir auch einige Fehler haben, wie diese Antwort deklariert wird, aber sie wird nie gelesen. Also möchte ich keine Antwort verwenden, wenn ich eine Kategorie erstelle, es sei denn, wenn ich sage, zum Beispiel, Kategorie und dann Name erstellt wird. So kann ich zum Beispiel diese Antwort verwenden. Zum Beispiel benenne ich es wie eine Kategorie um, denn wenn wir eine Kategorie erstellen, reagiert es für mich das Backend mit dieser Kategorie. Auf diese Weise muss ich zum Beispiel diesen Typ dieser Kategorie sagen . Und dann sage ich, dass er Kategorie hatte, ich entferne diesen Teil, benutze Backticks hier, ersetze es durch Backticks. Und ich sage, dass Kategorie, diese Kategorie Punktname erstellt wird. Wenn ich das also ersetze und zum Code gehe, erstelle eine neue Kategorie. Ich sage zum Beispiel PlayStation. Und dann ist das Symbol zum Beispiel spielen oder etwas anderes. Also, wenn ich eine Farbe wähle, dann werde ich sehen, dass die Benachrichtigung sagen würde Kategorie PlayStation erstellt wird. Also genau so, wie Sie hier wollen. Und auch hier verwende ich die Variable nicht, also kannst du sie einfach entfernen, um deine einfachste Spur zu halten , ist klar, dass dein Code klar ist. Auch die Pfeile, wenn Sie den Fehler nicht erwähnen wollen, okay, Also löschen Sie das einfach. Wir brauchen dich nicht. Das Gleiche ist, weil Sie auch mit der Update-Kategorie können, können Sie das gleiche hier tun. Zum Beispiel werde ich es löschen. Und auch hier muss ich das nicht erledigen. Also brauchen wir es nicht auch den Fehler. So, wie Sie jetzt sehen, haben wir einen sauberen Code, vier Kategorien, vier Komponenten im HTML. Ich glaube, wir haben kein Problem. Alles ist klar und finden Sie in der Kategorieliste auch. Wir haben auch etwas im HTML. Nein, das haben wir nicht, wir haben Rücksicht auf ihre Liste. Okay, wir haben hier einen Fehler, dass dieses Präfix admin sein sollte, sollte blaue Bits sein. Und auch wieder müssen wir diese ungenutzten Variablen entfernen. Zum Beispiel, hier, der Bestätigungsdialog sagt, dass okay, wenn ich akzeptiere, ich etwas tue, wenn ich ablehne, dann tue ich nichts, also ist es besser, es zu entfernen. Okay, Was wir auch im App-Modul erstellt haben, mal sehen, ob wir irgendwelche Probleme haben. Okay, wir haben hier kein Problem. Außerdem haben wir an der Kategorie Service gearbeitet, wie Sie sich erinnern. Also hier hatten wir auch einige Mitarbeiter erstellt, wie wir in der nächsten Vorlesung sehen werden, müssen wir dies durch 100 Variable ersetzen, denn wie Sie sehen, wiederholen wir die gleiche URL in jedem Kern. Also hier müssen wir das auch umgestalten. Hier gibt es mir ein Objekt ist sagen, verwenden Sie kein Objekt als Typ. Also habe ich hier einen Fehler gemacht, weil Objekt einen Nicht-Wissens-Wert bedeutet. Also in diesem Fall würde ich für das Beispiel sagen, lasst es uns löschen. Zum Beispiel, Kategorie löschen, wird es mir ein Objekt im Gegenzug geben. Also sage ich alle, so dass Sie jede für diesen Typ angeben können. So können Sie jede Antwort vom Backend erwarten. Warum speichern wir das? Okay, wir haben kein Fusselproblem, also funktioniert jetzt alles gut. Wir haben einen sauberen Code. Wir müssen uns nicht mit Fehlern im Editor beschäftigen. In der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie Umgebungsvariablen verwenden. Sie erinnern sich, dass Angular immer mit Umgebungsvariablen kommt, wie wir in der nächsten Vorlesung sehen werden. 104. Produkt-Liste: Okay, jetzt in dieser Vorlesung werden wir die Produkttabelle erstellen. Wie Sie sich erinnern, erstellen wir die Komponente und füllen dann die Vorlage aus, und dann rufen wir die Dienste auf. Lassen Sie uns zuerst zwei Komponenten erstellen. Eine für die Produktliste und die andere für die Produkte für. So wie wir es immer tun, gehen wir in der NX-Konsole zu generieren und wir suchen nach Komponente wie immer. Und dann werde ich ihm einen Namen geben. Wo ist der Pfad Pages und dann Produkte und dann Produktliste. Und das Projekt ist admin. Und wieder, wir brauchen kein Styling damit, weil wir öffentlichen Stil haben. Und auch müssen wir diese Tests auch importieren oder überspringen. Das war's also. Und wir überprüfen, ob alles in Ordnung ist. Okay, Es geht Admin, App-Seiten, Produkte, Produktliste und die Komponente. Wir führen es aus. Und wir schaffen eine andere Komponente wofür? Für das Formular. Also haben wir Forum und Liste genau wie die Kategorien. Also klicken wir auf Run. Und wir werden in unserer Dateiliste sehen, dass wir zwei Komponenten in Ihnen haben, die unsere Produkte bilden und Produktliste. Und sie sind unter den Seiten aufgelistet. Wie ich Ihnen am Anfang dieses Abschnitts in dem Artikel sagte, habe ich geschrieben, dass ich dasselbe mit Kategorien tun werde, also müssen wir nicht den gleichen Code wiederholen. Bringen Sie den Tisch genau so, wie wir es mit Kategorien gemacht haben. Wir können es einfach kopieren und Sie können diese Tabelle dann anpassen, um auf das Produkt zu passen. Zum Beispiel gehen wir zur Kategorieliste und wir kopieren den Inhalt davon. Also werde ich sie alle hier kriegen. Und dann werde ich das in die Produktlistenkomponente einfügen , wo es jetzt leer ist, weil es in dir ist. Und dann würden wir einige Fehler bekommen. Wir können sie beheben, basierend auf unseren Bedarf, und dann können wir die Daten der Produkte anzeigen. Das wäre ein schneller Weg. Ich möchte Ihnen zeigen, wie Sie den Code wiederverwenden und wie Sie wiederverwendbare Dinge implementieren können. Und wie ich Ihnen zu Beginn dieses Abschnitts gesagt habe, werden wir die neuen Dinge wie Kategorien umsetzen. Wie können wir eine ausgewählte Kategorien tun, und auch, wie Bild Upload des Produkts. Und auch, wie wir eine Reichweite Textbox HTML-Editor für die Beschreibung des Produkts haben können. So können wir uns auf die neuen Dinge und die vorherigen Dinge konzentrieren, die wir zuvor getan haben. Wir können sie nur kopieren einfügen. So wie Sie hier sehen, dass wir mit dem Toast beginnen müssen, okay, dass diese beiden gleich bleiben, was Bestätigungsnachrichten über Löschen oder Bearbeiten anzeigt. Und hier müssen wir den Titel haben, um ein Produkt zu sein. Und hier Liste aller Produkte. Und wieder, wir müssen ersetzen. Wir haben einen Knopf, der ein neues ist, okay, wir brauchen hier nichts. Und auch müssen wir diese Kategorievariablen ersetzen, die im Konstruktor vor dem Konstruktor hier definiert werden würde. Also kann ich eine Variable sagen, die Produkt genannt wird, und dieses Produkt ist nur ein leeres Array für jetzt. Damit wir das retten können. Und wir gehen wieder zur HTML-Vorlage und dann müssen wir diese Spalten ersetzen. So haben wir zum Beispiel am Anfang den Produktnamen, wenn Sie sich erinnern. Und wir brauchen auch ein Bild, wenn Sie sich daran erinnern, in unserem Back-End. Und dann müssen wir auch Preis haben, so dass es auch sortierbar ist. Also muss ich auch nach Preis sortieren. Also muss ich hier ein sortierbares Feld haben. Und auch wir müssen einen Vorrat haben, wie viele dieses Produkt in meinem internen Lager oder in meinem Lager. So können wir diese auch durch Lager ersetzen. Dann brauchen wir auch eine Spalte für diese Kategorie. Deshalb müssen wir hier eine Kategorie haben, zu der diese Produkte gehören. So können wir eine Kategorie haben und wir werden sehen, wie wir Kategorien mit den Produkten verbinden können , wie wir es im Back-End getan haben. Und jetzt brauchten wir hier im Frontend, um den Namen der Kategorie anzuzeigen. Wenn Sie sich erinnern, wurde das Backend ausgefüllt, das angezeigt wird, wenn dieses Produkt erstellt wird. So können wir sagen, erstellt bei, so dass wir wissen, dass dieses Produkt, in dem Zeit erstellt wird. Und wir können auch sortieren, basierend darauf. Wir müssen nicht nach Bild sortieren und dieses Feld oder diese Spalte wird die Aktion wie die Schaltflächen Bearbeiten und Löschen folgen. Okay, gehen wir zur Leiche. Also hier habe ich ein Produkt. Ich werde Ihnen zeigen, wie wir diesen Code am Ende dieses Abschnitts als optional reduzieren können. Es ist also optional, wenn Sie diesen HTML-Code umgestalten und in diesem Code reduziert möchten. Sie können also nicht zulassen, dass es so hartcodiert den Tisch. Manche Leute mögen es nicht. Sie verwenden gerne eine Schleifen hier. So können sie einige Konstanten oder einige Spalten einschleifen, die bereits EHR konfiguriert sind. Und dann können sie ihre Spalten basierend auf diesem Array ersetzen oder platzieren. Also, was hier jetzt sind wir hart codieren Dinge. In Zukunft werden wir sehen, wie wir das als fakultativ umgestalten können. Jetzt kann ich das alles duplizieren. Ich brauche hier Produktnamen. So können wir hier Produktname, Produkt haben, wie wir das Bild gesagt haben. Wir können auch ein Produkt, Produktpreis haben. Also haben wir hier auch Preis. Und wir können eine Aktie haben, wie viel in den Inhalt oder zählen auf Lager. Denken Sie daran, dass dieses Feld genau das gleiche sein muss, wie wir in der Datenbank erstellt haben. Also, wenn wir zum Postboten gehen, wenn Sie sich erinnern, wenn ich hierher gehe und ich Ihnen zeigen möchte, wann ich die Produkte aufliste, also bekomme ich die Produkte hier. Wir haben hier eine reiche Beschreibung, Bild und die Marke und auch Preisbewertung Bewertungen vorgestellt wird, Name Beschreibung, erinnern Sie sich? Also hier haben wir auch einige Zählung auf Lager. Also das, was wir brauchen, die Zählung genannt wird, ist Dock. Diese Felder sollten also genau die gleichen sein, die wir im Front-End verwenden. Um keinen Codekonflikt zu haben, können Sie einen anderen Namen verwenden, aber lassen Sie uns die Dinge konsistent und stabiler zwischen dem Front-End und dem Back-End halten. Also dann brauche ich eine Zählung auf Lager und auch wir brauchen die Kontiguität. Und hier werden wir auch Problem haben. Wir werden es später zeigen, weil, wie Sie hier sehen, dass wir in Ordnung sind, diese Kategorie zu bekommen. Aber die Kategorie ist Objekt. Also im Inneren, dass wir sagen Kategorie dann Name. Aber ich möchte es jetzt so behalten, nur um sich darauf zu konzentrieren und Ihnen zu zeigen, wie es wirklich genau aus der Datenbank kommt. Also, jetzt brauchen wir eine Produktkategorie und am Ende brauchen wir eine Spalte für erstellt bei. Also haben wir hier sagen, erstellt bei. Und es sollte genau das gleiche Feld sein, genau wie es hier ist. Es ist also nicht zu seinem Datum erstellt, erstellt. Also müssen wir das Gleiche hier setzen, andere Dinge, die wir nicht brauchen, damit wir sie löschen können. Wir müssen auch diesen Teil löschen. Wir brauchen keine Farbe, aber die Tasten, wir müssen sie halten, nur ersetzen wir die Methoden, so dass wir ein Produkt sagen können, hat es Produkt, und auch, wir müssen Update Produkt haben. Und hier haben wir keine Kategorie-ID mehr, aber wir haben hier eine Produkt-ID. Andere Dinge sind genau gleich. Wir müssen nichts tun. Lassen Sie uns unsere Anwendung überprüfen, es sei denn, wir müssen zum App-Modul gehen, ich werde Ihnen zeigen, warum. So gehen wir wieder zu unserer Anwendung und klicken auf Produkte. Wir sehen, dass wir keine Route haben, die zu den Produkten passt, daher müssen wir Routen auf die gleiche Weise hinzufügen. Wir haben drei Routen, vier Kategorien, Kategorien Formularkategorien, Formular-ID für die Bearbeitung des Produkts oder der Kategorie. Genau das Gleiche. Wir müssen das Gleiche tun, aber wir müssen IT-Produkte nennen. Und hier bilden sich Produkte. Und wieder bilden sich ein Produkt. Und die Komponente, die hier automatisch importiert wird, ist Produktlistenkomponente und Produktform. Lassen Sie uns sie nach oben verschieben, um mit diesem Komponententeil zu sein. Und dann können wir sie in der Anwendung unten verwenden. So können wir hier keine Produktliste haben. Und auch müssen wir hier Kategorien oder Produkte bilden Bestandteil haben. So haben wir hier Produkte bilden Komponente. Alles ist in Ordnung. Wir speichern, wir gehen zur Anwendung, wir haben keinen Fehler. Wir überprüfen hier Produkte, okay, wir haben jetzt alles und alle Spalten. Aber wir haben leere Daten, weil wir ein leeres Array hatten. Also, was wir jetzt tun müssen, ist nur überprüfen und greifen die Daten, die wir zuvor im Postboten gesehen haben , und legen Sie sie in unsere Tabelle und sehen, wie wir den Service genau erstellen können. Auch wie die Leckereien und erstellen Sie das Modell des Produkts. 105. Produktservice und Get in der Datenbank: Okay, in dieser Vorlesung werden wir die Tabelle, die wir in der vorherigen Vorlesung erstellt haben, mit den Daten füllen . So wie wir hier sehen, dass wir die Daten kommen aus der Datenbank und auch aus dem Backend mit einigen Feldern für alle Produkte, wie Liste der Produkte. Und das ist die API, die wir bereits hatten. Also zuerst müssen wir diese Reihe von Produkten füllen, genau wie wir es mit Kategorien gemacht haben. Also müssen wir zuerst einen Service haben. Ich denke, der Service, wir können es auch in der Produktbibliothek platzieren, wie wir es mit Kategorien getan haben, so können wir das gleiche hören. Wir können auch den Kategorie-Service haben, aber wir können ihn ersetzen und ihn in Produktservice umbenennen. So haben wir hier Produkte. Und dann werde ich hier die Datei haben, die Produkt services.js genannt wird. Und dann möchte ich es in die Module oder in das Modul selbst der Bibliothek exportieren müssen. So können wir hier ein Produkt haben und wir brauchen auch ein Modell zu haben. So wird das Modell genau wie die Felder des Produkts sein. Also werde ich sie schnell füllen, um nicht irgendwann zu verschwenden. So können wir hier eine Produktakte haben. Wir können dies auch ein Produkt nennen. Und ich werde all diese Informationen genau füllen, wie wir sie im Backend haben. Also möchte ich auch die gleiche Benennung der Felder beibehalten, die vom Backend stammen, um alles konsistent zu halten und keinen Konflikt mit ihrem Back-End-Entwickler zu haben. Also haben wir hier den Namen, wie eine String-Beschreibung ist eine Zeichenfolge. Beschreibung ist auch String, wie wir im Backend, Bild gesehen , wird eine Zeichenfolge sein, die das Hauptbild des Produkts sein wird. Bilder, die das geringste der Bilder des Produkts sein werden, die wie zum Beispiel sind, werden wir sie für eine Galerie verwenden, wie wir in der Zukunft sehen werden. Auch eine Marke, die wieder String sein wird. Und der Preis ist, sollte hier sein. Eine Zahl, nicht als Zeichenfolge. Kategorie wird Typ der Kategorie sein. Also habe ich hier diese Kategorie aus dem Kategoriemodell importiert und diese Kategorie als Kategorie platziert. So wird die Zählung im Stopp eine Zahl sein, und auch eine Schätzung wird Zahl sein. Die Anzahl der Bewertungen wird angezeigt. So können wir das Produkt auf der Homepage anzeigen oder nicht, und es wird ein boolescher Wert sein. Und dann das erstellte Datum, das ein String-Datum sein wird. Und auch hier müssen wir es importieren oder exportieren. Daher müssen wir dieses Modell exportieren, damit wir es an anderen Stellen unseres Projekts sehen können. So können wir auch Produkte hieben. So werden wir Produkt und auch Kategorie haben. Aber hier müssen wir es nicht Produkte, sondern Produkt umbenennen , weil wir eine Klasse nur für ein Produkt geben. So werden wir hier ein Produkt und eine Kategorie haben. Also, jetzt werden wir zum Dienst gehen und wir benennen alles um. Also zuerst müssen wir hier Produkte haben. Und auch, es wird die gleiche URL sein, weil wir die gleiche URL für das Back-End sagen. Und auch hier werden wir ein Produkt für das Präfix oder Suffix dieser URL haben. Und dann lasst uns das ganze Zeug auskommentieren, damit wir eins nach dem anderen anfangen können. Also, was wir jetzt brauchen, wir haben Produkte, also lasst uns machen, Produkte holen. Und es wird genau das gleiche sein, aber was es wurde Reihe von Produkten zurückgegeben, die nicht für uns nur Kategorien zurückgeben, aber es wird ein Produkt zurückgeben. So haben wir hier ein Produkt und das Produkt. Und dann brauchen wir diese Kategorien nicht, damit wir sie entfernen können, weil sie nicht mehr verwendet wird. Okay, jetzt ist unser Service fertig. Wir müssen nur auf die Anwendungsebene gehen und dann können wir diesen Service nutzen. Also werde ich hier zur Anwendung gehen, zur Produktliste. Und wie Sie sich erinnern, haben wir das auch in Kategorien getan. Also lasst uns das schnell machen. Zuerst muss ich den Produktservice anrufen. Also werde ich hier sagen Produkt oder private Produkt-Service, die von Typ Produkte Service sein wird, wie Sie sehen, es ist bereits bekannt, so und es ist aus dem Arbeitsbereich importiert und der Name haben wir hier ein Problem, Es ist ES fusselt Problem, also müssen wir dies als admin aufrufen und dann eine Methode erstellen. Wir können es diesen Punkt nennen, um Produkte zu bekommen. Und wir werden diese Methode implementieren. Also gehe ich nach unten, sage privat, unterstreichen Produkte. Und in diesem guten Produkte, Ich werde sagen, diese Punkt-Produkt-Service, die Produkte bekommt, wie wir zuvor gesehen, und dann abonnieren Sie diese Bibliothek oder dies beobachtbar, wie wir sahen. Und dann werden die Produkte im Rückruf des Abonnements zurückkehren. Und dann kann ich sagen, diese Punktprodukte, die Variable, die ich hier definiert habe, wird auch von Produkten sein. Also bin ich beiseite Tinte, dieses Produkt zu den Produkten, die aus dem Backend zurückgekehrt. Also danach, Speichern wir es und versucht, unsere Anwendung zu aktualisieren. Und wir sehen, dass wir die ganzen Daten bekommen, die wir brauchen. Okay, nicht alles ist perfekt, aber gehen wir eins nach dem anderen. Okay, der Name ist in Ordnung. Das Bild, wir müssen das Bild ersetzen. Wie wir in der nächsten Vorlesung sehen werden, ist der Preis in Ordnung, in Ordnung. Lager, die Anzahl auf Lager ist in Ordnung. Beide Kategorie ist Objekt. Also müssen wir einen Weg finden, warum es so kommt. Wenn Sie also wissen möchten, was vom Back-End zurückkehrt, haben Sie im Frontend keine Möglichkeit, Postbote zu verwenden, dann können Sie zum Netzwerk gehen und Ihre Anrufe überprüfen. So zum Beispiel, hier habe ich die Kategorie oder Produkte genannt. Also Produkte, ich habe alle Produkte. Hier. Ich gehe wieder hierher, und ich sehe, dass Kategorie ist, Objekt, ist nicht wie ein Feld. Und diese Kategorie, wie wir uns erinnern, haben wir Bevölkerung für diesen gemacht. Also hier haben wir Kategorie und dann ihren Namen. Also im HTML unserer Anwendung oder der Vorlage selbst, müssen wir sagen, dass wir nicht die Kategorie nur haben, sondern Kategorie Punktnamen. Deshalb sage ich dir, dass du das gleiche tippen sollst. Jetzt kann ich den Kategoriepunktnamen nicht sehen und habe keinen Fehler oder Fehler. Und wie wir hier sehen, kam diese Kategorie genau so, wie wir wollen. Okay, was ist mit dem Date? Das Datum, wie wir hier sehen, ist aus dem Format formatiert, das aus der Datenbank stammt. Um dieses Format zu beheben, können wir etwas in Angular verwenden, das die Pipe genannt wird. Und diese Pfeife, wenn Sie es verwenden, unsere Suche nach ihm in der Angular Bibliothek, werden Sie sehen, wie wir es verwenden. Wenn Sie also nach unten gehen, können Sie die Optionen oder das Beispiel sehen, wie wir das verwenden können. Sie müssen eine Datumszeichenfolge und dann oder Objekt angeben. Und dann sagen Sie Dieses Zeichen und dann Datum, und dann geben Sie die Option an. Es gibt viele Optionen zum Formatieren der Datumsangaben in Angular, daher sind alle hier aufgelistet. Oder Sie können auch eines dieser 3D-Formate wie langen Tag, ganzen Tag, kurze Zeit, mittlere Zeit verwenden. Es gibt viele Möglichkeiten für mich. Ich werde dieses verwenden, das Diagramm genannt wird. Also, wie können wir das benutzen? Also können wir hier gehen und dann setzen wir diese Spalte und dann können wir sagen, und ich möchte ein Date mit Kurzformat haben. Und nachdem wir speichern und versuchen, dass in unserer Anwendung, okay, das Datumsformat Spiele, wirklich perfekt. Okay, auf diese Weise haben wir das Datum formatiert. Die nächste Vorlesung. Es wird sein, wie ich Ihnen sagte, wir werden das Bild zeigen, das vom Backend hierher kommt. So sehen Sie in der nächsten Vorlesung, wie man dieses Bild umsetzt. 106. Zeige das Produktbild im Tisch: Es ist sehr hilfreich, dass der Benutzer auch das Bild seines Produkts in der Tabelle sehen kann. Es ist also sehr einfach, wie wir das tun können. Wenn wir zu den Feldern gehen, erinnern Sie sich, dass wir das Header-Bild haben und dann greifen wir die Daten des Bildes. Und das Bild kommt, wie du L bist, wie wir gesehen haben, wie es aus dem Backend kommt. Und wenn wir hier ein Bild haben wollen, ersetzen wir einfach diesen Teil hier durch Bild. Und dieses Bild wird Quelle und auch Wechsel haben, wenn es nicht angezeigt werden kann. Wenn wir also das Produktbild verwenden möchten, müssen wir das nur tun und das Produktbild hier platzieren. So wird es funktionieren. Aber ich bevorzuge immer zwei Kette, so dass Sie diese Klammern hier nicht benutzen müssen. Sie müssen also diese Klammern nicht verwenden, also können Sie dies durch Klammern wie diese ersetzen. Dies wird also wie eine Bindung oder Zwei-Wege-Bindung in Angular sein. Es wird also sagen, dass die Eingabe des Bildes oder des Bildes eine Quelle sein wird und Variablen akzeptiert. Es wird also eckige Variablen akzeptieren, nicht zum Beispiel Stärken, wie wir im normalen HTML wissen. Also hier haben wir das Produktbild. Wenn wir speichern, dann werden wir sehen, dass wir die Bilder bekommen. Aber wie wir hier sehen, sind sie sehr groß, weil sie nicht in der richtigen Weise gestylt sind. Also, was wir tun können, können Sie auch einige Nägel erstellen. So können Sie kleine Bilder hochladen. Sie müssen also im Backend ein Feld erstellen, das Thumbnail genannt wird. Oder Sie können es auch hier tun, indem Sie die Größe nach Stil ändern. Du gehst einfach hierher und sagst Stil. Zum Beispiel wird es eine Breite haben, die 100% sein wird. Also gehe ich mit diesem Weg, was natürlich sehr einfach ist. Sie können auch ein kleines Bild hochladen, wo es einige Nägel mit einer festen Größe und Sie werden sehen, wie es aussah hier. So zum Beispiel, Ich habe dieses Produkt mit sehr hohen, Also muss ich es auf diese Weise zu halten. Aber Sie können auch ein quadratisches Bild erstellen. Das ist also nur ein Beispiel für Sie. Sie können tun, was Sie fühlen und perfekt für Sie, für Ihre Tischdisplay. 107. Erstellung von Produktformular.: Okay, in dieser Vorlesung werden wir sehen, wie wir das Formular für das Hinzufügen eines Produkts erstellen können. Also, wenn Sie sich erinnern, dass wir die gleiche Kategorie hatten, klicken wir auf Sie, dann gehen wir in die Form von Kategorien und die hier Formular für das Hinzufügen eines Produkts sein wird. Also können wir nicht dasselbe benutzen. Wir können als Vorlage aus Kategorien Formular beginnen. So können wir diese kopieren, die Kategorien bilden und in Produkte eingefügt werden, bilden sich ebenfalls. Aber wir werden ein anderes Feld brauchen. Wir werden alle Fehler beheben, die wir hier bekommen. Und auch werden wir eine neue Steuerelemente wie einen Schalter verwenden, wie ein Rich-Text-Feld, Textbereich und Selektor. Das ist genau so, wie Sie in der Demo am Anfang der Admin-Panel-Abschnitte gesehen haben. Also würden wir den gleichen Toast haben, der die Konformation sein wird Produkt hinzuzufügen oder ein Produkt zu aktualisieren. Und auch hier werden wir einen Wächter haben. Und der Wächter wird einen Header haben, und dieser Header wird hier sein, Produkt. Und auch hier unser Produkt. Und hier haben wir auch Produkte. Also werde ich es wie eine schnelle machen , weil wir alles in den Kategorien erklärt haben. Also hatten wir hier auch den Bearbeitungsmodus. Also müssen wir eine Variable definieren, die Editiermodus genannt wird. Und dieser Bearbeitungsmodus wird zum Beispiel am Anfang des falschen Wertes haben , wir haben eine Symbolleiste und die Symbolleiste wird auch, links und rechts haben. Es wird auch den Bearbeitungsmodus haben, aktualisieren oder erstellen Sie eine Schaltfläche für onsubmit und eine Schaltfläche für auf Abbrechen. Genau das gleiche, wie wir es mit Kategorien gemacht haben. Okay, wir kommen jetzt zu der ernsten Arbeit. Wo ist zum Beispiel die Formulargruppe? Also muss ich auch eine frühere Gruppe in dieser Komponente definieren , wie wir es mit Kategorien getan haben. In diesem Fall müssen wir eine andere Variable oder ein anderes Klassenmitglied definieren, das Form genannt wird. Und dieses Formular wird eine Art von Formulargruppe haben. Und um diese Formulargruppe zu bauen, müssen wir einen Dienst verwenden, der Formulargenerator genannt wird. Also werden wir hier ein Privates haben, und privat wird ein Formular-Builder sein. Und dieser Formulargenerator stammt vom Typ Formulargenerator. Und hier können wir eine private Methode haben. Wir können es definieren. So können wir diese Punkte in dieser Form zum Beispiel sehen, wir haben das nicht in der Kategorie gemacht, aber ich zeige Ihnen, wie Sie Schritt für Schritt weiterentwickeln können. Also hier setzen wir alles in und g auf jedem, wie beim Initialisieren der Komponente. Wenn ich auf Neu hinzufügen klicke, wird diese Komponente initialisiert. Also mache ich hier die Form, aber jetzt mache ich es verständlicher. Also werde ich es in einer Methode gruppieren und es setzen, die darin die Form genannt wird. Also müssen wir eine private Methode definieren, die in ihrer Form aufgerufen wird. Und in dieser Init-Form müssen wir das Formular selbst erstellen. Also würde ich sagen, diese Punktform Builder Punktgruppe. Und dann werden wir anfangen, unsere Gruppe aufzubauen. Dann müssen wir hier sagen, dass diese Form der Gruppe entspricht , die wir jetzt aufbauen werden. Diese Gruppenmitglieder werden also genau die gleichen Felder des Produkts selbst sein. So wie Sie sich erinnern, hatten wir einen Namen, wir haben den Preis, wir hatten zum Beispiel Kategorie, wir hatten auch, Bild und Bilder. Ich werde sie auflisten, alle hier und dann werden wir sie schnell erklären. Also will ich nicht tippen, um keine Zeit für dich zu verschwenden. Okay, so wie Sie hier sehen, haben wir den Namen, der erforderlich ist und auch Marke ist auch erforderlich. Auch der Preis ist auch erforderlich Sache Kategorie selbst, die auch aus dem Backend kommen wird oder wie wir es im Backend posten können. Und es wird ein Selektor sein, wie eine Liste, die Sie durch sie auswählen und nach einer Kategorie suchen können, wie wir später sehen werden. Und zählen Sie in der Bestandsbeschreibung, reiche Beschreibung, die nicht erforderlich Bild. Ich denke, wir können es jetzt für als Autor erforderlich machen und wird auch vorgestellt. Wir können es auch sagen, nicht erforderlich. In der gleichen Zeit müssen wir diese Elemente oder dieses Formular Steuerelemente in der Vorlage erstellen. Also aus der Kategorie hatten wir bereits Namen, zum Beispiel, aber wir brauchen kein Symbol, wir brauchen keine Farbe. Wir müssen sie durch die richtigen Komponenten ersetzen. So zum Beispiel, Name wäre gleich bleiben und auch Marke. Es wird auch eine Texteingabe sein und wir können das auch ersetzen. So können wir sagen Marke hier und auch eine Marke hier. Und so gut können wir hier alles als Marke haben. Und hier müssen wir wie zum Beispiel die Abkürzung erstellen , wie wir zuvor darüber gesprochen haben. Also können wir das so machen. Wir sagen, erhalten Produktform und diese Punktform Punktsteuerelemente. Und dann werden wir hier haben, nicht gut ist vier, aber Produkte bilden. Das ist also wie unsere Vorlage, also müssen wir diese Vorlage jedes Mal verwenden, wenn wir erstellen. Und Uniform. Ich habe alles im Detail erklärt, wie wir jeden Schritt dieses Formulars in den Kategorien erstellt haben, okay, wir platzieren dies mit einer Marke und auch, wir brauchen einen Preis. Also Preis leisten, es wird kein Textfeld sein, es wird eine wichtige Zahl sein. Also eine Eingabenummer, wie Sie hier sehen, können wir etwas namens Eingabenummer verwenden. Und diese Eingabenummer von Prime NG ist so großartig. Es gibt Ihnen eine Menge, eine Menge, eine Menge Optionen. Ich werde dieses verwenden, das ohne Gruppierung aufgerufen wird. Also zuerst müssen wir das Modul importieren. Wie immer gehe ich zum App-Modul, importiere das Modul der Eingabenummer und lege es dann wieder hier in unsere u x-Module. Und dann können wir verwenden oder verwendet Beispiele, so können wir sagen Quelle. Und wenn wir sortieren gehen, werden wir ohne eine Gruppierung sehen, also müssen wir diese verwenden. Also zurück zu unserer Vorlage. Wir werden keine Farbe brauchen, aber wir werden hier einen Preis brauchen. Also, und wie wir vorher vereinbart haben, werden wir nicht ng-model wie zwei-Wege-Bindung wie Eingabe und Ausgabe in der gleichen Zeit verwenden ? Nein, weil wir hier ein Formular-Steuerelement haben und dann dieses ein Formular-Steuerelement Name für es wird ein Preis sein und das Label wird hier ein Preis sein. Nun hier Preis und wir brauchen auch Preis hier. Wenn wir also gehen und es überprüfen, werden wir sehen, dass alles korrekt ist. Und es hat hier etwas namens Eingabe-ID. Wir können es kopieren und es auch als Preis machen. Und dieses Feld ist erforderlich. Also müssen wir auch eine Validierungsbenachrichtigung für den Benutzer hinzufügen , wenn er legt oder er keinen Wert darin legt. So werden wir sagen, dass dieses Produkt Form Punktpreis ungültig ist und eingereicht wird, dann zeigen Sie mir Fehler, dass der Preis erforderlich ist. Auch dies ist eingereicht Variable. Wir können es auch in der Komponente definieren. Also sagen wir, hier ist am Anfang eingereicht ist eine falsche. Also mal sehen, was wir im Front-End haben. Also, nachdem ich alles gespeichert habe, gehe ich nach vorne und wieder, werde ich das Werbeprodukt sehen. Ich habe Sie erstellen Schaltfläche, Abbrechen Taste. Wir haben Name-Marke und Preis. Und wie Sie hier sehen, kann der Benutzer keine Buchstaben setzen, aber er kann nur eine Zahl setzen. Also hier müssen wir eine Kategorie haben, Kategorie. Ich ziehe es vor, die Liste zu verwenden, wie ich Ihnen später zeigen werde, ein Dropdown-Menü und dieses Dropdown, Es kommt auch als Komponentenfilter, wie wir in der nächsten Vorlesung sehen werden. Lasst uns die einfachen fühlen. Also werde ich auch hinzufügen, die Zählung ist tok und Beschreibung. So zählen auf Lager wird wieder eine Zahl sein. Und diese Nummer wird Lei sein, nicht in ihrer Nähe. Es wird in einer neuen Zeile sein. Also habe ich auch Affäre, um ein neues Gitter zu schaffen, das unter diesem Teil sein wird. Wie Sie hier sehen, haben wir alle in diesem Raster gruppiert. Aber wir können jetzt eine neue erstellen, wie eine neue Zeile. Und diese Zeile, weil dieses Formular Felder. So können wir das gleiche Angebot kopieren, den Preis und wir sagen, die Anzahl auf Lager. Also habe ich sie hier ersetzt. Also haben wir jetzt für alles auf Lager gezählt, und alles ist als Eingabenummer definiert. Wenn wir also aktualisieren, werden wir sehen, dass unsere Komponente mit einem Kult auf Lager aktualisiert wird, aber es ist voll. So können wir auch ein kleines, kleines Futter definieren. Also können wir hier sagen, ich will nur Spalte 4. Also muss ich dies als Formularspalten haben, wie wir hier sehen. Aber auch, Sie können eine Nudel auf andere Weise definieren. Sie müssen also kein Raster erstellen, aber Sie können auch sagen, dass ich auch eine Spalte haben kann, aber es wird auf Reichtum sein. Sie können hier vier und 12 haben, aber wenn es nicht passt, wird es automatisch zu einer neuen Zeile gehen. Siehst du hier. Und es ist, als hätten wir eine neue Zeile definiert. Also das, was ich mit einer Beschreibung tun werde. So werden wir hier 12 Spalten haben, vier Spalten für den Kult ist reden. Und auch, wir werden hier in der Nähe haben für die Kategorien. So können wir das auch fühlen, aber wir werden keine Eingabe Nummer vier Kategorien verwenden. Wir würden das Dropdown-Menü verwenden, wie wir in der nächsten Vorlesung sehen werden. So können wir diesen Teil als Kategorie umbenennen und ihn so leer lassen, wie Sie hier sehen, ich habe alles als Kategorie ersetzt. Wir würden hier die Eingabe der Kategorie oder das Drop-Down in Zelle setzen, wie wir in der nächsten Vorlesung sehen werden. Und auch hier habe ich eine Beschreibung und Beschreibung wird ein Textbereich sein, und wir können auch das hinzufügen. Also lassen Sie uns sicher sein, dass alles in Ordnung ist. Wir haben Ihren Namen, die Anzahl der Markenpreise ist immer noch Kategorie leer. Wir werden mit ihrer Kategorie fühlen und dann haben wir eine Beschreibung. Und die Beschreibung wird ein Textbereich sein. Und dieser Textbereich, können wir es auch finden. Also, wenn ich zum Eingabetextbereich gehe, werden wir Eingabetextbereich-Modul sehen. Wir können es auch importieren und hier mit unseren Modulen platzieren. Und wir haben hier auch die UX-Module, und wir importieren sie. Und dann werden wir die Optionen von sehen. Also hier haben wir ein Flow Label. Nein, das brauchen wir nicht, obwohl die Größe, können wir die Standardgröße verwenden. Also kann ich sagen, vielleicht können wir das hier benutzen. Gehen Sie zurück zu unserer Vorlage und fügen Sie die Beschreibung hier ein. Und wir geben ihm einen Namen wie einen Namen für das Formular-Steuerelement, da wir das immer tun, um das nicht zu verpassen. Also haben wir hier der Textbereich Formular-Steuerelement Name wird die Beschreibung selbst sein. Also speichern wir das, gehen Sie zu unserer Anwendung. Wir werden sehen, dass wir eine Beschreibung haben. Hier haben wir die Beschreibung. Sie können auch die Höhe dafür definieren. Zum Beispiel ist das wie klein. Du kannst es größer machen. Ich denke, Prime NG bieten, dass, wie Sie hier sehen, wir eine Reihe und Spalten haben. So können Sie das auch definieren. So können wir hinzufügen, dass zwei Zeilen und Beschreibung wir wachsen wie sieben machen können. Also sparen wir. Und wir gehen zurück zur Anwendung. Schön. Wir haben hier die Zeilen, und danach werden wir eine Reichweite Beschreibung haben. Reach Beschreibung, wir werden erklären, es endet auch getrennt Vortrag, weil es ein Schnabel ist. Wir können hier hinzufügen ist auch Feld gekennzeichnet. Also, wenn Sie sich erinnern, können wir verwenden ist Flag. So können wir auch einen Schalter verwenden, und dies befindet sich hier wird Eingangsschalter genannt. So können wir unser Produkt definieren, ob es vorkommt oder nicht. So können wir auch dieses Modul importieren. Gehen Sie hier, importieren Sie das Modul als auch, und gehen Sie Import-Switch. Dann können wir das hier platzieren. Und dann können wir die Eingangsschalter-Eingänge verwenden, die genau gleich und dieser sein werden. Also werden wir eine neue Reihe haben. Wir können es nach Kategorie hinzufügen, wie in der Nähe ihrer Kategorie. So können wir es hier hinzufügen. Also haben wir hier diese Kategorie haben wir auch eine andere peform Säulen. Wir haben hier, vier Spalten und ersetzen alles mit seinen Funktionen. Also müssen wir angeben, dass gekennzeichnet ist erforderlich ist, damit wir die Validierung nicht benötigen. Es wird so genug sein. Und dann haben wir die Kontrolle selbst. Wir können es kopieren und dann hier platzieren. Also haben wir hier den Eingangsschalter, und wir können dieses NG-Modell entfernen, weil wir den Namen des Formular-Steuerelements verwenden. Sie immer, Sie müssen überprüfen, ob diese Unterstützung, dass. Also genau sein Support-Formular-Steuerelement Name für unsere Komponente, weil wir diese Steuerelemente innerhalb einer Gruppe erstellen und Sie ng-model innerhalb der Formulargruppe nicht verwenden können, sonst erhalten Sie einen Fehler. Daher ist es besser, in diesem Fall einen Formularsteuerelementnamen für reaktive oder Direktivenformulare zu verwenden. Also lasst uns überprüfen, dass f alles ist, was will. Schön. Wir haben hier vorgestellten Namen, Marke und Beschreibung. In der nächsten Vorlesung werde ich Ihnen zeigen, wie wir Kategorien erfassen können und wie wir die Daten auch aus der Datenbank holen. So werden wir hier die echten Kategorien sehen, die hier aufgelistet sind. 108. Dropdown für Produktkategorien mit Filter: Okay, in dieser Vorlesung werden wir sehen, wie man die Kategorie Dropdown mit einem Filter erstellt. So kann ich die Kategorien filtern und auswählen , die ich möchte und welche in meiner Datenbank gespeichert sind. Zuallererst müssen wir eine Dropdown-Komponente haben. Es ist auch in Prime NG als Requisite nach unten verfügbar, wenn Sie es hier sehen. Und dann werden Sie viele Beispiele haben. Lassen Sie uns das einfachste Beispiel auswählen. Aber zuerst müssen wir das Modul von Dropped Down zuerst importieren. Also gehen wir hier und importieren das Dropdown-Modul und fügen es dann zu unserem Code hinzu. Ich habe das bereits getan, damit wir weitermachen und zum Beispiel gehen können. Also haben wir hier eine p Dropdown-Optionen. Und einige Städte, wie Städte, werden wie aus dem Backend kommen. Und unser Backend wird ihre Kategorien selbst sein. Also lassen Sie uns diesen Teil kopieren und gehen Sie hierher und fügen Sie ihn in unser Etikett ein. Also haben wir hier bereits diese Kategorie erstellt, und wir haben hier ihre Kategorie erforderlich ist und dann fügen wir es hier ein, aber wir haben hier keine Optionen oder Städte. Wir haben Kategorien. So wird die Liste der Kategorien in der Eingabe platziert werden, die Optionen genannt wird. So dass Dropdown-akzeptieren Eingabe genannt Optionen, die die Daten, die in der ausgelassenen gefüllt werden. Und auch das Modell. Wir brauchen kein NG-Modell, wie wir bereits gesagt haben, müssen wir nur Form Control Namen haben. Dieser Name des Formularsteuerelements wird Kategorie sein. So wie wir hier in diesem Beispiel sehen, dass er eine Variable namens Städte definiert. Und die Städte haben Array, unser Array, das Name und Code ist. Und natürlich können Sie jedes Objekt oder jede Struktur definieren, die Sie wollen. Also werden wir das zuerst tun. Lassen Sie uns die Kategorie definieren, die Kategorien Array sein wird. Lassen Sie uns Kategorien definieren, die ein Array sein wird. Also für jetzt wird es ein leeres Array sein. Und wie er hier getan hat, haben wir in Städten wie ein Array hartcodiert, aber wir werden es aus der Datenbank holen. Dafür brauchen wir den Kategorie-Service, den wir zuvor erstellt haben, und wir haben dort eine Methode, die GetCategories genannt wird. Also zuerst, danach, nachdem wir das Formular neu initialisiert haben, sagen wir, dass dieser Punkt Kategorien erhält. So erhalten wir alle Kategorien aus der Datenbank und zeigen sie für den Benutzer an, um zu sehen, welche für ihn das Richtige ist. Also haben wir hier eine private Methode. Wir nennen es GetCategories. Und hier werden wir den Kategorie-Service verwenden. Also müssen wir auch die Kategorie Service anrufen. Also sagen wir hier private Kategorien Service. Und diese Kategorie Service wird Art von Kategorien Service sein, die hier bereits definiert ist. So können wir es automatisch importieren. Also hier haben wir Kategorie Service, und dann werden wir sagen, dass dieser Punkt Kategorie Service Punkt Kategorien bekommt. Und dann, wie Sie sich erinnern, haben wir hier als Abonnent, damit wir es abonnieren können. Und dann werden wir in den Callback die Kategorien bekommen. Und dann haben wir geöffnet und eine Funktion. Und dann sagen wir, dass diese Punktkategorien Kategorien sein werden. Also haben wir das Kategorie-Array hier geladen. Dann werden wir sagen, dass Kategorien Array Feld bekommen. Also lasst uns alles retten und das versuchen. Wir werden das wirklich sehen, wir haben die ganze Liste. So ist alles in Ordnung, funktioniert perfekt. Also haben wir hier jetzt die Kategorien, die wir bereits erstellt haben, und dann haben wir sie, wenn wir eine neue Kategorie erstellen, so dass der Benutzer unter ihnen auswählen kann. Aber lassen Sie uns weitere Funktionen hinzufügen, wie wir einen Filter hinzufügen können, damit der Benutzer, wenn eine lange Liste hier hat, nicht manuell danach suchen muss, er etwas eingeben kann und er die gefilterten Daten erhält. So können wir das nicht sehr leicht machen, wie wir in dem Beispiel sehen, das er hier hat, so etwas wie zum Filtern. Und einer von ihnen ist das Filtern und das klare Symbol. Also der Unterschied davon, dass er Option und eine andere Eingabe für diese Filterung hinzugefügt hat, die Filter durch genannt wird. Und er sagte, dass gefiltert durch dann nach Namen filtern. So kann er auch nach etwas filtern. Sie können nach Namen, nach ID filtern. Der Benutzer wird also, wenn er etwas eingegeben hat, werden die Daten nach diesem Wert gefiltert. Und auch, er hat einen Platzhalter geschaffen. Wir können es auch kopieren. Also zuerst können wir diesen Teil kopieren und zu unserem Produktformular gehen und diese Eigenschaften hinzufügen. Also haben wir hier Auktionen Formular-Steuerelement Name und er gefiltert ist durch Filter nach Namen und dann zeigen klar durch Platzhalter wählen Kategorie. Also lassen Sie uns das speichern, probieren Sie es aus. Und dann öffnen wir, schön, wir haben den Filter bereit. Also haben wir hier für Handy, ich will Autos. So sehen Sie, dass wir die Ergebnisse sofort bekommen. 109. HTML-Editor für die Product Beschreibung: Manchmal müssen wir dem Benutzer etwas detailliertes und Freiheit zeigen , sein Produktdetail zu erstellen. Wie wir hier sehen, dass wir auch mit Prime NG, finden Sie heraus, einige Editor, die erreicht Kanalbox-Editor genannt wird. Dies hat den Xbox-Editor erreicht. Sie können auch Ihren Text formatieren. So möchte ich zum Beispiel Überschriften haben. Ich möchte auch zugrunde liegenden Text haben, damit wir dem Benutzer die Möglichkeit geben können , Farbe und viele Dinge im Text und in der Detailbeschreibung des Produkts zu machen. Andernfalls werden wir das Feld für jeden speziellen Teil hinzufügen oder kauen, den der Benutzer eingeben muss. Aber jetzt können wir dem Benutzer die Freiheit mit dieser großen Reichweite Textbox geben. Fügen wir es also zu unserem Produktformular hinzu und sehen Sie, wie man damit arbeitet. Wenn wir also zur Dokumentation dieses Editors gehen, scrollen wir auch nach unten. Wir brauchen ein Editor-Modul. Und dieses Editor-Modul gehen wir und importiert in Anwendungsmodul, wie wir immer für jedes Modul in Prime Energy tun. Und dann, nachdem wir das tun, müssen wir eine Komponente importieren oder verwenden, die Editor genannt wird. Und hier der Text, der als HTML und ein Stil sein wird, wenn Sie einen bestimmten Stil dafür haben. Und dann geben Sie diesen Text in Ihrem Backend oder an Ihre API zurück, wenn Sie ein neues Produkt einreichen. Aber das, was wir wollen, ist nicht mit jedem Modell, sondern mit dem Namen des Formularsteuerelements, wie ich Ihnen sagte, wir verwenden reaktive Formulare. Also gehen wir hier wieder zu unserem Formular. Wir werden ein neues Feld und neue Live erstellen. Wir werden ihm eine Klasse geben. Und diese Klasse wird auch 12 Spalten mit einem Label sein und wird der Editor darin sein. Also habe ich das schon hier erschaffen. So haben wir hier eine reiche Beschreibung, wie genau wir es hier in der Form definiert haben. Und auch wir haben den Editor selbst und der Name des Formulars Control wird eine Beschreibung erreicht. Und ich habe ein Etikett erstellt, das Produktdetails genannt wird. Also, wenn wir das speichern und wir gehen zu unserer Anwendung und wir werden sehen, dass wir etwas fehlen, weil wir sehen werden, dass dieser Teil nicht für unsere Anwendung funktioniert. Erstens hat es eine Abhängigkeit, die eine Feder genannt wird. Und hier ist eine große Chance für uns zu sehen, wie wir externe Bibliotheken, JavaScript-Bibliotheken in Angular Anwendung einschließen können . Wenn Sie also am Ende hier zur Dokumentation gehen, werden Sie sehen, dass dies eine Abhängigkeit ist. Quill-Editor ist ein Editor, den Sie mit npm install installieren können, und dann müssen Sie es importieren. Also zuerst gehen wir und installieren diesen Teil. Also gehen wir, öffnen wir ein neues Terminal und dann sagen wir npm installieren Quill sicher. Und nachdem es erfolgreich installiert wurde, müssen wir die Bibliotheken importieren. Also zuerst müssen wir Skript in Angular JSON-Datei importieren. Wenn Sie sich erinnern, haben wir eine eckige JSON-Datei , die wir die Anwendungen darin konfigurieren. So werden wir Admin-Verpflichtung konfigurieren, nicht andere Anwendungen, sondern nur Admin-Anwendung in Skripten. Wir können diese Zeile hinzufügen. Wir müssen nicht nach oben gehen, weil wir das Knotenmodul in der gleichen Ebene von Angular JSON haben . Also müssen wir nicht auf eine Ebene oder in einen Ordner gehen. Und auch, es gibt zwei Stile Datei, die wir auch brauchen, um sie zu importieren. Also, hier, nachdem wir die Stile haben, können wir diesen Kern CSS und auch die andere importieren, die Snow CSS genannt wird. Nachdem wir also alle Dinge gespeichert haben , die Änderungen erst wirksam wurden, wenn Sie Ihre Anwendung neu starten. Wir müssen den Server neu starten, da wir Winkel-JSON geändert haben. Und hier werde ich meine Anwendung neu starten. Okay, es ist neu gestartet, aber immer noch über ein paar Pfeile beschwert, die wir vorher nicht repariert haben. Also lasst uns sie reparieren und alles funktionieren lassen. Also haben wir ein Problem, dass diese onsubmit und onCreate oder eigene Beratung nicht definiert sind, also müssen wir sie definieren. Also werde ich diesen Teil kopieren, zur Komponente selbst gehen, Komponentencode. Und ich werde auf einreichen sagen. Und auch wir haben auf der Annullierung. Also definieren wir beide Methoden. Wir haben keine Fehler mehr. Dann gehen wir zurück zu unserer Bewerbung. Wir überprüfen, wie wir es haben, wie sie jeder Redakteur sind. Es ist sehr großartig. Wir haben jetzt alles. Sie können tippen, alles, was Sie wollen. So können Sie es bereits als Benutzer in ihrem Front-End gestylt haben, genau haben Sie es an das Front-End. So werden wir später sehen, wie wir dieses HTML in der Front-End-Anwendung in jedem Shop anzeigen können . So hat der Benutzer die Freiheit, hier einzugeben, was er will. Und dann werden wir später sehen, wie wir diesen HTML-Code anzeigen können, der hier angezeigt wird, oder den der Benutzer im Produktdetail verwendet. 110. Product mit Upload: In diesem Kurs und für das Produkt haben wir zwei Arten von Bildern. Zuerst das Hauptbild, wo es das Produktbild angezeigt wird. Und auch, wir haben eine Galerie. Die Galerie, in der sie Benutzer, wenn er zum Produktdetail gehen, kann er nicht mehrere Bilder des Produkts sehen. Also zuerst werden wir jetzt das Hauptbild erstellen. Und nicht nur das, wir werden auch eine Anzeige sehen. Wenn der Benutzer ein Bild hochlädt, wird es eine kleine Anzeige sagen. Das Bild, das er hochgeladen, um sicherzustellen, dass alles gut für den Bild-Upload hochgeladen wird, werden wir nichts Bestimmtes verwenden. Wir werden Standard-HTML verwenden. Also zuerst werde ich ein div wie dieses haben. Es wird auch unter der Beschreibung sein. Und hier, in diesem werde ich auch ein Etikett haben und ich werde es zum Beispiel als Namen, Hauptbild geben . Und dann würden wir eine Eingabe haben, und diese Eingabe wird Art von Datei sein. Also werden wir hier einen Typ haben, der Datei genannt wird. So kann ich Dateien über diese Eingabe hochladen. Und um es zu stylen, werden wir sehen, wie wir es schöner machen können. Wir werden eine Klasse hinzufügen und dann werden wir sagen, dass dieser Dateityp, es Standard-HTML, das gesamte Bild akzeptiert. Daher können wir keine anderen Dateien akzeptieren. Wir akzeptieren nur Bilder. Okay, nun, lassen Sie uns sparen und versuchen, was wir hier haben. Nachdem die Anwendung aktualisiert wurde, werden wir sehen, dass wir hier ein Feld haben. Aber sieh mal, es ist hässlich. Es hat dieses Hauptbild nicht und Sie wissen, wie das Label nicht oben steht und der Datei-Upload hier sein wird. Also würde ich Ihnen raten, eine Klasse für diese Eingabe hinzuzufügen, die als Eingabetext bezeichnet wird. Ich habe das von, indem ich auf Prime M und G Eingänge inspizierte. Und ich habe diese Klasse. Also hier haben wir p Eingabetext, wenn Sie speichern, wird es mehr Lebensstil haben. Es würde genau unter dem Etikett liegen und alles wird gut. Ok, nett. Also werden wir den Upload implementieren. Wenn ich also ein Bild von meinem Computer auswähle, muss ich hier eine Anzeige haben, die nach dem Hochladen des Bildes hier angezeigt wird. Also, wie wir das tun können, okay, zuerst müssen wir das Bild oder die Datei erkennen, die hochgeladen wird. Also werde ich hier sagen, dass, wenn ich dieses ändere, dieses Feld GF ändern, dann werde ich eine Methode haben, die zum Beispiel beim Bild-Upload aufgerufen wird. Und dieser Image-Upload wird für mich die Daten der Datei übergeben , die ich durch eine wertvolle Add-spezifische Variable hochgeladen habe, die Ereignis genannt wird. Und Sie müssen diesen Dollar dahinter stecken. Dann würden Sie die Daten in der richtigen Weise des Bildes erhalten. So können wir diese Methode implementieren. Wir gehen zu der TypeScript-Datei und dann werden wir sagen, dass wir hier auf Bild-Upload haben und dies wird Ereignis haben, wie wir gesehen haben. Und dann werden wir die Datei selbst haben und im ASAM-Schleier angezeigt, das Miniaturbild selbst. Es wird unter diesem sein, zum Beispiel unter dieser Eingabe, wir werden wie ein div haben, wie immer kleines div. Dieses div wird darin und Bild haben. Also können wir hier ein div haben, und in diesem div haben wir Bild. Und die Quelle dieses Bildes wird das Bild sein, das wir hochgeladen haben. Also müssen wir eine Variable füllen, die zum Beispiel Bildanzeige genannt wird. Und das wird als Eingabe für das Bild sein. Also müssen wir es in Klammern setzen. Also müssen wir eine Variable definieren, die Bildanzeige genannt wird, die die Daten der Datei, die wir hochgeladen haben, erfassen und sie in diesem Bild platzieren wird. Also lasst uns das machen. Wir definieren eine Variable, und diese Variable kann ein String oder ein Typ sein, der Array-Puffer genannt wird. Und ich werde Ihnen später sagen, was Array-Puffer ist und warum wir das haben. Übrigens, lassen Sie uns dieses Fusseln reparieren, das wir hier haben, muss es als Admin haben , weil wir es nicht so nennen können. So haben wir Admin-Produkte Formular. Okay, und dann beim Hochladen von Bildern, wenn dieses Ereignis passiert ist, würde ich eine Datei von dem Ereignis erhalten, und diese Datei wird definiert. Ich werde es von der Veranstaltung bekommen. Also hier haben wir, zum Beispiel, Ereignis. Aber lassen Sie uns zuerst sehen, welches Ereignis für mich zurückkehrt. Also, wenn ich hierher gehe, kann ich Konsolenprotokoll. Ich möchte immer die Dinge verfolgen, die ich verstehen muss, warum ich die Dinge tun werde. Also lassen Sie uns das speichern und gehen Sie zu unserer Anwendung und versuchen, ein Bild hochzuladen. Also haben wir hier ein Bild, ich habe es in meinem PC, und dann werde ich sehen, dass Ereignis kommt mit vielen Eigenschaften. Und diese Eigenschaften, die ich brauche, sind Gott gut. Und dann etwas, das Dateien genannt wird. Und diese Dateien würden meine Datei enthalten, die ich hochgeladen habe. Also gehen wir zurück. Wir können das entfernen. Wir brauchen es nicht mehr. Wir können dann eine Konstante definieren, wie wir eine Datei gesehen haben. Und diese Konstante wird Ereignispunktziel haben. Und dann diese Ziel, wie wir gesehen haben, dass es auch darin Dateien hat. Und diese Dateien müssen wir nur das erste Element greifen , weil es immer mit Array kommt. Und wir müssen nur das erste Element dieses Arrays greifen, wie wir hier gesehen haben. Also hier hat es einen Strahl und wir brauchen nur das erste Element. Also wie immer, wenn sich etwas in der Datei befindet, dann müssen wir etwas tun. Wenn nicht, dann tun wir nichts. Also müssen wir sicherstellen, dass die Akte, wir haben es richtig. Dann müssen wir den Dateiinhalt in unsere Variable setzen, die als Bildvorschau als Daten bezeichnet wird. So, wie wir diese Daten in JavaScript lesen können, gibt es etwas namens FileReader. Und dieser Dateileser können wir Daten durch sie lesen. So können wir eine neue Klasse von FileReader erstellen. Und dieser Dateileser durch sie, kann ich immer die Daten lesen, die ich will. So, wie wir lesen können, können wir sagen, Dateileser, lesen Sie als Daten-URL, und dann übergeben Sie die Datei, die Sie wollen. Also haben wir hier die Datei hochgeladen, wir haben sie. Dann erstellen wir einen FileReader und finden Reader hat als Daten-URL gelesen, die Datei selbst. Jetzt habe ich diese Datei selbst als Daten im Dateileser. Wie wir so etwas wie diese Punkt-Bild-Vorschau oder Bild-Anzeige sagen können , wird die Daten selbst haben. Dieser FileReader kommt also immer mit einer Methode, die onload genannt wird. Wenn wir also unsere Daten in diesen Dateileser laden, tun Sie etwas und dies, können wir es definieren. Es hat einen Rückruf, aber auf andere Weise hat es eine Methode. Und dann nennt man diesen Rückruf so. Und innerhalb dieser Methode können Sie tun, was Sie wollen. Es ist ein Ereignis. Also können wir nicht tun, diese Punkt-Bild-Anzeige und dann FileReader Punkt-Ergebnis. Und in diesem Ergebnis werden wir unsere Dateidaten haben. Auf diese Weise können Sie die Datei immer als Daten lesen, in eine Variable einfügen und sie an die Bildeingabe oder das Bild-HTML-Tag übergeben. Manchmal, wenn Sie dies nach dem Lesen der Daten oder des FileReader setzen , wird es nicht funktionieren. Also ist es besser, es vorher zu stellen. Dann wird das Ereignis ausgeführt, nachdem Sie die Daten gelesen haben, weil es weiß, dass es etwas auf dem Grundstück gibt , weil es Ereignis ist und es vor dem Lesen der Daten definiert werden muss. Also lasst uns das speichern und es versuchen. Wir können vielleicht jetzt versuchen, eine Datei hochzuladen. Also gehe ich wieder hierher zu meiner Akte. Ich wähle eine Datei aus, die ich bereits habe. Wie Sie hier sehen, habe ich 0 ist undefiniert. Warum? Weil ich hier Problem habe. Es ist die Akte ist keine Akte. Also muss es eingereicht werden, wie Sie sich erinnern, unser Array. Also hatte ich hier einen Fehler und ich habe ihn behoben. Laden wir die Datei erneut hoch. Wir gehen hier zurück, wir werden sehen, großartig, wir haben das Bild hochgeladen. Als Zusammenfassung, schnelle Zusammenfassung, habe ich die Datei hochgeladen. Ich habe einen FileReader erstellt , der Standard-JavaScript kommt. Lassen Sie uns Web-Anwendung lesen Sie den Inhalt der Dateien. Hier habe ich also die Datei geladen, die ich auf den FileReader hochgeladen habe und dann der Bildanzeige zuordnen. Aber wie Sie sehen, ist es ein großes Bild. Wenn ich also ein größeres Bild hochlade, dauert es vielleicht größer als der Platz. Also lassen Sie uns dieses Bild einschränken. Also würde ich hierher gehen, vielleicht kann ich ein paar Sachen mit meiner Erfahrung in Prime-Energie machen. Ich werde ihm zum Beispiel eine Klasse geben. Und diese Klasse wird P-Spalte zum Beispiel zu zwei Spalten genannt . Und dieses Bild wird Stil haben, der wie Breite 100% sein wird. Es wäre also 100% seines Elternteils. Also lasst uns das retten. Gehen Sie wieder zu unserer Bewerbung zurück. Und dann versuchen wir, ihre Datei hochzuladen. Wieder. Wir gehen hierher. Leute, wir haben eine sehr nette, also lasst uns etwas Raum zwischen dem Bild und dem InputField setzen, weil es so hässlich ist. Wie Sie sich erinnern, unsere Klassen, Prime End-Klassen, können wir Marge, unten, Rand, oben. Also können wir tun, was wir wollen, um die Marge. Also möchte ich Rand oben zwei setzen. Und auch wenn Sie bemerken, dass es gibt, weil wir diese Spalte verwenden, hat es etwas Polsterung. So können wir auch P Padding links 0 zum Beispiel machen. Also hier können wir es speichern und dann versuchen wir es noch einmal. Wir laden eine Datei hoch und wir sehen, ob alles gut funktioniert hat. Perfekt. Wir haben jetzt mit der Datei und wir sind bereit, diese Datei an das Backend zu senden, und dann wird es über unsere Back-End-API hochgeladen werden. In der nächsten Vorlesung werden wir sehen, wie alle diese Daten einreichen , um ein Produkt in der Datenbank zu erstellen. 111. Einreichen eines neuen Produkts als FormData: Okay, in diesem Vortrag werden wir sehen, wie Sie ein neues Produkt veröffentlichen oder ein Produkt zur Datenbank hinzufügen. Also, wenn Sie sich erinnern, wir haben das Formular erstellt, dann werden wir eine erstellen. Hier sind die Dinge ein bisschen anders als die Kategorie. Warum? Weil wir die Daten nicht als JSON posten werden. Wir werden sie als Formulardaten zu posten, wie wir jetzt sehen werden, ist dies, weil wir eine Dateien haben, die das Bild ist. Also müssen wir die Daten als Formulardatentyp veröffentlichen, nicht als JSON. Denn wenn Sie sich erinnern, als wir am Backend arbeiteten, zeigte ich Ihnen, dass wir ein Produkt in die Datenbank posten oder platzieren, aber mit Form, dass das Format nicht mit dem JSON wie die anderen. Auf diese Weise können Sie Bilder mit Ihren Formulardaten hochladen. Also lasst uns weitermachen. Dann. Wenn wir erstellen, wenn wir auf dieses Erstellen klicken, werden wir unsere Formulardaten erstellen. Also lassen Sie uns hier gehen und wir haben die Methode bereits, wir haben sie definiert, die onsubmit ist. Ich werde sehen, ob ich zuerst das gültige Formular habe. Also sage ich, wenn diese Punktform, wie die Formulargruppe, die ich habe, ungültig ist, dann zurückkehren. Tun Sie nichts anderes. Nach dieser Rückkehr werden wir die Formulardaten erstellen, aber vorher müssen wir das Feld validieren. Also, wenn Sie sich erinnern, hatten wir diese Benachrichtigungen für den Benutzer erstellt, um zu sehen, ob er einige Fehler oder Fehler in den Feldern hat. Basierend auf diesen Pflichtfeldern, die wir hier definiert haben, erstellen wir hier unsere Benachrichtigungen. Also müssen wir diese aktivieren, nicht Urlaub. Also zunächst einmal müssen wir sagen, eingereicht ist wahr. Wenn ich also auf Absenden klicke, muss ich sagen, dass das eingereichte Formular wahr ist. Also ja, es ist eingereicht. So genau wie wir es mit Kategorie gemacht haben. Nachdem wir das gespeichert haben, versuchen wir es erneut und dann haben wir versucht, auf Erstellen zu klicken. Danach bekomme ich die Validierungsfehler, wie Sie hier sehen. Jetzt haben wir, werden wir diese Daten fühlen und sie erhalten und sie an das Back-End senden. So wie können wir mit diesen Daten als Formulardaten erhalten? Zunächst einmal müssen wir eine Konstante definieren, die Produktformulardaten genannt wird und ein Typ gebildet wird, die Daten Zahnfleisch mit einem grundlegenden JavaScript im Browser bilden. Es ist also keine Bibliothek. Wir müssen nichts importieren. Es ist innerhalb des JavaScript, das wir jetzt verwenden, dann diese Formulardaten, wir werden sie an den Dienst übergeben, bei einem Produkt sein wird, und dann werden wir es an das Back-End senden. Aber wie können wir dieses Formular ausfüllen, dass unsere erste, Also muss ich die Daten verschieben, die ich hier in den Eingaben zu Produkten Formulardaten eingeben. Wir sagen nur Produktform Datenpunkt anhängen. Dann gebe ich den Schlüssel an, den ich anhängen möchte, und dann den Wert davon. Zum Beispiel werde ich Name sagen und dann werde ich den Kontrollnamen sagen. Also werde ich sagen, diese Punktprodukte Form, die bereits wir gesehen haben, ist diese bekam Form Steuerelemente Punktname, Punktwert. In diesem Fall habe ich einen Append-Namen an diesen Wert angegeben. Denken Sie daran, dass dieser Name genau so sein muss, wie wir im Back-End angeben. Also genau die Felder, die wir hier auch angegeben haben. Und du machst dasselbe für alle Felder. So, Sie müssen eine Marke und Kategorie und et cetera zu tun. Aber ich denke, es ist besser, es in einer Schleife zu machen, besonders wenn wir mehrere Felder haben. Also würde ich hier sagen, vielleicht kann ich für jede Kontrolle sagen, die ich hier habe, diesen Schlüssel und den Wert davon tun, wir sagen nur Objektpunktschlüssel. Es heißt, gib mir die Schlüssel, nicht die Werte davon. Die Produkte bilden. Produktformular hat mehrere Steuerelemente und ich möchte die Schlüssel von ihnen nehmen. Und dann wurde ich gesagt, sie zu kartieren, wie sie alle durchgehen. Und dann werde ich 2 mir den Schlüssel zurückgeben. Also, wie gesagt, weil wir über die Schlüssel gehen, die wir hier sind. Also, nachdem ich den Schlüssel bekommen habe, können wir tun, was das anhängt. Aber zuerst, lassen Sie uns Konsolenprotokoll, um zu sehen, was hier vor sich geht, um es für Sie klar zu machen. Also werde ich sagen, Konsolenprotokoll den Schlüssel selbst, und dann Konsolenprotokoll für mich dieses Punktproduktformular. Und dann gebe ich den Schlüssel an, den ich will, und dann bekomme ich den Wert davon. Es ist genau so, wie wir hier gesagt haben, wie diese Punkt-Produkt-Form, Punkt-Name, Punkt-Wert, genau das gleiche. Also hier hat es ein Array und dann werde ich sie lesen. Also muss es jetzt für mich drucken, dass Schlüssel, wie Name und der Wert, und alle von ihnen. Im Gegensatz zu Kategorie, Marke usw. gehe ich zurück zur Anwendung. Ich fühle einige, die wie ein Produkt sind, das wir sagen können. Und dann ist die Marke Brian Guan. Und der Preis ist zum Beispiel 500 und die Anzahl auf Lager ist 20. Und die Kategorie wird sein, zum Beispiel, Schönheit ist gekennzeichnet Nein. Und dann haben wir zum Beispiel Beschreibung und eine weitere detaillierte Beschreibung, und wir haben ein Bild. Also werde ich ein Bild zufällig hochladen. Wir haben es hier. Dann klicke ich auf Erstellen. Wenn ich darauf klicke und wir sehen, dass wir die Daten genau bekommen. Also habe ich Produkt 1 genannt und dann Marke, Marke eins. Preis ist 500, Kategorie ist Kategorie all dies weil wir das Objekt alle zurückgeben und zählen auch auf Lager 20. Es ist also genau so, wie wir es brauchten. So wie wir diejenigen anhängen, die gerade durchgehen, sagen wir Produktform, Datenpunkt anhängen. Und dann sagen wir diesen Schlüssel. Also brauche ich einen Schlüssel, wie wir bereits gesagt haben. Und dann diese Punkt-Produkt-Form. Und dann sage ich den Schlüssel selbst, Punktwert. Also gehen Sie überall Produkte Formular und dann den Wert des Feldes. Dann sagen wir diesen Punkt, können wir eine Methode definieren, die ein Produkt hinzufügen genannt wird. Genau wie wir es mit der Kategorie gemacht haben, aber diese werden akzeptieren, akzeptieren Sie die Produkte Form Daten, nachdem wir alles in ihm aufgestanden haben. Also lassen Sie uns diese Methode definieren. Es wäre genau das gleiche, das wir vier Kategorien definiert haben. Es wird genau so sein, wie wir Produktservice, Werbeprodukt verwenden , und dann werde ich alle diese Eigenschaft verwenden. Ich mag den Nachrichtendienst. Also lasst uns das schnell machen. Ich habe bei einem Produkt beide ungerade definiert, also haben wir es als Kategorie hinzufügen, aber wir brauchen bei einem Produkt und dieses Werbeprodukt akzeptiert nicht das Produkt selbst, nicht das Produkt als JSON-Datei, aber wir akzeptieren Formulardaten. Also müssen wir hier sagen, Produktdaten werden Art von Formulardaten sein und dann werde ich einen Produktservice verwenden. Also müssen wir auch den Produktservice verwenden, um den Service hinzuzufügen, der ein Produkt erstellt. Und dann übergebe ich die Produktdaten an sie. Also zuerst müssen wir den Produktservice anrufen. Also haben wir es hier, so können wir sagen, privaten Service, Produktservice. Wir gehen nochmals zu unserem Hinzufügen eines Produkts. So erstellen Sie Produkt. Wir müssen diese Methode definieren. Also gehe ich wieder zu unserem Produktservice. Also haben wir es hier. Also, nachdem wir gehen, dass, so hier setzen wir diese Methode wieder und unkommentiert und wir sagen, erstellen Produkt, nicht Kategorie. Und hier haben wir Produktdaten. Und hier wird es Formulardaten akzeptieren. Und dann wird es für mich beobachtbar eines Produktmodells zurückkehren , weil ich das Produkt selbst bekommen werde. Und hier auch ein Produkt, und es wird eine Post-Anfrage sein, aber hier wird es die URL für Produkte sein. Hier haben wir die Kategorien, die wir brauchen, um das zu beheben. Also haben wir hier für dieses Produkt. Und dann übergebe ich die Produktdaten an die Post-Anfrage. Das ist genau so, wie wir es mit einem Posten gemacht haben. Jetzt erstelle ich eine Telefondaten und sende sie mit der HTTP-Post-Anfrage an das Back-End. Also lasst es uns retten. Und dann fahren wir in unserem Front-End hier haben wir die Kategorie noch es wird für mich ein Produkt zurückgeben. Und dieses Produkt, es wird ein Produkt sein. Und dann haben wir das Produktmodell. Wir müssen es erneut importieren. Und hier brauchen wir einen Nachrichtendienst. Und der Nachrichtendienst, wenn Sie sich erinnern, ist er auch von Prime NG. Wir haben es verwendet, um Nachrichten wie Notification Service anzuzeigen, der sich in prime NG befindet. Und dann haben wir jetzt alles in Ordnung. Jetzt müssen wir das definieren. Die Ich muss den Produktnamen anzeigen und dann habe ich einen Timer, um zurückzukehren. Nach erfolgreichem Hinzufügen des Produkts importieren wir diese, die von Rx2 stammt. Ja, Sie geben die Zeit an und warten dann, bis sie ausgeführt oder vorbei ist, dann gehen Sie zurück zur Liste der Produkte. Und dann müssen wir hier einige Korrekturen wie Produkt haben, wie auf dem Text der Nachrichten. Hier haben wir Produkt nicht erstellt, wenn wir Fehler erhalten und wir jetzt nur den Standort fehlt. Also gehen wir zurück hierher und rufen private Methode oder privaten Service, der Location genannt wird. Und dieser Ort wird von Ort in Angular kommen. Also lasst uns das versuchen. Und dann werde ich wieder meine Daten hier füllen. Ich habe Marke, ich habe Marke eins. Und halten Sie immer im Auge auf das Netzwerk, also werden wir das immer nutzen. Also, wenn Sie wissen wollen, was sendet oder was Sie an das Front-End oder an das Backend senden. Es ist besser, das Netzwerk zu verwenden, weil Sie deutlich sehen , was Sie an das Backend senden hier, 500, 23, und dann wählen wir Kategorie und wird vorgestellt. Ja, wir können es so ausdrücken, wie es vorkommt. Und hier Beschreibung und hier detaillierte Beschreibung. Und dann schicke ich ein Bild. Danach unterwerfen wir uns, okay, es biegt sich wieder und biegt sich. Also bekommen wir Fehler in der Rückseite und ich denke, und hier öffne ich die Tasche und wieder für Sie, um Ihnen den Fehler zu zeigen, es heißt Cast-Objekt-ID-Feldwert, Objekt, Objekt, Pfad ID Kategorie. Denn wenn Sie sich erinnern, haben wir in der Konsole protokolliert diese Kategorie und es gibt uns eine Kategorie als Objekt. Also muss ich nur Kategoriepunkt-ID übergeben. Ich möchte nicht die ganze Kategorie bestehen. Wir können dieses Problem sehr einfach beheben. So können wir nicht nur die Kategorie selbst an das Front-End oder an das Backend senden , alles davon. Wir können nur einen bestimmten Wert oder ein bestimmtes Feld senden. Denn wenn wir auf die Dokumentation gehen, die Drop-down-Liste selbst, weil Sie wissen, dass wir den Wert hier aus der Dropdown-Liste lesen. Der Wert der Kategorie in der Dropdown-Liste gibt also das gesamte Objekt der Kategorie, die ID, Name, Farbe, Symbol enthält. Jetzt brauchen wir nur den Ausweis. Also müssen wir irgendwie sagen, dass bitte dieses Steuerelement und geben Sie mir nur die ID, die hier angegeben ist, nicht alle Objekte. Wenn Sie zur Dropdown-Dokumentation in Prime NG gehen, sehen wir, dass wir etwas Eingaben mit diesen Eingaben haben, die Optionswert genannt wird. So können Sie einen Optionswert oder einen Schlüssel der Auktion definieren. Also kannst du das nicht sagen, gib mir nur diesen Schlüssel hier. Also können wir diesen auch Optionswert nicht verwenden und ihn hier als optionales Label angeben. Zum Beispiel, die Option beschriftet, Ich sagte, wählen Sie aus dem Kategorieobjekt, nur den Namen, und zeigen Sie es hier. Aber was wird der Wert sein, der Wert dieser Option. Also kann ich nicht sagen, Optionswert ist die ID, die ID dieser Kategorie, die ich mit Kategorien erhalte. Nachdem wir das gespeichert haben und wenn wir Daten in das Back-End posten, werden wir sehen, dass die Kategorie kein Objekt mehr ist. Es wird auch ID sein. Wenn ich hier etwas auswähle, gebe ich nur die ID an, nicht die Kategorie der Objekte, alles. Ich beschreibe diesen Punkt, nur um zu vermeiden, wenn Sie einen Fehler wie diesen bekommen, dann können Sie wissen, wie man ihn löst. Also füllen wir dieses Formular noch einmal aus und wir werden auf Absenden klicken. Also fühle ich diese Daten schon. Ich werde auf erstellen drücken. Wenn ich Grade drücke, sage ich, dass das Produkt nicht erstellt wurde, weil ich einen Fehler erhalten habe. Lassen Sie uns das Netzwerk hier überprüfen. Du siehst also, dass wir alles in Ordnung schicken. Ich gehe hierher und sehe die Kopfzeilen. Die Header der Anfrage werden ein Formulardaten sein und alles scheint mir in Ordnung. Ich habe den Namen, Markenpreis, Kategorie. Schau, diese Kategorie kommt auch nur, da ID-Anzahl Sprechbeschreibung ist, erreichte Beschreibung, alles ist in Ordnung, aber das Bildfeld ist leer. Und die Antwort sagt, kein Bild da drin Anfrage. Also müssen wir irgendwie das Bild auch in den Formulardaten haben. Deshalb verwenden wir gebildete Daten. Dafür. Ich muss sagen, um zu bilden, dass für Fleisch auch Bild anhängen, aber das Aufsteigen des Bildes unterscheidet sich von normalen Feldern. Es ist nicht so. Es ist nicht so, wie ich sage, fügen Sie den Schlüssel und den Wert davon. So ist der Wert ihres Schlüsselbildes irgendwie leer, auch wir haben es hier definiert. Aber das Problem mit Formular-Steuerelement Bild hier, es wird mir nicht die realen Daten geben. Es wird mir nur den Weg der Daten geben. Denn wenn ich einreiche, wieder mit dieser Änderung, zum Beispiel, habe ich hier Formular-Steuerelement Namen, dann werden Sie sehen, dass die Daten kommen nur den Pfad davon. Also schicke ich nicht den Weg. Ich wollte die Daten genau senden, wie wir sie bekommen haben und wie wir sie vorher mit dem FileReader erstellen. Also, wenn Sie sich erinnern, wenn wir Bild hochladen, wenn ich auf Bild hochladen, dann habe ich einen Dateileser erstellt, wie wir in der vorherigen Vorlesung gesehen haben. Also müssen wir die Datei selbst übergeben. Also, wie machen wir das? Es ist sehr einfach. Wir gehen auf Bild-Upload. Und ich sage, dass nehmen Sie nicht den Wert des Formularsteuerelements Namen, also entfernen Sie das. Aber wir gehen hierher und sagen, dass der Name des Form-Steuerelements die Datei selbst sein wird. Es wird also nicht der Dateipfad sein, aber es wird die Datei selbst sein. Also, wie können wir das tun? Wenn diese Datei, wenn es eine Datei gibt, dann bildet dies die Form, die wir in der Punktgruppe erstellen. Wir sagen Patch-Wert, wie fügen Sie einen Wert, Wert auf einen Schlüssel, der Bild genannt wird, und fügen Sie dann die Datei. Wie Sie sich erinnern, haben wir hier das Bild definiert, aber es ist leer. Aber jetzt müssen wir es definieren und diesen Wert auf das Formular selbst patchen. Und eine andere Sache wie wir das überprüfen müssen, weil wir eine Datei veröffentlichen, die nur Bild ist. Also müssen wir sagen, dass für diese Punktform Punkt das Bild selbst bekommen. Und dann sagen wir Aktualisierungswert und Gültigkeit. Also hier müssen wir diese Methode verwenden, nur um zu bestätigen, dass alles gut funktioniert. Wir aktualisieren den Wert, weil wir nach dem Patch das Formular selbst aktualisieren müssen. Also bekommen wir nur diesen Wert und aktualisiert als eine Datei, die wir kaputt. Ich habe die Daten wieder gefüllt und ich habe auch Bild hier. Wenn ich also auf Erstellen klicke, werde ich sehen, dass es auch noch aussteht. Ich erhalte einen weiteren Fehler, weil es sagt, dass die Produktvalidierung angezeigt wird, Gas zu Boolean Filz Wert, es ist leer. Also müssen wir diese Funktion standardmäßig falsch oder wahr machen. Wenn es also so ist, dann tun wir es nicht, können wir keinen leeren Wert senden. Wir müssen einen falschen Wert senden. Daher muss es standardmäßig als falsch angezeigt werden. Und dann, wenn wir es geändert haben, dann lesen wir den Wert davon. Versuchen wir es nochmal. Nachdem Sie den ISB-Funktionen einen Standardwert gegeben haben, klicken wir auf Erstellen. Wir werden sehen, dass das Produkt erfolgreich erstellt wurde. Und wenn wir zu unserer Produktliste gehen, sehen wir, dass das Produktbild hochgeladen wurde und es bereits auf dem Server ist. Es ist also auf der Serverseite, wurde erfolgreich hochgeladen. Also als Zusammenfassung, wir haben genau, wie wir mit Kategorien tun, die wir gerade tun, eingereicht wird, überprüfen Sie das Formular ist ungültig. Wir tun nichts, wenn es ungültig ist, dann senden wir die Daten als Formulardaten, nicht als JSON, wie wir es mit der Kategorie gemacht haben. Und dann bauen wir diese Formulardaten. Und dann hängen wir diese Daten an. Zwei Produkte bilden Daten. Und dann erstellen wir eine Methode, die ein Produkt hinzufügen genannt wird, die den Produktservice verwendet, erstellen Sie ein Produkt. Und dann, basierend darauf, wird es mir eine Erfolgsmeldung oder Fehlermeldung geben. Das Hauptproblem, mit dem wir uns hier konfrontiert haben, dass das Bildfeld nicht als Formularsteuerelementname verwendet werden kann , weil es für mich hier nur den Pfad zurückgibt. Es gibt nicht die Datei selbst zurück. Also, was wir getan haben, um das zu lösen, sagten wir auf Bild-Upload, als wir in der vorherigen Vorlesung, wir sagten Patch einen Wert auf die Form, die Bild genannt wird. Und der Wert dieses Formular-Steuerelements wird die Datei selbst sein. Es wird nicht der Weg sein. Damit die Dinge aktiv werden, müssen wir dieses Feld erneut aufrufen und dann Wert und Gültigkeit aktualisieren sagen. Und auch, wir müssen vorsichtig mit den Standardwerten hier sein , denn manchmal, wenn Sie nichts an das Backend senden, seltsam, wenn Sie einen falschen Typ senden, zum Beispiel, war hier leer, also war ich mit leerer Zeichenfolge. Und für das Backend ist es ein Problem, weil das Backend einen booleschen Wert erwartet. Der Standardwert ist also Richard wird falsch sein, es sei denn, wir ändern ihn. Also, wenn ich hier gehe und es ändere, wird es den Wert als boolescher Wert lesen, weil wir die Werte von onsubmit lesen , wenn ich eine Methode einreiche. Also lasst uns jetzt ein schnelles Refactoring machen. Wir müssen nur diese Konsolenprotokolle entfernen damit wir kein Konsolenprotokoll und unseren Code benötigen, und wir haben unser Produkt bereits in der Produktliste erstellt. 112. Bearbeiten eines Produkts: In dieser Vorlesung werden wir sehen, wie wir ein Produkt bearbeiten können. Genau wie wir es mit der Kategorie gemacht haben. Wenn Sie sich erinnern, wir klicken Sie auf eine der Kategorie bearbeiten und dann können wir bearbeiten und aktualisieren. Wir können das gleiche mit dem Produkt tun. Wenn ich also auf diese Schaltfläche „Bearbeiten“ klicke, kann ich wieder zum Formular gehen und die Daten spüren. Also, wie können wir das tun? Es ist genau wie in Kategorien. Ich ging zur Produktliste. Wenn Sie sich erinnern, haben wir die Schaltfläche für die Bearbeitung und wir sagen nur aktualisieren Sie ein Produkt und ich übergebe die Produkt-ID, die ich möchte. Und dann Implementierung dieses Update-Produkt, es wird diese Router navigieren durch URL zu den Produkten Formular und dann die Produkt-ID, weil wir diese Route bereits definiert haben, wie wir hier zuvor gesehen. Also jetzt, wenn wir auf die Bearbeiten klicken, dann werden wir zu Produkt hinzufügen gehen. Aber das Problem, dass wir leere Daten haben, haben wir das Produkt selbst nicht bereits in diesen Feldern ausgefüllt bekommen. Also wieder müssen wir den Bearbeitungsmodus angeben. Und dann sagen wir, wenn ich ID habe, dann bereite ich den Bearbeitungsmodus vor und dann hole ich die Daten des Produkts aus der Datenbank und lege sie dann in die Felder, wie wir es mit Kategorien getan haben. Also lasst uns das schnell machen. Wie Sie sich in der Vorlage erinnern, haben wir definiert und Bearbeitungsmodus Variable, und diese Variable wird hier definiert. Also müssen wir den Bearbeitungsmodus angeben und überprüfen, wie wir es zuvor getan haben. Also zunächst müssen wir eine Methode erstellen, die Jack Bearbeitungsmodus genannt wird und klicken Sie auf Bearbeitungsmodus. Es wird eine private Methode sein. Also, wo ich den Bearbeitungsmodus überprüfen und die ID von der URL lesen kann, genau wie wir es mit Kategorien gemacht haben. Also brauchen wir die Route selbst, diesen Out-Service. Wir können es greifen und es in unsere Service-Anrufe setzen. Also hier haben wir die Route, die aktiviert ist Route und hören von der Route. Ich kann nicht wissen, was sind die Parameter in der URL übergeben werden , wenn es eine ID gibt, die übergeben wird, wie wir zuvor getan haben, dann sagte der Bearbeitungsmodus auf true. Und dann werden wir die Felder der Produkte nach dem Produkt setzen , das wir vom Back-End bekommen haben. Also müssen wir zuerst auch eine aktuelle Produkt-ID definieren. Also, weil wir das brauchen, wie Sie sich erinnern, so haben wir eine aktuelle Produkt-ID, die hier definiert ist, wird eine Zeichenfolge sein, und dann müssen wir eine Oberfläche erstellen, um ein einzelnes Produkt zu erhalten. Also, wenn wir wieder zu den Diensten gehen, gehen wir zum Produktservice, müssen wir eine Methode erstellen, die aufgerufen wird, ein Produkt zu erhalten. Und wie wir es genau wieder mit einer Kategorie getan haben, können wir diese Methode definieren. So können wir einfach sagen, dass wir ein gutes Produkt, Produkt-ID, Produkt hier haben , um das Produktmodell zu nennen. Und auch hier werde ich das Produkt bekommen. Und hier brauchen wir die API-URL, und dann werde ich die Produkt-ID übergeben. Also hier ist der Service fertig. Wir gehen zurück zu unserem Formular und dann, um den Bearbeitungsmodus zu überprüfen, müssen wir den Produktservice anrufen. Also sage ich diesen Punkt Produkt Service und dann erhalten Sie ein Produkt, ein einzelnes Produkt, und abonnieren Sie dann das Produkt selbst. Und dann bekomme ich das Produkt aus dem Backend. Und dann müssen wir für jedes Feld dieser Produktfelder den Wert angeben, den wir vom Back-End erhalten haben. So können wir diesen Teil löschen. Also müssen wir irgendwie sagen, wie diese Punkt-Produkt-Form, die wir bereits haben. Und dann gehe ich Feld für Feldnamen und den eingestellten Wert. Und dann setze ich den Wert mit dem Produkt, das ich vom Backend und dem Namen bekam. Also lassen Sie uns das für alle Felder schnell tun. Also gehe ich hier zuerst in die Kategorie, und dann setze ich den Wert der Kategorie, die ich vom Produkt erhalten habe. Und auch, ich habe diese Marke. Und dann ist der Preis auf Lager ist Beschreibung und reiche Beschreibung gekennzeichnet. Lassen Sie uns beim Trie sparen, dass wir zu unserem Front-End gehen, wir wählen ein Produkt aus, zum Beispiel dieses. Und dann werde ich sehen, dass alle Felder perfekt gefüllt sind, aber außer dem Feld des Bildes, dass wir hier kein Hauptbild haben, können wir es nicht sehen. Dies liegt daran, dass die schade Ansicht des Bildes, wie Sie sich erinnern, es in einer Variablen gespeichert wird, die Bildanzeige genannt wird. Und in der Bildanzeige kann ich den Wert der Bild-URL angeben, die ich vom Back-End bekomme. können wir also ganz einfach machen. Wir können sagen, diese Punkt-Bild-URL oder die Bild-Anzeige. Es wird das Produkt selbst sein, dieses Bild. Also hier haben wir einen Pfad kommt bereits aus dem Backend und mit der Bildanzeige. Lassen Sie uns das aktualisieren und überprüfen. Okay, wir sehen, dass wir das Bild bereits ausgewählt und hier angezeigt. Und auch wenn wir sehen, dass wir die Kategorie fehlt, wird die Kategorie nicht ausgewählt, da sie immer noch standardmäßig ist. Das Problem, dass, wenn Sie sich erinnern, wir haben die Kategorie nach ID angegeben. Und wenn ich ins Netzwerk gehe und überprüfe, welche Kategorie ich bekomme, bekomme ich es als Objekt, weil ein Backend mir die ganze Kategorie mit dem Produkt sendet. Wir müssen auch die ID angeben. Also werde ich Kategorie Punkt-ID sagen. Also hier gehe ich und sage Set Produkt, Kategorie Punkt ID selbst. Wir versuchen das noch einmal und wir werden sehen, dass die Kategorie bereits ausgewählt ist. So sehen Sie Schritt für Schritt, Sie müssen überprüfen, dass alles gut funktioniert. Und dann werden wir das Absenden des Updates von mir machen. Wenn ich zum Beispiel den Preis ändere, möchte ich die Aktualisierung des Preises an das Back-End senden. Also wurde der Button auf Senden bereits definiert, wie wir hier gesehen haben, aber wir haben nur ein Produkt hinzugefügt. Also müssen wir irgendwie die gleiche Art und Weise tun, wie wir mit Kategorien Form gemacht haben. Wir müssen den Bearbeitungsmodus überprüfen. Es ist wirklich, es ist Modus. Aktualisieren Sie dann das Produkt, nicht ein Werbeprodukt. Und wenn nicht, dann fügen wir das Produkt hinzu. Also habe ich hier, wenn dieser Punkt Bearbeitungsmodus, und dann werde ich gehen und ich sage, dass, okay, Tun Sie für mich das Update, sonst, tun Sie für mich Werbeprodukt. Also müssen wir eine andere Methode definieren, die Edit Product oder Update Produkt genannt wird. So wird es auch eine private Methode sein. Es wird aktualisiert Produkt und dann wird es für die Produkte Formular, dass wieder fragen. So aktualisieren Produkt, wird es an der Spitze sein, hier haben wir es als private Unterstrich, Update Produkt. Und dann werde ich die Produktformulardaten weitergeben, die auch Produktformular oder Formulardaten selbst abtauchen. Also hier müssen wir auch an das Update übergeben, ein Formular, das weil was, wenn der Benutzer das Bild aktualisiert hat. Also genau, wie wir mit Update-Kategorie gemacht haben. Wie Sie sich erinnern, haben wir den Update-Kategorie-Service erstellt und dann haben wir eine Nachricht und einen Timer erstellt, um zur Produktliste zurückzukehren. Und wenn es einen Fehler gibt, zeigen wir eine Fehlermeldung an. Lassen Sie uns auch die Update-Methode hinzufügen, die auch in diesem Produktservice sein wird. So gehen wir wieder zum Produktservice. So haben wir auch das Produkt-Update und dann haben wir die Produktdaten selbst beobachtbar. Es wird für mich das aktualisierte Produkt zurückgeben und auch, wir müssen die ID übergeben, aber hier sind die Dinge ein bisschen anders. Wir müssen die ID übergeben und wir haben sie in einem Formular Daten. Sie können auch unsere holen Sie sich die ID selbst aus den Produktdaten. Aber meiner Meinung nach ist es besser, einen anderen Parameter hinzuzufügen, um das Produkt zu aktualisieren, was die Produkt-ID sein wird. Also werde ich hier auch eine Produkt-ID hinzufügen, die eine Zeichenfolge eingeben wird. Und dann gehe ich wieder zum Produktformular. Und auf der Update-Methode werde ich hinzufügen, wenn Sie sich erinnern, diesen Punkt aktuelle Produkt-ID, die wir zuvor definiert haben, und wir greifen es auf den Bearbeitungsmodus injiziert. Also, wenn Sie sich erinnern, haben wir hier, dass die Überprüfung des Bearbeitungsmodus und wir haben die aktuelle ID ihres Produkts der aktuellen Produkt-ID zugewiesen. Also, jetzt haben wir die ganze Methode funktioniert gut. Wir müssen nur die Daten einreichen. Lasst uns das retten. Wenn wir zu einem unserer Produkte gehen, wie die, die wir zuvor erstellt haben, werde ich hier sehen, dass, okay, ich habe den Produktnamen, Produktmarke eins. Ich aktualisiere zum Beispiel, wird vorgestellt. Und in der Beschreibung sage ich aktualisierte Beschreibung, nur um sicher zu sein, dass alles in Ordnung ist. Und dann klicken wir auf Update. Also lasst uns das aktualisieren. Wir werden sehen, dass das Produkt aktualisiert wird und wir gingen wieder zurück und wir werden sehen, dass das Produkt wirklich mit der aktualisierten Beschreibung aktualisiert wurde. Okay, lassen Sie uns versuchen, auch das Bild zu ändern. So werde ich hier sehen, dass ich zum Beispiel eines der Bilder wie dieses habe, ich aktualisiere und wir werden sehen, dass es auch aktualisiert wurde, wie wir hier sehen. 113. Dynamische Validation sind im Bearbeitungsmodus nicht erforderlich.: Deshalb habe ich das Hauptbild am Anfang nicht erforderlich gemacht , weil ich hier nur die Bildvorschau zeige, aber ich lade das Bild hier nicht wieder in die Eingabedatei. Also, wenn ich ein Update einreiche, und wie Sie im Back-End gesehen haben, haben wir bereits getan, dass wir das Bild überprüfen. Wenn es ein Bild mit dieser Anfrage gibt, dann in Ordnung, verwenden Sie es. Aber wenn nicht, dann behalten Sie das alte Bild. Wenn der Benutzer hier kein Bild hochgeladen hat. So, wie wir es im Back-End gemacht haben und wie wir es im Front-End umgehen. Aber wir haben Problem hier, dass, wenn das Produkt, wenn ich auf Sie klicken, Ich ein neues Produkt erstellen. Ich zeige dem Benutzer keinen Validierungsfehler hier. Wie zum Beispiel, wenn ich auf Erstellen klicke, zeige ich nur, dass das Produkt nicht erstellt wurde, aber ich zeige hier keinen Validierungsfehler an, den wir einige Validierungsfehler stützen müssen. Bei der Aktualisierung sollte diese Validierung jedoch nicht angezeigt werden. Mit anderen Worten, ich möchte im Bearbeitungsmodus, dies ist kein Pflichtfeld, aber onCreate, ich wollte ein erforderliches Feld sein. Wie können wir das machen? Lassen Sie uns zuerst dieses Feld wie erforderlich machen. Und auf der Vorlage selbst kopieren wir eine dieser kleinen Beschreibungen oder die kleinen Tags Wir haben hier, das Bild, laden Bild hoch und nach dem Bild hier können wir zum Beispiel einen Validierungsfehler setzen. Also würde ich sagen, dass das Produktformular, wie wenn der Benutzer kein Bild patcht hat, dann ungültig ist und gesendet wird, dann Anzeigefehler, sagen wir, dass Bild erforderlich ist. Dies wird jedoch nur angezeigt, wenn ein Fehler vorliegt und vorher kein Bild hochgeladen wurde. Also wollen wir es zeigen, wie ich es dir auf Create gesagt habe. So kehren wir zurück zum Formular selbst und dann machen wir diese Bildfeld nach Bedarf. Also gehen wir hierher, das setzt den Validator als erforderlich. Also, wenn ich zum Front-End gehe, klicke ich auf Erstellen, ich werde sehen, okay, Das Bild ist erforderlich. Und in diesem Fall kann ich kein Produkt nur einreichen, wenn ich ein Bild darin habe. Also lasst uns das schnell versuchen. Ich habe hier ein Produkt erstellt. Ich fühle das Formular bereits und ich habe auch das Bild hochgeladen. Wenn ich also auf Erstellen klicke, werde ich sehen, dass das Produkt wirklich erstellt wurde. Aber wenn es kein Bild gibt, dann bekomme ich einen Fehler. Dieses Bild ist erforderlich, wie wir zuvor gesehen haben. Aber was ich jetzt möchte, wenn ich in den Bearbeitungsmodus gehe, möchte ich dieses Feld nicht benötigen, wenn der Benutzer ein Produkt aktualisiert. Zum Beispiel aktualisiere ich diese. Klicken Sie auf Aktualisieren, ich bekomme einen Fehler. Das Bild ist erforderlich, da der Benutzer das Bild nicht ändern möchte. Also hat er nichts hochgeladen, aber das Feld selbst ist leer. Der Weg, das zu beheben, dass ich das Bildfeld nicht mehr fühle, um es nicht erforderlich zu machen, weil sonst, wenn ich aktualisiere, werde ich die Datei wieder zurücksenden und die Datei wird wieder hochgeladen. Und ich werde Dateien im Back-End dort repliziert haben. Gute Möglichkeit, dass ich im Bearbeitungsmodus diese Validierungsregel entfernen kann. Dann kann ich sagen, wenn es ID und diese ID gibt, wenn ich das Produkt bekomme, ist alles in Ordnung. Ich gehe hier und ich sage dieses Punktprodukt für das Bild selbst. Und dann sagen wir wieder setzen Validatoren, und die Validatoren werden null sein, wie wir hier sagten, wir haben okay Validatoren, aber diese Validatoren sind jetzt nichts leeres Array. Und damit dies funktioniert, wenn Sie sich daran erinnern, als wir einen Wert des Bildes gestapelt haben, müssen wir auf Aktualisierungswert und Gültigkeit überprüfen. So können wir das wieder aufrufen, um dieses Formularfeld zu aktualisieren und zu aktualisieren, um alle Änderungen zu nehmen, die dort getan hat, können wir diese Punkt-Produktform Bild und dann wieder aktualisieren Wert und Gültigkeit. Wenn wir also dieses sagen, dann werden wir sehen, dass es aktualisiert wurde und dann der Validator nicht mehr aktiv sein wird. Also, wenn ich hierher gehe, sage ich Jahr 2002, und ich habe nichts in diesem Bereich und es ist nicht gültig, weil ich hier keine Datei habe. Aber wenn ich auf Update klicke, würde es funktionieren und es wird die Datei aktualisieren. Aber wenn ich zu einem neuen Produkt gehe, wird dieses Feld benötigt. Ich kann kein Produkt nur erstellen, wenn ich das Feld hier fühle. Also im Bearbeitungsmodus haben wir benötigt und werden den Modus nicht bearbeiten, es ist nicht erforderlich. Sie können das Gleiche für alle Felder tun. Dieses Bild war nur ein Beispiel. 114. Products hinzufügen: In dieser Vorlesung werden wir sehen, wie Originator zu Produktliste Tabelle hinzufügen. Hinzufügen paginieren sie in prime NG ist sehr einfach. Es ist nur eine Eigenschaft, Sie können es hinzufügen und dann wird die Variable eine Paginierung haben. Also, wenn wir zu Prime NG gehen und dann gehen wir zur Tabelle, gibt es eine Kategorie namens Seite. Und hier werden Sie sehen, wie Sie die paginierte nur zusätzliche Eigenschaft verwenden können, die paginiert oder durch genannt wird. Und dann können Sie sehen, wie viele Zeilen Sie auf jeder Seite anzeigen können , die Sie auch einen Bericht über die Seite anzeigen können. Dies zeigt beispielsweise einen bis zehn von 100 Einträgen und Sie können keine Vorlage dafür haben. So können Sie einen Text angeben, der in diesem Bericht angezeigt werden soll. Und auch Zeilen pro Seite Option, die diese ist. Sie können auch Optionen anzeigen, wie viele Zeilen Sie auf einer Seite anzeigen möchten. Lassen Sie uns das zu unserem Tisch hinzufügen. Ich werde das paginierte zu unserer Tabelle hinzufügen. Also gehe ich hierher und sage paginate ist durch Zeilen sind 10. Also retten wir das. Wir gehen wieder zu unserer Bewerbung. Es ist wieder geladen. Und wir werden sehen, dass wir den Urheber bekommen haben. Sie können die anderen Vorlagen wie Shore aktuellen Bericht hinzufügen oder wenn Sie Zeilen pro Seite Option haben möchten. Also liegt es an dir. Für mich. Ich fühle, dass es so schön ist. 115. Benutzer die Tabellen- und Benutzerdienste: Okay, wie wir in diesem Kurs vereinbart haben, dass wir die Dinge nicht immer wieder wiederholen werden. Also vorher haben wir die Kategorie-Tabelle gemacht und es wird für die Benutzer das gleiche sein. Also, dafür erstelle ich eine Komponente, die Users list genannt wird. Und die Listenkomponente dieses Benutzers hat genau das gleiche, wie wir in Kategorien wie dem Toast selbst hatten, wie wir Konformation über Operationen haben. Und auch Admin-Seite, Ich werde nur diejenigen ersetzen, um Benutzer und auch hier Benutzer. Und dann haben wir wieder die Schaltfläche Neu, um einen neuen Benutzer hinzuzufügen. Und auch wir haben die Tabelle, die sie schätzen werden, werden Benutzer und auch ihre Felder sein, die wir alles über die Benutzer wissen und wie wir sie aus dem Backend bekommen. Für mich werde ich in der Tabelle nur den Namen, E-Mail und wenn er admin ist oder nicht, und das Land angezeigt . Und wir können auch diese Tabellen oder diese Spalten als sortierbar machen oder nicht. Und dafür haben wir den Benutzer, und der Benutzer hat einen Namen. E-Mail ist Admin und Land. Und wir haben die Schaltfläche Benutzer löschen und Benutzer aktualisieren. Und dafür haben wir die Route erstellt, die bereits vorher definiert sind, haben wir es geschafft Kategorien und Produkte. Wir haben die Benutzer, die sich auf die Listenkomponente des Benutzers und das Formular bezieht , das Sie nicht zu Benutzern von der Komponente ist. Um also auch die Daten aus der Datenbank zu erfassen, haben wir die Dienste für den Benutzer erstellt. Also die Benutzerkomponente, ich habe den Benutzerdienst und den Benutzerdienst. Wenn wir zu ihm gehen, wird es Benutzer bekommen Benutzer, erstellen Sie einen Benutzer, aktualisieren und löschen Sie genau, wie wir zuvor mit Kategorien gemacht haben. Und die API-URL ist für Benutzer. Und ich lege den Dienst genau in die Bibliothek des Benutzers, nicht in die Produktbibliothek, weil wir jetzt die Bibliothek des Benutzers verwenden. Die Bibliothek des Benutzers würde also einen Ordner haben, der Dienste genannt wird. Und innerhalb der Dienste werden wir Benutzerdienste haben. Und auch habe ich ein Modell des Benutzers genau so erstellt, wie wir es im Back-End haben, wie ID, Name, Passwort, E-Mail, Telefon und Token. Wenn er ein Token hat, wie wir später sehen werden, ist admin, Straße, Wohnung, Postleitzahl, Stadt und Land. Und wir gehen zurück zur Benutzerlistenkomponente. Wie immer, wenn NG darauf, sage ich nicht Kategorien, sondern Nutzer bekommen. Und diese Benutzer, wir haben sie bereits im Back-End. So haben wir hier bei Benutzern und auch Benutzer bekommen. Und dann werde ich die Benutzerdienste verwenden, um die Benutzer und ihre abonnierten Benutzer zu erhalten. Und this.UserID ist die Benutzer, die wir als Member-Klasse definiert haben, die Array von Benutzern ist. Und dann verwende ich es in dieser Tabelle als Wert. Und wir überprüfen das Front-End, wir werden sehen, dass die Liste des Benutzers so kam. Also haben wir hier den Benutzernamen, E-Mail ist admin, und das Land, es ist hier leer, weil in der Datenbank dieses Land auch leer ist. Wir werden sie aktualisieren, wenn wir die Bearbeitung in der gleichen Zeit tun, die ich auch getan habe, dass löschen, die auch Bestätigungsdialog sein wird, wie möchten Sie den Benutzer löschen? Und dann kann der Benutzer ja oder nein auswählen, und dann wird es die richtige Entscheidung ausführen. Also hier haben wir auch den Benutzer löschen und wir führen diesen Code aus, wenn der Benutzer auf Schaltfläche Löschen klicken Hinzufügen, wenn ich zur Liste des Benutzers gehe, rufen wir erneut den Bestätigungsdienst an. Also müssen wir bestätigen, ob sie Benutzer gelöscht werden sollen oder nicht. Und dann, wenn sie akzeptieren, dass, dann Benutzerdienst, rufen wir einen Benutzer löschen mit der ausgewählten Benutzer-ID. Und dann aktualisiere ich die Liste erneut, indem ich die Benutzer bekomme. Und dann wird der Nachrichtendienst , der mir zeigt, dass der Benutzer gelöscht wird oder der Benutzer gelöscht wurde. Und denken Sie daran, dass wir den Benutzer, das Benutzermodell und die Benutzer aus der Verwendung der Bibliothek importiert haben. Ich möchte hier eine Sache hinzufügen, die ich nicht anzeigen möchte, ist admin wahr oder falsch? Wir können zum Beispiel ein Symbol anzeigen oder wir können etwas in der primären Endverwendung anzeigen wird Tag genannt. Und Tag, wir können eines dieser Tags basierend auf dem Zustand verwenden, wenn er admin ist oder nicht. Zum Beispiel werde ich dieses Tag anzeigen, wenn der Benutzer admin ist, und ich werde diese DAG mit diesem Symbol anzeigen, wenn der Benutzer nicht admin ist. Also lasst uns das machen. Wir können das Tag-Modul auch in unser App-Modul importieren. Und wenn wir hierher gehen, verwenden wir es in unserem UX-Modul. Und wir können das Beispiel verwenden, das mit Symbolen kommt. So hat er es in einer Weise verwendet, wie wenn wir zur Quelle gehen, werden wir Symbole sehen, die er verwendet p-Tag. Und dann gab er einen gewissen Spielraum an und dann wählte er das Symbol und dann Schweregrad wird Erfolg sein und der Wert wird Erfolg sein. Wir haben hier keinen Wert, also werden wir nur ein Symbol haben. So können wir diese eine dag verwenden und zu unserer Benutzerlistenkomponente gehen. Und hier ist es, Admin. Wir werden das nicht überprüfen, aber wir werden sagen, dass diese DAG verwenden und ng-if wird dieses Tag zeigen oder nicht basiert, wenn der Benutzer admin ist oder nicht. Also würde ich sagen, Benutzer ist admin. Also, wenn der Benutzer admin ist, so machen oder zeigen Sie dieses Badge oder dieses Tag. Und wie wir hier gesagt haben, brauchen wir den Wert nicht. So können wir es speichern und es in den Front-End-Läuse überprüfen, wir werden sehen, dass wir dieses Tag bereits haben und wir können auch die Appelle verwenden, wie es um es herum ist. Wir können also nicht sagen, abgerundet ist wahr. Wir können dieses Tag als abgerundete Ränder setzen, so können wir es hier hinzufügen. Wir haben eine abgerundete durch, so hat es Eingabe, die gerundet genannt wird. Also sparen wir. Und wieder, wenn es nicht Admin ist, dann werde ich die Gefahr anzeigen. Und ich sage, dass der Benutzer nicht admin ist. Also hier haben wir ein weiteres P-Tag und ich sage MET ng-wenn nicht admin, und dann wird das Symbol ein anderes Symbol und Schweregrad wird Gefahr sein, wie rot und abgerundet durch. Also, wenn wir wieder gehen und wir überprüfen das Symbol des Symbols für es ist Zeiten, so können wir es nehmen und es hier platzieren. Wir speichern die Anwendung und prüfen, ob alles gut funktioniert. So wie Sie hier sehen, haben wir dann den Admin kommen mit true oder false flow von hier, Ich werde nicht, wenn der Admin dieses Symbol hat, also ist er admin. Wenn nicht, dann wird er nicht hinzugefügt. Also zeige ich Ihnen das, weil ich sehen möchte, wie wir die Werte in diesem alles genau so machen können , wie wir wollen. Also, wenn Sie Icon spielen wollten, können Sie es anzeigen. Wenn Sie Bild möchten, können Sie Bild anzeigen, wie wir im Produkt gesehen haben. Und wenn Sie etwas anderes wie eine Komponente anzeigen möchten, können Sie es so gut tun, wie wir hier in Admin sehen. 116. Benutzerformular, Füge und Bearbeiten: Okay, in dieser Vorlesung gehe ich durch das Benutzerformular. Das Benutzerformular habe ich genau auch als Kategorien erstellt, wie ich Ihnen gesagt habe, weil Kategorien unsere Referenz sein werden. Und daraus werden wir eine Vorlage haben und diese Vorlage überall dort verwenden, wo wir wollen. Ich werde schnell gehen, um die gleichen Dinge nicht zu wiederholen. Aber wenn Sie alles im Detail wollen, wie wir dieses Formular erstellt haben, werden Sie die Kategorien für überprüfen. So bilden sich die Kategorien. Ich habe alles im Detail erklärt, wie wir dieses Formular aufbauen. Also genau, wie wir es mit Kategorien gemacht haben. Sie wissen, dass das Benutzermodell, das wir zuvor erstellt haben, einen Namen, ein Passwort, eine E-Mail und andere Dinge benötigt . Und darauf basiert, habe ich die vier erschaffen. Also ist alles gleich. Wir haben einen Toast für Bestätigungsnachrichten und auch den Header, die Symbolleiste, die die onsubmit enthalten und abbrechen, wenn Sie es hier mehr im Detail sehen möchten, habe ich Ihnen gezeigt. Wie Sie hier sehen, haben wir das Update und Abbrechen und es ändert sich wenn ich auf Sie basierend auf dem Bearbeitungsmodus klicke. Und jetzt haben wir den Namen, E-Mail und auch das Telefon. Und auch, wir haben hier der Admin ist Admin und die Straße, Wohnung und andere Sachen. Natürlich gibt es neue Dinge, die ich Ihnen zeigen werde, wie man sie macht. Zum Beispiel müssen wir zeigen, wie die E-Mail validiert werden kann, was eine neue Sache ist, und auch, wie wir diese Länder in Länder fallen lassen. Jetzt habe ich es leer. Ich möchte Ihnen zeigen, wie wir die Länder aus einer Bibliothek in unsere Drop-down-Liste bringen können. Und in der Komponente selbst gehe ich auf Energie drauf. Ich sage init, user phone und in der Tat user form. Wie jedes Formular verwenden wir Formular-Builder, haben wir den Namen, der erforderlich ist. Das Passwort ist auch erforderlich, aber beim Update ist nicht erforderlich, denn wie Sie sich im Backend erinnern, wie wir es gemacht haben, haben wir es so gemacht, dass, wenn der Benutzer kein Passwort auf die Aktualisierung eines Benutzers setzt, dann wird es das vorherige Passwort behalten, was er bereits hat. Aber wenn er etwas hier gesetzt hat, wird es das Passwort basierend darauf aktualisieren. Also genau, wie wir mit dem Bild des Produkts gemacht haben, wenn Sie sich erinnern, die gleiche Sache genau, werden wir mit dem Benutzer für ein Passwort zu tun wird erforderlich, wenn ich das neue Formular haben werde. Aber es wird nicht erforderlich sein, wenn ich einen Benutzer bearbeite. Also hier müssen wir das Ding mit einem Passwort tun und behandeln. So, wie wir hier sehen, haben wir es standardmäßig erforderlich, und dann werden wir gehen, um den Bearbeitungsmodus zu überprüfen, wie wir zuvor sehen. Und dann werde ich dieses Punkt-Benutzerformular sagen, das Passwort, wenn ich im Bearbeitungsmodus bin. Entweder ist es MOD durch Set-Validatoren, es wird als leeres Array von Validatoren sein. Und dann sagen wir dieses Punkt-Passwort, Aktualisierungswert und Gültigkeit. Wie wir hier sehen, haben wir dieses Feld aktualisiert, nachdem wir den Modus überprüft haben. Also, wenn ich zurückgehe und es ausprobieren, so gehen wir zu Benutzern oder wussten, dass es erforderlich sein würde. Und bei Bearbeiten wird es nicht erforderlich sein. So können wir aktualisieren, wenn es nicht erforderlich ist. Auf dieser Grundlage habe ich auch das Formular erstellt. Wir werden die E-Mail bekommen. Die E-Mail selbst ist ebenfalls erforderlich. Aber es ist nicht nur erforderlich. Was ist, wenn der Benutzer etwas falsch macht? Was, wenn wir so setzen, dann müssen wir ihm sagen Nein, es ist falsch. E-Mail. können wir sehr leicht machen. Es ist auch das ist ein weiterer Validator, der E-Mail genannt wird. Also müssen wir ein neues Array setzen, wie wir mehrere Validatoren haben. Also werde ich sagen, erforderlich und auch validator dot email. Also in diesem Fall werden wir zwei Validatoren haben. Aber wenn wir wieder zu unserem Formular zurückkehren und versuchen, auf Sie zu klicken, dann sagen Sie zum Beispiel eine ungültige E-Mail, so etwas. Es ist keine E-Mail. Wenn ich auf Erstellen klicke, werde ich sagen, ich werde sehen, dass es eine E-Mail erforderlich ist. Ich möchte nicht, dass E-Mail erforderlich ist. Ich möchte sagen, dass E-Mail ungültig ist, aber wenn es leer ist, würde ich sagen, okay, E-Mail ist erforderlich. Also, wie wir zwischen zwei Nachrichten unterscheiden können. So, wie Sie hier sehen, haben wir ng-if Benutzer E-Mail ungültig und das Formular gesendet wird, dann zeigen Sie für mich eine Nachricht. Wir können hier zwei Arten von Nachrichten haben. So können wir diese Nachricht teilen, wir können sie in eine Spanne setzen und wir haben eine andere Botschaft in einer anderen Spanne. Also können wir hier zwei Spannweiten haben. Eine für die E-Mail ist erforderlich, und eine, die E-Mail ist ungültig. Aber hier müssen wir auch ng-if überprüfen, was ist der Typ des Fehlers? Also werde ich hier auch auf ng-if für E-Mail sagen, ich werde sagen, Benutzerformular Punktfehler. Ist ein Pflichtfeld. Dann zeig mir diese Nachricht. Aber wenn der Fehler E-Mail ist, dann zeigen Sie mir die andere Nachricht. So können wir das auch hier setzen und sagen, anstelle von Fehlern Punkt erforderlich, sagen wir Fehler Punkt E-Mail. Also speichern wir das und versuchen es erneut. Und wir werden sehen, wenn ich eine falsche E-Mail setzen, Ich werde sagen, E-Mail ist ungültig, aber wenn ich leer, Ich werde sehen, E-Mail ist erforderlich. Auf diese Weise können Sie zwischen den Validatoren in Ihrer E-Mail unterscheiden, indem Sie zu unseren Komponenten zurückkehren. Also haben wir hier zwei Validatoren. Und für das Telefon, es ist auch für die fremden als IC hier erforderlich, ich habe ein neues Steuerelement verwendet, das Input Mask genannt wird. Und diese Eingabemaske, wenn Sie zu Prime NG gehen, werden Sie sehen, dass ich diese Komponente verwendet. Diese Komponente dient nur dazu, Ihnen zu zeigen und dem Benutzer zu helfen , diese Nummer in einer richtigen Weise einzugeben. Wie Sie hier sehen, habe ich eine Nummer gesetzt und sie maskiert sie. Das zu verwenden ist also genau das Gleiche. Ich habe das Modul in App-Modul importiert und dann habe ich eines dieser Beispiele verwendet werden, zum Beispiel das, das die Schriftart. Aber wie Sie die gewünschte Maske angeben können, können Sie sie angeben, indem Sie 99 auf diese Weise setzen. Also, wenn ich diesen Teil auch aus der Maske entferne, dann muss ich die Maske auf diese Weise haben. Es ist also eine Maskierung. So wird der Benutzer das immer dort hineinlegen, richtig. So sehen Sie hier habe ich die Maskierung genau so definiert, wie ich es hier Admin ist ein Schalter. Wir hatten das bereits im Produkt gesehen, wenn es vorkommt oder nicht. Straße ist eine Textbox Wohnung, PLZ Stadt. Und dann haben wir die Länder. In der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie ihre Länder in dieser Liste mit Hilfe einer externen Bibliothek auflisten können. Aber jetzt, wie wir hier in unserer Komponente sehen , sind wir in der Lage, dasselbe zu tun, wie wir es mit den Kategorien und dem Produkt gemacht haben. Also, wenn ich zuerst gehe, überprüfe ich den Bearbeitungsmodus und ich überprüfe, ob ich Parameter über den Benutzer habe. Also, wenn ich Parameter habe, zum Beispiel hier, die Benutzer-ID ist, dann bin ich im Bearbeitungsmodus. Und im Bearbeitungsmodus zeige ich einige Informationen, die ich aus dem Backend aufgewachsen bin. Also verwende ich den Benutzerdienst, um einen Benutzer nach ID zu erhalten und diesen Wert zu abonnieren. Und dann setze ich die Steuerelemente basierend auf den Werten, die ich vom Backend erhalten habe. Aber wenn ich auf einem neuen bin, dann werde ich einen Produzenten hinzufügen. Und dieser Benutzer hinzufügen wird einen Benutzer für mich erstellen. Und dann wird es Erfolgsmeldung anzeigen und zurückgehen, wenn sie leer sind. Und der Ort, wir gehen zurück auf die Liste des Benutzers und wenn es einen Fehler gibt, wird es mir sagen, Benutzer ist nicht erstellt. Wir haben über all dieses Zeug in früheren Videos von Kategorien und Produkten gesprochen. Sie können sie genauer sehen und wiederholen, wenn Sie etwas nicht verstehen. Ich erkläre hier nur die neuen Dinge, die wirklich wichtig für Sie sind, die wir vorher nicht im Kurs und in der nächsten Vorlesung getan haben, Mal sehen, wie wir ihre Länder füllen können, basierend auf einer externen Bibliothek. Wie ich dir schon gesagt habe. 117. Länder in den Abkürzungen mit i18n to: Ok, großartig. Jetzt in diesem Vortrag werde ich Ihnen zeigen, wie Sie die Länderliste fühlen. Natürlich werden wir nicht eine ganze Reihe von Ländern auf der Welt haben. Nein, aber wir werden eine Bibliothek benutzen, die immer mit dem Code der Länder und den Namen aktualisiert wird. Und diese Bibliothek heißt IAT EN, ISO-Länder. Und Sie können es als MPM-Pakete finden und Sie können es durch diesen Kommentar installieren. Also gehe ich zu unseren Benutzern Formularkomponente und ich werde die Liste des Landes hier ausgefüllt haben. Also haben wir jetzt ein leeres Array, weil wir es für die Dropdown-Liste verwenden , wie wir es genau mit Kategorien im Produkt getan haben. Also zuerst müssen wir die Bibliothek installieren, die unseren Compiler stoppt und dann den Befehl von MPM install einfügen. Und dann werden wir sehen, wie wir diese Bibliothek anrufen und die Liste der Länder anrufen können. Okay, wie Sie hier sehen, ich habe es bereits installiert hatte. Wenn wir nun auf das Formular des Benutzers gehen, müssen wir das Feld des Landes haben, genau wie wir es mit Kategorien gemacht haben. Wir können eine Methode definieren, die aufgerufen wird, zum Beispiel, erhalten Länder. Und das gibt Ländern, ich werde ein Land initialisieren und sie aus dieser Bibliothek holen. Also definieren wir eine neue Methode. Wir nennen es private Git-Länder, und es wird hier definiert werden. Okay, gehen wir zur Dokumentation dieser Bibliothek. Ich werde hierher gehen und nachsehen. Es besagt, dass ich eine Variable definieren muss, die Länder genannt wird, und dann werde ich eine Anforderung tun. Okay, hier verwendet es ein JavaScript, aber in TypeScript, wenn Sie eine der Bibliotheken importieren möchten, müssen Sie Folgendes tun. Du musst hierher gehen. Und nachdem Sie die Bibliothek selbst installiert haben, sagen Sie Importieren und dann künstlerisch oder Stern. Und dann sagen Sie, wie Sie zum Beispiel eine Konstante definieren, die Sie für diese Bibliothek verwenden werden. Es ist, als würde ich sagen, importieren Sie für mich alles und setzen Sie es in eine Konstante, nennen Sie es Länder zum Beispiel, Liste oder Lippenbibliothek. Und dann sagen wir von. Und dann definieren Sie den Pfad, der hier definiert ist. Also sagen Sie, ich möchte es aus dieser Bibliothek importieren. Ok? haben wir definiert. Wir setzen es hier und wir werden sehen, dass alles noch in Ordnung ist. Wir haben noch keinen Fehler. Okay, wir gehen zurück in unsere GET-Länder. Wir müssen die Zuteilung registrieren und die Liste des Landes lesen. So hat er es gesagt. Also können wir auch diese Zeile nicht kopieren. Sagen wir, Länder registrieren Gebietsschema und wir müssen das tun, aber wir haben keine Länder. Wir haben etwas, das die Lippe des Landes nennt. Also werde ich hier sagen, Länder Lib dann locale registrieren und dann benötigen. Und dies erforderlich wird von der Bibliothek bitten, die englische JSON-Datei zu bringen , die sich befindet und die gesamte Liste des Landes enthält. Sie können auch HTTP-Anfrage verwenden, um diesen JSON zu erhalten. Aber ich werde Ihnen einen einfacheren Weg zeigen. Es ist sehr einfach, damit es funktioniert. Sie können es als Erklärung machen und Sie können sagen, deklarieren und dann verursacht, erfordern. Und in diesem Fall wird es hoffentlich funktionieren. So, wie Sie hier sehen, haben wir jetzt zu erwerben und alles funktioniert gut. Und ich habe hier die Bibliothek. Okay, lassen Sie uns ein Beispiel sehen, um alle Länder zu bekommen. So wie Sie hier sehen, sagte er Länder definieren und dann machte er die erfordern und dass er sagte Konsolenprotokoll mit den Ländern, erhalten Namen in Englisch und wählen Sie offizielle. Also lassen Sie uns das auf diese Weise tun und versuchen zu sehen, was wir in unserem Konsolenprotokoll haben , um die Dinge genau wie wir für unser Dropdown wollen abzubilden. Also werde ich diesen Code hier setzen. Ich ersetze die Lippe dieses Landes durch diese. Und dann können wir sehen, was es für uns tippen wird. Nachdem ich gespeichert habe, gehe ich erneut zum Admin-Panel, aber wir müssen das Projekt ausführen. Wie wir hier sehen , läuft dieses Projekt erfolgreich. Wir aktualisieren hier, um zu sehen, was wir in der Konsole bekommen werden. Okay, in der Konsole habe ich ein Objekt. Und dieses Objekt hat Code ihres Landes und dann den Namen davon. Okay, aber so wie es ist, können wir es nicht so akzeptieren. Wir müssen die Länder als Liste haben, weil unsere Länder zurückgegangen Länder als eine Reihe akzeptieren. So können wir verwenden oder einen Weg finden, um die Dinge, die sich innerhalb dieser Methode als Array befinden, abzubilden. Also, wie können wir das tun? Also werde ich zuerst tun, ich werde dieses Konsolenprotokoll loswerden. Wir werden es für etwas anderes verwenden. Also werde ich sagen, dass Länder leben, geben Sie mir die Namen auf Englisch, und dann müssen wir darauf kartieren. So können wir nicht auf Objekt zuordnen, indem wir eine Methode verwenden, die Objektpunkteinträge genannt wird. Und bei dieser Methode wird es mir erlauben, alle Einträge so zu durchlaufen, als ob sie ein Array sind. Um es Ihnen klarer zu erklären, werde ich machen, Ich werde davon ausgehen, dass diese Einträge als Array und ich werde sagen Karte, okay, Ich bete akzeptieren, dass Karte und diese Karte wurde für mich Eintrag durch Eingabe zurückgegeben. Um eine Operation damit zu machen. Also lassen Sie uns zum Beispiel, Konsole protokollieren diesen Eintrag. Also werde ich hier sagen, okay, Konsolenprotokoll für mich, dass Eintrag. Lassen Sie uns aktualisieren und versuchen Sie es erneut, und wir werden sehen, was wir in der Konsolensperre haben werden. Wie Sie hier sehen, ist es aktualisiert und wir haben alle Array-Mitglieder. Das Objekt kommt also immer, da die erste Zahl der Schlüssel ist, und das zweite Mitglied ist das Spanien. Also und wir haben alle Arrays wie diese. So können wir dann mit der Karte wie genau das zurückkehren, was wir wollen. Also in Benutzerform benötigen wir die Option als Name und den Optionswert als ID beschriftet. So können wir auf dieser Grundlage zuordnen. So können wir hier sagen, diese Punktländer werden Objekteinträge über alle Länder sein, die sich in dieser Bibliothek befinden und sie überordnen. Und anstatt das Objekt selbst zurückzugeben, der Eintrag selbst für mich und das Objekt zurück, bei dem die ID Eintrag 0 ist, wie der Index 0. Also haben wir hier die ID und der Name wird Eintrag und eins sein. So haben wir die ID als Eintrag 0 und der Name ihres Landes wird Eintrag eins für den zweiten Eintrag sein. Also, danach, lassen Sie uns die Länder konsolen. Also werde ich hier sagen, Konsolenpunktprotokoll wieder diese Länder. Nachdem wir das gespeichert haben, aktualisieren wir, gehen wir zu unserer Anwendung und wir werden sehen, dass wir eine Liste oder ein Array aller Länder mit der Code-ID und dem Namen zurückgegeben haben . Und wenn ich hier in die Länder gehe, denn wie Sie sich erinnern, haben wir dieses Land ist Array, leeres Array. Und dieses Array wird für Optionen dieses Dropdowns verwendet. Also, wenn ich hierher gehe, werde ich sehen, dass ich alle Länder habe. Und das Schöne, dass ich sie durchsuchen kann, damit ich Spanien sagen kann, okay, ich habe Spanien und alles funktioniert perfekt. Und natürlich kann ich dann meinen Benutzer aktualisieren. Also würde ich sagen, aktualisieren Sie hier und dann wird es mich zurück und ich werde hierher kommen, dass Land und ist Schmerz. Das liegt daran, was wir in der Datenbank speichern, zurück zum Umbenennen, dann müssen Sie auch das Mapping hier in dieser Liste tun. Also müssen wir eine Funktion in der Liste ihres Landes machen. Und dann wird es gehen und nach Spanien suchen und dann den Ländernamen zurückbekommen. Und diese Methode wird hier zur Verfügung gestellt. Also können Sie sagen, ihre Bibliothek, geben Sie mir den Namen des Codes uns, und es wird Ihnen den Namen des Landes geben, das ist Vereinigte Staaten von Amerika. Als Hausaufgaben für Sie oder als Auftrag möchte ich, dass Sie für mich in der nächsten Vorlesung tun, die Aufgabe, die wir hier in der Liste bekommen, den wirklichen Namen des Landes, aber nicht den Namen oder den Code des Landes. Ihre Arbeit wird also genau in der Benutzerliste basieren. Sie müssen diese Bibliothek also erneut in Benutzern, dieser Komponente, verwenden. Und dann musst du den Namen kartieren oder herausfinden, wo wir dieses Feld abbilden. Also statt dieses Benutzers, das Land, müssen Sie hier etwas tun. Diese Lösung wird auch mit der Zuweisung zur Verfügung gestellt und ich werde sie auch an den Code anhängen. Auf diese Weise haben wir alles in Bezug auf den Benutzer getan. Also haben wir alles Namen, E-Mail ist Admin und Land. Und wie wir vorher vereinbart haben, dass der Nutzer für uns der gleiche ist wie der Kunde. Und wenn Sie es größer oder komplizierter machen wollen, können Sie die Benutzer der Website nicht über die Kunden trennen , da wir hier den Benutzer als Kunde verwenden. Und es kann admin sein oder nicht, aber es wird genau die gleiche Art und Weise sein, wie wir mit den Benutzern gemacht haben, um einen Kunden anzuhängen. 118. Die Lösung in Länder recherchieren: Okay, wie Sie hier sehen, habe ich erfolgreich den vollständigen Namen des Landes abgerufen. Wie habe ich das gemacht? Zunächst habe ich für das Land in der Länderliste der Benutzer eine Methode namens get country name erstellt, und dann übergebe ich dem Benutzer dieses Land. Und weil wir die Länderkennung in der Datenbank speichern. Also lassen Sie uns diesen Ländernamen überprüfen. Wie Sie hier sehen, überprüfe ich, ob ein Länderschlüssel an die Methode übergeben wird, kehrte dann für mich zurück, Users Service tut gutes Land. Okay, also habe ich eine Methode definiert, die im Benutzerdienst als gutes Land bezeichnet wird. Also, wie Sie hier sehen, sie bekommen Land ist mit der Lippe des Landes oder ihre Länder Bibliothek, die wir zuvor im vorherigen Video verwendet. Und dann erhalten Sie Namen und dann iPads den Länderschlüssel, und dann die Sprache, die ich das bekommen möchte. Wenn Sie sich erinnern, gab es etwas für die Registrierung dieser Bibliothek, wie Sie hier sehen, wenn wir es verwenden möchten, müssen wir registrieren, dass sie sich befinden. Also, wie ich gemacht habe, dass ich diese Registrierung entfernt habe und ich sie in den Konstruktor dieses Dienstes, des Benutzerdienstes. So wird es nur einmal aufgerufen werden. Also habe ich bereits angepasst Dislocate nur ein Mal, weil Benutzerdienst aufgerufen wird Nur einmal, wenn ich die Anwendung initialisiere, entferne ich das von Benutzern, denn ich habe es von hier entfernt. Also haben wir nicht diesen Aufruf der Bibliothek noch einmal oder Registrierung. Wir haben nur die gleiche Methode für Länder. Und dann sagte ich, dass diese Länder den Benutzerdienst nutzen und dann bekommen. Also werde ich hierher gehen, um Länder zu holen. Und wie Sie hier sehen, gebe ich die gleichen Code-Objekteinträge zurück. Und dann verwende ich die Bibliothek, die ich hier im Benutzerdienst initialisiert habe. Auf diese Weise verwenden wir es nur einmal. Wir nennen es einmal, und wir haben keine Duplizierung der Registrierung des Gebietsschemas, wie wir zuvor gesehen haben. Also immer, wenn Sie etwas Duplizierung haben, werfen Sie die Dinge an den Dienst. Außerdem habe ich einen Fehler gehört, weil ich Länder innerhalb des Benutzerdienstes verwende. Was ist, wenn ich Git Land und Land in anderen Bibliotheken verwenden möchte, wie zum Beispiel in Bestellungen oder in Produkten. In diesem Fall entferne ich all dies und erstelle einen Dienst, der zum Beispiel Dienstprogramme genannt wird. Diese Dienstprogramme geben mir zum Beispiel Länder, Städte, zum Beispiel für die Texttransformation oder für die Formatierung von Zahlen. So können wir diese Dienstprogramme überall in unserer Anwendung oder Arbeitsbereich verwenden. Wir werden sehen, dass später, wenn wir brauchen Länder und Land in unserem Projekt Schritt für Schritt. 119. Gestalte die Bestandteile von Bestellungen, Details und Services: Okay, jetzt sind wir hier, wir werden die Bestellliste und die Bestelldetails Seite erstellen. Also auch dafür müssen wir zwei Komponenten machen. Erstens, oder jene Listen, in denen ich die Tabelle der Bestellung und auch die Bestelldetails sehen werde, wo ich die Details der Bestellung sehen werde, wie wir es immer tun, werden wir zwei Komponenten erstellen. Natürlich verwende ich eine ECS-Konsole. Wie immer habe ich eine neue Komponente genannt, die Bestellliste genannt wird, und es wird eine Anwendung oder ein Administrator erstellt werden. Und dann habe ich einen Lebensstil, um keine CSS-Datei zu generieren, weil wir sie nicht brauchen. Wir haben öffentliche Stile. Und auch habe ich einen Selektor erstellt, der admin sein wird oder es gibt eine Liste, und dann habe ich diese Tests übersprungen. Lassen Sie uns diesen Teil laufen. Und dann werden wir das nächste sehen, das ist das Bestelldetail. Hier werden wir keine Form haben, wir werden auf die Details haben und im Detail werde ich die Bestellung anzeigen und dann kann ich den Zustand der Bestellung ändern, wie wir es immer mit jedem Problem tun. Also hier werde ich den Artikel als Admin-Bestellungen Detail nennen. Also, was wird der Selektor sein? Und es wird genau die gleichen Optionen sein, die wir für die Bestellliste wählen. Okay, gehen wir zurück zu unserer Codestruktur, um zu sehen, ob alles erstellt wird. Okay, wir haben jetzt, alles ist erschaffen. Wir haben jetzt eine leere Komponente. Machen wir zuerst die Bestellliste, die Bestellliste. So wird es genau das gleiche wie Kategorien sein, wie ich Ihnen gesagt habe, wir haben die Kategorien als Vorlage. Und wenn Sie sich erinnern, haben wir immer die Vorlage der Tabelle definiert, die wir vier Kategorien verwendet haben. Also werde ich nicht auch das Gleiche hier benutzen. Also werde ich diesen Teil kopieren, wieder zur Bestellliste gehen, und dann werden wir hier ein paar Sachen machen. Natürlich wird es nicht genau das Gleiche sein. Zum Beispiel werden wir nur ältere löschen haben, aber wir werden zum Beispiel nicht alles aktualisieren. Wir werden sagen, Sichere Ordnung. Wie werden wir das Detail der Bestellungen sehen, weil wir es nicht bearbeiten werden. Also werde ich diese Dinge schnell umbenennen. Wie Sie sehen, habe ich alles umbenannt. Wir haben jetzt Befehle, Liste der Aufträge, und dann habe ich umbenannt, dass es hier sinkt. Natürlich wird die Bestellung nicht mit irgendeinem neuen kommen, wie wir hier mit Kategorie haben, weil die Bestellung vom Benutzer im Shop selbst platziert wird. So wird der Benutzer die Bestellung aufgeben. Wir können hier keine neue Bestellung erstellen. In diesem Fall können wir diesen Teil entfernen. So können Sie natürlich immer noch eine neue Bestellung erstellen. Sie müssen nur das Formular noch einmal tun und folgen, was wir zuvor getan haben. Aber jetzt zum Detail möchte ich Ihnen verschiedene Dinge zeigen, um nicht das Gleiche zu sein , was wir zuvor in früheren Teilen gemacht haben. Also werde ich all diese Symbolleiste loswerden, die für die Erstellung oder eine neue Reihenfolge verwendet wird , damit wir es loswerden können, wie wir hier sehen. Und jetzt werden wir einfachere Tabelle haben. Wie Sie sich erinnern, hat die Reihenfolge einige Felder, die wir zuvor im Back-End definiert haben. Also jetzt werden wir auch wieder tun, das gleiche Modell, das wir für das Front-End haben. Und wenn Sie sich erinnern, haben wir eine Bibliothek erstellt, die Orders genannt wird. Also in Bestellungen werden wir auch unser Modell platzieren. Also werde ich das schnell machen. Wie Sie hier sehen, habe ich das Bestellmodell erstellt. Das Auftragsmodell enthält einen sogenannten Auftragsposition. Und der Bestellartikel, es sollte auch ein anderes Modell sein. So können wir auch dieses Modell erstellen. Also haben wir hier eine andere Datei, die Bestellartikel genannt wird. Also mit diesem Bestellartikel werde ich eine neue Klasse platzieren, die Bestellartikel genannt wird. Und dann haben wir diesen Bestellartikel, der Produkt-ID und die Menge haben wird. So gehen wir zurück zum Bestellartikel und importieren diesen Bestellartikel. So haben wir hier oder den Artikel, der aus dem Bestellartikel importiert wird. Wir müssen auch daran denken, dass wir dieses Modell in der Indexdatei exportieren müssen. Also haben wir hier auch, Exportstern des Modells selbst. Und dann bestellen. Also haben wir hier die Bestellung und ebenso müssen wir den Bestellartikel exportieren, so dass wir speichern alles funktioniert gut, wie Sie hier sehen wir das Bestellmodul, das wir zuvor erstellt haben. Später. Wir werden auch die Dienste erstellen. So werden wir jetzt Ordner erstellen, Lassen Sie uns es Dienste nennen, die wir darin platzieren werden, die Bestellungen Service. Also gehen Sie zurück zu unserer Bewerbung. Wir werden eine andere Variable oder ein anderes Klassenmitglied definieren, die Aufträge genannt wird. Und Störungen werden eine Typenordnung haben. Und diese Reihenfolge haben wir zuvor erstellt, und es wird leeres Array am Anfang sein. Manchmal erhalten Sie diesen Fehler, wie Eigenschaftsreihenfolge Element im Typ undefined fehlt. Also ist es besser, wie immer die Felder zu haben. Optional wie immer. Also, wenn Sie dieses Feld als optional haben, wird es Sie nicht so sehr stören das Eastland, dass es Ihnen zeigt. Ja. Ok. Dies ist nicht definiert. Sie meinen, Sie müssen es definieren und dann erstellen Sie Bestellartikel usw. Wenn Sie also nur ein Array definieren, ist es besser, es einfach zu einem optionalen zu machen. Und hier werden Sie kein Problem mehr haben. Und wir fügen diese auch hinzu, um hier kein Problem zu haben. So werden wir die Aufträge haben, Aufträge Array und geordnetes Array ist leer. Also gehen wir zurück zu unserer Vorlage und wir werden diese Module oder diese Mitglieder Felder hier hinzufügen. Also habe ich diese Spalten wie Benutzergesamtpreis und dann das Bestelldatum und den Status hinzugefügt. Und hier werden wir die Säule nur für Handlungen haben. Wie Sie hier sehen, können Sie die Spalten hinzufügen, die Sie möchten, basierend auf dem, was Sie anzeigen möchten. Also hier brauche ich nur das, aber natürlich hast du die Freiheit, mehr Sachen für dich hinzuzufügen. Also jetzt gehen wir wieder zu der Vorlage hier, zu den Werten, in denen wir die Werte der Bestellung anzeigen. Und wir werden all das Zeug entfernen. Wir halten nur die Aktionstasten und wir werden nur wie die Werte zeigen, die in diesen Feldern sind. Okay, füge hinzu, ich habe all diese Felder hinzugefügt. Wir werden später sehen, wie wir ein schlechtes für ihren Status machen können. Wie zeigen wir eine Farbe der Bestellung basierend auf dem Status der Bestellung. Ich möchte auch einige Bestellung hinzufügen, damit wir keine Bestellung für ihren Namen haben können, sorry für den Benutzer, für den Preis. Und auch Sie können nach Datum und Sie können auch den Status bestellen. Also lasst uns das schnell machen. Wie Sie hier sehen, habe ich alle Mitarbeiter so definiert, dass sie sortierbar sind, wie wir brauchen. Werfen wir einen Blick, wenn wir dort kein Problem haben. Also werde ich zum Bestellungstabelle gehen. Sie sehen, dass ich einen Fehler habe, dass ich die Routenreihenfolge nicht definiert habe. Also müssen wir zum App-Modul gehen und dann müssen wir die Reihenfolge definieren, wie wir zuvor gesehen haben. Also zuerst muss ich die Bestellung haben, zum Beispiel Liste. So wird es Bestellungen, Listen-Komponente sein, und wir werden hier Bestellungen haben. Und wir müssen auch eine ID definieren. So werden wir genug sein, zum Beispiel, Mit nur Bestellungen. Und dann werde ich für mich die ID ohne, zum Beispiel, die Form selbst sagen , weil wir uns hier nicht mehr gebildet haben. Also hier werden wir Detail sagen und wir sparen. also wieder zur Anwendung gehen, und nachdem sie geladen wurde, werden wir sehen, dass wir zur Bestellung gehen und die Benutzer und den Status und die Datumsreihenfolge sehen können . Aber wir haben keine Daten. Wir müssen einen Service erstellen, um die Daten an das Front-End zu greifen. Genau wie wir es gesagt haben. Wieder mit der Kategorie können wir auch diesen Kategorie-Service kopieren und die Dinge hier ersetzen. Also lasst uns das auch schnell machen. Und natürlich können Sie die Fähigkeit des Ersetzens nutzen. Also haben wir hier Kategorie und Sie können nicht mit dem Fall übereinstimmen. Also kann ich den Fall, diesen Fall oder die Fälle anpassen . Also werde ich sagen, Kategorie durch Ordnung ersetzen. So wird alles sofort ersetzt. Und auch, wenn Sie einen Großbuchstaben haben wollen, wie einige Fälle wie diese Kategorie hat einen Großbuchstaben. Sie können es auch durch Großbuchstaben ersetzen. Wie Sie hier sehen, habe ich auch alles ersetzt, um als Befehl zu sein. Okay, es ist sehr einfach. Wir haben auch Kategorien, so dass Sie das auch ersetzen können. Also sagen wir, Kategorien sind Aufträge. Nun, hier müssen wir es ersetzen. Wie Sie sehen, haben wir immer noch Kategorien, aber mit Großbuchstaben. Also haben wir hier Bestellungen und auch mit Großbuchstaben, und wir ersetzen sie alle. Wie Sie jetzt sehen, haben wir alle Aufträge, ist bereit oder Service ist bereit. Wir müssen nicht so viel damit tun und leiden. So speichern wir es und dann exportierten wir wie zuvor in anderen Bibliotheken. Also werde ich hier sehen Dienstleistungen, die, okay, jetzt gehen wir zurück zu unserer Anwendung. Wir gehen auf die Listenkomponente und wir werden sehen, wie wir alle diese Bestellungen hinzufügen können. Es ist sehr einfach, genau so, wie wir es mit Kategorien gemacht haben. Wir müssen nur darauf tun, dass wir die Befehle initialisieren oder bekommen müssen. Also würde ich sagen, dieser Punkt, bekommen Inhaber und bekommen all diese wird eine Methode sein, die ich jetzt definieren werde. Also wird es hier sein, ich bekomme Kategorien oder bekomme Bestellungen. Und das hier bekommt Befehle. Es wird für den Bestellservice fragen. Also müssen wir auch den Bestellservice importieren. Wie Sie hier sehen, habe ich das schnell gemacht, weil wir das bereits in Kategorien getan haben. Und auch wir können mit hier tun. Danach werde ich die Daten auch hier erfassen, wie Sie sehen, haben wir bereits die Bestellungen, aber wie Sie sehen, haben wir den Benutzer als Objekt, Objekt kommen. Aber das ist nicht das Ziel, das wir haben wollen, weil wir nur den Namen oder die E-Mail haben müssen. Denn wenn wir in das Netzwerk gehen und unser Beispiel überprüfen, diese Anfrage, die wir vier Aufträge erstellt haben, wie wir es hier sehen. Dann werden wir sehen, dass die Bestellung Artikel Spiele in der Art und Weise, dass sie gefüllt sind. Beispielsweise wird der Benutzer vollständig ausgefüllt. Was ich also brauche, ist nur der Name, genau wie wir es im Backend gemacht haben. So können Sie in diesem Fall den Namen anzeigen oder Sie können zum Beispiel die E-Mail anzeigen . Also werde ich nur den Namen anzeigen. Also dann werde ich hier diesen Namen sagen. Aber wenn Sie sich erinnern, haben wir den Benutzer im Modell als String definiert. Es ist also besser, es als Benutzer zu definieren. Also hier würden wir den Benutzer aus einer anderen Bibliothek bekommen, die Importbenutzer heißt. Und dieser Benutzer wird von Benutzern sein. Und wie Sie hier sehen, werden wir den Benutzer bekommen und ihn hier platzieren. Und dann werden wir haben, dass alles richtig ist, damit wir den Namen in der richtigen Weise bekommen können. Also lasst uns das nochmal speichern und unser Frontend überprüfen. Okay, ich sehe, dass ich meinen Namen hier habe. Ich habe den Gesamtpreis und ich habe das Datum, an dem ich die Bestellung gemacht habe, aber es muss formatiert werden und der Status ist 0. Also, was es bedeutet 0. Für mich würde ich gerne etwas wie Benennung haben, wie ausstehend, Versand oder Versand oder Lieferung. Ich möchte also den Status der Bestellung anzeigen, die wir hier bearbeiten werden. So kann der Benutzer oder der Administrator des Shops, er kann den Bestellstatus aktualisieren. Dafür ist es besser, etwas Mapping zu machen. Und das, was wir in der nächsten Vorlesung sehen werden. 120. Auftragsstatus: Okay, in dieser Vorlesung werden wir sehen, wie wir einen Status für den Besitzer definieren können. Und dieser Status werde ich die Tags verwenden, die wir zuvor verwendet haben. So kann ich in einer Farbe wie geliefert zeigen, oder es ist eine Lieferung, oder es ist in Bearbeitung, oder es ist, zum Beispiel, empfangen, et cetera. Also werde ich Ihnen zeigen, wie ich diese Konstanten definieren werde und wie wir dann dieses Tag in unsere Tabelle setzen werden. Zunächst einmal haben wir dieses Modul bereits in unser App-Modul importiert. Also müssen wir nur das Tag selbst definieren oder definieren. Also werde ich diese DAG nehmen und sie dann in meinem Code platzieren , wo ich den Bestellstatus abrufe. Also hier werden wir dieses Tag platzieren. Lassen Sie uns aktualisieren, um zu sehen, ob alles gut funktioniert. Und dann werden wir sehen, dass die Anwendung neu geladen wird. Perfekt. Wir haben jetzt hier in dir, okay, wir werden jetzt die Färbung sehen. Wir werden sehen, wie man den Text anpasst. Wie Sie sich erinnern, können Sie Ihre eigene Zuordnung für die Reihenfolge definieren, in der Sie diese definieren können. Das musst du nicht im Back-End tun. Back-End ist nur Platz für die Speicherung von Daten. Sie müssen nicht handhaben, was die Arten der Aufträge sind. Also die einfachste Lösung dafür, ich werde etwas wie den Bestelltext oder den älteren Statustext und auch den Bestellstatus selbst haben , wie er gefärbt wird. Dafür können wir eine Konstante definieren. So können wir diese Konstante nennen, zum Beispiel Bestellstatus, und wir können hier Konstante definieren, oder Sie können es auch in externer Datei tun. Ich zeige Ihnen, wann wir das umgestalten werden. Also zuerst müssen wir eine Konstante haben. Wir können diese konstante Reihenfolge und dann Status nennen. Und dieser Bestellstatus wird das Objekt und das Objekt sein, zum Beispiel, mehrere Objekte. Und diese Objekte definieren das Etikett, das wie ausstehend oder verarbeitet oder versandt sein wird, und auch die Farbe, die Farbe, die auf diesen Werten basiert. Also zuerst werde ich den Wert wie hier platzieren, wie dieses, als Objekt wie dieses. Natürlich können Sie es als Array erstellen oder Sie können es als Objekt erstellen. Sie können hören auch Schlüssel definieren, wie Sie wollen. So wie hängt davon ab, wie Sie speichern oder wie Sie den Status in der Datenbank speichern werden. Für mich, zum Beispiel, die erste wird es beschriftet werden, ich werde es nennen, zum Beispiel, ausstehend, was der erste Status und die Farbe sein wird. Die Farbe des Abzeichens wird also die Farbe dieses Tags selbst sein. Wie Sie hier in diesem Beispiel sehen, hat er mehrere Farben, also werde ich die gleichen Farben verwenden. So können wir das auch haben. Wir sehen, dass er Erfolgsinformationen verwendet, Warnfarben. Es hängt also von dir ab. Wenn Sie also einige spezielle Farben möchten, können Sie das in CSS definieren. Aber für mich sind diese Farben genug. Als erster Status wird diese Farbe eine Primärfarbe sein, wie sie hier definiert ist. So haben wir hier primären Erfolg, Info, Warnung und Gefahr. Also werden wir diese Farben verwenden. Also zuerst werde ich diese Farbe verwenden und dann würde ich einen anderen Status definieren, zum Beispiel die verarbeiteten und verarbeiteten wird die Farbe wie Orange haben, die Warnung, Warnfarbe sein wird. Und natürlich werde ich eine andere Farbe oder einen anderen Zustand definieren, der versendet und billig wird, um auch Warnfarbe zu haben, wie wir in Bearbeitung sind, und wir werden einen anderen Status haben, der als geliefert bezeichnet würde. Und das geliefert wird Erfolg Farbe haben. Und dann werden wir wie eine abgelehnte oder zum Beispiel abgebrochen oder fehlgeschlagen haben. Wir können es nennen. So können wir ein anderes Feld machen, das als fehlgeschlagen bezeichnet wird. Also, wenn der Benutzer eine Zahlung zu machen oder zum Beispiel, wenn der Benutzer um Rückerstattung bittet. So können wir zum Beispiel diese Farbe zu einer Gefahr machen . Okay, wir haben jetzt den Bestellstatus. Und dieser Bestellstatus, wir werden es in einer Variablen speichern, die wir zurückgerufen haben oder den Status, weil wir es in der Vorlage verwenden werden. Also werde ich sagen, der Bestellstatus ist gleich dem Bestellstatus, der Konstante. Also, wenn ich hierher gehe, habe ich diese DAG hier. Also würde ich sagen, dass der Wert dieser DAG, müssen Sie die Bindung definieren. Also werden wir hier eine Variable binden. Wir werden keine statische Zeichenfolge verwenden, da wir die Zeichenfolge bereits haben. Wir können also nicht sagen, dass der Bestellstatus der Bestellstatus selbst ist. Und der Schlüssel wird diesen Status bestellt, denn wie Sie sich erinnern, haben wir Schlüssel für die Zustände definiert und basierend auf dem, was ich in der Datenbank speichere, wie wir im Frontend in jedem Geschäft sehen werden, wenn ich die Bestellung schicke und wie wir Aktualisieren Sie den Bestellstatus, werden wir sehen, wie wir das in der Datenbank speichern und dann den Status danach mit dem Qi-Punkt-Namen bestellen. Und hier bekomme ich den Namen des Status oder das Etikett des Status. Hier müssen wir ein Etikett haben, nicht den Namen. Und dann müssen wir die Farbe definieren. Aber lassen Sie uns zuerst sehen, wenn alles gut funktioniert, rette ich alles. Die Anwendung neu geladen, Okay, wir haben hier ausstehend und wir werden sehen, wie wir den Status ändern und dann werden wir sehen, wie es in dieser Tabelle widerspiegeln wird. Also, jetzt haben wir die anstehenden und wir brauchen jetzt die Färbung. Um diese Tags zu färben, müssen wir etwas definieren, das als Schweregrad bezeichnet wird. Und die Strenge wird genau die gleiche Farbe sein, die ich in unserer Konstante definiert habe. Also werde ich hierher gehen. Ich werde sagen, wie diese Schwere und es wird auch wie eine variable Bindung sein. Wir werden keinen statischen Text verwenden. Wir werden nicht sagen, wie eine Gefahr oder unsere Schnur hier. Nein, weil wir eine Variable verwenden und es wird dasselbe sein. Es wird auch Bestellstatus sein und dann älter dieser Statuscode, der aus dem Backend kommt und dann die Farbe sein wird. Und wenn wir das speichern, werden wir sehen, dass wir die richtige Farbe zurückgeben. Wenn ich hierher gehe, werde ich das sehen, wenn es gut funktioniert. Also lassen Sie uns ändern, zum Beispiel, die Bestellung ausstehend Status. Wir können es zum Beispiel in Gefahr ändern, um zu sehen, ob alles gut funktioniert. Also rette ich das. Ich gehe hierher, ich werde sehen, dass es rot wurde. Also sind wir auf dem richtigen Weg, wir haben kein Problem. Wie ich Ihnen gesagt habe, definieren wir eine Konstante in der Bestelllistenkomponente. Und um Griechenland-Komponente, habe ich auch eine Variable oder ein Klassenmitglied verwendet, weil ich es in der Vorlage verwenden werde. Und dann, wenn Sie sich an diesen Wert des Bestellstatus erinnern, der als 0 zurückgegeben wird, und dieser wird in der Datenbank für den Bestellstatus gespeichert. Also 0 für die ausstehenden. Einer ist für die Verarbeitung, drei ist für den Versand, für vier geliefert. Und wir definieren all dieses Graphen oder Wörterbuch hier. Und auch wir verwenden das Tag-Element, weil dieses Typ-Modul oder technische Komponente auch für die Färbung gefragt und wir haben die Farben genau so gemacht, wie dieses Tag funktioniert. Formeldatum, wie Sie hier sehen, ist es wie aus dem Format formatiert, das aus der Datenbank stammt. Wir können das Datum auch mit den Pipes formatieren, wie wir es vorher mit dem Produkt gemacht haben. Wenn Sie sich erinnern, haben wir gemacht oder machen Sie die in diesem Format erstellt. So können wir das auch für die Bestellung tun. Also gehen wir wieder auf das Feld. Wir haben kein Etikett, wir haben das nicht. Wir können Datumsreihenfolge haben und die kurze Pipe-Formatierung für das Datum platzieren. Und alles funktioniert perfekt. Also haben wir hier das Datum und den Status. In der nächsten Vorlesung werden wir die Details dieser Bestellung erstellen, so dass wir mehr Details über diese Reihenfolge von wie die Artikel und auch das Produkt sehen können . Was sind die Produkte und der Preis für jedes Element eines Produkts? Also werden wir alle diese Details in der nächsten Vorlesung sehen. 121. Order: Okay, wir haben vorher gesehen, wie wir die Liste der Bestellungen erstellen, und wir haben gesehen, wie wir das Status-Abzeichen für die Bestellung erstellt haben. Jetzt in dieser Vorlesung werden wir sehen, wie die Details der Bestellung zu machen. Also, was ist die Voraussetzung dafür? Die Voraussetzungen sind für mich sind nur ich möchte die Details der Bestellung sehen und den Status ändern. Der Benutzer wird hier nicht Aufträge erstellen oder zum Beispiel die gesamten Bestelldaten aktualisieren. Aber es wird im Front-End sein, das Front-End, der Benutzer oder der Kunde wird, um die Daten oder die Bestellung in unserer Ausgabe zu erstellen. Also würde ich etwas Design vorschlagen, das ich bereits gemacht habe. Wie zum Beispiel können wir alle Details haben. Wir können Bestellnummer, Bestelldatum und Bestellstatus haben , die aktualisierbar sein können. Und auch der Gesamtpreis der Bestellung und die Bestellpositionen. Wir können hier Bestellartikel auflisten und dann die Bestelladresse und einige Informationen über den Kunden. Also lasst uns diese Struktur genau so machen, wie es hier gemacht wird. Also gehen wir wieder zum Admin. Dann möchte ich hier das Symbol ändern, um viel zu bearbeiten, aber es wird wie eine Ansicht sein. So können wir das Symbol basierend auf Symbolen in Prime-Energie ändern. Wir haben hier Symbol in Prime End Verwendung heißt Pi I, so können wir diese verwenden. Also gehe ich wieder zu meiner Bestellliste und dann werde ich das Symbol hier von Bleistift zu I ändern. Und dann speichern wir, gehen wir zu sehen, dass alles in unserer Anwendung gut funktioniert. Okay, wir haben das Symbol hier. Also, jetzt müssen wir die Bestelldetails sehen. Wenn ich hier klicke, möchte ich zum Bestelldetails gehen. Zuerst brauchen wir eine Route und die wir bereits erstellt haben, und dann Verweis auf diese Route. Also zuerst müssen wir die Funktion definieren, die Show order genannt wird. Wir werden hier wieder gehen und dann werden wir eine Methode definieren , die Show Order Schulter hier genannt wird. Und ich bekomme hier die Bestellnummer vom Frontend. Und wir werden den Router verwenden. Und der Router, wie wir bereits gesagt haben, ist es ein Dienst oder eine Klasse, die wir verwenden können. Also werde ich hier den Router selbst haben, würde ich sagen, privaten Router. Und das wird Art von Router sein. Und wir können es auch Angular importieren. Wir machen dies als Kleinbuchstabe nutzbar. Und dann gehen wir hier und sagen, dieser Punkt Router Punkt navigieren durch URL. Und dann gebe ich die URL an, wohin ich von hier gehen werde. Also möchte ich auf die Route gehen, wo ich in unserem Modul angegeben habe. Also, wenn Sie sich erinnern, wir haben hier mehrere Routen. Wir haben gesagt, dass all diese sein werden, nachdem es ID ist. Dann werde ich zur Detailkomponente gehen. Also gehen wir hier wieder und wir sagen, navigieren Sie für mich, Bestellungen Schrägstrich und dann die ID der Bestellnummer. Also können wir das mit Backticks kombinieren und Bestellungen sagen, und dann sagen wir Bestellnummer. Auf diese Weise navigieren wir per URL zu unserer Komponente. Also lasst uns das versuchen. Wir gehen hier, okay, wir haben Jahr Bestellung Detailarbeiten, aber wie Sie hier sehen, werden wir nicht haben, zum Beispiel, Foren Struktur. Wir wollen etwas wie Details haben, wissen Sie, also müssen Sie wie statischen Text haben. Wir haben kein Formular, also werden wir hier kein Formular verwenden. Nur hier, wenn ich den Zustand ändern werde, werde ich ihn basierend auf dem onchange-Ereignis ändern, das aus dem Dropdown-Menü hier zurückkommt. Also brauchen wir eigentlich kein Formular. Wir müssen nur Daten anzeigen. Und wir können auch dieses Akkordeon verwenden. So können wir dorthin gehen und Prime NG für etwas überprüfen, das Feldset genannt wird. Also in der Feldgruppe, wie Sie hier sehen, können wir es verwenden und Inhalte in diesen Feldern anzeigen. Aber zuerst, lasst uns den Titel und andere Dinge wie wir in der Kategorie haben. Wir haben hier den Titel Untertitel, und dann haben wir eine Symbolleiste. Wir brauchen hier keine Symbolleiste, aber wir müssen nur wie einige Informationen darüber zeigen. Wir sind im Detail. Also lassen Sie uns das tun, wie wir es genau in Kategorieform getan haben. Wir haben so etwas wie eine Karte benutzt. Und in der Karte haben wir eine Symbolleiste. Wir brauchen die Symbolleiste nicht. Wir brauchen nur, Zum Beispiel, die Admin-Seite und Toast für das Update. Kann nicht nur dieses Teil am Anfang kopiert werden. Und dann können wir unser Raster hinzufügen und darin die Feldsätze. Also zuerst werde ich ausschneiden, um nur diese Karte zu kopieren und dann die Admin-Seite und der Host selbst, so dass wir sie kopieren und wieder zu unseren Bestellungen Details gehen können. Wir entfernen diesen Teil und legen ihn mit unserer Postkarte. Wir schließen wieder die pKa zu sein, alles ist in Ordnung und auch das. Also im Picart werden wir unsere Daten platzieren. Also zuerst brauchen wir keinen Bearbeitungsmodus, wir haben nur eine Ansicht Bestellungen, also müssen wir all diesen Teil entfernen. Wir sagen, dass wir nur eine Ansicht bestellt haben. Also würde ich sagen, hier Reihenfolge anzeigen und hier. Wir können sagen, dass Sie den Bestellstatus hier bearbeiten können. So können wir nur diese Informationen haben. Also jetzt hier können wir unser Feld Set verwenden. Verwendung von Feldsatz ist sehr einfach, ist nur, dass Sie diesen Teil kopieren und das Modul importieren müssen. Also lassen Sie uns das Modul selbst importieren, wie wir es zuvor in unserem App-Modul getan haben. Also gehen wir hier, wir haben Import dieses Moduls, Feld Set Modul, und dann legen wir es hier. Also natürlich, wie ich Ihnen sagte, haben wir viele Module. Sie können die Module auch trennen, wie wir es später tun werden. Ich werde Ihnen in Refactoring Teil zeigen. Wir werden ein spezielles Modul nur für die UX tun, um kein sehr großes Modul zu haben. Aber wir gehen hier im Kurs Schritt für Schritt. Wir speichern diesen Teil und dann überprüfen wir, was der HTML dafür erforderlich ist. Also können wir das sagen, Okay, ich will die, die verdoppelt wird. Es ist sehr einfach. Toggle Vorlage ist diese. Also können wir diesen Teil kopieren und dann platzieren wir ihn hier. Und hier werden wir unseren Inhalt haben und wir können unsere Header definieren. Zum Beispiel möchte ich Kopfzeile für weitere Details umschalten und dann Artikel bestellen und dann Bestelladresse bestellen. Also brauchen wir hier Bestelldetails und eine weitere für Bestellartikel. Und auch wir brauchen eine andere für die Bestelladresse. Also hier speichern wir und dann ist alles hier ausgerichtet und formatiert für uns. Überprüfen Sie die Befehle. Wir gehen nochmal her, überprüfen es. Okay, alles ist in Ordnung. Aber wie Sie hier sehen, kleben sie aufeinander. Wir haben fertige Klassen für Marge und Padding, so dass wir sie auch hier verwenden können. Aber ich möchte nur für 1 erwähnen, dass wir hier in der Feldmenge oder einer Komponente, die von prime und g stammt, der Feldmenge oder einer Komponente, die von prime und g stammt,nicht wie eine Klasse wie diese verwenden und ihm dann eine Klasse wie ein HTML geben können. Es gibt einige spezielle Schlüssel dafür, also müssen Sie immer in der Dokumentation überprüfen, was ist ein Schlüssel, um eine bestimmte Klasse für diese Komponente zu geben? Zum Beispiel wird es hier in unserem Fall Styling-Klasse genannt. In der Style-Klasse kann ich es als Klasse verwenden. So können wir die Klasse definieren, die wir für dieses umschaltete Panel wollen. Also möchte ich eine Klasse haben, die P-Marge unten genannt wird, zum Beispiel für und das gleiche für den anderen. Also lassen Sie uns das speichern und versuchen, um zu sehen, ob es funktioniert. Okay, wie Sie sehen, haben wir hier einen Platz. Also lasst uns nochmal für die anderen tun. Also brauche ich hier, um Klasse auch zu stylen, und hier Style-Klasse auch. Also haben wir hier drei Stilklassen und es funktioniert gut. Und ich denke, es ist auch zielbar. Also werden wir unsere Inhalte platzieren, was wir haben werden. Hier haben wir beispielsweise die Bestellnummer, Bestelldatum und den Bestellstatus sowie den Gesamtpreis der Bestellung. Wir bekommen das alles vom Backend. Also musst du hinter mir wiederholen, was müssen wir tun? Wir brauchen einen Service. Und der Service greift die Auftragsdetails und im Front-End oder in der Komponente oder dem Artikel oder Auftragsdetail. Ich werde diesen Service nutzen, um die Daten zu erfassen. Aber lass uns zuerst dieses Layout machen, dieses Layout, ich denke, es ist ziemlich einfach. Wir haben, wie Sie hier sehen, zugestimmt? Und dieses Gitter besteht aus drei Teilen, drei gleichen Teilen, und hier der vierte Teil. Wie Sie sehen, müssen wir ein Raster und Spalte 444 und in allen von ihnen einige Inhalte von Daten haben. So können wir das einfach machen. Wir gehen zuerst zu unseren Bestelldetails und wir werden sagen, dass wir ein Gitter haben müssen. Also werde ich ein div definieren, das eine Klasse namens p grid ist. Und dann in diesem p-Gitter werde ich Komponenten oder Elemente haben, in denen sie drei Spalten definieren. Also sagen wir div dot py call. Zum Beispiel definieren Sie eine Spalte, so dass ich keine p-Spalte für haben kann, also müssen wir zum Beispiel hier zuerst, zweite, dritte, vierte. So werden wir sie sehen, dass sie in unserer Vorlage untereinander ausgerichtet sind, genau. Also haben wir hier alles in Ordnung. Also lassen Sie uns diese Daten fühlen. Zum Füllen dieser Daten benötigen wir zum Beispiel ein Label wie einen Titel und dann die darin enthaltenen Daten, die ich aus der Datenbank bekomme. Also würde ich hier für einen Titel wie mit H5 gehen. Und dann in H5 sage ich Order ID, wie ein hartcodierter Text. Und dann ein Absatz, in dem ich die ID selbst setzen kann. Also werden wir hier eine ID haben, und diese ID wird ersetzt, die wir aus der Datenbank haben. Und Sie sehen, dass diese Bestellnummer so aussieht. Was wir auch brauchen, wir brauchen Bestelldatum und Bestellstatus. Also haben wir hier auch noch eine h5. Also werde ich hier bestellen, die Datum sein wird. Und wir werden wie ein Date hier haben, okay, das auch aus der Datenbank kommen wird. Und auch wir brauchen hier eine andere Sache, die Bestellstatus genannt wird. So werden Sie hier Bestellstatus haben, aber dieser Status, es wird nicht sein, zum Beispiel, ein Text, es wird ein Dropdown sein. Also werde ich P Drop verwenden, wie es definiert ist, isPrime NG. Und diese Sperre wird Optionen haben und wir werden später sehen , wie wir es mit den Daten füllen werden. Das letzte, was wir auch brauchen, ist der Gesamtpreis der Bestellung, wie wir zuvor gesprochen haben. Also brauche ich hier noch eine F5 und dass ich sagen, Bestellung Gesamtpreis. Ich sah, dass ihr Benutzer wissen kann, was der Gesamtpreis der Bestellung ist. Und dann drinnen werde ich einen Preis haben. Also lasst uns das retten. Wir gehen hierher, okay, wir haben das Drop-down-Menü, wir haben die Daten, wir haben das Datum, also müssen wir nur die Daten füllen. Also lasst uns zuerst Daten aus der Datenbank erstellen oder greifen. Wie Sie sich erinnern, haben wir einen Service definiert und dieser Service enthält Bestelldetails. Also, wenn wir zu Bestellungen Bibliothek gehen und wir haben hier Dienstleistungen und Bestellservice, wir haben etwas namens älter. In unserer Bestelldetailkomponente müssen wir also den Bestellservice nutzen. Also zuerst muss ich sagen, privat oder der Service. Und dann haben wir einen Typ, der Bestellservice genannt wird. Und dieser Bestellservice wird automatisch aus meinem Arbeitsbereich importiert. Und dann werden die Aufträge bei definiert, wie wir zuvor gesehen haben, eine Methode, die diesen Punkt genannt wird, erhalten Sie die so genannte, es ist sehr einfach. Wir müssen nur diese Methode nennen. Und dann werden diese Methoden als privat implementiert. Und dann sagen wir, älter zu werden und bekommen Ordnung wird uns die Reihenfolge zu einer Variablen oder einem Klassenmitglied geben, die Reihenfolge genannt wird und eine Typreihenfolge hat, wie wir zuvor das Auftragsmodell definiert haben. Also los geht's. Wir verlieren einen Dienst. Wir sagen, dass dieser Punkt-Order-Service, dot get order, und dann älter mit kommen mit der Reihenfolge, die von den Parametern kommt, die ich durch die URL bekommen habe. Also müssen wir auch den Service nutzen, den wir zuvor genutzt haben, der als aktivierte Route bezeichnet wird. So haben wir hier importiert aktivierte Route. Und diese Route, Ich werde den Parameter dieser beobachten, die Forelle und dann params. Und dann werde ich abonnieren sehen, und dann werde ich params bekommen und dann werde ich sie abonnieren. Und wie Sie bereits sehen, dass wir im App-Modul unseren Parameter als ID definieren. Also haben wir hier ID. Also, wenn du ein Schwein anderes hast, musst du es benutzen. Also müssen wir ID zum Beispiel verwenden. Und ich werde hier sagen, wenn params dot ID, und dann werde ich den get order Service anrufen. Und wir werden diesen Dienst verwenden, diese ID, weil in der params-ID, wie Sie sich erinnern, wir bekommen die ID der Bestellung. Also werde ich Ordnung mit dieser ID bekommen. Und dann sagen wir, dass wir die Bestellung haben und die Reihenfolge gleich der Ordnung sein wird. Also diese Reihenfolge, die wir als Klassenmitglied definieren, die die gleiche wie Reihenfolge sein wird. Also hier speichern wir alles und dann gehen wir zu unserem Frontend und überprüfen, ob alles gut funktioniert. Also bekommen wir keinen Fehler. Wir bekommen nur Fehler hier. Sie brauchen Ordnung. Also müssen wir es nur irgendwie definieren, um diesen Fehler nicht in der Konsole zu haben, um Bestell-ID zu sagen. Und das wird Ihre Hausaufgaben dafür sein, die führende Reihenfolge, wie Sie in den nächsten Vorträgen sehen werden. Also speichern wir diesen Teil. Wir haben keinen Fehler nur wie ES Fusselfehler, dass diese Methode nicht leer sein kann, kein Problem. Und dann werden wir die Bestelldaten Details füllen. So haben wir zum Beispiel die Member-Klasse definiert, die Reihenfolge genannt wird. Und diese Bestellung werde ich mit Bestellpunkt-ID ersetzen. Also werde ich diese Bestell-ID zwischen diesen Klammern bekommen, um als Variable definiert zu werden , und auch hier müssen wir das Datum bestellen, Datum bestellt, und das Dropdown lassen wir es fallen. Die nächste Vorlesung und Bestellung Gesamtpreis wird genauso sein wie wir es hier getan haben. So werden wir den Gesamtpreis bestellen. Also speichern wir und überprüfen, dass alles gut funktioniert. Es ist besser, immer, wenn wir Daten an das Front-End bekommen, es ist besser zu sehen, dass, wenn diese Daten bereit sind oder nicht. Manchmal auf langsamen Servern, wenn Sie keine Bestellung erhalten, erhalten Sie Fehler in der Konsole und dies verursacht ein Problem und es gibt keine Daten werden angezeigt. Es ist also besser zu warten, bis diese Reihenfolge fertig ist, wie diese Variable bereit ist, denn wie Sie sehen, haben wir viele Wartezeiten. Also müssen wir Params abonnieren und dann auf den Service warten , bis diese Bestellung, Garfield. Also ist es besser, immer ng-if für dieses Tempo zu verwenden. Also würde ich auf der Admin-Seitenebene sagen, ich werde ng-if verwenden. Also, in ng-wenn ich sagen werde, ob es Ordnung gibt, dann zeigen Sie den Inhalt im Inneren an. Andernfalls zeigen Sie eine leere Seite an, bis die Daten kommen. Also, bis die Daten kommen bedeutet, dass ich keine Fehler bekommen werde, wenn ich sagen werde, zum Beispiel, um Punkt etwas zu bestellen, denn wenn dies nicht definiert ist, dann werde ich Fehler in der Konsole bekommen. Es wird sagen, wir können Datumsreihenfolge von undefinierten Variablen nicht erhalten. Es ist also besser hier, ng-if in GF zu haben, bedeutet dies, dass, wenn es bestellt wird, wie es eine definierte Reihenfolge gibt, Daten in dieser Reihenfolge gibt. Dann greifen Sie für mich die Daten und zeigen Sie die Seite sonst, leere Seite anzeigen. Okay, jetzt haben wir den Befehl hier. Lassen Sie uns etwas Styling oder Reinigung für diese Daten tun. Zum Beispiel haben wir hier das Datum ist hässlich, es ist nicht formatiert, und auch der ältere Preis kommt nicht als Währung. Also, wie wir vorher gesprochen haben , kommt Angular mit etwas namens Pfeifen. Und in diesen Pipe können Sie definieren, was Sie Ihre Daten formatieren möchten. Zum Beispiel werde ich das Datum hier verwenden, das für die Verwendung des Datums ist. Und dieses Datum wird ein kurzes Format sein, wie wir zuvor gesehen haben, genau. Und der Preis, es gibt etwas, das Währung genannt wird. Also, wenn Sie alle Rohre sehen wollen, die Sie wollen, tun Sie einfach dies und alle von ihnen werden platziert und angezeigt werden hier. So können Sie zum Beispiel Datum haben, können Sie Nummer, Person und auch Scheibe haben . Und wenn Sie auch JSON-Daten anzeigen möchten, stehen alle diese Pipe zur Verfügung, um Ihre Daten auf die richtige Weise anzuzeigen. So zum Beispiel, hier werde ich Währung verwenden. Also lassen Sie uns speichern und überprüfen, dass Eis wir hier haben, dass Währung sehr schön ist und auch das Datum formatiert ist. 122. Display mit Subtotal: Also lassen Sie uns jetzt überprüfen, was wir vom Backend bekommen, um die Bestellpositionen anzuzeigen. Also, was ich hier gehe und das Netzwerk und die Dev-Tools öffne, dann werde ich sehen, dass ich hier einige Anfragen bekomme. Sie haben also zwei Möglichkeiten. Eine der Optionen, mit denen Sie die Bestell-ID protokollieren können, nachdem Sie sie erhalten haben. Zum Beispiel, wenn ich hier zum Detail gehe, und dann können Sie ein Konsolenprotokoll und dann diese Punktreihenfolge durchführen, um sicherzustellen, welche Daten vom Backend stammen. Oder andernfalls können Sie direkt auf Authentic Torque Tab gehen und dann die Anfrage finden , die wir zuvor aufgerufen haben, um die Bestelldetails zu erhalten. Also ich tröste es, schau im Konsolenprotokoll. Wir werden sehen, dass wir Bestellartikel haben und diese Bestellartikel Array ist. Zum Beispiel, in unserem Fall ist hier leer. Lassen Sie uns eine andere Bestellung versuchen, die ich hier oder da mit einigen Artikeln habe. Okay, wir haben noch einen. Wir können löschen, verlangsamen diese, gehen Sie hier oder dort Elemente. Okay, ich habe hier zwei Dinge. Und wie Sie in jeder Bestellung Artikel sehen, habe ich das Produkt und die Menge. Also habe ich hier, um Artikel zu bestellen. Jeder von ihnen ist zu Produkten mit einer Menge und um sie anzuzeigen. Wenn wir hier unsere Vorlage überprüfen, haben wir Ihren Namen, Markenkategorie, Zwischensumme, und wir haben hier Gesamtpreis und wie es all das zählt. Sie haben zwei Möglichkeiten. Eine der Optionen können Sie eine Tabelle erstellen und diese Daten anzeigen oder anderweitig können Sie dies manuell tun. Wir können das manuell und einfach tun, indem wir auch die Feldstruktur oder ein Gitter, ein Raster innerhalb dieses Feldes machen . So können wir auch hier sagen, dass wir innerhalb dieses Feldsatzes nicht den Inhalt, sondern ein anderes Raster definieren müssen. Und dieses Gitter wird die gleiche Struktur haben, wie wir zuvor gesehen haben. Ich werde sie füllen. Wie Sie hier in diesem Feld sehen, habe ich eine große Anzeige in diesem Raster definiert, gibt es Spalten von zwei, also bis sie gleich 12 haben, weil wir 12 Spalten zur Verfügung haben. Also brauchen wir sechs dieser Spalten und all diese Daten und Entzündungen. Wenn wir gehen und unseren Bestellartikel überprüfen, okay, wir haben sie genau so, wie wir brauchen. Also, jetzt müssen wir die Bestellartikel von hier aus greifen und dann die Informationen in diese Tabelle einfügen. Es ist sehr einfach. Wir können auch ein anderes Raster darunter machen. So wird es genau diesem Gitter gleich sein. Aber wir werden diese Textdaten durch die Bestell- oder Bestelldaten ersetzen. Aber dieses Raster wiederholt werden, weil wir mehrere Auftragspositionen benötigen, brauchen wir mehrere Rollen. Sie können also betrachten, dass dies eine Reihe ist und jeder Stein wird basierend auf den Daten wiederholt, die durch Bestellartikel kommen. Wie wir hier sehen, haben wir MD4. Md4, ich werde jeden Bestellartikel hineinlegen. Also werde ich sagen, lassen Sie Artikel aus bestellen, bestellen Sie die Artikel. Also werden wir hier haben, oder die Artikel, die ich denke, wir haben hier einen Fehler im Modell. Es besagt, dass Auftragsposition nicht definiert ist. Also denke ich, wir müssen zurück zum Modell gehen, um zu überprüfen, ob hier alles gut funktioniert. Wir haben hier Ordnung und dann wird das Feld ältere Elemente genannt werden müssen Elemente geändert werden. Also gehen wir wieder zurück, wir sehen, dass der Fehler behoben ist. Also haben wir hier kein Problem. Und dann werde ich die Bestellposition durch diese Daten ersetzen. Also zuerst müssen wir Artikel Produkt bestellen. Also haben wir hier erste Bestellung Artikel, und innerhalb dieser Bestellung Artikel, die ein Produkt ist, und in diesem Produkt gibt es Produktdetails. Also zuerst werde ich sagen, Bestellartikel, erzwungene Artikel erster Ordnung, die ich von der LC4 bekommen habe. Also würde ich sagen, er bestellt Artikel Punkt Produkt und dann geben Sie mir den Namen des Produkts. So sollte es gemacht werden. So wie wir hier sehen, haben wir alle Informationen, die wir mit diesem MD4 bekommen haben. Und dann das gleiche, es wird genau für ihre Marke sein. Ich werde hier überprüfen, zum Produkt gehen, und das Produkt wird auch die Marke sein. Wir brauchen diese Kategorie. Aber mal sehen, wie diese Kategorie implementiert wird. Also gehen wir hier und überprüfen, ob diese Kategorie auch bevölkert ist. Also müssen wir Kategorienamen. Also Kategorie Punktname. Und auch wir brauchen den Preis. Also müssen wir auch das überprüfen. So haben wir sagen, Artikel dot-Produkt bestellen. Diese Preismenge wird direkt mit der Bestellposition geliefert. So haben wir hier das Produkt und die Menge. Also würden wir das wählen. Also sagen wir Artikel Punkt Menge bestellen. Und danach, die Zwischensumme, werden wir sehen, wie wir das beheben können. Also haben wir hier Ordnung Augen, wir haben Menge drei, Preis Computer und Marke, und alles funktioniert perfekt. Also brauchen wir gerade jetzt die Zwischensumme. Die Zwischensumme, wir müssen sie auch berechnen lassen. So können wir berechnen, indem wir den Preis mit der Menge multiplizieren. Es ist sehr einfach. Also werde ich hierher gehen und diesen kopieren und sagen Preis multipliziert mit der Menge. Wir haben hier alles vervielfacht. Dann überprüfen wir erneut, okay, Wir haben auch der Preis kommt durch die Berechnung des Preises multipliziert mit 3. Dann kommen wir hier 750 und das gleiche für hier. Wir können es auch hier Flaggen wie Währung geben und auch für den Preis, den wir hier auch eine Flagge oder eine Pfeifenwährung geben können. So und dann wird es so angezeigt. Lassen Sie uns etwas Raum zwischen diesen Gittern geben. Zum Beispiel haben wir hier ein wenig klebrig und so können wir es mit mehr Leerzeichen machen. So kann ich sagen, auch dieses Gitter geben für mich Marge unten wird fünf sein. Und das gleiche für das Raster selbst. So wird jedes Gitter generiert, wird Rand Taste fünf haben. So wie wir hier sehen, ist alles perfekt. So können wir diese so gut machen, wie kühn ist bis zu Ihnen. Prime NG kommt auch mit einigen Klassen, sind bereit Klassen für mutige Dinge zu machen. Also, wenn Sie hier zu den Prime Flocken gehen und Sie werden etwas namens Text sehen. Und in diesem Text haben Sie einige Stile, so dass Sie den Text ausrichten und ihm auch etwas Stil geben können. Also zum Beispiel möchte ich diese p-Text-Umfrage geben. So können wir hier gehen und dann können wir jede Spalte als p definieren, Text fett. Also haben wir alle von ihnen werden mutig sein. Also, wenn wir sparen, gehen wir hierher, wir haben alles ist kahl. Also jetzt haben wir alle diese Elemente definiert und auch wir haben hier Zwischensumme. Wir müssen auch hier diese Summe haben, damit der Benutzer die Zwischensumme und dann den Gesamtpreis der gesamten Bestellung sehen kann. Wie wir zuvor gesehen haben, wie wir den Gesamtpreis im Backend berechnet haben. Dazu können wir auch ein anderes Gitter dafür definieren. So können wir ein anderes div haben. Und dieses div wird eine Peak-Grid-Klasse haben. Und dieses große Gitter mit enthielt zwei Spalten. Einer ist für den Titel oder das Etikett des Gesamtpreises und dann den Gesamtpreis selbst. Also werden wir ein div mit P haben, zwei anrufen, und ein anderes, wir werden p gleich haben, und hier werde ich einen Gesamtpreis schreiben. Und auch hier werde ich den Gesamtpreis definieren, den ich von der Bestellung selbst bekomme. Also hier werde ich sagen, geben Sie mir die Bestellung Gesamtpreis. Also bestellen Sie Punkt Gesamtpreis, sparen Sie das. Wir haben es versucht. Wir werden sehen, dass wir Gesamtpreis bekommen. Ist dieser Preis die Summe der Zwischensummen. Aber lassen Sie uns etwas Offset geben, um genau unter diesen Linien zu sein, wie wir hier sehen. So können wir das auch tun, indem wir etwas definieren, das Offset genannt wird. Also, wenn Sie Offset dafür verwenden, dann wird es die Spalten schieben, einige Leerzeichen, werfen es würde den richtigen Platz bekommen. Also möchte ich diese schieben, wie zum Beispiel, wir haben diese 2222, also müssen wir acht versetzen, also 1234. Also dann hier werde ich die beiden Spalten haben. Also werde ich Spalten versetzen und ich werde ihm eine Pause geben, vier zu zwei. Also können wir das auch tun. Es ist sehr einfach. Sie sagen nur, dass die erste Spalte einen Offset von acht haben wird. Und wenn wir sagen, werden wir sehen, dass es unter ihnen im achten Platz versetzt wurde. Lassen Sie uns sie genauso gut kahl machen, wie wir zuvor gesehen haben. So können wir dieser hier, zum Beispiel hier, fett Klasse geben . Also habe ich p Text fett, und ein anderer wird PTX Bolzen haben. Und Sie können ihnen auch etwas Styling wie Farbe geben. So können wir dem gesamten Gitterinhalt geben, um Farbe zu sein, zum Beispiel grün. Also würde ich sagen, Stil und seit Stil werde ich Farbe sagen, und dann können Sie eine grüne Farbe definieren. Also, nachdem Sie das gespeichert haben, werden wir sehen, alles hat das Grün in diesem Raster. Und dieses Raster hat einen fett formatierten Text , der Preis und den Gesamtpreis hat. Lassen Sie uns auch eine Währung geben, wie wir es zuvor getan haben, um ein Währungsformat zu haben. Okay, Nett. Jetzt haben wir unsere Bestelltabelle mit dieser Währung. Wie ich Ihnen bereits sagte, haben Sie die Möglichkeit, eine Tabelle zu verwenden, aber wir verwenden Tabelle viele Male. Ich wollte einige spezifische mit einem Raster verwenden, damit Sie sich für die Gitter gewöhnen können. 123. Bestelladresse und Kundeninformationen: Also für jetzt haben wir Bestelldetails und Bestellartikel abgeschlossen. Wir werden das gleiche für die Bestellung Adresse auf ihrer Adresse tun ist genau das gleiche, wie es mit einem Benutzer Informationen und auch mit der Bestellung Details kommt. Also werde ich wissen, welcher Benutzer es bestellt hat und auch, ich kenne die Adresse, und das war's. So können wir hier gehen und dann einen anderen Feldsatz definieren. Wir können kein anderes Gitter oder div haben, wir können sagen, ein Spitzengitter. Und in diesem Becher, und ich werde eine Säulen haben. Also werde ich drei Spalten haben und jede von ihnen wird einige spezifische Daten enthalten. Also werde ich sagen, H5, geben Sie mir eine andere Adresse oder Kundenadresse ist bis zu Ihnen, wie Sie es nennen wollen. Und dann in diesem B, bekomme ich die Bestelldetails, die vom Back-End kommen. Also, was wir hier wollen, um alle diese Informationen anzuzeigen, um Zeit zu sparen. Ich habe es bereits definiert. Also haben wir hier die Bestellung entweder Adresse bestellt werden, dass Lieferadresse, und dann übersprungen ich eine Zeile und dann ISA Lieferadresse zwei, und dann die Postleitzahl und dann die Stadt in der Nähe von einander. Dann BreakLine, wo ich das Bestellland haben werde. Okay, lasst uns diese Änderungen überprüfen, wie es im Frontend werden wird. Wir können wieder hierher gehen. Okay, ich habe hier die Adresse, Flower Street, 13, Prag, Tschechische Republik. Okay, wir müssen auch den Kundennamen anzeigen. Also in der nächsten Spalte werde ich hier h5 sagen. Und wie Sie sich erinnern, dass Kundeninformationen mit einer Benutzerklasse geliefert werden. Und in dieser Benutzerklasse werde ich den Namen haben. So können wir auch hier Informationen über den Benutzer haben. Also werde ich hören sagen, dass, geben Sie mir die Reihenfolge, dass Benutzer, und dann ist es besser, den Namen zu haben. Also retten wir das. Ok. Ich habe auch meinen Namen. Sie können auch an, dass andere Informationen wie E-Mail oder zum Beispiel Telefonnummer. So können wir hier noch eine h5 haben, können wir sagen Kontaktinformationen. Oder ich werde zum Beispiel das Telefon definieren . Also werde ich hier sagen Bestellen und nicht zum Benutzer, aber es wird genau in der Bestellebene kommen. Also werden wir hier oder dorthin kommen und dann bilden. Also retten wir das. Wir gehen wieder. Okay, wir haben unsere Bestelldetails ausgefüllt, also funktioniert alles gut. Nun, ich habe hier zwei Bestellungen, aber Sie können weitere Bestellungen hinzufügen, wenn Sie wollen. Also hier ist meine Bestellung in Ordnung. Wir haben alles. Wir haben Datum, Bestellstatus bestellt , wir werden in der nächsten Vorlesung sehen, wir verwenden die Währung, die wir verwendet haben, wie wir das Raster verwenden, und wir verwenden auch die Informationen über die Grabbing-Daten der Bestell- und Bestellpositionen. 124. Order aktualisieren: Okay, in dieser Vorlesung werden wir sehen, wie wir den Bestellstatus aktualisieren können. Wie Sie sich erinnern, haben wir einen bestimmten Status für ältere. Und jetzt werden wir unsere füllen diese Liste und dann werden wir den gesamten Status der Bestellung haben. Und wenn wir einen dieser Status auswählen, wird es zum Beispiel Nitrifikation für uns erhalten , um den Status der Bestellung zu aktualisieren. als ersten Schritt Lassen Sie unsals ersten Schrittdiese Liste oder dieses Dropdown-Menü füllen. Wie Sie hier wissen, verwenden wir kein Formular, so können wir NG-Modell verwenden, das eine bidirektionale Bindung zum Lesen und Einfügen von Daten in die Dropdown-Liste ist. Wenn wir also zum Prime End gehen, können wir in der Drop-down-Liste nicht sehen, dass wir das grundlegende haben. Wir werden dieses grundlegende verwenden. So wird das grundlegende enthalten, zum Beispiel wird es nach einem Strahl des Status fragen und dann kann ich das NG-Modell verwenden, wie es hier erwähnt wird. Also müssen wir die Optionen und das NG-Modell definieren. Also zuerst, lasst uns die Optionen haben. Und wie wir hier sehen, kommt die Optionen als Array. Also nehmen wir diesen Teil und legen Sie ihn dann in unsere Bestelldetailkomponente. So können wir hier gehen, wo wir den Bestellstatus definiert haben. Also haben wir hier die Dropdown-Liste, und dann haben wir Optionen. Es wird Bestellstatus sein, wie wir mehrere Zustände in dieser Reihenfolge oder in diesem Array haben, und wir haben einen ausgewählten Status. Also zuerst müssen wir das Dropdown-Menü füllen, das Dropdown-Menü. Wie Sie sich erinnern, haben wir zuvor in der bestellten Listenelement, einige Bestellstatus-Array definiert . Und dieses Orderstatus-Array, es enthält alle Zustände, die vom Front-End kommen können. Aber wie wir sehen, ist es kein Array, Array, aber es ist Wörterbuch. Und wir werden dieses Wörterbuch zuordnen und es in Array ändern. Aber zuerst können wir diese Konstante in zusätzliche Datei oder externe Datei setzen , so dass wir daraus lesen können und dann können wir es in den beiden Komponenten verwenden. Also hier in geordneter Ebene, kann ich eine neue Datei definieren. Ältere Punktkonstanten können wir nicht sagen. Wir können es so nennen. Und dann in dieser älteren Konstante werde ich diesen Bestellstatus setzen und exportiert, damit ich ihn an anderen Orten verwenden kann. Ich würde sagen, hier, Export const Bestellstatus. Und dieser Bestellstatus wird Array oder das Wörterbuch von halten zu halten sein. Alles funktioniert gut. Wir werden diesen Bestellstatus aus der Datei der Konstante importieren. Also gehen wir eine Ebene nach oben und wir bekommen die Reihenfolge konstant. Sie also sicher, dass alles vorerst in unserer Bestellliste funktioniert. Okay, alles funktioniert und das Mapping funktioniert gut. Okay, Jetzt werden wir diese Konstante verwenden, um Detailkomponenten zu bestellen. So gehen wir zum Bauteil und nehmen auch nochmals den Bestellstatus von und dann auch noch einen Schritt nach oben und geben mir dann die Konstante. Okay, aber wie Sie sich erinnern, dass wir gesagt haben, dass nur Array fallen gelassen. Also müssen wir dieses Array oder dieses Wörterbuch als Array abbilden, dann können wir es auch verwenden. So haben wir hier Bestellstatus definiert ist, so können wir es auch verwenden. können wir definieren. So können wir hier Bestellstatus sagen, die zum Beispiel leeres Array für jetzt ist . Also müssen wir das definieren. In Anki auf init können wir diesen Punktstatus sagen. Also müssen wir den Bestellstatus abbilden und es ist besser, ihn anzurufen, bevor Sie die Bestellung erhalten , damit das Dropdown fertig ist und dann die Bestellung erhalten wird. Also die Methode, die ich hier definiert habe, und dann werde ich sehen, wie wir diese älteren Status dem Array der Ordnung zuordnen können. Also, was wir für die Dropdown-Liste brauchen, eigentlich brauchen wir Optionen, und diese Optionen bestehen aus, wie wir zuvor von ID und Name gesehen haben. So wird jede Auktion ID und einen Namen, Namen für die Anzeige und ID 4 mit und Senden an die Datenbank haben . Also, wenn Sie sich erinnern, haben wir eine Funktion verwendet, die Objektpunkt-Tasten genannt wird. So kann ich ein Wörterbuch für alle Objekte in einem Wörterbuch durchlaufen. Also, wenn ich hier sage, Object.Erstellen von diesem Objekt, dann wird es mir 0, 1, 2, 3, 4. Lassen Sie uns das versuchen. Also würde ich sagen, Objektpunktschlüssel des Bestellstatus. Und wir können ein Konsolenprotokoll dafür erstellen. Um sicher zu sein, dass alles perfekt funktioniert, möchte ich, dass du verstehst, warum ich das tue. Also zuerst müssen wir Protokollobjekt-Punktschlüssel des Bestellstatus konsole. Also gehen wir zu einem der Befehle. Okay, ich habe 0, 1, 2, 3, 4. Ok. Aber wir haben keine Werte. Wir haben keinen Namen für diesen Status. Wie können wir das tun, wenn ich ein anderes Konsolenprotokoll erstelle. Und dann werde ich hier noch ein Konsolenprotokoll haben. Und ich sage, zum Beispiel, geben Sie mir den Bestellstatus und dann sagen Sie 0. Dann gehe ich hierher, ich werde sagen, dass 0 Biegung ist und Farbe primär ist. Also, wenn ich einen der Bestellstatus erreichen möchte, muss ich den Schlüssel angeben und ich bekomme diese Schlüssel über Objektschlüssel. Und wie Sie sich erinnern, haben wir ein Array. Also durch Schleifen, durch dieses Array, kann ich etwas damit machen. Also lasst uns wieder hier gehen, Objekt der Statuspunktkarte. Also werde ich alle diese Elemente durchlaufen oder durchlaufen, ein neues Array in einem anderen Stil generieren, das für mein Dropdown passt. Also, wenn ich Karte mache, gehe ich durch alle Schlüssel. Also werde ich Schlüssel sagen, also wird es für mich Schlüssel für Schlüssel zurückkehren. Lassen Sie uns dieses Konsolenprotokoll hier verschieben und es hier platzieren. Und anstelle der 0 werde ich sagen, geben Sie mir eine Konsole für mich den Bestellstatus des Schlüssels, der von diesem Array zurückgegeben wird. Wenn wir also sparen, stellen wir fest, dass ich den ganzen Status so leicht bekomme. Wir können alle diese Elemente abbilden und sie als Array von ID und Label oder ID und Name machen. Und wie Sie wissen, dient diese Karte nur dazu, den Stil des Wörterbuchs oder des Arrays zu ändern. Damit wir etwas anderes machen können. Wir können unser eigenes Array bauen. Also werde ich hier sagen, zurückgegeben für mich, für jeden Schlüssel, den Sie durchmachen, wird dieses Array von Objekt für mich ID zurückgegeben. Und diese ID wird der Schlüssel selbst sein. Und dann wird der Name Bestellstatus sein und nicht Bestellstatus selbst, der Schlüssel. Und im Inneren haben wir nicht nur den Bestellstatus, wir haben Farbe und Etikett. Also werde ich das Etikett benutzen, weil ich den Namen brauche. Ich möchte diesen Namen in unserer Dropdown-Liste anzeigen, also werde ich sagen, label, okay, wir speichern, um das Ergebnis all dieser Zuordnung zu sehen, dann müssen wir es der Konstante zuweisen. Also werde ich sagen, dass dieser Punktreihenfolge Status gleich Objektschlüsseln und all dieser Zuordnung ist. So können wir das nicht speichern und wieder zu unserer Anwendung gehen. Wir werden sehen, dass die Dropdown-Liste von Objekt, Objekt. Okay, mal sehen, was das Problem ist, warum wir das haben. So können wir Konsolenprotokoll ich immer, zum Beispiel, wenn ich nicht weiß, was passiert, oder wenn ich dieses Objekt, Objekt-Array bekomme , protokolle ich die Dinge. Also, wenn Sie sich erinnern, haben wir dem Drop-Down-diese ältere Steatose zugewiesen und ich werde es zu Konsole protokollieren. Also will ich sehen, was da ist. Also, wie Sie hier sehen, haben wir, wir haben ein Array, okay, das ist in Ordnung. Wir haben ID und dann Namen Biegen das Problem hier, die m primäre Energie, die Sie angeben müssen , welches Etikett Sie innerhalb Ihres Arrays anzeigen möchten. Also, wenn Sie den Namen anzeigen möchten, dann müssen Sie sagen, Option beschriftet, dann Name. Wie Sie hier sehen, hat er Name und Code definiert. So kann er sagen, dass er den Akkord anzeigen kann, oder er kann den Namen anzeigen. Also müssen wir auch das Gleiche tun. Also müssen wir in unserer Drop-down-Liste sagen, zeigen Sie mir zum Beispiel nicht den Bestellstatus als Objekt, sondern zeigen Sie mir den Namen davon. Und die Optionsbezeichnung wird der Name sein. Okay, geh zurück zu unserer Bewerbung. Wir werden sehen, dass wir den Namen genau so angezeigt haben, wie wir in unserer Konstante definiert haben. Okay, was ist jetzt mit NG-Modell? Und Sie modellieren, es wird für mich das ausgewählte Element zurückgeben und ich kann ihm auch ein ausgewähltes Element zuweisen. So ausgewählter Status, wird es das ausgewählte Element dieses Dropdowns sein, also müssen wir es definieren. Und wir können hier auch ausgewählten Status sagen, es wird jeder sein. Okay, mal sehen, wie wir den Wert bekommen können. Zum Beispiel möchte ich ändern, wenn ich von hier zu diesem wechseln, und dies möchte ich die Änderungen sehen. Ich möchte Log Konsole. Was ist ein Ergebnis dieser Veränderung? Es ist also sehr einfach. Im Dropdown können Sie einfach eine Methode, Ausgabemethode in Ihrem Dropdown-Menü definieren , die Änderung genannt wird. Und wenn wir etwas ändern, können Sie eine Methode erstellen, zum Beispiel bei Statusänderung. Und in dieser Änderung können Sie ein Schlüsselwort übergeben, das Ereignis genannt wird, und wir speichern dieses. Wir gehen wieder zu unserer Anwendung, wir definieren die Methode und wir sagen über Statusänderung und dieses Ereignis können wir zum Beispiel sagen, es kann ein Ereignis wie dieses sein. Und lassen Sie uns dieses Ereignis protokollieren, damit wir sehen können, was hier vor sich geht. So können wir hier sagen, Konsolenprotokoll Ereignis, es ist besser, auch alle Konsolenprotokolle zu löschen, die wir zuvor definiert haben, um eine klare Konsole zu haben. Also haben wir hier Konsolenprotokoll des Ereignisses, wenn ich diesen Status ändern werde. Also werde ich mich ändern. Aber ich bekomme nichts, weil wir die Veränderung nicht nutzen können. Genau so habe ich dir schon mal von dem Stil erzählt. Sie können keine Klasse für diese Mitglieder verwenden. Sie haben einige spezifische Schlüssel, die Sie folgen müssen. Daher ermutige ich Sie immer, die Dokumentation der Komponente zu lesen , wenn Sie etwas tun möchten. Wenn ich hierher gehe, möchte ich sehen, wann ich ändere, was passieren wird. So können wir auch über all das erfahren. Siehst du, du hast viele Methoden. Zum Beispiel gibt es onclick, onchange auf filter. Es gibt also viele Dinge. Was wir also genau brauchen, ist unverändert. Wenn ich diese Änderung durch Änderung ersetze, dann werde ich diese Ergebnisse sehen. Es ist nicht wie ein Standard-Dropdown-Menü. Es ist nicht wie ein Standardknopf. Sie müssen also die Dokumentation lesen und sehen, was Sie hier brauchen. Also versuchen wir es noch einmal. Okay, nett. Wir haben originelles Ereignis und es gibt Wert und der Wert ist eins. So wird der Wert als Objekt zurückgegeben. erste Feld ist die ID, und das zweite ist der Name des Status. Also zum Beispiel habe ich hier gescheitert, dann werde ich Objekt haben, das Wert und ID und Name ist. Es ist also besser irgendwie auch wir können nur die ID zurückgeben, weil wir nur die ID verwenden, um sie in der Datenbank zu speichern oder den Bestellstatus basierend darauf zu laden. So können wir auch in der Dokumentation sehen, die wir auch haben, nicht optionales Label, sondern Optionswert. Der Optionswert wird also für dieses Feld oder für diesen Hund nach unten verwendet, es wäre die ID. So haben wir vorher oft darüber gesprochen. Und ich möchte nur, dass Sie wissen, wie genau die Dinge und die Eingänge für die Komponente von Prime NG angeben. Wir ändern uns wieder, Okay, wir haben hier, wieder, wir haben den Wert zwei, also bekommen wir nur den Wert. Also bei Statusänderung werde ich den Status der Bestellung aktualisieren, basierend darauf, wie wir sie im Backend erhalten haben, wie wir es im Backend gemacht haben. Wie Sie sich erinnern, habe ich eine Put-falsch geschrieben und dann Post-Methode erstellt. Ich sende nur den Status an die bestimmte Bestellung in der API unserer Bestellungen. Wenn ich diese Anfrage sende, erhalte ich den aktualisierten Status und bekomme dann die Bestellung erneut. Also müssen wir nur den Status übergeben. Wir müssen nicht alle Daten der Bestellung weitergeben wie wir es zuvor mit dem Produkt und der Kategorie getan haben. Dafür brauchen wir einen Service. Dieser Service wird Aktualisierungsreihenfolge sein. Und wie Sie sich erinnern, haben wir alle Dienstleistungen definiert, die wir für die Aktualisierung der Bestellung benötigen. Nachdem ich die Bestellung aktualisiert habe, werde ich die Bestellung nicht selbst senden. Ich werde nur den Status senden. Also werde ich hier sagen Status. Und wie Sie sich erinnern, senden wir im JSON den Status wie diesen, JSON-Status und zwei, so dass Sie auch den Status senden können, deichen oder Ihren eigenen Typ definieren können. Also werde ich den Status haben. Und der Status wird eine Zeichenfolge sein und was ich in Ordnung bekommen werde. Also, damit ich die Bestellung selbst bekomme, nachdem ich meine Bestellung aktualisiert habe. Und auch, wir müssen die Bestell-ID übergeben, die auch String sein wird. Also brauchen wir auch hier, oder ihre ID. Und dann werde ich den Bestellstatus senden. Also hier ist anders, aber natürlich können Sie die Bestellung wieder senden und es wird automatisch, das Backend wird nur den Status erhalten, wie wir im Back-End Teil gesehen haben. Also hier haben wir Aktualisierungsreihenfolge. Gehen wir zurück zu unserer Komponente und erstellen oder rufen Sie den Update-Dienst. Also würde ich gehen, um Details wieder zu bestellen und onChange, Ich werde nicht Ereignis nennen, aber ich werde sagen, dass dieser Punkt Order Service, Update Bestellung. Und aktualisieren Sie die Reihenfolge. Ich werde den Status pies, wie Sie hier sehen, wir haben Statuszeichenfolge, ich werde ein Objekt senden wird Status haben, und der Status wird Ereignispunktwert sein, wie wir zuvor im Konsolenprotokoll gesehen haben. Und auch, wir müssen auch die Bestellnummer senden. Also brauchen wir auch hier, wenn ich die Bestellung bekomme, muss ich das sagen, die Bestellnummer. Also hier haben wir alles ist in Ordnung. Und wie wir zuvor gesprochen haben, haben wir gesagt, dass es nicht ausgeführt wird, bis Sie es abonnieren. So haben wir hier Ordnung und vielleicht können wir, zum Beispiel, Konsole protokollieren die aktualisierten älteren. Also lassen Sie uns speichern und wieder zu unserem Front-End gehen und überprüfen, damit wir sagen können, versandt , okay, Es wurde aktualisiert und wir haben den neuen Status. Also haben wir den Status, okay, lassen Sie uns noch einen fehlschlagen. Also können wir hier gehen und wir werden sehen, dass der Status für ist, okay, also zum Beispiel, das ist fehlgeschlagen. Wir gehen wieder auf Befehle. Wir werden sehen, dass sich auch der Status geändert hat. So gehen wir wieder, wir aktualisiert geliefert. Wir gehen hierher und den Staat, der aktualisiert wurde. Es ist also sehr schön, eine Benachrichtigung für den Benutzer zu haben. Wie immer, dass alles in Ordnung ist. Also, wenn er hier klickt, dann wird er eine Benachrichtigung erhalten, dass in Ordnung, die Nachricht oder die andere, die Bestellung wurde für das aktualisiert. Wenn Sie sich erinnern, haben wir den Nachrichtendienst erstellt oder angerufen und die Methode Terroristen werden für mich tun, was ich will. So können wir dieses Teil kopieren und dann wieder zu unserer Bestelldetailliste gehen. Und wir sagen, dass nach dieser Achse, okay, Show Message Service Saxes, und dann sagen, dass die Reihenfolge aktualisiert wird. Andernfalls, wenn ein Fehler vorliegt, zeigen wir den Fehler an. Aber zuerst rufen wir den Nachrichtendienst an. Also gehen wir hier zu unserem Konstruktor und dann nennen wir privaten Nachrichtendienst, der Message Service sein wird , der von Prime Energie kommt. Und dann sparen wir, versuchen wir es noch einmal. Okay, alles funktioniert gut. Also wurde die Bestellung aktualisiert. Und wenn wir wieder hierher gehen, okay, es funktioniert gut. Also, wenn wir wieder gehen und überprüfen, ob es einen Fehler gibt, dann zeige mir den Fehler. Also hier nach dem Abonnement kann ich auch sagen, dass, wenn es einen Fehler im Allgemeinen gibt , für mich eine Fehlermeldung tun und sagen, dass die Bestellung nicht aktualisiert wird. Aber natürlich beschwert sich der Estlund hier, dass wir diesen Fehler nicht verwendet haben, also können Sie ihn löschen oder Sie können ihn auch in den Details ausdrucken. Aber für mich jetzt werde ich nur die Reihenfolge anzeigen wird nicht aktualisiert und auch hier müssen wir die Bestellung löschen, damit wir diese nicht verwenden. Wir zeigen nicht nur Nachrichten nach Abonnement, fehlgeschlagen oder Erfolg, okay, wie Sie hier sehen, wir haben jetzt alles aktualisiert und unser Bestellstatus wird aktualisiert. Eine letzte Sache bleibt übrig, dass, wenn ich zu Bestellungen gehen, zum Beispiel, Ich habe hier eine geliefert, aber wenn ich hier gehe, Ich sehe es immer noch als ausstehend. Dies ist Rindfleisch verursacht, dass wir beim Laden der Bestellung nicht den ausgewählten Status in der Dropdown-Liste aktualisieren. Also einfach gehen Sie einfach hier und sagen, diese Punkte ausgewählten Status wird Punktstatus bestellt werden. Das ist also alles. Sie müssen das nur tun, um sicherzustellen, dass Sie den richtigen Status eingeben. So wie Sie hier sehen, haben wir eine geliefert und es kann leicht aktualisiert werden. 125. Anmeldeseite: Alles klar, jetzt werden wir sehen, wie wir die Login-Komponente erstellen können. Aber zuerst werfen wir einen Blick zurück auf unsere Grafik über die Struktur unseres Projekts. Wie Sie sich erinnern, dass wir eine Bibliothek erstellt haben , die Benutzer und Authentifizierungsbibliothek genannt wird. Und in dieser Bibliothek wird es unter allen Anwendungen geteilt werden. Weil ich die Login-Komponente nicht in jeder Anwendung wiederholen muss. Oder die Anmeldeseite, die E-Mail und Passwort enthält. Ich werde diese Komponenten erstellen, um auch in der Bibliothek des Benutzers freigegeben zu werden. Wie Sie hier sehen, werden wir eine Login-Komponente und Registerkomponente haben. hinaus werden wir auch die Dienste haben, die mir helfen werden, sich anzumelden und einen neuen Benutzer zu registrieren. Wie Sie im vorherigen Artikel lesen, müssen wir viele Dinge in Bezug auf die Authentifizierungen tun. Wir haben viele Vorträge und viele Funktionen diesen Vorträgen in diesem Abschnitt umzusetzen. Also zuerst werde ich Ihnen zeigen, wie Sie die Login-Komponente erstellen , die unter allen Anwendungen geteilt werden soll. Ich würde zuerst anfangen, zum Beispiel nur Templating zu sein . Also werden wir nur HTML, CSS haben , wir werden schöne Login-Seite haben, und dann werden wir sehen, wie man es mit der Anwendung verbindet, die Admin-Panel-Anwendung ist. Und dann später, wenn wir gehen, um zu arbeiten, wenn die Frage der Verpflichtung, wir waren dort auch verbunden. Okay, wie wir es immer tun, werden wir eine Komponente erstellen, die Login genannt wird. Also verwende ich eine ECS-Konsole, um eine Komponente zu erstellen. Also hier werde ich es in den Pages Ordner legen, und dann wird der Name der Komponente ein Login sein. Und auch wir haben hier, wo es ein Projekt ist. Also verwenden wir nicht admin, wir verwenden die Bibliothek des Benutzers und ich werde das Styling überspringen. Also haben wir bereits öffentlichen Stil und wir brauchen auch einen Selektor. Also werde ich Benutzer als Selektor anmelden, weil ich Benutzer habe, ich bin in der Bibliothek des Benutzers, also wird das Präfix Benutzer sein und dann die Tests überspringen. So führen wir diese Komponente oder diesen Kommentar aus, und wir werden sehen, dass die Komponente innerhalb der Bibliothek des Benutzers erstellt wird. Also haben wir hier mehrere Bibliotheken, wenn Sie sich erinnern, einer von ihnen ist Benutzer, und wir haben hier Seiten. Einer von ihnen ist eine Login-Seite. Die Anmeldeseite, die ich vorhaben, ist diese. Also haben wir hier wie ein Bild und auch wie einige Willkommens-Shop Admin, Benutzername oder E-Mail, Passwort und senden. Und dann haben wir hier den leeren Raum. Lassen Sie uns also das Layout dafür erstellen. Wir werden das primäre Energienetzsystem verwenden, um all dieses Layout zu erstellen. Aber zuerst, lassen Sie mich über die Routen sprechen. Hier haben wir Routen. Also auch, wenn wir einen Login haben, brauchen wir eine Route, um sich anzumelden. Wie wir das tun können, wie Sie sich in der Admin-Anwendung erinnern, im App-Modul, haben wir eigene Routen, weil diese Komponenten sich auch innerhalb dieses Moduls befinden, oder auch innerhalb dieser Kategorie. Also haben wir hier die Komponenten und die Routen befinden sich hier. Aber wie Sie sich erinnern, dass wir sie Login-Komponente in der Bibliothek des Benutzers erstellt. Und dafür werde ich die Route hier setzen, damit die Benutzer ihre eigene Route haben. Es darf nicht mit diesen Routen kollidieren, da dieses Modul auch im Admin-Modul verwendet wird, so dass wir kein Problem haben. Also lassen Sie uns zuerst die Route erstellen. Wie Sie sich erinnern, haben wir Konstante geschaffen, die es Routen nennen. Diese Route hat einen Typ, der auch Routen genannt wird. Und diese Routen werden eine Reihe von Objekten sein, wo ich meine Routen setzen werde. So wird das erste Objekt einen Pfad haben, der Login genannt wird. Also, wenn ich meine Anwendung Schrägstrich anmelden, dann werde ich zu dieser Komponente gehen, die Login-Komponente ist, okay, jetzt habe ich hier die Route erstellt, und mal sehen, ob wir gut arbeiten. Also meine Annahme, dass, wenn ich hier einloggen, dann werde ich Login-Seite bekommen. Aber wie Sie hier sehen, haben wir einen Fehler, der nicht existiert, weil das Benutzermodul nicht mehr innerhalb des Anwendungsmoduls verwendet wird, das als Modul bezeichnet wird. Also hier haben wir das Anwendungsmodul. Wir müssen auch das Modul des Benutzers aufrufen. Also hier werden wir eine Ergänzung dieser Module haben. Wir werden etwas anderes haben, das Users Molekül genannt wird. So haben wir hier Benutzermodul, das von den Bibliotheksbenutzern kommt und überprüfen, dass es automatisch importiert wird. Es wird hier als Benutzermodul aus meinem Arbeitsbereich sein. Also lasst uns diesen Code ein wenig organisieren und ihn hier setzen. Ok, Nett. Lassen Sie uns noch einmal überprüfen, ob wir gut arbeiten werden. Also werde ich sagen loggen, okay, trotzdem bekomme ich einen Fehler, dass diese Route nicht existiert. Warum? Denn wenn Sie sich erinnern, wann wir die Routen hier erstellt haben. Das Anwendungsmodul, sagten wir so etwas wie Router-Modul, nennen wir Dürre und Modul. Und dann haben wir für root gesagt, und dann rufen wir die Route auf, die Parser und Komponente hat. Wir müssen das gleiche im Modul des Benutzers tun. Also auch hier, im Benutzermodul, werde ich das Routenmodul aufrufen. Und dieses Router-Modul wird nicht root bekämpft haben, weil die Wurzel Anwendung ist. Die Anwendung wird also eine Wurzel haben. Und das Modul dieses Benutzers ist ein Kind dieses Moduls. So rufen wir das Benutzermodul innerhalb unseres Anwendungsmoduls an. Auf diese Weise ist dieses Modul ein Kind und ich möchte die Autoren dieses Kindes innerhalb meiner Anwendungsroute verwenden . Also werde ich für Kind sagen, und dann werde ich angeben, dass Routen Konstante, die ich hier definiert habe. Speichern wir das und überprüfen Sie, ob alles gut funktioniert. Ich werde wieder hierher gehen und ich werde sagen, Schauen Sie in meinem Login funktioniert. Also jetzt erreichen wir die eine Komponente, die wir zuvor erstellt haben, die Login-Komponente Zukunft genannt wird, werde ich über faules Lademodul sprechen. Also haben wir hier das Modul total geladen, genau. Also werden wir später über faules Laden sprechen, wodurch die Bündelgröße für faules Laden desto kleiner ist, wie wir das später sehen werden. Beginnen Sie zunächst mit der Vorlage der Login-Komponenten. Also zuerst werde ich den, diesen grauen, grauen Hintergrund haben . Also werde ich einen Login-Container haben. Also werde ich zum Beispiel div haben, und ich werde dieses Lock-In und auch in Registerform verwenden. So werden wir Login-Register haben und Login-Register div wird auch das Panel enthalten, das Panel, das diesen weißen Bereich enthält. Also haben wir hier die ganze Registrierung und hier haben wir ein Panel. Also lasst uns das schaffen. Also werde ich ein anderes div erstellen und ich werde es Login Register-Panel geben. Und dann werde ich mit Eigenkapital spielen. Aber zuerst erinnern Sie sich, dass wir öffentlichen Stil geschaffen haben. So können wir auch diesen Stil oder diese Klassen in unserem öffentlichen Stil verwenden. Also zuerst werde ich hier die Bibliothek des Benutzers haben, wenn Sie sich erinnern, haben wir ein Login-Register erstellt und Benutzer und Benutzer werden in der Anwendungsebene aufgerufen, aber hier rufen wir es nicht auf, also müssen wir die Benutzer als Nun, gut. Also hier können wir Clips sagen und dann den Stil importieren, den ich importieren möchte, das ist Lippen, Benutzer und Benutzer SCSS, weil wir hier alle Komponenten aufrufen. Aber hier lassen Sie uns dieses löschen, weil wir nur einen machen werden, zum Beispiel für einen Login und Registrierung. So können wir es Login nennen und registrieren. Erstklassige dieses Login-Registers wird also dieses sein. Und dann drinnen werde ich Panel haben. Wie Sie hier sehen, haben wir hier wie ein Farbverlauf, es geht von schwarz nach grau. Es gibt viele Werkzeuge zum Erstellen von Farbverlauf. Sie müssen es nicht manuell tun, Sie können sie kopieren. Also werde ich das tun, was CSS-Generator und CSS3-Generator genannt wird, können Sie wählen, was Sie wollen. Zum Beispiel möchten Sie einen Farbverlauf und dann können Sie den Farbverlauf angeben, den Sie erstellen möchten. Und dann können Sie das gesamte CSS kopieren und es dann dort verwenden. Für mich habe ich einige Gradienten gesammelt, was genau für unseren Fall ist. Also werde ich hier den Farbverlauf von grau nach schwarz haben. Wie Sie hier sehen. haben wir bereits definiert und wir speichern alles. Wir haben immer noch Fehler. Es sagt, dass die Datei nicht mit dem Stil übereinstimmt, weil wir hier gesagt haben, dass nur schauen, so dass wir es einloggen und registrieren müssen. Und sie haben das getan, weil wir es nicht mehr brauchen. Also lasst uns das retten. Und dann werden wir sehen, dass es keinen grauen Hintergrund gibt, weil wir eine Höhe definieren müssen. Also müssen wir sagen, dass die Höhe dieser Seite oder dieses div 100% sein wird, oder Sie können VH verwenden, also sagen wir 100 einer Ansichtshöhe. Also in diesem Fall werden wir die Höhe genau haben, wie wir wollen. Wir haben hier den Farbverlauf, und dann, wie Sie hier sehen, haben wir eine weiße Tafel. Also lassen Sie uns dieses Panel erstellen. Also werde ich tun, ich möchte eine Breite dieses Panels haben. So wird es zum Beispiel 650 Pixel haben . Und auch wird es eine Höhe haben, die 525 Pixel ist, ist, wie ich es gemessen habe, und Hintergrundfarbe wird weiß sein. Sie haben auch die Möglichkeit, in einem Prime NG viele Farben zu verwenden, und diese Farben sind hier so definiert. Also, wenn Sie nur in irgendeinem Element inspizieren, werden Sie sie hier unten sehen. So können Sie alle diese Farben verwenden. Zum Beispiel ist das Weiß Fläche a. So würde ich diese Farbe verwenden ist besser, um den gesamten Code einheitlich zu machen. Also werde ich hier sagen, var, also Phase a, okay, lasst uns das überprüfen. Okay, wir haben hier das Leerzeichen erstellt, aber wir müssen es in die Mitte setzen. Also, wie wir die Dinge in der Mitte machen können. Also werde ich hier Position absolut haben, und dann kann ich es so positionieren. Bleiben 50 Prozent, wie in der Mitte. Und auch von oben werden 50 Prozent sein. Aber wir müssen Margen geben. So wie Sie hier sehen, dass es etwas Spielraum hat, okay, es ging runter, aber es ist zu viel, weil, wie Sie wissen, wenn Sie etwas in die Mitte setzen, müssen Sie minus die halbe Größe des Panels messen. So können wir sagen, zum Beispiel, Sie können es so machen. Sie können sagen, Calc 2 Prozent minus die Hälfte von 650 ist 325 Pixel. Und dann wird es in der Mitte sein. Und auch wir brauchten in der Mitte dieses grünen von oben. Also können wir auch sagen, Calc 50% minus 525, sagen wir zum Beispiel, es sind 260 Pixel. Auf diese Weise können wir sagen, dass dies in der Mitte sein kann, wie Sie hier sehen. Und wenn Sie die Größe des Bildschirms von der Höhe und der Breite ändern, wird es immer in der Mitte bleiben, okay, in diesem Panel jetzt werden wir das halbe Bild und die Hälfte des Inhalts haben, wo ich mein Telefon setzen muss, es fühlte sich, so brauchen wir eine Note. Das Raster wird also Spalte haben, wissen Sie, dass dieses Raster 12 Spalten hat. Das Raster würde sich also innerhalb des Panels befinden. Also werden wir sagen, dass geben Sie mir all dies als Raster und geben Sie mir sechs Spalten für das Bild und sechs Spalten den Inhalt. Also gehen wir und machen das. Innerhalb des Panels werde ich div geben, das p Grid hat. Und innerhalb des Rasters werde ich auch ein anderes div haben, das P minus Spalte und sechs haben wird, weil wir sechs Spalten für das Bild haben. Und darin werde ich das Bild selbst setzen. Also habe ich ein Bild definiert und ich habe es in den bewerteten Ordner kopiert, aber Assets Ordner der Anwendung. Weil wir hier keine Assets Ordner haben. Sie müssen also die Anwendung angeben, die Sie vom Bild erhalten würden. Also in der Admin-Anwendung, werden wir in den Asset-Ordner unser Bild zu platzieren, wir haben Bilder. Und dann werde ich das Login-Foto hier platzieren. Also hier müssen wir sagen, dass die Bildquelle genau im Assets-Ordner sein wird. So Assets, wird es automatisch die Anwendung nehmen, sie laufen Anwendung Assets Ordner, Bilder. Und dann können wir sagen, Login. Und das retten wir. Wir haben es überprüft. Wir sehen, okay, das Bild ist genau an diesem Ort platziert. Also jetzt machen wir die zweite Spalte, die unsere Form selbst enthalten wird. Also würde ich sagen, div dot wieder die Spalte 6. Und dann in der Spalte 6 werde ich, wie Sie hier sehen, haben, dass wir einen Titel und dann das Formular selbst haben. Wir können also nicht einfach sagen, dass ich h3 für den Titel haben möchte. Ich werde willkommen sagen. Und auch möchte ich H2 haben, zum Beispiel Login-Seite. Und dann müssen wir das retten. Und dann werden wir sehen, dass wir hier Willkommens- und Login-Seite haben. Und unter ihnen, wie wir gesehen haben, dass wir das Formular erstellen müssen. Also hier müssen wir ein Formular erstellen. Also würde ich ein anderes Raster definieren. Wir können so sagen, Sie können das Gitter nicht als eine Reihe betrachten. Also hier wieder können wir sagen, div wird 12 oder ja genannt, weil wir sie untereinander brauchen. Und hier werde ich die erste Komponente platzieren, die wie die E-Mail-Komponente ist. Und auch, ich bin hier, wir werden das Passwort platzieren. Wir müssen diesen Submit-Button platzieren, aber Schlitten tun etwas. Können Sie zum Beispiel, wenn Sie sich erinnern, in prime NG-Bibliothek haben wir Komponenten wie diese. Wir haben dieses Symbol und dann den Benutzer. Es wäre also großartig, wenn wir dasselbe tun, um diese Komponente auch zu verwenden. Also haben wir hier Eingabegruppe, und es hat Benutzer und Benutzername, so können wir das gleiche für das kopieren, oder wir können es als E-Mail nennen. Also haben wir hier Benutzer, Platzhalter wird E-Mail und das gleiche wird für Eingabegruppe sein, aber wir werden Passwort und das Passwortsymbol setzen, wie ich weiß, es ist gesperrt. Diese Gruppe hat also eine Spanne für das Symbol und auch die Eingabe selbst. Schauen wir uns unsere Seite an. Okay, wir haben alles, aber es ist nicht gestylt, weil ich denke, dass wir die Stile nicht von Prime NC bekommen haben. Ich würde Ihnen sagen, warum. Weil wir hier in einem neuen Modul sind und wir in einer Komponente arbeiten, die nicht im Anwendungsmodul ist. Dieses Modul kann also nicht die Module von prime und G sehen , die wir in der Anwendungsebene, in der Admin-Anwendung, wie diese importiert haben. Weil wir sie auch dort importieren müssen. Später, wenn wir Refactoring machen, werden wir sehen, wie man ein Modul dafür erstellt. Und dann können wir dieses Modul für alle Prime NG Module nennen. Wir können also nicht überall benutzt werden. Also denke ich, dass dieser ein Eingabetextmodul verwendet so dass wir es auch in unserem Benutzermodul verwenden können. Also gehen wir zurück zu unserem Benutzermodul und importieren dann auch dieses Modul. Also würden wir hier sagen, Eingabetextmodul, gut für mich. Wie wir hier sehen, importieren wir es aus Prime Energie Eingabetext. Wir überprüfen unsere Anwendung erneut und wir sehen, dass alles gut funktioniert. Also, aber wir haben wie hier einige, es tickt total auf das Panel. Lasst uns etwas Polsterung haben. Also vielleicht können wir für diese Spalte , den Container der rechten Seite, mehr Polsterung geben . So können wir sagen, dass Polsterung im Allgemeinen ist, zum Beispiel fünf. Also, wenn wir das speichern und überprüfen, okay, wir haben jetzt eine schönere p-adic. Und für das Gitter, das die Steuerelemente oder die Eingaben enthält, können wir ihm auch einen Rand oben wie vier geben, so dass wir Raum zwischen den Titeln und auch der Form selbst schaffen können. Kann es auch größer machen. Wir können es als sechs haben, okay, jetzt wird es besser. Also hier haben wir jetzt den Titel, die Eingaben. Hier haben wir es noch als Text. Also müssen wir den Typ dieses Eingabe-Passworts ändern, um Passwort zu sein. Und dann müssen wir einen Knopf rufen. Und hier die Schaltfläche, die wir bereits erstellt haben oder wir haben es bereits in ihrer Prim- und G-Bibliothek gesehen. Also haben wir hier mehrere Tasten. Also müssen wir auch das moderne Modul importieren, das Endbenutzer-Modul ist. Also können wir es auch hier haben. Sie können Ihre eigene Konstante für UX-Modul erstellen, aber ich denke, in Benutzermodul werden wir nicht so viel Sie nächstes Modul verwenden, wir werden hier auf dem unteren Modul und Textmodul haben. Also gehen wir wieder hierher und benutzen eine der Tasten. Verwenden wir zum Beispiel diesen, den Standard. Wir werden es nicht kompliziert machen. Ich werde es einreichen oder loggen Sie sich an Ihnen. Also, wenn wir speichern, gehen wir wieder hier, wir werden sehen, dass wir den Submit-Button haben. Sie können die Klassen angeben, die Sie auch für die Schaltflächen wollen, ein paar, denken Sie daran, so dass wir diese Schaltfläche mit voller Breite im Inhalt machen wollen So können wir auch machen. Wie Sie sich erinnern, haben wir in der Beschreibung oder in den Eigenschaften etwas, das eine Style-Klasse genannt wird. So können wir ihm auch eine Klasse geben. So können wir hier sagen, Tasten Typ Klasse wird voll btn zum Beispiel sein. Und dann müssen wir dies verwenden wird die Klasse sein und ihm eine Eigenschaften geben, zum Beispiel in der Login-Registrierung. Und hier können wir sagen, die volle btn, wir werden einen Weizen haben, der 100% ist. Also, wenn wir speichern und wir werden wieder zur Anwendung gehen, werden wir sehen, dass wir volle Breite Taste haben. Okay, lassen Sie uns auch einige Validierung hinzufügen. Wenn Sie sich erinnern, wenn wir Validierung hinzufügen möchten, müssen wir eine Formulargruppe und die frühere Gruppe verwenden, werden wir Formular-Builder dafür verwenden. Also zuerst müssen wir diese Form kombinieren und etwas verwenden, das Form-Gruppe genannt wird. Und die ehemalige Gruppe wird eine wertvolle oder die Konstante haben , die in der ts-Datei erstellt wird, die die Form selbst genau so hat, wie wir es mit Kategorien, mit Produkten, mit Bestellungen gemacht haben . All dies haben wir das schon gemacht und bereits erklärt. Also werde ich hier einen Namen geben, der Login-Formulargruppe genannt wird. Aber hier beschwert es sich, dass es keine Input für fremde Regroup gibt, weil wir auch einige Module importieren müssen, wie vier Module. Und auch reaktives Formmodul. Und diese Module sind in eckigen Formen definiert wie wir zuvor gesehen haben und wir haben zu viel darüber gesprochen. Also ging ich zurück zur ts Datei, das habe ich schnell gemacht. Wir haben hier die Login-Formulargruppe, die wir als formale Gruppe definiert haben. Ich habe den Formular-Builder-Dienst verwendet, um ein Formular zu erstellen. Und ich habe Methode hier wird jedes Login-Formular genannt. Und das Anmeldeformular wird als E-Mail und Passwort sein. Und E-Mail hat zwei Validatoren, die erforderlich ist und E-Mail, wie wir zuvor gesehen, und das Passwort als auch erforderlich ist. Gehen wir zurück zum HTML und geben Validierung. Also zuerst müssen wir für diese Komponente für den Kontrollnamen geben, wie Sie sich erinnern. Dieser Controller-Name wird also E-Mail und die Fehlermeldung sein, es wird genau unter dieser Gruppe sein. So werden wir auch ein Login-Formular haben, um es zu definieren. Also, wenn Sie sich erinnern, haben wir ein Login-Formular definiert, um kurz kalt zu machen. So können wir sagen, bekommen Login-Formular. Und dieses Anmeldeformular wird für mich zurückgeben, dass diese Punkt-Formulargruppe oder Login-Formulargruppe , die steuert, nicht den ganzen Satz in der HTML-Vorlage zu haben. So können wir nur ein Login-Formular verwenden. Also ein Anmeldeformular, wenn E-Mail ungültig ist und das Formular gesendet wird, dann wählen Sie einen von zwei Fehlern, wie wir zuvor gesehen haben. Die erforderliche E-Mail, dann zeigen Sie die erforderliche E-Mail an, wenn die E-Mail beispielsweise ungültig ist, und zeigen Sie dann an, dass die E-Mail ungültig ist. Lassen Sie uns definieren, ist Form als auch oder Variable eingereicht. So wie standardmäßig eingereicht ist falsch, Das Gleiche gilt auch für das Passwort. Wir müssen fremden Kontrollnamen und Schriftart definieren. Schriftart oder Name haben ein Passwort. Und dann werde ich auch die Fehlermeldung haben. Also die Schaltfläche Senden, klicken wir nicht, weil wir prime n j Komponente verwenden, sagen wir onclick. Also, wenn Sie sich daran erinnern, dass prime NG eine eigene Implementierung für das Klicken seiner Komponenten hat . So können wir hier auf Submit sagen wird auch definiert, die onsubmit Methode. Also werden wir hier gehen und nochmals sagen, dass onsubmit eingereicht wird, ist wahr. Also lasst uns alles retten und das versuchen. Okay, wir haben die Fehlermeldungen bekommen, okay, die AML ist auch ungültig, wenn ich ungültige E-Mail, aber jetzt ist es gültig. Also jetzt haben wir das Login-Formular. Also jetzt haben wir unsere Login-Seite. Wir werden sehen, wie wir den Benutzer zur Anmeldeseite umleiten können, wenn er sich nicht einloggt, wann immer er versucht, zum Beispiel hier Produkte oder zum Beispiel, wenn er versucht, zum Admin-Panel im Allgemeinen zu gehen, Wir werden ihn auf die Login-Seite basierend auf der Regel umleiten, wenn er eingeloggt ist oder nicht. Als nächstes werden wir den Login-Dienst erstellen und wir werden den Benutzer einreichen, um das Token aus dem Backend zu nehmen. 126. Anmeldeservice und verwende die Token: Okay, nachdem wir unsere Login-Komponente und Login-Panel und die Steuerelemente erstellt haben, werden wir den Dienst erstellen, den Dienst, der kommt, wenn ich auf Senden klicke, dann werde ich einen Benutzer mit E-Mail und Passwort einreichen und die Token. Dieses Token, das ich verwenden werde, um den Benutzer zu validieren , wenn er in allen nicht in meiner Anwendung gesperrt ist. So, wie Sie hier auf Submit Methode sehen, werden wir einen Dienst aufrufen. Und dieser Dienst können Sie entweder User Service selbst verwenden und Sie können eine Methode definieren. Sie können es nennen, zum Beispiel Login, oder Sie können eine neue Datei und einen neuen Dienst erstellen, und Sie nennen es Benutzer oder Authentifizierungsdienst. Für mich werde ich einen neuen Service erstellen. Also werde ich auf NX Generator klicken und dann werde ich nach Dienst suchen und dann den Namen für diesen Dienst geben, wie Auth Authentifizierung. Oder Sie können den vollständigen Namen angeben und das Projekt wird Benutzer sein. Und wenn Sie sich daran erinnern, dass wir Dateistruktur dort haben, so dass wir es innerhalb der Dienste Ordner setzen können und wir können Tests überspringen, so können wir jetzt überprüfen hören, dass , okay, der Dienst wird innerhalb der Dienste unter dem Namen services.js erstellt. Okay, lass uns diese Datei erstellen und dann gehen wir dorthin. Wir werden sehen, dass es erzeugt wird und wir werden es verwenden. Zunächst müssen wir, wie wir es mit den Benutzern getan haben, die Login-URL oder die API-URL konfigurieren. Also lassen Sie uns diese kopieren, dann hier einfügen und eine neue Variable definieren. Wir nennen, zum Beispiel, API URL Mund. Und es wird das gleiche sein, es wäre Benutzer. So können wir auch den gleichen Namen behalten. So wie Sie sich im Back-End erinnern, haben wir API erstellt, die Benutzer genannt wird. Und diese Benutzer enthielten auch die Methode Login. Also werden wir nicht die gleiche API verwenden. Lassen Sie uns auch diese Umgebungsvariable importieren weil wir diese Umgebungsvariable auch hier verwenden werden. Also erster Dienst werden wir verwenden, der Login genannt wird. Und dieser Login wird einen Namen Login haben, und es wird E-Mail akzeptieren, die eine Zeichenfolge sein wird, und auch ein Passwort, das ebenso gut wie schrumpfen wird. Und es wird für mich beobachtbar zurückkehren, was von Benutzern ist, weil wir den Benutzer mit einem Token von diesem beobachtbaren bekommen werden. Also müssen wir auch das Benutzermodell importieren, und dann müssen wir den HTTP-Client verwenden, damit wir ihn auch im Konstruktor verwenden oder im Konstruktor aufrufen und dann auch aus der HTTP-Bibliothek in Angular importiert werden können. Und hier sagen wir zurück für mich einen Punkt HTTP Post. Und zuerst veröffentlichen wir die URL und die Daten, wie wir zuvor im Postboten gesehen haben, es wird E-Mail und Passwort sein. So können wir auch hier passieren E-Mail wird E-Mail und die E-Mail selbst sein. Also haben wir Objekt, der Schlüssel ist E-Mail, und diese E-Mail ist ein Wert, der hier übergeben wird. Und auch, wir haben ein Buzzword, das auch Passwort sein wird. Wenn Sie den gleichen Namen wie die Keys und das Objekt haben, das Sie tragen, verschieben Sie auch die Schlüsseldefinition. Sie können einfach E-Mail und Passwort sagen, und es wird automatisch von der Post HTTP Client bekannt. Und hier bekommen wir immer noch Fehler, weil wir den erwarteten Rückgabetyp setzen , der zum Beispiel der Benutzer sein wird. Weil wir hier definiert haben, dass wir erwarten Benutzer. Und auch hier müssen wir sagen, dass wir Benutzer erwarten. Und im Postboten ist, wenn Sie zuvor gesehen haben, haben wir auch den Benutzer bekommen, die E-Mail und das Token ist. Lassen Sie uns diese API-URL durch Benutzer ersetzen. Und jetzt haben wir den Login-Dienst bereit ist. Also lassen Sie uns das verwenden und versuchen, zu protokollieren was wir vom Back-End im Front-End bekommen. Also werde ich wieder hier zu unserer Login-Komponente gehen und dann werde ich nach dem Hausservice fragen. Also im Konstruktor werde ich einen Rand für mich sagen, den OSS-Dienst. Also würde ich sagen, hier privat von und dann hier wird es unser vierter Dienst sein. Und es würde automatisch und wichtig automatisch angezeigt werden , basierend auf dem, was wir hier definiert haben. Also haben wir das hier raus. Und dann werde ich sagen, onsubmit, tun Sie das direkt. Wir können sagen, diese Punkt-Auth, wie unser, unser Service-Hund Login. Und dann können wir den Benutzernamen und das Passwort übergeben. Also müssen wir hier ein Objekt erstellen, das Benutzername und Passwort enthält. Nennen wir es zum Beispiel Login-Daten. Und diese Login-Daten werden die E-Mail haben. Was wird dieses Punkt-Anmeldeformular Punkt-E-Mail sein, weil dies Formulargruppe aussehen wird , die steuert und dann E-Mail-Punkt-Wert und das Passwort wird genau das gleiche sein. So können wir ein anderes Mitglied definieren, das auch Passwort genannt wird. So können wir sagen, geben Sie mir auch das Passwort-Feld aus dem Formular und geben für mich den Wert davon. So wie wir hier sehen, dass wir die Login-Daten erstellt haben. So können wir hier sagen, Login-Daten Punkt E-Mail und Login-Daten Punkt-Passwort. Natürlich können Sie das direkt machen. Sie können sagen, wie ich die Formulardaten direkt wie folgt senden möchte. Und so, ohne irgendein Objekt zu senden. So können wir das direkt machen. Sie brauchen also dieses Objekt nicht insgesamt. Also lassen Sie uns das sehr einfach machen. Aber zuerst müssen wir auch überprüfen, ob das Formular gültig ist, als ob wir keinen Validierungsfehler haben. Wenn dieses Anmeldeformular Gruppe Punkt ungültig ist, dann sagen wir einfach zurück. Also brauchen wir nichts anderes zu tun, weiter und machen Sie für mich, dass sie suchen. Wie wir bereits gesagt haben, wird dieser Login für mich zurückkehren und beobachtbar. Es wird die Daten beobachten. Wenn Daten kommen, dann wird es ausgeführt werden. Also müssen wir es ausführbar machen. Wir müssen es abonnieren. Dann erwarten wir die Nutzerdaten. Und in diesem Benutzer, lassen Sie uns das in unserem Protokoll, so sagen wir Konsolenprotokoll Benutzer. Also lasst uns das ausprobieren. Wir sehen, dass, wenn alles gut funktioniert. Also nehme ich an, dass ich, wenn ich versuche, nach innen zu schauen Daten in der Front bekommen werde, so dass hier meine Konsole ist. Und ich werde zum Beispiel meine E-Mail haben . Und dann werde ich das Passwort haben. Ich klicke auf Absenden. Ich werde sehen, dass ich hier die Daten mit einem neuen Token bekomme, genau wie wir es mit dem Back-End gemacht haben. Aber wenn ich wie langes Passwort setzen werde, werde ich hier Fehler bekommen, vielleicht ist die schlechte Anfrage, die das Buzzword ist, falsch. Also müssen wir auch zeigen, dass hier, dass ihr Passwort falsch ist, weil wir nichts hier im Frontend sehen. Also müssen wir dem Benutzer zeigen, dass etwas nicht stimmt. Also, wie können wir das tun? Wie Sie sich erinnern, können wir nach dem Abonnement definieren und bearbeiten. Dieser Fehler kann so werden. Und dann sagen wir, dass, wenn es einen Fehler gibt und innerhalb dieses Fehlers, wir Konsolenprotokoll für mich sagen können, der Fehler selbst. Also können wir das auch tun. Versuchen wir falsche Benutzername und Passwort, damit wir es so verwenden können. Und ich werde einen zufälligen Namen setzen. Okay, ich habe einen Fehler und ich habe den Fehlertyp hier. Lassen Sie uns nun eine Nachricht an den Benutzer zeigen. Zum Beispiel hier, dass ein Fehler oder der Benutzername oder das Passwort falsch ist. Damit wir das genau hier zeigen können. So können wir wieder zum Login-Formular gehen und wir können eine weitere Spalte platzieren. Zum Beispiel können wir hier eine andere Spalte mit k definieren, sagen div, den P-Aufruf und 12 als auch. Und in diesem p gleich 12, können wir eine kleine definieren. Und diese kleine haben wir eine Klasse, die P-Fehler genannt wird. Und das wird mit Pfeilen versehen. E-Mail oder Passwort sind falsch. Aber wie wir hier sehen, dass wir diesen Fehler immer sehen, weil wir ihn als eine Spanne definiert haben, ohne irgendeine Bedingung für das Aussehen zu definieren. So können wir auch hier ng-if setzen. So können wir ng-wenn das Formular eingereicht wird. Und auch können wir eine andere Variable definieren, die Fehler genannt wird , wie Authentifizierungsfehler. Also können wir hier gehen und diesen definieren. Und standardmäßig wird es einen Wert fallen. Und dann, wenn wir hier Fehler bekommen, können wir sagen, dass auth pfeil wahr ist, also speichern wir alles. Gehen Sie zurück zu unserer Bewerbung. Okay, wir sehen die Fehlermeldung nicht. Also, wenn ich meine E-Mail und mein Passwort dann Mäuse setzen werde, habe ich keinen Fehler bekommen, weil ich den Benutzer und das Token bekam. Aber wenn ich Fehler mache, zum Beispiel im Passwort, bekomme ich Fehler und ich habe E-Mail oder Passwort falsch. Aber was ist, wenn ich zum Beispiel einen Pfeil bekomme, aber was nicht Authentifizierungsfehler. Wie einige, ein Fehler, der wie mit dem Serverfehler kommt , weil der Server nicht verbunden ist. Also müssen wir den Fehlerstatus angeben. Wenn Sie sich erinnern, haben wir im Backend-Status des Fehlers definiert, aber wenn es Serverfehler im Allgemeinen gibt, dann wird es mir 500 geben. Basierend auf dem Status des Fehlers kann ich hier verschiedene Nachrichten anzeigen. Also hier, anstatt diese Nachricht zu haben, können wir auch eine Variable definieren. Wir können es zum Beispiel Hausnachricht nennen. Und diese Nachricht wird durch den Satz ersetzt, den wir zuvor erstellt haben. So werden wir hier zum Beispiel unsere Botschaft haben. Und diese Nachricht ist standardmäßig E-Mail oder Passwort falsch. Aber hier können wir es basierend auf dem Fehler ändern. So kann ich hier überprüfen, dass der Fehlerstatus. Wir können also keine HTTP-Fehlerantwort sagen. Also haben wir hier HTTP-Fehlerantwort kommt mit einem Typ oder Status. Also, wenn ich hier gehe und den Fehler überprüfen, wenn Sie sich erinnern, haben wir hier Fehlerantwort dieser Art, und dann haben wir hier, okay, falsch, und dann ist Zustand 2s 400. Also in irgendeiner Weise werden wir den Fehler zeigen, wenn ein Fehler aufgetreten ist. Und dann werde ich sagen, wenn der Fehlerstatus gleich 400 oder nicht gleich 400 ist, dann wird diese Punkt-OK-Nachricht Fehler auf dem Server sein. So können wir dem Benutzer nicht sagen, dass er weiß, dass es ein Problem bei der Authentifizierung in unserem Server gibt. So können wir Fehler im zerebralen sagen. Bitte versuchen Sie es erneut. Später. In diesem Fall haben wir alle Fehler oder ungerade mögliche Fehler an den Benutzer umschlossen. Es wird also kein Problem für uns sein, wenn wir die Pfeile für den Benutzer zeigen. Und auf die gleiche Weise müssen wir sagen, dass dieser Punkt des Pfeils, wenn alles in Ordnung ist, dann müssen wir es verstecken. Also sagen wir Eid Fehler wird nicht gesehen, ist falsch. So können wir wieder hierher gehen und wir können unsere Anwendung neu laden und das noch einmal versuchen. Also werde ich sagen, zum Beispiel, in Ihrem gmail.com gefunden, und dann werde ich zum Beispiel einen Fehler machen . Okay, ich habe den Fehler und dann werde ich es richtig machen, damit wir das tun können. Also okay, der Fehler ist verschwunden. Also, jetzt werde ich Fehler im Server machen. Fehler nicht über Benutzername oder Passwort sind falsch, aber Erwachsene in ihrem Server, wenn der Benutzer weiß, dass es Fehler auf dem Server und sehen diese Meldung. So können wir hier zum Benutzerdienst gehen und vielleicht können wir oder den Authentifizierungsdienst, und wir können hier zum Beispiel einen Fehler machen. Also gehen wir wieder zu unserer Anwendung und versuchen, sich erneut anzumelden. Und dann werde ich auf „Senden“ klicken. Schön, weil ich einen anderen Fehler bekam , der nicht 400 ist. Ich habe 404. Und das hat mir diese Botschaft gegeben. So jetzt haben wir den Benutzer mit allen Möglichkeiten der Pfeile umgeben. In der nächsten Vorlesung werden wir sehen, was mit diesem Benutzer und dem Token zu tun ist. Und wir können es speichern und einige Entscheidungen für unsere Anwendung basierend auf diesem Token treffen. 127. Erstelle ein lokales Speicher-Service und ein Store: Okay, vielleicht fragen wir jetzt, warum wir ihre Anmeldung machen oder warum wir die Authentifizierung brauchen. Die Authentifizierung erfolgt normalerweise, wenn Sie verhindern möchten, dass der Benutzer zu bestimmten Seiten geht oder einige Anfragen an den Server ausführt. Zum Beispiel, wenn jemand zu meiner Anwendung kommt und dann sagte er direkt zu Produkten navigieren, dann wird er ihre Produkte sehen, aber ich möchte den Benutzer verhindern, dass dies zu tun. So wird er direkt auf die Login-Seite weitergeleitet und dann lasse ich ihn einloggen. Und natürlich, wenn wir gehen, um zu navigieren, wenn der Benutzer navigiert, müssen wir immer überprüfen, ob er durch meine Anwendung navigieren darf oder nicht. Dafür ist es nicht fair, jedes Mal, wenn ich zu einem Ort navigieren möchte, ein neues Token zu erstellen oder das Token zu generieren . Also jedes Mal werde ich den Benutzer fragen, ob er das Token hat oder nicht, und dann frage das Backend validiert und schicke es dann zurück nach vorne und dann erlaube ich ihm, zu woanders zu navigieren. Es ist nicht fair und es ist sehr anstrengend für den Server. Dafür werden wir das Token speichern, das wir erhalten haben, als wir in den lokalen Speicher gesperrt haben. Wenn unsere Anwendung, jede Website und jede Anwendung hat etwas, einen lokalen Speicher oder Speicher genannt hören. Und im lokalen Speicher können Sie es verwenden, um Daten Ihrer Anwendung zu speichern, die Sie immer verwenden müssen, um den Benutzer zu verifizieren, zum Beispiel, oder wenn Sie wollen, um ihren Warenkorb speichern, wie wir hier sehen, oder wenn Sie wollen, um die aktuelle Gebietsschema der Anwendung, zum Beispiel, hat einige Benutzer es in Englisch und er hat es, zum Beispiel auf Französisch. Und dann, als er wieder auf die Website ging, würde er nicht wieder Englisch sehen, aber er wird die Franzosen sehen, die Franzosen, die er angefangen hat. Diese Werte werden also immer hier gespeichert. Und basierend darauf, dann Benutzer, wenn er die Website wieder besucht, alles, wenn er irgendwo anders navigiert, wird es alle diese Informationen verwenden, die in der lokalen Speicher verwendet wird. Also der lokale Speicher, öffnen Sie DevTools und dann gehen Sie zur Anwendung und Sie werden die LocalStorage sehen. Es gibt auch die Cookies, die ebenso die Sitzungsspeicherung ist. Aber wir werden in diesem Kurs den lokalen Speicher verwenden. Also, was ich jetzt zuerst tun werde, werde ich dieses Token in meinem lokalen Speicher speichern. Wenn ich mich also einlogge und eine erfolgreiche Anmeldung habe, werde ich dieses Token in meinem lokalen Speicher speichern. Also lassen Sie uns alle diese Dateninformationen entfernen. Sie können alle Website-Daten leicht entfernen wenn Sie zu einer Speicher-Registerkarte hier in Google Chrome gehen, und dann sagen Sie klare Seitendaten. Wenn Sie also alles löschen, werden Sie sehen, dass Ihr lokaler Speicher leer ist. Jetzt gehen wir, wenn wir uns anmelden, legen wir das Token in den lokalen Speicher. Dafür würde ich auch sagen, dass ich einen anderen Dienst machen kann , der hier als lokaler Speicherdienst bezeichnet wird. Also lassen Sie uns das auch generieren. Also werde ich hierher gehen, generieren, und dann werde ich Service sagen, wie wir es vorher getan haben. Und der Dienst würde in Dienstleistungen wiederholt werden. Und der Name wird lokaler Speicher sein und der Projektname wird Benutzer sein. Und auch, wir werden diese Tests überspringen. Wir führen es aus. Wir erstellen den Service, wie wir hier sehen, und wir werden den lokalen Speicherdienst machen. Also, wie wir mit der lokalen Speicher-Engine arbeiten können und all dem, was ich Ihnen gezeigt habe. Wir können es sehr einfach tun, tun mit Standard-JavaScript und Luke und Speicher, wenn Sie Google für es im Browser und Sie gehen hier zu MD und Web-Docs, Sie werden sehen, dass wir etwas haben einen lokalen Speicher genannt. Und diese lokalen Speicher, es hat einige Methoden wie set item und get item und entfernen Sie Element und löschen Sie im Allgemeinen. Also lasst uns ein Beispiel haben. Ich werde eine Service-Methode erstellen. Wir können es zum Beispiel hier nennen, nach dem Konstruktor, können wir sagen, set item. Und set-Element wird für mich nach einer Daten fragen. Und dann kann ich nicht genau direkt lokale Speicherpunkt-Set-Artikel sagen. Und dann kann ich den Schlüssel angeben. So kann ich zum Beispiel Token sagen und dann werde ich die Daten als Wert geben. Dann können wir diesen lokalen Speicherdienst überall nutzen. Also lassen Sie uns es verwenden, nachdem wir eine eingeloggt oder Erfolg eingeloggt haben. Zum Beispiel, nachdem ich mich einloggen habe, werde ich hierher gehen und ich werde ihren lokalen Speicherdienst von hier aus anrufen. So können wir hier sagen, privaten lokalen Speicherdienst. Und dann wird es einen Typ lokalen Speicherdienst haben. Und dann können wir diesen lokalen Speicherdienst hier nutzen. Also werden wir sagen, dass danach dieser lokale Speicherdienst Set Element setzen. Und ich werde die Daten angeben. Zum Beispiel werde ich den Benutzer Punkt-Token speichern, okay, wir speichern, und dann versuchen wir, sich anzumelden und unseren Speicher zu überprüfen. Also gehen wir hierher und ich werde meine E-Mail und mein Passwort haben. Nachdem ich also auf Senden geklickt habe, wo ich mich einsperren und den Protokollierungsdienst aufrufen werde, muss ich er hier den eingestellten Schlüssel des Token. Um mit einem Wert des Tokens zu sein. Also, wenn ich auf Senden klicke, wie ich sehe, dass ich ein erfolgreiches Netzwerk habe und dann habe ich Namen und Passwort schreiben, und dann habe ich dieses Token abgerufen. Von nun an werden wir dieses Token verwenden, um die Navigation des Benutzers zu überprüfen , ohne immer wieder nach Login-Daten zu fragen. Jedes Mal, wenn der Benutzer irgendwo navigiert, möchte ich sehen, ob er erlaubt ist ordinal, als ich nach einem neuen Token fragen werde. Jetzt können wir immer das lokale Speicher-Token fragen. Und wie Sie sich erinnern, hat dieses Token Ablaufzeit. Wenn es abgelaufen ist, kann der Benutzer nur dann nicht mehr in der Anwendung navigieren , wenn er sich erneut einloggt und nach einem neuen Token fragt. Also, was wir hier tatsächlich brauchen, brauchen wir einen Satz Artikel und erhalten auch Artikel, wie wir den Token zurückbekommen müssen. So können wir sagen, der Rückgabewert wird eine Zeichenfolge sein und dann wird es für uns lokalen Speicherpunkt zurückgeben Element, und es wird was sein? Das Token, und wir können auch entfernen Element tun. Also entfernen Sie Element, wir werden es verwenden oder wir entfernen das Token, wenn der Benutzer sich auch abmeldet. Hier werde ich sagen, lokaler Speicher Punkt entfernen Element, und hier ist es nicht Rückkehr ist nur eine normale Methode, wo es für mich das Element entfernen wird. Es ist besser, als jene umzubenennen, die nicht gesetzt sind, sondern setosa, weil wir nur einen Schlüssel verwenden, der Token ist, und speziell für die Authentifizierung. Also werde ich hier sagen, dass Set Token und auch hier und Token bekommen. Und hier, entfernen Sie Token. Also ist es besser so. So können wir diesen Service außerhalb und überall in unserer Anwendung nutzen. Und es ist immer schön, eine Konstante für wiederholte Strings zu definieren. So zum Beispiel werde ich hier sagen const, zum Beispiel, wird Token sein. Und dieses Token wird einen Namen JWT-Token haben. Und hier, was immer sein würde, werden die Konstanten Großbuchstaben sein. Und wir können dieses Token hier ersetzen. Um also nicht die gleiche Zeichenfolge zu wiederholen, können wir immer eine Konstante sagen und wir können diese Konstante verwenden und sie umbenennen. Oder wollen wir, wann immer wir diesen Schlüssel umbenennen wollen? Also lassen Sie uns das speichern und versuchen Sie es erneut. Wir haben immer noch das Token. Und wenn ich meine E-Mail wieder setzen muss, werde ich sehen, dass ich Fehler bekommen habe, weil wir hier nicht gesetzt Element aufrufen müssen, aber wir werden sagen set-Token. Und dann speichern wir die E-Mail wieder, wir senden, und dann werden wir hier das JWT-Token haben. Also müssen wir auch diesen löschen. Lassen Sie uns also einen Anfang klar machen, damit wir die Daten wieder löschen können. Und dann werden wir nichts in unserem lokalen Speicher haben. Lassen Sie uns versuchen, erneut einzureichen. Okay, nett, wir haben JWT-Token und auf diese Weise werden wir dieses Token verwenden, um die URLs zu schützen und zu schützen. Und das entspricht dem Backend. 128. Erstelle Admin: Okay, in dieser Vorlesung werden wir sehen, wie man das Admin-Panel bewacht. Wie müssen wir das Admin-Panel vor Benutzern schützen , die nicht autorisiert oder authentifiziert sind, um sich anzumelden. Aber zuerst, normalerweise, nachdem wir den Benutzernamen und das Passwort eingegeben haben und dann auf Senden klicken, werden wir zum Admin-Panel weitergeleitet, wenn alles in Ordnung ist und unser Benutzername und Passwort, richtig? So können wir nicht tun, dass nach der Schaltfläche Senden oder klicken Sie auf Senden, dann können wir den Benutzer auf die Anwendung oder die Admin-Panel-Anwendung umleiten. Also, wie wir das tun können, können wir hier zur Login-Komponente gehen. Und wir sehen, dass wir zuvor die Login-Authentifizierung erstellt haben. Und nachdem der Benutzer offen ist. So können wir den Router aufrufen, den Router , der v zu einer neuen Seite oder zur Homepage unserer Anwendung navigieren lässt. Also können wir hier nicht den privaten Router anrufen. Und dieser Router wird einen Router haben und er wird aus Angular importiert. Und dann gehen wir hierher, wo wir einen erfolgreichen Login haben. Dann sagen wir das, der Router, und dann kann ich sagen navigieren, und dann gebe ich die URL im Array an. So brauchen wir zum Beispiel die Homepage. Wir müssen nicht zu irgendwelchen Unterseiten gehen. Also gehen wir auf die Homepage, wenn wir uns in der Anwendung einloggen. Also lasst uns das versuchen und dann hierher gehen. Wir können sagen, zum Beispiel, E-Mail, Ich werde meine E-Mail und das Passwort setzen, und dann werde ich auf Senden klicken. Also klicken wir auf Senden und dann sehen wir, dass wir Anwendung oder zum Admin-Panel weitergeleitet werden. Wir haben hier Leerzeichen wegen der Routen. Wir werden unsere Routen später organisieren, damit es direkt zum Dashboard gehen kann. Wie Sie hier sehen, können wir jetzt durch die Anwendung navigieren. Wir haben hier ein Problem. Ich werde das Token aus dem lokalen Speicher löschen, so dass wir als nicht gesperrt betrachtet werden. Wenn ich also navigiere, bin ich immer noch in der Lage, durch die Anwendung zu navigieren. Sogar ich habe kein Zeichen. Oder lassen Sie mich zum Beispiel die Anwendung neu laden, gehen Sie erneut zur Anmeldeseite. Und dann, wie Sie hier sehen, sind wir auf der Login-Seite. Also, wenn ich zu U R, L gehe und Bestellungen sage, dann gehe ich auf die Besitzerseite. Das ist also falsch. Wir müssen uns zuerst anmelden und sehen, dass der Benutzer wirklich eingesperrt ist. Dann erlauben wir ihm, zu Bestellungen oder zwei Produkten oder zu anderen Seiten zu gehen. Also für das, müssen wir etwas zu schaffen nennt man Wache. Und Wache ist eigentlich ein Dienst. Sie können es an die Router oder an die Routen übergeben, die Sie erstellt haben. Und dann können Sie sagen, schützen Sie diese Route, bis der Benutzer etwas genehmigt hat oder der Benutzer etwas getan hat. So können wir das sehr leicht machen. Also, wenn wir hier zum Anwendungsmodul gehen, so wie Sie sich erinnern, haben wir hier die Routen. Also kann ich nicht sagen, dass Route, Route, Ich sage, kann aktivieren. Und dann gebe ich etwas an, das Wache genannt wird. Und der Wächter ist eigentlich ein Dienst und der Dienst, der immer die Router beobachtet und sehen, ob es erlaubt ist, diese Route zu betreten oder an Ort und Stelle zu bleiben, ohne auf eine neue Route zu gehen. Lassen Sie uns das so leer halten und wir gehen, um unsere Wache zu schaffen. Also zuerst werde ich gehen, um die Wachen in den Diensten in der Benutzerbibliothek zu erstellen. Also hier werden wir einen neuen Dienst erstellen. Also gehe ich zum NX-Modul und dann sage ich generiere für mich einen neuen Dienst. Und dieser Service wird sich im Dienstordner befinden und es wird Mundschutz genannt. Also nennen wir diesen Service als unseren Mundschutz. Und dann gebe ich an, dass das Projekt Benutzer sein wird weil wir es in die Bibliothek des Benutzers einfügen und das war's. So können wir diese Tests auch überspringen. Wenn ich also auf Ausführen klicke, werde ich sehen, dass der Dienst hier als alter Wachdienst erstellt wird. Sie können dieses Suffix entfernen. Zum Beispiel kann man nur wie aus der Wache ohne Asgard Service sagen, man kann nur aus der Wache sagen. Und das sind die Wache wird etwas von Angular implementieren, die aufgerufen wird kann aktivieren. Und das ist von Angular Router. So kann dies aktivieren ist eine Methode, die immer für mich den Router beobachtet und true zurückgibt, dann erlauben wir, dass wir auf eine neue Route gehen, oder es ist falsch, zwei 4-Bit gehen auf diese Route. Um es mehr von mir zu verstehen, werde ich diese aktivieren können erstellen. So zum Beispiel hier sagt es, dass der Fehler, dass die Klasse off-guard implementiert werden kann, aktivieren kann, was kann die Methode aktivieren fehlt. Lassen Sie uns diese Methode erstellen, denn wenn Sie eine Klasse implementieren oder etwas von der Klasse erweitern möchten , müssen Sie auch die gleichen Methoden tun, die sind. Erstellt in dieser Klasse. Also, wenn ich hier gehe, um nicht aktivieren zu können, drücke ich Control. Ich sehe, dass es eine Schnittstelle hat und diese Schnittstelle eine Methode hat, die aufgerufen wird, kann aktivieren, und diese Methode akzeptiert Route, die Snapshot und auch Zustand aktiviert wird. Und es wird für mich beobachtbar von Boolean oder einem Versprechen oder Boolean selbst zurückkehren , was klar ist. So können wir diese Methode auch kopieren. Wir können es hier nehmen und zu unserem Mundschutz gehen, und dann fügen Sie es hier ein und öffnen Sie die Implementierung für diese Methode. Also müssen wir ein paar Sachen importieren. Zum Beispiel, aktivierte schrieb Schnappschuss, das ist wichtig. Wir steuern Punkt oder Konturraum in Windows, und dann würden wir sehen, dass es hier automatisch importiert wird. Und noch einen, den wir auch importieren müssen. Okay, es gibt mir einen Fehler, weil diese Methode einen booleschen oder beobachtbaren Boolean oder ein Versprechen von Boolean zurückgibt . So können wir wie einfach falsch zurückkehren. Und dann müssen wir diese Methode exportieren, damit wir sie in der Anwendungsebene verwenden können. Also gehen wir hierher und wir sagen, dass der Export von Lip Dienstleistungen. Und dann die Wache, die ich erstellt habe, speichern wir und ich gehe jetzt zu unserem Anwendungsmodul. Und dann würde ich sagen, benutze den Mundschutz, den ich erschaffen habe. Also hier haben wir die Asgard und es würde automatisch aus der Benutzerbibliothek importiert werden. Also lassen Sie uns nach unten scrollen und wir werden sehen, dass wir diesen Pfad geschützt haben, wie die Route ihre Kinder hinzufügen, so dass wir nicht auf jedes Kind zugreifen können , weil dieser off guard immer falsch zurückkehrt. Sehen wir uns das an. Wie Sie hier sehen, haben wir eine weiße Seite, weil ich nicht in der Lage bin , auf alles zuzugreifen, aber zum Beispiel, Login, okay, ich kann nicht auf Login zugreifen. Aber wenn ich zum Beispiel etwas, das Kinder dieser Route ist, denn hier haben wir Kategorien, Bestellungen, Produkte, et cetera. Also werde ich einen von ihnen setzen, weil wir hier Produkte haben. Und dann werde ich eine breite Seite bekommen, weil ich jetzt nicht betreten darf, weil aktivieren ist für das Gebot mir zu geben, weil es eine Kraft zurückgibt. Also, wenn ich es zurück zu true und dann speichern und erneut versuchen, werden wir sehen, dass wir in der Lage sind, sich einzuloggen und das Admin-Panel zu sehen. Aber wenn ich es auf false setze, darf ich nicht hineingehen und ich werde eine weiße Seite bekommen. Also sind wir sehr nah dran. Jetzt dürfen wir auf die Login-Seite gehen, weil wir sie nicht in die Wache aufgenommen haben. Denn wenn Sie sich daran erinnern, dass sich die Anmeldeseite im Benutzermodul befindet. So haben wir die Login-Route außerhalb der Gartenarbeit, so dass wir sie nicht schützen oder schützen müssen. Also möchte ich irgendwie nicht auf eine weiße Seite oder auf eine Seite geleitet werden , die nicht definiert ist. Also möchte ich zu ihren eingeloggten weitergeleitet werden, wenn ich diese Route nicht betreten darf. Also, wenn ich hier etwas wie Produkt oder der Benutzer versucht, direkt über URL zuzugreifen. Ich möchte ihn auf die Login-Seite zurückschicken. Also genau das Gleiche. Wir benutzen diesen Wächter genau, um das zu tun, was wir wollen. Also, wenn der Benutzer versucht, etwas mit seinen Links zu tun, wir verwalten. Was ist das Ergebnis davon? So können wir das sehr leicht machen. So können wir sagen, dass wir den Benutzer mit dem Router auf die Anmeldeseite umleiten müssen. Was ich hier tun werde, dass ich wieder einen privaten Router importieren werde. Und dieser Router kommt wieder eckig, wie wir es direkt im Login getan haben. Und auch, ich werde sagen, dass navigieren Sie für mich, um sich anzumelden. Also, wenn ich das sage und dann wieder gehen und ich versuche, zum Beispiel zwei Aufträge einzugeben . Dann werde ich drei auf Login-Seite gerichtet bekommen , weil ich nicht zu diesem Lohn eingeben darf. Ok. Wenn ich teilnehmen darf, darf ich eingeben, wenn ich ein Token mit einer gültigen Ablaufzeit habe, und dann kann ich dem Benutzer erlauben, auf diese Seite zu gelangen. In diesem Fall möchte ich das Token hier irgendwie erhalten und dann werde ich false oder true zurückgeben, das basierend auf den Token-Daten aktiviert werden kann. Wenn Sie sich erinnern, haben wir das Token im lokalen Speicher gespeichert. So können wir hier wieder unseren lokalen Speicherdienst nutzen. Also sage ich privaten lokalen Speicher-Token, für mich wieder diesen lokalen Speicherdienst bringt. Und hier gehe ich vor allem. Ich will das Token holen. Also werde ich const Token und dann diesen Punkt lokalen Speicherdienst sagen und dann das Token erhalten. Also hier haben wir das Token. Also werde ich überprüfen, ob es Token in ihrem lokalen Speicher gibt, als ob es nicht leer ist, dann erlauben Sie mir, dem Benutzer, auf diese Seite zuzugreifen und es über zwei kann die Methode aktivieren. Also werde ich hier sagen, true zurückgeben, sonst navigieren Router dot zur Anmeldeseite und geben false zurück. Versuchen wir also, das zu speichern und es erneut zu versuchen. Also sind wir hier, ich gehe, ich habe hier dieses Zeichen. Wenn ich also versuche, zu Produkten zu gehen, muss ich in der Lage sein, die Produkte zu sehen. Weil wir hier ein Token haben. Ich werde hier Produkte sagen. Und dann, okay, perfekt, wir haben die Achse. Okay, versuchen wir, das Token zu löschen und wieder zu unserer Login-Seite zu gehen. Und dann habe ich das Token gelöscht. Also, wenn ich das Token lese, werde ich nichts haben. Dann wird es das direkte mich umbenennen und falsch zurückgeben. Also werde ich hier Produkte sagen. Okay, ich kam zurück zu Logan. So schützen wir die Route. So ist die Route selbst in der App-Modul-Anwendung geschützt, wie Sie sich erinnern, haben wir hier mit dem Mundschutz. Also alle diese Routen sind geschützt basierend auf kann aktivieren, was es für mich zurückkehren wird, wahr oder falsch. Also, wenn ich hierher gehe, überprüfe ich, ob es Token gibt, und dann sage ich, okay, logg dich ein. Aber jetzt in diesem Fall, wenn jemand hierher kommt, fühle ich mich wie ein DVT-Token, genau wie der Schlüssel und ich habe etwas, dann werde ich in der Lage sein, auf die Produktseite zu gehen. Weil ich sagte, wenn es Token gibt, habe ich den Wert dieses Tokens nicht gesehen, wenn ich erlaubt bin oder nicht, wenn ich Admin bin oder nicht. Und das, was wir in der nächsten Vorlesung sehen werden, müssen wir dieses Token lesen und analysieren. Und basierend darauf erlauben wir dem Benutzer, auf diese Seite zu gelangen oder wir lesen ihn direkt auf die Anmeldeseite. 129. Token-Daten isAdmin und Ablauf, die sich ansehen: Okay, in dieser Vorlesung werden wir sehen, wie wir überprüfen können, ob der Benutzer admin ist oder nicht. Wie ich Ihnen hier bereits gesagt habe, dass wir hier nicht eine Benutzersicherheit tun, wir tun keine Anwendungssicherheit. Die Sicherheit selbst geht, wenn wir die HTTP-Anfragen abfangen, wie Produkt abrufen oder Bestellungen erhalten oder Produkte posten oder Bestellungen nur mit einem Token posten. Normalerweise kann jeder Client ohne Token auf meine API zugreifen. Wir werden später darüber sprechen. Aber jetzt, was wir tun, ist nur eine Benutzererfahrung. Also führe ich den Benutzer nur, wenn er eingeloggt ist oder nicht. Und wenn er eingesperrt ist, kann er das Admin-Panel sehen. Wenn nicht, wird er auf die Anmeldeseite weitergeleitet. Also lasst uns das Token analysieren, das wir von hier bekommen haben. Wenn Sie sich erinnern, haben wir dieses JWT-Token erstellt und im Back-End haben wir einige Daten wie die Benutzer-ID eingebettet und auch, ob er admin ist oder nicht. Also, wenn wir zu JWT dot io gehen und dann setzen wir unser Token hier, werden wir sehen, dass wir hier die Benutzer-ID bekommen und wenn er admin und auch Ablaufzeit ist. Also müssen wir dieses Token irgendwie im Frontend dekodieren. Und dann finden wir heraus, ob sie Benutzer angemeldet ist Admin ungerade Menge. Also lasst uns das jetzt versuchen. Also zuerst werde ich eine Methode verwenden, die AT oder B genannt wird. Dies ist wie für die Dekodierung der Strings von Daten, die auf Basis von Base-64-Codierung codiert wurden. Mal sehen, was wir hier kriegen können. Also zuerst möchte ich dieses Token dekodieren. Also, wenn es ein Token gibt, dann machen Sie für mich eine Konstante, nennen Sie es Token-Dekodierung. Und dann werden wir diese Methode verwenden ist Javascript-Methode, so dass wir es direkt verwenden können, ohne eine Bibliothek aufzurufen. Also werde ich hier Token sagen, und dann werden wir sehen, was wir als Ergebnis bekommen. Also lassen Sie uns auch die Konsole protokollieren, dieses Token-Dekodieren, um zu sehen, was wir in der Konsole haben und was das oder welches decodierte Token für mich zurückgeben wird. So speichern wir und gehen zu unserer Anwendung und überprüfen unsere Konsole. Also, wenn Sie sich erinnern, wir haben bereits hier eingeloggt so dass ich direkt zu Bestellungen gehen kann zum Beispiel. Und dann werde ich hier etwas bekommen, das wir sehen werden, dass wir Fehler erhalten ungültige Zeichenfehler genannt wird. Dies, weil das Token aus drei Teilen besteht. erste Teil wird die Header genannt, die angeben, welcher Typ des Tokens und auch was der Algorithmus geschrieben oder generiert wird dieses Token. Und der zweite Teil enthält die Daten, wie Sie hier sehen, die Farbe stimmt überein. Also haben wir hier auch die Daten, die in das Token kommen. Und der dritte Teil ist für die Überprüfung des verschlüsselten Token oder der Signatur des Tokens. Wir interessieren uns für den zweiten Teil. Also müssen wir dieses Token basierend auf dem Punkt teilen. Also, nachdem wir es geteilt haben, bekommen wir den zweiten Teil. Also zuerst müssen wir uns trennen. Wir sagen Token-Punkt-Split. Und dann basierend auf dem Punkt. Und wie Sie sich erinnern, wird der Split für mich Array von drei Elementen zurückkehren. Also erster Teil und zweiter Teil , der unsere Daten enthält. Also werden wir von 0 bis zwei zählen. Also wollen wir den zweiten Teil. Also hier haben wir jetzt das Array geteilt und wir werden den Teil nehmen und diesen Token auf diese Weise entschlüsselt und lesen. Also nach der Codierung und gehen Sie zurück zu der Anwendung, werden wir sehen, dass wir auch Objekt Benutzer-ID erhalten ist admin und auch Initialisierungszeit und Ablaufzeit des Tokens. Also genau, wie wir hierher gekommen sind. erste Teil ist also für die Header und der zweite Teil ist für die Daten des Tokens. Und der dritte Teil ist für die Unterschrift und Überprüfung der Signatur. Also haben wir tatsächlich die Daten bekommen, denen wir interessiert sind. Also, jetzt sind wir bereit. Wir lesen das Token als JSON. So können wir auch diesen Teil nehmen, alles als JSON. Also können wir JSON Dot Parse sagen. Und dann kann ich das alles als JSON-Objekt lesen. Dann werde ich in der Lage sein, den Inhalt dieses Tokens zu lesen. Also können wir nicht sagen, ob Token-Dekodierungspunkt admin ist, wie der Benutzer admin genau wie wir es vom Back-End senden und dann geben wir eine true zurück. Also in diesem Fall, wenn der Benutzer wirklich admin ist, dann kann er auf das Admin-Panel zugreifen. Wenn nicht, wird er nicht in der Lage sein, darauf zuzugreifen. Also lassen Sie uns diesen Teil entfernen und überprüfen, ob alles für uns gut funktioniert. Also werde ich gehen und versuchen, unser Token, nachdem ich gespeichert. Also werde ich hier zum Login gehen. Und dann, okay, wir haben hier alles. Und ich werde mich abmelden, indem ich dieses Token minorly entferne, und ich werde mich wieder einloggen. Also werde ich meine E-Mail sagen. Und wie Sie sehen, habe ich hier meine E-Mail und mein Passwort und ich werde auf Absenden klicken. Okay, wir sind wirklich geleitet, weil ich Admin bin. Ich werde einen anderen Benutzer ausprobieren. Also werden wir einen Benutzer haben, der nicht admin ist. Also werde ich wieder auf die Login-Seite gehen. Also werde ich direkt in die Datenbank gehen und dann werde ich mich ändern, um nicht admin zu sein, aber ich werde wie False von admin sein. Und dann werde ich auf diese Zeile aktualisieren klicken. Danach wurde ich aktualisiert, ich werde erneut versuchen, mich anzumelden. Mal sehen, was wir haben werden. Also werde ich meine E-Mail und mein Passwort eingeben und dann würde ich auf Absenden klicken. Wir sehen, dass, okay, ich habe dieses Token, aber ich kann mich nicht anmelden, wie Sie hier sehen, weil ich kein Admin bin, weil Admin nicht mit diesem Token kommt. Also, um sicher zu sein, ich möchte es Ihnen zeigen, damit wir dieses Token kopieren und es hier ablegen können. Und wir werden sehen, dass Admin falsch ist. In diesem Fall kann ich mich also nicht mehr einloggen. Also lassen Sie es uns als wahr zurücksetzen, um sich immer einloggen zu können. In diesem Fall unterscheide ich also zwischen den Kunden und nicht den Kunden. Vielleicht wird jemand kommen und mir sagen, okay, ich kann eine Benutzer-ID erstellen und ist admin. Und wie ich ein Token wie dieses erstelle, genau. Und ich habe in meinen lokalen Speicher eingefügt und ich versuche, den Link zu durchlaufen, ich werde Ihnen sagen, ja, natürlich können Sie das tun, aber Sie werden keine Anfragen senden können. Sie können nicht Produkt nehmen, Sie werden, Sie werden natürlich zum Admin-Panel gehen , aber Sie werden keine Daten sehen können. Sie können keine Anfragen an den Server senden. Denn wie wir später sehen werden, werden wir diese abfangen und APIs mit einem Token schützen. Wie Sie sich in Postman erinnern, wie wir das Token immer in den Körper der Anfrage geladen haben, um diese Anfrage an das Backend senden zu können. Wie Sie hier sehen, laden wir immer ein Token mit jeder Anfrage, die ich tat. In diesem Fall schützen wir das Backend. Was wir hier eigentlich tun, ist nur die Benutzererfahrung. So wird der Benutzer nicht in der Lage sein, das Back-End oder das Admin-Panel leicht zu sehen , wenn er nicht admin ist. Also habe ich mich wieder als Admin gesetzt und ich bin in der Lage, Daten zu sperren und abzurufen, so dass wir auch die Ablaufzeit verwenden können. So kann sich ein Benutzer jederzeit bei unserer Anwendung einloggen, jederzeit während des Tages. Also, wenn Sie sich erinnern, wir haben einen Tag der Erkundung, wir setzen es in das Backend. Natürlich können Sie das Token im Back-End so viel wie Sie wollen, wie wir zuvor gesehen haben. Also hier werde ich auch das Token überprüfen, ob es abgelaufen ist oder nicht. So werden wir hier Admin sagen. Und auch werde ich eine Methode haben, die für mich die Token-Ablaufzeit überprüft, eine private Methode, es wird Token abgelaufen sein. Also hier werde ich wissen, dass, wenn das Token abgelaufen ist oder nein, so, und dann werden wir sagen, senden Sie den Token decode und EXP, denn wenn Sie sich erinnern, kommt der Ablauf im x-Feld. Also werde ich diese Methode erstellen. Ich werde es dir schnell zeigen. Also haben wir hier auf die Methode, die Token abgelaufen genannt wird, und es wird Ablaufzeit haben. Es wird für mich Boolean zurückkehren. Also, um die Ablaufzeit von etwas zu überprüfen, wissen Sie, dass die Zeit für uns als Druck oder als Zeitstempel kommt. Und dieser Zeitstempel können wir es analysieren, indem wir diese Methode tun. Also kann ich überprüfen, ob Boden dann Zeit bekommen. Also all das, ob ich jetzt die Zeit bekomme, wenn es größer ist als diese Erkundung, dann ist das Token gültig. Wenn nicht, dann ist das Ablaufdatum des Token beendet, so dass das Token abgelaufen ist. Auf diese Weise können Sie das Token überprüfen, ob es abgelaufen ist oder nicht. Natürlich gibt es auch andere Möglichkeiten, wie Sie sie googeln können. Sie können sie finden, wie Frau JS verwenden oder zum Beispiel eine andere Bibliothek verwenden, die nimmt, das Token überprüft und Ihnen alle Informationen zurückschicken, die Sie wollen. Hier. Wir haben es mit Vanille-JavaScript gemacht. Also lassen Sie uns versuchen, dass wir jetzt speichern und wir haben jetzt das Token. Natürlich kann ich es jetzt nicht ablaufen lassen, weil ich nicht so bin, wie ich das Token jetzt erstellt habe, aber jetzt setzen wir alles und wir sind in der Lage, dieses Token zu verwenden und wir sind gültige Benutzer als Admin, um in das Admin-Panel zu schauen. Wie ich Ihnen sagte, ist dies der einfachste Weg, dieses Token zu codieren, es gibt kompliziertere Möglichkeiten. In der nächsten Vorlesung, wie ich Ihnen sagte, werden wir mehr Sicherheit schaffen und so werden wir keine Daten sehen können , wenn wir kein gültiges Token haben. 130. Aktiviere die Backend für Backend: Wenn Sie sich zu Beginn der Arbeit mit dem Admin-Panel erinnern, haben wir im Backend die Authentifizierung für unsere APIs deaktiviert. Also, wie wir das gemacht haben, wenn Sie sich daran erinnern, dass wir die ganze Authentifizierung auskommentiert und wir sagten, dass wir alles erlauben. Also in der JWT-Datei, im Acme, im Back-End, habe ich alles deaktiviert und ich sagte: Okay, ein Tief für mich. Alles, was du sein sollst, wenn wir nicht vorher darüber geredet haben. Also lasst es uns zurücksetzen. Wie alle APIs mit Ausnahme der APIs gesichert sind. Also müssen wir auch alle APIs sichern. Daher können wir kein Produkt posten. Wir werden nicht in der Lage sein, Benutzer zu posten oder wir sind nicht in der Lage, die Benutzer zu bekommen. Also nach der Aktivierung, Lassen Sie uns versuchen, zum Beispiel, gehen Sie in unserem Admin-Panel zu den Benutzern, weil hier Benutzer nicht enthalten ist. Also lasst uns das überprüfen. Ich werde wieder hierher gehen und die Benutzer überprüfen. Ich werde sehen, dass ich leer wurde und ich habe einen Fehler in der Konsole erhalten, dass ich nicht autorisiert bin. Also müssen wir so etwas tun, wie wir es mit dem Postboten gemacht haben. Wenn Sie sich erinnern, haben wir ein Token in die Anfrage geladen und dann senden wir diese Anfrage. In diesem Fall bekommen wir, was wir wollen, alles reibungslos. Also hier werden wir auch dieses Token laden, das wir bekommen haben, nachdem wir uns bei dieser Anfrage angemeldet haben. Das Backend autorisiert mich also, die Daten aus der Datenbank zu erhalten. Also hier, was wir in der nächsten Vorlesung tun werden. 131. Abgreifende HTTP-Anfragen mit Token: Okay, wie ich Ihnen bereits sagte, dass wir das Token über ihre Anfrage laden müssen. Wenn Sie sich erinnern, haben wir das Token über ihre Anfrage in Postman geladen, und wir haben dieses Token in den Headern der Anfrage übergeben. Das war sehr einfach als Postboten, wir wollten nur hierher gehen und die Autorisierung auswählen. Und dann sagen wir Barriere-Token, und dann verschwenden wir unser Token hier. So wie wir hier tun werden, aber mit Angular. In Angular wird dieses Konzept davon Abfangjäger genannt. Der Interceptor ist etwas, das alle Anfragen beobachtet, die vom Frontend ausgehen und dann überprüft, ob diese Anfrage an das Backend API geht, dann lade ich ein Token darüber. Da, wie Sie bereits sehen, dass das Back-End jetzt fertig ist, erlauben Sie uns, Anfragen ohne dieses Token zu senden, da wir nicht mehr autorisiert sind. Also, wie können wir das leicht machen? Wie Sie sich erinnern, haben wir immer NX-Tools verwendet. Ich werde hier ein neues Modul generieren und es gibt etwas namens Interceptor. Und der Interceptor ist etwas, das über den HTTP-Dienst geladen wird und dann das Token darüber lädt. Also der Weg, das zu tun, gehen wir und wir geben einen Namen, zum Beispiel, GW t. Und dann können wir es auch in den Dienstordner übergeben , der sich in den Projektbenutzern befindet , weil wir das in der Anwendung. Und dann lassen Sie uns das vorerst überspringen. So können wir auf Überspringen klicken, dann führen wir dies aus, und dann gehen wir zu unserer Anwendung und wir werden sehen, dass wir JWT Abfangjäger haben. Okay, mal sehen, was Abfangjäger ist. Interceptor implementiert eine Klasse oder Schnittstelle, die http Interceptor genannt wird. Und in diesem http-Interceptor gibt es eine Methode, die als Abfangen bezeichnet wird. Und dieser Abfang empfängt eine Anfrage und dann als nächstes für die Behandlung, und dann wird es das HTTP-Ereignis zurückgeben. Also für jetzt ist es so. Also müssen wir die HTTP-Request-Header als Postmen laden , die die HTTP-Anfrage mit dem Token ausführen. Denn immer legen wir zusätzliche Daten in die Header. Jede Anfrage, die in Ihrer Anwendung geht, geht über Header. So wird Authentifizierungstoken über die Header der Anfrage geladen, wie Sie hier sehen, haben wir hier zum Beispiel die Header-Anfrage und ich habe Autorisierungsträger und dann das Token. Das ist genau das, was der Postbote tut. Lassen Sie uns das Gleiche mit unseren Anwendungen machen. So werden wir in der Lage sein, die Benutzer zu sehen, weil wir jetzt nicht berechtigt sind , die Benutzer oder Bestellungen zu sehen, weil wir nicht autorisiert sind. Also zuerst werde ich hier in diese Methode gehen und dann werde ich dieses Token und auch die URL erhalten. So wird das Token, wie Sie sich erinnern, im lokalen Speicher gespeichert. Also zuerst werde ich eine Konstante definieren. Ich werde es Token nennen, und ich werde den lokalen Speicherdienst verwenden. Also der lokale Speicherdienst, den wir zuvor verwendet haben , der sich auch im selben Repository befindet, alle im selben Ordner des Dienstes dieses Benutzers. Also werde ich hier sagen, private lokale Speicher-Token. Und dann wird dieses lokale Speicher-Token vom lokalen Speicherdienst kommen. Und dann werde ich es benutzen. Also werde ich hier sagen, dieser Punkt localStorage dunkelt und dann getToken. Das ist also alles. Dann haben wir das Token, das wir im lokalen Speicher hier in dieser Konstante gespeichert haben. Der nächste Schritt ist die Anfrage. Diese Anforderung ist jede Anforderung, die von der Front-End-HTTP-Anforderung geht. Denn wenn Sie sich erinnern, wir in unseren Diensten HTTP-Anfragen. Also immer verwenden wir HTTP Post HTTP, GET HTTP Report usw. So wie Sie hier sehen, verwenden wir HTTP-Protokoll für das Senden unserer Anfragen an das Backend, also wollen wir sie abfangen. Also wird das u r l in dieser Anfrage sein. Also, wenn ich sage, geben Sie mir die Benutzerdaten, dann werde ich gehen und die Anfrage stellen. Und in dieser Anfrage gibt es URL, und diese URL wird unsere API-URL sein. Hier können wir sagen, const ist API-URL. Und dann werde ich sagen, dass geben Sie mir die Bitte, die hier übergeben wird. Und dann sind Sie L und dann beginnt mit, also wenn die URL mit meiner API beginnen, wenn Sie sich daran erinnern, dass wir die API in unseren Umgebungsvariablen gespeichert haben, die sich in der Umgebungsdatei befindet. So können wir auch hier sagen wir, dass geben Sie mir die Umwelt. Es wird aus Umgebungen, Umgebung importiert werden. Und dann werde ich die API-URL festlegen. Also, wenn meine API-URL mit dieser URL beginnen. Dann werde ich es abfangen. Es bedeutet also, dass es sich um eine Back-End-URL handelt. Okay, wie ich Ihnen bereits sagte, müssen wir das in die Kopfzeilen setzen, wie wir das tun können. Also, wenn wir ein Token haben, also sage ich, wann, wenn Token und auch wenn ich eine API-URL habe, dann werde ich die Header zu dieser Anfrage hinzufügen. Also werde ich sagen, Anfrage wird die gleiche Anfrage sein, aber klonen Sie sie wie die aktuelle Anfrage klonen und passen Sie Folgendes an. Also müssen wir diese Anfrage anpassen, um Header gesetzt zu haben. Wie Sie sich erinnern, habe ich Ihnen gesagt, dass wir das Token in die Header der Anfrage einfügen müssen. Und dann würde ich sagen, Autorisierung. Und dann, wenn Sie sich daran erinnern, dass wir Biergenehmigung verwenden, so hier werde ich Stream genannt bitter und dann Raum haben. Du erinnerst dich daran, dass du Platz setzen musst. Und dann werde ich das Token danach setzen. Auf diese Weise werde ich das Token mit einer bitteren Autorisierung in den Headern jeder Anfrage übergeben. Und wir behalten diese nächste Punkt-Handle-Anfrage. Also okay, wir speichern das und wir überprüfen unsere Konsole, wenn alles gut funktioniert, okay, alles funktioniert gut. Aber jetzt müssen wir diesen Abfangjäger als jeden Dienst exportieren, den wir zuvor getan haben, damit wir ihn außerhalb unserer Bibliothek, unserer Benutzerbibliothek verwenden können . Also gehen wir hier zum Index und ich werde sagen Export, und dann von lib-Diensten und dann JWT-Abfangjäger. Danach speichern wir und dann müssen wir diesen Abfangjäger verwenden, wo wir den Abfangjäger verwenden. Sie haben die Wahl. Sie können es hier im Benutzermodul verwenden, da wir sowohl den Benutzer als auch das Modul im App-Modul verwenden. Oder Sie können es direkt im Anwendungsmodul verwenden. Also, wie können wir das benutzen? Ich werde auch hier gehen und ich werde die Anbieter überprüfen, die ich habe, NG-Modul-Deklaration oder Import. Und es gibt etwas, das Provider genannt wird. Also Improvisatoren, ich biete Dienst an. Ich stelle ein Token zur Verfügung. Ich stelle eine Variable für einen Dienst bereit, damit ich sie verwenden kann. Der Weg, das zu verwenden, ist, wir sagen, dass wir hier ein Komma setzen und dann öffnen wir ein Objekt und wir sagen, bieten. Und dann HTTP-Abfangjäger. Und wie Sie hier sehen, kommt HTTP-Abfangjäger von HTTP in Angular. Also benutzen wir das hier. Und dann werden wir sagen, Klasse wie als Standard verwenden. Wir werden die Klasse verwenden, die JWT Interceptor ist, die ich in der Bibliothek des Benutzers erstellt habe. Also, wenn ich hierher gehe, werde ich sehen, dass es automatisch importiert wird, wie Sie hier sehen. Zum Beispiel, wenn wir nach oben gehen, werden wir sehen, dass JWT Interceptor aus Benutzer-Bibliothek importiert wird. Wir sagen, Multi ist wahr. Also, nachdem wir speichern und dann gehen wir zu unserem Front-End, werden wir sehen, dass wir in der Lage sind, ihre Benutzer zu sehen. Also kann ich auch die Bestellungen sehen, weil ich hier ein Token habe und dann die Anfrage mit dem Token lade. Also, wie Sie hier sehen, wenn wir zu einer dieser Anfragen gehen, wissen Sie, dass wir hier im Netzwerk haben. Okay, ich habe das hier. Ich überprüfe die Kopfzeilen, die ich hier habe , und ich werde sehen, dass, okay, Autorisierungsträger mein Token ist, okay, vielleicht wird mir jemand sagen. Aha, okay, ich kann dann jedes Token generieren und dann kann ich es mit den Kopfzeilen meiner Anfragen und Sehnen über Postman senden es mit den Kopfzeilen meiner Anfragen und Sehnen über und dann kann ich ihre Website zerstören. Nein, das ist nicht möglich, denn wenn du dich daran erinnerst, im Backend, hatten wir ein Geheimnis. Wenn Sie sich erinnern, habe ich eine geheime Datei gemacht, die zum Beispiel geheim genannt wird. Sie fügen es dem Token hinzu, und dann haben Sie basierend darauf eine Signatur von JWT-Token, und dann wird es für Sie dieses Token basierend auf diesem Geheimnis generieren. Weise werden Sie sehen, dass Sie auch dieses Token senden und es wird basierend auf dieser geheimen Zeichenfolge analysiert, die Sie erstellt haben. Wenn Sie sich erinnern, Ich habe, Ich liebe meinen Hund, zum Beispiel, als ein Geheimnis im Back-End. Also jetzt, wenn dies von Birkbeck analysiert und von diesem geheimen Schlüssel akzeptiert wird, dann Diabetiker und Ihre Antwort mit mir mit einer Daten. Andernfalls, wenn ich ein Token sende, wird es nicht akzeptiert, da es nicht das gleiche Geheimnis hat, das ich erstellt habe, als ich dieses Token im Back-End signierte und es an das Front-End schicke. Seien Sie also vorsichtig, dass Sie dieses Geheimnis behalten müssen, wirklich geheim, so dass Sie es nirgendwo anders verwenden oder es jemandem geben können , weil es Ihre Anwendung vollständig sichert. Also, wenn Sie sich erinnern, wir waren mit dem Geheimnis, wenn Sie sich erinnern, und dieses Geheimnis ist in der Umgebung Datei und ich benutzte es, wie mein Hund ist nett oder ich liebe meinen Hund hängt ab. So können Sie hier jede Zeichenfolge setzen. Und basierend darauf, alle Ihre Anfragen im Back-End, werden wir dieses Geheimnis verwenden und dann analysieren. Jede Anfrage kommt mit diesem Geheimnis, dann über den Token, und dann wird es für Sie antworten, wenn es richtig ist oder nicht. Okay, jetzt haben wir, alles ist in Ordnung. Wir haben unser Token über die HTTP-Anfrage geladen. Wir empfangen und sichern unsere Admin-Anwendung völlig ohne Probleme. Also, jetzt habe ich die Zusammenfassung. Wenn Sie sich erinnern, haben wir eine Sicherheit gemacht und wir haben dieses Token in der Anwendung, im lokalen Speicher. Und wir verwenden dieses Token, um diese Anfrage zu senden und den Benutzer auch zur Anmeldeseite umzuleiten, wenn sie nicht gesperrt sind. In der nächsten Vorlesung werden wir die Abmeldung machen, die nur dieses JWT-Token entfernt. Und dann werden wir ausgeloggt. 132. Logout: Ok, großartig. Jetzt werden wir sehen, wie wir einen Benutzer abmelden können. Wenn ich also auf diese Schaltfläche klicke, werde ich den Benutzer abmelden. Wenn wir den Benutzer betrachten möchten, löschen wir einfach dieses Token aus dem lokalen Speicher und leiten den Benutzer dann auf die Anmeldeseite um. Also, wenn Sie auf diese Schaltfläche klicken, werden wir einen Dienst namens Lockout aufrufen. können wir also ganz einfach machen. Wir gehen einfach zur Benutzerbibliothek, wo wir unseren Service oder Authentifizierungsdienste erstellt haben. Wir haben hier Login. Wir werden auch die Abmeldung haben. Also werde ich hier gehen und sagen, geben Sie mir eine Logout-Funktion. Es wird keine Parameter haben. Wir werden nur den Benutzer aufpassen. Dafür werden wir auch den lokalen Speicherdienst verwenden. Also müssen wir auch hier den lokalen Speicherdienst anrufen. Also werde ich hier gehen und sagen „privat“. Wir können Token oder Token-Dienst sagen, und dann können wir lokalen Speicherdienst aufrufen. Und dieser lokale Speicherdienst, ich werde es hier verwenden. Und dann dieses Punkt-Token und dann Token entfernen. Das ist also alles. Und dann gehen wir in das Front-End , um den Benutzer zu sehen, oder Sie können ihn hier draußen sehen. In diesem Fall brauchen wir auch einen Router. Also würde ich hier privat und dann Router nennen. Und dann erinnere ich mich wieder an den Router. Und dann habe ich, nachdem ich das Token gelöscht habe, werde ich sagen, diese Punkte, Router, Punkt, navigieren. Und dann wähle ich die Login-Seite aus. Also werde ich hier sagen loggen und dann speichern wir. Und dann müssen wir den Dienst anrufen, wenn ich auf die Schaltfläche in der Seitenleiste klicke. Also, wenn Sie sich erinnern, wir haben, dass in ihrer gemeinsamen Admin-Anwendung. Ich habe in der Sidebar auch die Schaltfläche, die Lockout genannt wird. Und ich werde hier gehen und sagen klicken. Wie wenn ich auf diesen Button auf diesen Link klicke, werde ich den Benutzer aufpassen. Und was sagen wir hier? Achten Sie auf Benutzer. Und dann implementieren wir diese Methode. Also gehen wir in die Sidebar auch hier in der Komponente. Und dann muss ich den Authentifizierungsdienst aufrufen, da er in der verwendet wird, ODER er in der Bibliothek des Benutzers erstellt wird. Also werde ich hier sagen, privaten Auth Service und dann für mich außer Betrieb aus der Bibliothek des Benutzers. Und wir werden sehen, dass es hier automatisch importiert wird. Aber manchmal werden Sie im Irrtum mit dem Auto Import, dass Sie sehen, dass es den vollständigen Pfad zurückgibt. Es macht es nicht wie mit der Abkürzung, wie wir zuvor gesprochen haben. So sollte es manchmal so sein, wie diese Benutzer. Aber wie Sie hier sehen, haben wir ein Problem. Wir haben einen Fehler, weil ich denke, dass alle Service nicht exportiert wird. Um dies zu überprüfen, gehen wir erneut zu unserer Benutzerbibliothek und überprüfen ob wir den Authentifizierungsdienst exportiert haben. Wir werden sehen, dass es nicht exportiert wird. Also müssen wir auch hier tun, Export. Und dann von. Und dann wähle ich die Bibliothek und dann Dienste und dann unseren Service aus. Also hier werden wir in der Lage sein, das in unserer Sidebar-Komponente zu sehen. Also ist es besser, immer für Linting diesen Abkürzungspfad zu haben. Also haben wir jetzt den Authentifizierungsdienst. Ich werde eine andere Methode erstellen, die wir hier erstellt haben. Es heißt also Lockout-Benutzer. Und dieser Abmeldebenutzer wird sich im TS befinden. Gut. Ich werde diese Methode hier definieren und dann werde ich diesen Punkt AVS Service sagen. Dann schauen Sie auf. So einfach ist es. Und dann wird der Ausschau, wenn ich dorthin gehe, dieses Token für mich entfernen und dann würde es mich zur Anmeldeseite navigieren. Lass uns alles retten und dann werden wir das ausprobieren. So wie Sie hier sehen, ist mein Token abgelaufen. Deshalb habe ich dieses Video nach einem Tag aufgenommen. So wie Sie hier sehen, wenn es abgelaufen ist, habe ich das Token II wurde bereits auf die Anmeldeseite gerichtet gelesen. Also schauen wir uns noch mal an. Also werde ich hier gehen und meine E-Mail und mein Passwort eingeben. Jetzt werde ich mich einloggen. Okay, ich habe mich eingeloggt, ich bin hier, ich sehe alles. Ich sehe die Bestellungen Benutzer, dieses Token ist gültig. Jetzt werde ich auf die Abmeldung klicken. Wenn Sie also hier auf das Logo klicken, werden Sie zur Homepage oder zur Login-Seite weitergeleitet. Und Sie werden sehen, dass der lokale Speicher das Token nicht mehr hat. So loggen wir den Benutzer ab. Alles funktioniert gut. Sie können sich erneut anmelden und dann zu Ihrer Admin-Panel-Anwendung gehen. Auf diese Weise haben wir alles in Bezug auf die Authentifizierung abgeschlossen. Jetzt werden wir sehen, wie wir unseren Code mehr organisieren können. Wir werden einige Refactoring tun und das, was wir im nächsten Abschnitt sehen werden. 133. Dashboard: Okay, nachdem wir die Authentifizierung abgeschlossen haben, werden wir unser Dashboard dekorieren. Wenn Sie sich erinnern, haben wir die Dashboard-Seite hier. Wir werden so etwas tun. So werden wir sehen, dass die Gesamtbestellungen und wie viele Kunden wir haben, und wie viele Produkte und die Gesamtumsätze. Wenn Sie sich im Backend erinnern, haben wir alle diese APIs implementiert. So kann ich sie auch aus der Datenbank nehmen. Also lasst uns das machen. Zunächst einmal gehe ich zu meiner ursprünglichen Bewerbung, wo wir dort einen Fortschritt haben. Also werde ich mich einsperren. Dann würden wir zum Badewasser-Armaturenbrett gehen hat Armaturenbrett funktioniert. Wir haben dort noch nichts getan. Also gehen wir wieder zu unseren Seiten in unserer Admin-Anwendung, und dann gehen wir zum Dashboard. Das Dashboard, wenn Sie sich erinnern, wir haben eine Komponente wie diese erstellt, so müssen wir es umgestalten. Wir löschen zuerst das Styling. Wir brauchen das Styling nicht, weil wir die öffentlichen Stile verwenden werden, die Ordner unserer Stile hier sind. Also zuerst werden wir dieses Dashboard Vorlage. So wie jede Admin-Seite, werden wir das gleiche tun. Also zuerst werde ich ein div haben und es wird Admin-Seite haben. Und diese Admin-Seite Klasse ist bereits implementiert. So werden wir auch hier unsere Karte haben, wie wir es zuvor getan haben. So können wir hier ein Dashboard als Titel und einen Sub-Header haben. Wir können wie die neuesten Updates haben. Also lassen Sie uns so entfernen, wie es nicht als Eingabe machen. Wir können es nur schien String und reine Eingabe. Also haben wir hier das Armaturenbrett. Also werde ich zugestimmt haben, wenn Sie sich erinnern, dass wir hier vier Rechtecke haben. Wir brauchen also genau ein Gitter. Also gehen wir hin und machen es. Und wir sagen div dot py grid. Und drinnen werde ich den UV Dot Py Call und dann drei haben. Also brauchen wir vier davon. Und wieder, ich werde die Karte drinnen benutzen. So werden wir auch hier eine andere Karte haben. Und in diese Wache stecken wir unseren Artikel. Also das Element, das genau das gleiche haben wird, das Symbol haben wird, und einige Titel und eine Nummer. Also lasst uns das Gleiche machen. Also werde ich auch ein div definieren. Und dieses div wie ein Name, wir können es das Element nennen, wie Dashboard-Element. Und dann in diesem Artikel werde ich ein anderes div haben. Ich werde zuerst das Symbol setzen. So zum Beispiel, lassen Sie uns ein Symbol des Warenkorbs haben, wie vier Bestellungen. Und wieder, eine Spanne, wo wir den Namen setzen werden. Also haben wir hier die Spanne, die Befehle genannt wird. Und dann werden wir auch eine andere Spanne haben, die Zahl enthalten wird. So können wir wie Hardcode eine Zahl sagen, die zum Beispiel 25 ist. Mal sehen, ob es uns gut geht. Okay, wir haben jetzt diese Karte, wir haben das Symbol, wir haben den Text und die Nummer. Also lasst uns sie binden. Zuallererst werde ich einen Hintergrund haben, den ich eine Website benutze, wird ein Gradienten dot io genannt. Und es wird Ihnen viele sehr große Steigungen geben. Sie können sie verwenden und Sie können einfach das CSS des gewünschten Farbverlaufs kopieren, und dann können Sie es in Ihrer Anwendung verwenden. Also zuerst werde ich einen Gradienten machen, diesen hier. Also lassen Sie uns hier gehen und gehen, um unsere Anwendung zu stylen. Also zuerst müssen wir eine Style-Datei für das Dashboard haben. Also, wenn wir gehen, wenn Sie sich erinnern, haben wir alle, alle Stile hier. Also die Stile App, und dies ist Dashboard, das nur im Admin-Panel verwendet wird. So können wir es in die Admin-Anwendung einfügen. Also können wir hier nicht den Dashboard-Punkt SCSS sagen. Und dann müssen wir auch dieses Dashboard in den Admin importieren , weil wir diese Datei verwenden. Und diese Datei enthält alle Dateien, die wir hier verwendet werden, und wir verwenden sie in der Anwendung. Also, wenn Sie sich erinnern, wir haben hier auch Stile Ordner in der Anwendungsebene. Also werde ich gehen und die Admin-SCSS-Datei verwenden. Also müssen wir irgendwie auch die Dashboard-Datei importieren. Denken Sie daran, dass wir die Schale haben. Nun lassen Sie uns auch das Dashboard importieren. Also ersetzen wir dies einfach durch Dashboard. Okay, gehen wir jetzt zu unserem Armaturenbrett. Lasst uns Klausel andere machen. Also haben wir hier nichts. Wir können nur das CSS und die Dashboard-Datei haben, also brauchen wir nur diese beiden Dateien. Wir werden damit arbeiten. Also zuerst möchte ich das Dashboard-Element stylen. Also das Dashboard-Element, werden wir meiner Meinung nach wie ein Flex sein, so dass wir die Dinge in dieser Flexbox ausrichten können. Und auch, dass wir jeden Text zentriert ausrichten müssen. Es wird also der gesamte Text in diesem zentriert sein. Okay, geben wir allen sah einen Gradienten. So können wir zum Beispiel diesen Farbverlauf hier kopieren. Und ich gehe zu meinem CSS und ich füge einfach ein und ich würde genau den CSS-Stil bekommen, der hier zugewiesen ist. Also laden wir unsere Anwendung und wir sehen, dass es nur innerhalb des div Styling ist, aber ich will die ganze Karte. Wenn Sie sich erinnern, kommt der Wagen immer mit etwas namens Klassenstil oder Stilklasse. Also muss die Karte selbst etwas Stil haben. So können wir hören, haben Stil Klasse. Und diese Zeitklasse wird sich von Karte zu Karte unterscheiden, wie Sie hier sehen, weil wir sie anders haben. Also brauchen wir einen Farbverlauf für jede Karte. Damit wir es wie einen Namen geben können. Also können wir die Befehle sagen. Zum Beispiel werde ich eine spezielle Klasse dafür haben, die die Aufträge genannt wird. Also hier gehe ich zurück zum CSS und dann erstelle ich diese Klasse, und dann gebe ich ihr einen Namen, und dann verschiebe ich diese Zutaten hierher. Also werde ich es hier setzen und dann speichern. Und wir werden sehen, dass die ganze Karte gefärbt ist. Und das ist genau das, was wir wollen. Jetzt wollen wir, dass alles im Auto weiß ist. Also auf dem Artikel werde ich Farbe sagen. Und wenn Sie sich erinnern, haben wir Vars benutzt. Und wenn Sie sich daran erinnern, dass wir eine Variable haben, die Umfragen genannt wird, oder Sie können einfach die weiße Farbe verwenden. Also benutze ich die Vars, über die ich zuvor viele Male gesprochen habe. Also haben wir hier die Oberflächenfarbe wird weiß sein. Und auch müssen wir haben, dass rechtfertigen den Inhalt zwischen diesen Elementen innerhalb, dass das Element oder Dashboard-Element Platz zwischen ihnen zu haben. So wie Sie hier sehen, dass wir verschiedene Größen oder Schriftarten haben, oder wir haben diese große, zum Beispiel, diese Größe und diese Größe. Also lasst uns ihnen alle im Unterricht geben. Also ich, wir gaben, unser Auge wird eine Klasse von diesem verwenden und ich werde dafür wie zum Beispiel einen Namen geben. Und ich werde für diese Klasse geben wir können es in der allgemeinen Nummer nennen. Also hier werden wir diese stylen. Also zuerst möchte ich das Symbol in dem das Element formatieren, das ich dem PI geben werde und dann werde ich Schriftgröße sagen, weit vor EM. Und dann geben wir es wie ein Randboden, nur um den Inhalt unter acht zu schieben, wie 15 Pixel. Und auch, ich werde eine Größe für den Namen geben. So Schriftgröße ihres Namens wird zum Beispiel 1,4 AM sein. Und die Zahl wird ein bisschen groß sein. Also werde ich es wie zum Beispiel geben, Schriftgröße wird 3M sein. Zum Beispiel können wir ihm eine 3M geben. Und wir werden es auch schweben lassen, richtig? Also können wir den Text auf der rechten Seite setzen, aber okay, machen wir es jetzt nicht. Ich werde es dir später zeigen. Also retten wir das hier. Wir überprüfen, dass alles wie verändert ist, okay, aber wie wir hier sehen, dass wir nicht die Farbe haben, weiß ich nicht, warum wir Farbe, Anzug, Gesicht haben. Ich habe einen Liter vergessen. Also dann werden wir hoffentlich die weiße Farbe haben. Okay, wir haben jetzt die weiße Farbe. Aber wie Sie hier sehen, haben wir keine Wirkung bekommen. Also vielleicht kann ich diese beiden Elemente wie das Symbol und den Namen in einem div gruppieren. So wird das zum Beispiel in einem div sein, ich kann dieses entfernen und es setzen und diese Spanne allein machen. So werden wir sehen, dass der Fluss zwischen dieser Spanne und diesem div geteilt wird. So wird es zwischen ihnen aufgeteilt werden. So wie Sie hier sehen, dass der Flex mir die Möglichkeit gab, hier die Befehle und hier die Nummer zu haben. Um den Code-Modus zu vereinfachen, möchte ich dieses div und dieses div nicht haben und sie in ein div setzen, um in neuen Zeilen zu sein, können wir einfach ein einfaches HTML wie Wochenende verwenden, sagen wir hier eine BR. Als ob wir hier eine Bremsleitung setzen können. Also mache ich es einfach sehr einfach. Natürlich können Sie es auf eine Weise tun, die Sie wollen. Ich möchte Ihnen nur zeigen, wie wir schnell stylen können. Wir sehen auch, dann ist diese Zahl wie ein bisschen hoch. Wir können es wie ein bisschen hinlegen. So können wir Marge oben zu dieser Zahl geben. So können wir hier sagen, diese Zahl gibt ihm einen Rand oben über 50 Pixel. So werden wir jetzt sehen, dass wir unseren ersten Artikel haben. Also müssen wir nur diese Elemente duplizieren, um vier andere zu haben, wie die Benutzerprodukte und den Gesamtumsatz. Und dann geben wir ihnen verschiedene Steigungen. Also machen wir das schnell. Also zuerst werde ich diese Spalte duplizieren, weil wir hier Spalte drei haben und eine andere, eine und eine andere. Also müssen wir vier haben. Also zuerst, es werden Produkte sein, okay? Es hat eine Nummer. Und auch die Produkte werden zum Beispiel ein kurzer Fall sein. Und wenn Sie sich erinnern, wollen wir einen anderen Farbverlauf geben. Also müssen wir hier auch ein Produkt setzen. Die Karte hat also eine andere Klasse als die andere. So auch hier tun wir das gleiche für Benutzer und wir tun das auch. Wie wir geben das Symbol wird Benutzer sein. Und auch hier die Dashboard-Artikel Benutzer. Und auch, wir müssen hier einen Gesamtumsatz haben. Und wir können hier geben, wie wir sagen können, das Symbol ist Dollar. Ich bekomme die Icons von Prime NG, wie wir zuvor gesehen haben. Also setzen wir hier Gesamtumsatz. Und auch, wir brauchen hier eine Zahl, aber in Dollar, so können wir auch die Rohre verwenden, über die wir zuvor gesprochen haben. Also werde ich hier eine Zeichenfolge wie 120 haben, und dann werde ich die Currency Pipe verwenden. Also retten wir alles. Und wir gehen wieder zu unserer Anwendung. Wir werden sehen, dass wir die Karten haben, aber wir haben nicht genug oder den Farbverlauf. Also lassen Sie uns die gleichen Farbverläufe kopieren, die ich hier erstellt habe. Um das schnell zu tun, habe ich auch einige Gradienten ausgewählt, wie ich Ihnen bereits sagte, von der Website. So können wir das speichern und wieder zu unserer Anwendung gehen. Und wir werden sehen, dass wir hier die Farben haben, wie wir hier zugewiesen. Wie ich hier sehe, dass die Schrift ein bisschen groß ist, so dass wir sie kleiner machen können. Also für die Zahl, so können wir diese Zahl zu haben, zum Beispiel, 2.5. Es wäre besser, schätze ich. Okay, jetzt haben wir alles in Ordnung. Wir haben unsere erste Seite in unserem Dashboard dekoriert. Also müssen wir auch diese Zahlen durch die realen Daten ersetzen , die aus dem Back-End kommen. Und das, was wir in der nächsten Vorlesung sehen werden. 134. Dashboard: Okay, wie Sie hier sehen, habe ich alle Daten aus der Datenbank auf Basis unserer Dienste genommen. Also, wie ich das gemacht habe, aber die Lösung, ich habe es angehängt, den Code mit diesen Hausaufgaben und ich werde es schnell erklären. Also zuerst, wenn wir zur Dashboard-Komponente gehen, habe ich mehrere Dienste aufgerufen, einen für die Anzahl der Bestellungen, die Anzahl der Produkte und die Anzahl der Benutzer und den Gesamtumsatz. Und dann habe ich nicht wie getrennt gesagt, wie okay, dieser Punkt abonnieren und mir die Bestellzahl geben und dann Produkt dot abonnieren und mir die Produktanzahl geben, wie wir zuvor mit vielen Orten hier in der Foren oder mit der Kategorieliste, zum Beispiel, wie Sie hier sehen, dass ich diese Ausgabe dieses GetCategories abonniert habe. Und dann gebe ich zwei Kategorien zu, um sie in der Vorlage anzuzeigen. Wissen Sie hier, dass es ein bisschen anders ist. Ich habe eine Funktion in R x js verwendet, die kombiniert neueste genannt wird. Und diese kombiniert neuesten, Es ist so gute Möglichkeit, mehrere Observables zu kombinieren. Also, wenn sie alle bereit sind, so wie es ist, sind das Observables. Wenn sie fertig sind, dann abonniere ich sie und ich werde Array der Werte genau in der gleichen Reihenfolge dieses Arrays erhalten. Also hier werde ich auf das erste Mitglied dieses Wertes bekommen, ich bekomme die Bestellanzahl. Und in der zweiten Produktanzahl, Benutzeranzahl und Gesamtumsatz. Und wenn Sie das wechseln, wie zum Beispiel, wenn Sie dies nach oben bewegen, dann werden die Werte unterschiedlich sein. So, wie Sie hier sehen, die Werte, wird es ein Array sein. Wie wir hier sehen. Es werden die Anzahl der Bestellungen, die Anzahl Produkte, die Anzahl der Benutzer und der Gesamtumsatz sein. Ok? Und dann gebe ich diese Werte zu. Klassenmitglied, das Statistik genannt wird, das ein Array ist. Und dieses Array, ich habe es in der Vorlage verwendet. Ich ging hierher und sage: Okay, Statistik, gib mir die erste, denn wie du dich erinnerst, wir haben hier, die erste ist die Anzahl der Bestellungen. Also gib mir den ersten. Und dann Punkt-Reihenfolge zählen. Ich werde später über diese Punkt-Produkt kontertered User Count sprechen. So haben wir jetzt genau, wie wir die Werte aus dem Back-End bekommen. Statistiken werden also zuerst Produktanzahl sein, genau die gleiche Reihenfolge wie hier. Und auch für all die coolen Benutzer und auch den Gesamtumsatz. Nur eine Sache, wie denken Sie daran, hier zu haben, ng-wenn das, wenn statische Sticks voll ist oder ich meine, es hat Länge, dann zeigen Sie die Komponente selbst der gesamten Dashboard-Seite an, weil sonst Sie Fehler erhalten , wenn diese -Werte noch nicht bereit sind. Okay, gehen wir zu den Oberflächen. So ihre Dienste, wie Sie hier sehen, dass sie aus verschiedenen Bibliotheken aufgerufen werden. Also habe ich hier User Service, Produkt, Service, Bestellservice verwendet. Es hängt davon ab, wo jede Funktion zum Beispiel mit dem Bestellservice zusammenhängt . Ich ging zu den Bestelldiensten hier in der Auftragsbibliothek. Dann sagte ich: Gib mir die Zahl der Ordnung, und es wird für mich beobachtbar zurückkehren. Und die Art davon wird Bestellnummer sein. Warum habe ich das? Genau das, weil unsere API, wenn Sie sich erinnern, für mich ein Objekt zurückgeben wird, und es wird auf diese Weise sein, es wird nicht für mich die Nummer direkt zurückgeben. Es wird in einem Objekt zurückgegeben werden. Also muss ich genau das gleiche Einkommen entsprechen , das aus dem Backend kommt und ich habe es in das Front-End gesetzt. Also erwarte ich Order Count Feld mit einem Wert, der die Zahl sein wird. So wird die Rückkehr beobachtbar diese Form haben und auch, dass bekommen wird diese Form erwartet. Also das gleiche, was ich auch für alle anderen Dienste getan habe. Also haben wir hier Dashboard und wir haben auch die Produktanzahl. Die Produktanzahl, wie Sie sehen, wird es genauso gut kommen, weil ich vom Backend auf diese Weise komme. Sie können auch anpassen, dass ich Ihnen später und auch für die Benutzer und den Gesamtumsatz zeigen werde , ist der Gesamtumsatz in den Bestellungen. So haben wir es auch in der bestellten Bibliothek. So wie Sie hier sehen, erhalten wir auch den Gesamtumsatz als Zahl. Deshalb habe ich im Dashboard, in der Vorlage gesagt, Okay, gib mir Statistiken. Der erste Wert. Und dann wird der Wert Objekt sein, weil hier die Statistiken mehrere Werte haben, die von diesen Observables kommen. Und jedes Observable kehrt für mich Objekt zurück. Also möchte ich Wert oder Statistik Member des statischen Arrays verwenden. Und dann werde ich sagen, gib mir die Anzahl der Befehle. Wenn du so nicht willst. So wie wenn du es nur so machen willst. Ich erkläre das, nur um Ihnen zu zeigen, wie Sie alle diese Änderungen leicht in Ihrem Code vornehmen können. Sagen wir also, dass wir die Werte erwarten. Direkt, wie ich hier komme, nicht Objekte, sondern der Wert direkt. Also, wie können wir das tun? Zunächst einmal gehe ich auf die get Order Anzahl zum Beispiel, und ich würde erwarten, nicht bestellt zählen, aber ich würde nur Zahl erwarten. Und auch, ich würde erwarten, hier nur Zahl. Aber wie Sie wissen, wird die API für mich das Objekt, Objekt selbst zurückgeben. Das ist also falsch für mich. Also werde ich keine Nummer bekommen, ich werde Objekt bekommen. So kann ich ihre Rückkehr abbilden, die von der API kommt. Ich kann es ändern, um nur eine Zahl zu sein. Also kann ich das nur als Nummer machen. Also, wie kann ich das tun? Ich kann das kriegen und Pfeife setzen, alle diese bekommen. Und dann sage ich Karte. Und ich werde diese Karte von unseren x js-Operatoren importieren. Und das ist ein räumliches Mapping, nicht wie die Karte des Arrays. Es ist das Mapping unseres XJ AS-Operators, der aus unserer x js-Bibliothek kommt. Also wird es für mich dieses Mapping zurückgeben und ich kann den Wert abbilden, wie ich will. Also erwarte ich hier auf das Objekt, das so kommt. Also hier oder die Zählung wird als Objekt kommen. Und ich möchte es so abbilden, dass man nur eine Zahl sein kann. Also, wie ich das tun kann, werde ich sagen, dass ich hier Objektwert zum Beispiel habe. Und dann werde ich den Objektwert nicht zurückgeben. Ich werde den Objektwert Punkt zurückgeben. Und dann werde ich diesen wählen, die Anzahl der Bestellungen. Also sage ich, dass, dass dieser Objektwert Order Count sein wird. Auf diese Weise muss ich sagen, dass dieser Objektwert eine beliebige Reihenfolge sein kann. Sie können den Typ direkt angeben, wie wir ihn vorher spezifizieren. Als Zusammenfassung habe ich die Karte von unserem x j als Operatoren verwendet. Und dann habe ich ein Objekt erwartet, das von der API kommen wird. Und dann sagte ich, gib mir nicht das Objekt selbst, sondern gib mir Feld dieses Objekts, das geordnet wird zählen. Dasselbe werden wir auch für die anderen Teile tun. So zum Beispiel werden wir für die Benutzer machen, Lasst uns hier gehen. Und wir würden akzeptieren, erwarten, dass wir nicht Benutzeranzahl haben, aber wir werden Nummer haben. Und auch hier nicht Benutzerzählung, aber wir werden auch Nummer haben. Und dann werde ich Dot Pipe sagen. Und dann ist der Objektwert nicht das Objekt selbst, sondern das Benutzerkonto. Wie, weil, wie Sie sich erinnern, die API für mich die Benutzeranzahl im Objekt zurückgibt. Dies ist also das Mapping ihres Rückgabewerts, der aus dem beobachtbaren stammt. Auf diese Weise werde ich garantieren, dass ich die Nummer bekomme weil das Backend-Shape-Objekt so ist. Lassen Sie uns auch diese Karte hier aus unserem x j s importieren. So haben wir hier beobachtbar und ebenso die Karte von RX j als Operatoren. Denken Sie daran, diese Karte ist kein Mapping von Array, es ist Mapping von unserem x js. Also müssen Sie es in ein Rohr von beobachtbar setzen. Das Gleiche werden wir auch für den Gesamtumsatz tun. Wir erwarten also keine Gesamtumsätze wie diesen, aber wir können erwarten, dass die Karte und diese Karte für mich so zurückgegeben wurden, genau auf die gleiche Weise. Wir nehmen keine Änderungen vor, außer dieses Feld, wie es aus dem Backend kommt. Also werde ich hier sagen total. Also retten wir alles. Und dann versuchen wir auch, das für Produkte zu tun. Ich werde es schnell tun. So werden wir hier Nummer haben und auch hier werden wir eine Nummer haben. Und dann würde ich diese Karte von unserem x js verwenden und importieren. So können wir hier Karte haben und dann werde ich es hier importiert verwenden. Für jeden Service müssen wir also den gleichen Weg machen und hier den Rohr- und Objektwert platzieren. Und es wird nicht Ordnung zählen, aber es wäre Produkt Gott sein. Also speichern wir alles und wir überprüfen, dass alles gut funktioniert. All diese Schritte, die ich jetzt getan habe, ist nur, weil ich hier nicht wie Punkt sehen und dann die Anzahl und dann die Produktanzahl bestellen möchte . Jetzt können wir nur die Statistiken und Hochwasserwerte haben, die vom Backend kommen. So können wir hier versuchen, zum Browser zurückzukehren. Und wir werden überprüfen, ob wir die Werte in der richtigen Weise bekommen. Wie wir sehen, dass wir nicht den Gesamtumsatz bekommen. Lassen Sie uns die API überprüfen. Mal sehen, wie die Summe sagt eine Rückkehr. Also vielleicht haben wir ein paar Tippfehler, also können wir hier den Gesamtumsatz haben. Okay, lassen Sie uns unsere API überprüfen. Wir gehen wieder, um Service zu bestellen. Also, wo ist der Bestellservice? Es ist hier. Und dann werde ich sagen, bekommen Gesamtumsätze sind, es ist immer noch Order zählt. So können wir Gesamtumsätze setzen. Und dann haben wir auch die API. Alles funktioniert gut. Wir laden neu und gehen zum Browser und überprüfen, ob es wieder funktioniert. Schön, es funktioniert wieder. So wie Sie sehen, dass wir die Werte, die aus dem Backend kommen, auf einen einzelnen Wert nach dem Lesen dieses Objekts zugeordnet haben . So haben Sie die volle Kontrolle über das Front-End. Kombiniere dich einfach mit einem Back-End und alles wird gut für dich funktionieren. Der wichtigste Teil dieser Vorlesung, die, oder diese Lösung der Hausaufgaben ist die Verwendung dieser kombinierten neuesten. Sie müssen also nicht eins nach dem anderen abonnieren. Wir haben einen sehr kurzen Code. Wir abonnieren alles und wir setzen die Werte in Statistiken und wir verwenden sie im Frontend oder in der Vorlage. 135. Routen: Okay, in diesem Vortrag werden wir etwas Refactoring auf unseren Code machen. Also zuerst, lassen Sie uns einige Refactoring für die Route machen. So die Route, wie Sie sich erinnern, haben wir sie in der Anwendungsebene erstellt. So wie Sie hier sehen, dass wir in der App-Modul haben, haben wir alle unsere Routen befinden sich hier. Zunächst einmal, was wir tun werden, werden wir ein spezielles Modul für die Routen erstellen und dann das Dashboard funktioniert gut. Und auch die anderen Seiten. Denn zum Beispiel, wenn ich hier zur Route gehe und zur Homepage gehe, werde ich sehen, dass ich leere Seite bekomme. Also, was ich erwarte, dass ich das Dashboard direkt haben muss. Also möchte ich keine Route haben, die hier Dashboard genannt wird. zu tun ist sehr einfach. Wir müssen nur sagen, dass, okay, ich habe die Eltern unhöflich ist und ich habe die Shell, die den Inhalt und die Seitenleiste immer enthält. Und dann möchte ich das Dashboard nicht in separater URL haben, aber es wird genau das gleiche wie die scheinbare Route sein. So können wir einfach diesen Pfad von hier entfernen und dann sagen wir Speichern. Und dann werden wir sehen, dass unsere Anwendung direkt auf die Dashboard-Seite geladen wird. Also, wenn ich zum Dashboard gehe, werde ich sehen, dass das Dashboard auf der Homepage sein wird. So wie Sie sehen, dass wir zuvor auf der Seitenleiste konfiguriert haben , dass das Dashboard Schrägstrich Dashboard haben. Also müssen wir das auch entfernen. Also gehen wir hier zur gemeinsamen und dann zur Seitenleiste. Und in der Sidebar würde ich sagen, der Router-Link wird nur die Homepage sein. Daher müssen wir die Seite nicht auf diese Weise angeben. Also gehe ich hier zu Produkten, gehe zurück zum Dashboard, alles funktioniert gut. Okay, im zweiten Schritt werde ich das App-Modul umgestalten und die Routen in ein separates Routenmodul setzen. Denn wie wir hier sehen, haben wir sehr große Datei für App-Modul. So können wir normalerweise die Routen in einem separaten Modul setzen. Also lasst uns das machen. Wie Sie wissen, dass wir mehrere Module in Angular Anwendung haben können und diese Moleküle mehrere Komponenten selbst halten können. Das Modul muss nicht mehrere Komponenten enthalten. Es kann auch für den Import einiger Bibliotheken wie UX-Module verwendet werden. Es kann die Routen selbst halten. So können wir das mit einem X tun. Sie können ein Modul generieren oder Sie können einfach Winkel-Snippets verwenden. Ich möchte Ihnen nur zeigen, dass sie eine andere Möglichkeit sind Komponenten und Module in Angular zu generieren. Also zuerst können Sie Generate verwenden und dann können Sie Modul finden. Und Sie finden hier Schaltpläne, Winkelmodul. Und hier geben Sie die Eigenschaften Ihres Moduls an, wie wir zuvor gesehen haben. Aber es gibt einen anderen Weg, wie ich auch Erweiterung installieren kann, die Winkelschnipsel genannt wird. Und diese eckigen Snippets, es folgt immer der eckigen Version, also folgt es immer der aktuellen Version, in der Sie sich befinden. Also hier haben wir eckige Schnipsel. Sie können es installieren und es gibt Ihnen die Möglichkeit, Komponenten direkt live im Code zu generieren, wie Sie hier sehen. Zum Beispiel brauchen wir ein Modul. Nach der Installation dieser Erweiterung können wir sie verwenden. Also zuerst werde ich eine neue Datei in der App-Ebene erstellen, also in der Nähe des App-Moduls und es aufrufen Routing-Modul dot ts. Und innerhalb dieses App-Routing werde ich die Snippets verwenden. Also muss ich nur ein Minus setzen. Und dann wird es für mich einige Optionen aus den Snippets auflisten. Also werde ich hier Modul sagen, wie Sie hier sehen. Und dann sammle ich Enter oder drücke die Eingabetaste. Und wenn ich die Eingabetaste drücke, wird es für mich alle diese Elemente generieren. Und es wird für mich die Benennung generieren und angegeben, so dass ich einen Namen direkt geben kann. Also würde ich sagen, App-Routing-Modul. Und es ist standardmäßig das Importieren einer Komponente, die ich nicht brauche. So können wir diesen Komponenten-Import entfernen, das brauchen wir nicht mehr. Und wir haben jetzt das App-Routing-Modul. So können wir alle Routen hier kopieren, die wir haben. So können wir sie alle kopieren oder ausschneiden und sie dann in NG-Modul hinter UND Modul einfügen , weil es eine Konstante ist und ich es verwenden werde. Und auf die gleiche Weise müssen wir alle diese Komponenten importieren. Also, um sie schnell zu importieren, müssen Sie nur Steuerraum oder Steuerpunkt drücken und dann werden Sie alle von ihnen bekommen. Also werde ich das schnell machen. Wie wir sehen, dass wir automatisch alles importiert und wir brauchen auch die, unsere Mundschutz, die wir von Benutzern Bibliothek angegeben haben. Und auch müssen wir den Routen-Typ importieren, der von Angular kommt. So haben wir jetzt die Routen importiert. Ich werde genau das gleiche tun, wie wir es im Modul gemacht haben. Also müssen wir diese Zeile auch kopieren oder die Folie ausschneiden. Also gehen wir hierher und nehmen es. Und dann gehen wir zum App-Modul und wir gehen zum Import, weil es im Import ist, werde ich Router-Modul importieren. Und dann werden wir dieses Routing-Modul im Anwendungsmodul verwenden. Wir müssen auch unser Proteinmodul in unser Applikationsmodul importieren. In diesem Fall haben wir die Routen automatisch in unserer Anwendung. Auch hier steuern Sie den Speicherplatz automatisch importiert. Und dann werden wir alle diese Bibliotheken nicht mehr benötigt werden. Wenn Sie also sparen, werden wir sehen, dass wir ausgegraut sind. Das bedeutet also, dass sie nirgendwo verwendet werden. So können wir auch den ungenutzten Import entfernen. Wenn Sie einen solchen Fehler in der Konsole erhalten, dass in Ordnung, Router-Steckdose ist nicht definiert. Dies liegt daran, dass dieses App-Modul nicht mehr über das Router-Modul verfügt. Aus diesem Grund können Sie auch das Router-Modul im ARP-Routing-Modul exportieren . Sie müssen also nur das Routermodul in Exporten wieder haben. So wird es dann weiß, dass das Anwendungsmodul das Router-Modul verwendet, das in AP-Routing-Modul verwendet wird. Und wir können unsere Navigation nochmals überprüfen. Wir sehen, dass alles reibungslos funktioniert. Und auch müssen wir angeben, ob der Benutzer zum Beispiel auf eine undefinierte Seite ging, so etwas. Also, was wird passieren? Ich will nicht, dass er eine breite Debatte sieht. Ich wollte zum Beispiel auf die Homepage weitergeleitet werden. So, wie wir diese Umleitung auf die Homepage machen können, Es ist sehr einfach, wie Sie hier sehen , dass wir mehrere Partner und den Wurzelpfad haben, aber wir werden nicht diese Route Pfade verwenden. Wir werden einen weiteren Pass erstellen. Und es ist sehr wichtig, am Ende dieser Weg zu sein. Dieser Weg wird also wie zwei Sterne sein. Und dann können wir sagen, Umleitung auf die Seite, die Sie wollen. In unserem Fall möchten wir direkt zur Homepage sein. Und dann brauchst du, nachdem du alles wie Directory direkt zu hast, musst du Bad Match haben und dann voll wie ich genau diesen Pfad ausgleichen möchte. So können wir genau das hier raus haben. Also haben wir alles, alles, was hier nicht definiert ist, dann auf die Homepage umgeleitet. Sie müssen immer sicher sein, dass dies am Ende kommt. Andernfalls, wenn Sie es vorher setzen, wird alles auf die Homepage umgeleitet. Also versuchen wir es noch einmal und machen ein Problem hier. Und zum Beispiel werden wir sehen, dass wir drei auf die Homepage gerichtet haben. Auf diese Weise haben wir unser Routing-Modul neu faktoriert, um stabilere Anwendungsmodul und sauberer zu haben . Und auch werden wir weitere Refactorings durchführen, die mit der Leistung zusammenhängen, wie wir später sehen werden. 136. End für Performance: Eine der wichtigen Geschichten, die der Benutzer oder der Entwickler immer in diesem Speicherleck fallen. Das Speicherleck ist sehr Kopfschmerzen für die Anwendung, besonders in Angular. Sie müssen müssen und sicher sein, dass Sie keine Speicherlecks in Ihrer Anwendung haben. Was ist also die Bedeutung von Speicherleck? Ein Speicherleck ist wie etwas, das Sie erstellen, zum Beispiel ein Objekt. Und dieses Objekt wird immer wieder erstellt, jedes Mal, wenn Sie zum Beispiel eine bestimmte Seite besuchen . So zum Beispiel gehe ich hier zwei Kategorien. Ich öffne ein neues Objekt, und dieses Objekt bleibt in ihrem Gedächtnis. Ich gehe und wieder zurück, ich öffne ein neues Objekt, und das alte Objekt bleibt im Speicher. Das ist, ich spreche über Objekt. Aber in unserem Fall hier, das einzige Speicherleck, das wir haben, sind die Abonnements. Wenn Sie sich erinnern, haben wir Abonnements verwendet , um die Daten aus den Diensten, aus dem Backend zu erfassen. Und diese Dienste stellen immer Observables bereit. Und diese Observables, wir haben sie benutzt indem du sagst, dass wir etwas abonnieren wollen. Zum Beispiel habe ich Kategorienliste. Und wenn Sie in der Kategorien-Listenkomponente wollen, können Sie sehen, wie wir ein Abonnement öffnen. Und wenn Sie sich daran erinnern, dass das Abonnement bedeutet, dass ich die Werte nicht beobachte, wenn sie von dieser beobachtbaren, der GET-Methode , HTTP-Methode, bereit sind . Und dann abonniere ich es, um die Daten daraus zu bekommen. Jedes Mal, wenn ich diese Komponente besuche, eröffne ich ein neues Abonnement. Und diese Abonnements müssen geschlossen werden. Es gibt mehrere Möglichkeiten, wie ein Abonnement oder das Abonnement zu beenden. Einer von ihnen tut wie dot, abmelden, wie sofort, nachdem Sie es abonnieren. Also bekomme ich die Daten und dann habe ich mich davon abgemeldet. Andernfalls können Sie haben, ein anderer Weg würde KMS und effizienter von unserem XJ verwenden, wie wir tun, heißt nehmen bis. Und hier können Sie eine Bibel angeben. Und in dieser Pipe ist, als würden wir die Daten filtern , die von diesem beobachtbaren kommen. Ich sage, nehmen Sie bis und nehmen Sie bis immer von Operatoren von unseren x js. Wählen Sie, bis wartet auf etwas, das Thema genannt wird. Und dieses Thema, wenn Sie es verwenden oder abgeschlossen, dann wird das Abonnement beendet. Um mehr zu erklären, wie ich sage, Big Data, Big Data, bis etwas passiert. Also, was dieses etwas, etwas, das RX JS genannt wird, Subjekt genannt. So können Sie Objekte sehr einfach definieren und verwenden. Nehmen wir an, dass wir diesem Thema einen Namen geben können. So können wir sagen,, und subs N Abonnements. Und immer ein Abonnement geben sie wie Suffix mit einem Dollarzeichen. Und dieses Dollarzeichen auf diese Weise, es wird bedeuten, dass ich hier Thema oder beobachtbar. Und diese n subs wird eine Art von Thema haben. Und das Thema auch von unserem x js. Und immer, wenn Sie ein Thema erstellen, müssen Sie ein neues Thema sagen. Und ich werde immer, dieses Thema muss einen Typ angeben, wie Sie hier sehen, ein generischer Typ. Also müssen Sie etwas in diesem Typ erwarten. So können wir für jetzt jede sagen. Also in diesem Fall haben wir n subs. So werden n Subs mit der Ausführung beginnen, wenn ich diese Komponente besuche, die zum Beispiel Kategorieliste ist. Also öffne ich jetzt und ihr Subjekt-Pools, es nennt sich Ende. Also möchte ich dieses Abonnement von Daten nehmen, bis n subs fertig sind. Also, wenn landet gescannt Finish oder wie kann ich beenden endet ups und anschließende auf diese Weise beendet werden. Man kann also nicht sagen, dass das endet und dann kann man sagen, vollständig. Also in diesem Fall sage ich, dass endet fertig. Also nehmen Sie bis endet ups wie n Abonnement, was hier geschieht. Also, wenn wir sparen, versuchen wir es. Wir werden sehen, dass wir, okay, wir bekommen die Daten. Also, nachdem wir die Kategorien bekommen haben, haben wir die Enden beendet und wir bekommen hier die, zum Beispiel, die Daten. Aber wie Sie sehen, dass wir ihr Abonnement auf n abgeschlossen haben, auf n es, was nicht so sehr gute Praxis ist, weil auf NDI, auf Edit, wenn es eine Verzögerung vom Backend gibt, dann wird dies vorher ausgeführt. Und dann bekommen wir die Kategorien, und dann wird es Verzögerung geben und das Abonnement wird beendet, bevor es gestartet wird. Also für Sie, dafür, verwenden wir onDestroy. Also, wenn die Komponente zerstört wird, was ich meine, also wenn ich aus einer Komponente in Angular herauskam, zum Beispiel, wenn ich aus der Kategorieliste gehe und ich zu Produkten gehe, werde ich NG onDestroy der Kategoriekomponente erhalten, was bedeutet, dass ich die Komponente direkt zerstöre. Ich brauche es nicht mehr, nur wenn ich es wieder besuche. Also führe ich das NG darauf aus. Wieder. Dies ist der Lebenszyklus von Komponenten in Angular. Also möchte ich ein Abonnement hinzufügen, wenn die Komponente zerstört wurde. Also verstehst du mich? Ich denke. Also hier müssen wir auch auf zerstören verwenden. Diese Komponente wird also auf init und auf destroy implementieren. Dafür müssen wir eine Methode erstellen, die NG onDestroy genannt wird. Und diese Energie auf zerstören wird für mich die Arbeit tun, die ich will. Also sage ich hier, n subs abgeschlossen. Also, um sicher zu sein, können wir hier etwas einloggen, um zu sehen, wie es ausgeführt wird oder etwas drucken, das Kategorien zerstört. Also, wenn Sie wollen, können Sie das speichern. Und dann gehen wir zu Kategorien und navigieren aus ihm heraus. Also hier wird meine Anwendung wieder geladen. Ich gehe jetzt aus Kategorien. Ich werde sehen, dass Kategorien zerstört werden, also ist es aus dem Speicher entfernt. Wir haben da nichts. Also für das, wenn Energie und zerstört ist abgeschlossen ist und ich habe nicht nehmen, bis hier. Die Abonnements bleiben offen. Und jedes Mal, wenn ich die Kategorieseite besuche , werde ich Sie abonnieren, abonnieren, was für mich ein Speicherleck verursachen wird. Also ist es besser zu sagen, nehmen Sie bis und zerstören Sie dieses Abonnement, wenn n subs abgeschlossen ist, was tatsächlich passiert, wenn Nk der Konstante nicht zerstört wird. Wie Sie hier sehen, dass nach der Zerstörung dieser Komponente, wir beenden die Abonnements, um es effizienter zu haben. Manchmal Leute, die sie sagen, tun das auch, wie nehmen Sie den nächsten Wert, sicher sein, dass Sie als nächstes haben. Und dann tun, zum Beispiel, dass Ende des Abonnements oder vollständig ihres Abonnements. In diesem Fall müssen Sie dies für alle Abonnements tun, die Sie in Ihrer Anwendung öffnen, um alle Speicherlecks zu vermeiden, die Sie haben. Dafür müssen wir all das für unsere, unsere Komponenten tun, was wir getan haben. Und von nun an werden wir immer verwenden diese endet ups immer das Thema abzuschließen und die Abonnements zu beenden. In diesem Video werde ich dasselbe für alle Komponenten tun, die wir erstellt haben oder für alle Abonnements, die wir geöffnet haben, um es nicht langsames Video für Sie zu machen. Und am Ende sehen Sie den Abschnittscode, der bei allem mit NG OnDestroy und auch mit Abonnieren bis ist. 137. Architektur der Komponenten im Repository: Großartig. Jetzt fangen wir mit unserem ND-Shop an. Jetzt Shop, wo ihre Kunden eingeben und C-Produkte und bestellen einige Produkte. Wenn Sie sich erinnern, haben wir das Projekt-Repository so erstellt, dass wir einen Shop und zum Beispiel eine interne Blog-Anwendung und die Admin-Panel-Anwendung haben . Wir haben die Admin-Panel-Anwendung beendet und wir werden mit der E-Shop-Anwendung beginnen, aber ich werde dieses Konzept nicht verwenden, dass ich einen einzigen E-Shop habe, gehe davon aus, dass ich mehrere Kunden habe, wie ich entwickle Unternehmen, zum Beispiel, bin Software-Unternehmen. Und ich möchte meinen eSharp mehreren Kunden zur Verfügung stellen. Um diesen Code nicht immer wieder zu wiederholen, kann ich den Vorteil der Verwendung der Bibliotheken nutzen. So möchte ich zum Beispiel die Login-Komponente und die Registrierungskomponente wieder bei einem anderen Kunden oder in einem anderen Shop verwenden . Natürlich kann ich den Stil des Logins ändern und dann werde ich den gleichen Code nicht jedes Mal wiederholen, wenn ich einen neuen Kunden habe. Also werde ich diesen Ansatz verwenden. So wie Sie hier sehen, dass wir NGI Shop ein und Energieschock auch haben. Und ich habe alle Komponenten vom Ende G-Sharp verschoben, um von den Bibliotheken wie Produkte und Bestellungen zur Verfügung gestellt werden. Zum Beispiel haben wir die Kategorieliste, Banner und Produktdetailkomponente und Produktlistenkomponente, die alle in der Produktbibliothek sein werden. In diesem Fall, wenn ich erstelle und Sie einkaufe, kann ich die gleichen Komponenten verwenden, die sich in dieser Bibliothek befinden. Also möchte ich die Codierung nicht in jedem NG-Shop noch einmal wiederholen. Und das wird alles unter einem Repository sein, das Blue Bits Repository genannt wird. Und wir würden den Vorteil bekommen, den Code unter unserer Organisation zu teilen. Lassen Sie mich das noch mehr erklären. So hat Google zum Beispiel das gleiche Login für alle seine Dienste, wie Google Drive, Google AdSense, Google Analytics, Sie werden sehen, immer die gleiche Login-Komponente verwendet wird. Und das, was ich hier tun werde, werde ich die gleichen Komponenten oder die gleiche Bibliothek mit verschiedenen Diensten verwenden. Ich bereite das vor. Zurück zu unserem Design. Wir werden sehen, dass wir diese Kategorien verwenden, zum Beispiel, Leasing- und Featured Produktliste. Und diese werden sich genau in der Produktbibliothek befinden. Und auch, der Login wird der gleiche Login sein , den wir zuvor für das Admin-Panel verwendet haben. Auf diese Weise verwenden wir Komponenten wieder. Jeder E-Sharp, den wir kreieren. 138. Struktur und Stile vorbereiten: Okay, willkommen zurück. Wir werden jetzt die Anwendung ausführen, die wir für jeden Shop benötigen. Wenn Sie sich erinnern, haben wir zwei Anwendungen. Eine ist der Administrator, und die zweite ist zunächst, Sie haben zwei Möglichkeiten, jede Anwendung auszuführen. Sie können nur x serve eingeben, und dann können Sie den Namen der Anwendung eingeben. Zum Beispiel, Ich habe jeden Shop oder Sie können auch die NX-Konsole verwenden, wie wir zuvor, wie ein dienen. Und dann können Sie den Shop angeben, den Sie wollen. Also für mich werde ich eine Kommentarzeile verwenden und unsere Anwendung starten. Hier. Anstatt die Admin-Panel-Anwendung zu haben, werden wir das Front-End oder das Ende Sie Shop-Anwendung haben. Okay, ihre Anwendung läuft erfolgreich. Lassen Sie uns hier gehen und unsere Seite aktualisieren und wir werden sehen, dass wir haben was wir zuvor getan haben, als ich Ihnen über die Hauptenergie erklärte. Also zuerst müssen wir die Summen-Stylings konfigurieren. Wir müssen unser Frontend vorbereiten. Wenn wir also zum Design zurückkehren, wie Sie hier auf dem Foto sehen, werden Sie sehen, dass sich die Website selbst in einem Container befindet. So hat dieser Container eine bestimmte Breite. Und wir werden die gesamte Anwendung in diesen Container legen. Die Anwendung wird also keine Anwendung mit voller Breite sein. Also, um das zu tun, lassen Sie uns hier zu unserem Ende Sie Shop-Anwendung gehen. Und auch wir haben hier Anwendung. Und hier in der App-Komponente werden wir nicht direkt die Kopf- und Fußzeile haben, aber wir werden sie in einem Container enthalten. So können wir ein div erstellen, ihm eine Klasse geben, wir können es Container nennen. Und in diesem Container werden wir alle Komponenten setzen, die wir für unsere Anwendung fordern. Und dieser Container können wir es so konfigurieren, dass wir zu den Stilen unserer Anwendung gehen können. Wenn Sie sich erinnern, haben wir öffentliche Stile und wir haben hier und Sie Shop bei NDI Shop ist mit einigen anderen Stilen. So können wir zum Beispiel eine Klasse verwenden, die wir hier platzieren können. Hier müssen Sie also nicht nur importieren, sondern auch Klassen schreiben. So können Sie zum Beispiel sagen, dass Container Breiten haben. Beispiel: 1, 0, 0, 0, 0, 0 bis 100 Pixel. Und auch können wir ihm eine Polsterung geben, wie zum Beispiel 15 Pixel. Also von oben und unten. So wird es eine bestimmte Breite und etwas Polsterung haben. Also, wenn wir hier gehen, werden wir sehen, dass der Inhalt ein wenig bewegt wird basierend auf der Konfiguration, die wir gegeben. Wie Sie hier sehen, dass der div-Container diese Breite hat und auch, es hat etwas Polsterung. Lass es uns in die Mitte legen. So können wir sagen, dass dieser Container Marge 0 aus allen haben wird. Auf diese Weise können wir den Inhalt in die Mitte stellen, wie Sie hier sehen. Natürlich hängt es von der Breite ab, die Sie vom Designer erhalten haben. Sie können ihn fragen Audio kann die XD-Datei öffnen und überprüfen Sie die Breite, die dort zur Verfügung gestellt wird. Die XD-Datei für das Design ist dieser Vorlesung beigefügt, damit Sie sie auch verwenden können. Und wie Sie sich im Design erinnern, wie Sie hier sehen, dass wir einen grauen Hintergrund haben, dass grauen Hintergrund des Inhalts. Wir können den gleichen grauen Hintergrund wieder verwenden. So können wir eine dieser Farben verwenden, die von prime NG zur Verfügung gestellt werden, weil wir sie bereits importiert haben. Also können wir eins von diesen grauen haben, zum Beispiel, nehmen wir dieses Grau auf. Also werde ich sagen, gib mir auch hier. Eine Hintergrundfarbe wird wertvoll sein und diese Variable wird Oberfläche 100 sein. Also werde ich das setzen und ich würde diesen grauen Hintergrund bekommen. Aber wie Sie hier sehen, dass wir nicht die haben, zum Beispiel, die DV nicht genau auf der Seite Browser kleben, weil wir es nicht normalisieren. Wenn Sie sich erinnern, haben wir in der Admin-Anwendung eine Bibliothek verwendet, die als normalisieren bezeichnet wird. Also lasst es uns auch hier benutzen. So können wir es auf die Spitze unserer Anwendung setzen. Und dann können wir eine große Dimensionierung des Containers und initialisierte Paddings für die Konfiguration der Anwendung haben. Wenn Sie sich erinnern, haben wir Konfigurationsdatei. Wir haben die Schriftart und die Schriftgröße und auch einige Initialisierung auf diese Links angegeben. Ich ziehe es vor, dies auch unter den Import der Bibliotheken zu setzen , weil prime N G einige Mitarbeiter überschreibt, es überschreibt die Schriftart. Es überschreibt einige Konfigurationen, die wir gemacht haben. Damit wir hier klar anfangen können. Nachdem wir alles importiert haben, können wir unsere Anwendung mit einer bestimmten Schriftart initialisieren, und dann können wir das Styling basierend auf dieser Konfiguration hier initialisieren oder starten. Also retten wir das. Und wir werden sehen, dass wir jetzt bessere Schriftarten haben. Wir haben die Standardschriftgröße wird 14. Und darauf basiert, werden wir unsere Anwendung erstellen. Also lasst uns ein bisschen aufräumen. Also haben wir hier Header und wir haben hier den Inhalt. So können wir es auch hier. Und wir haben den Router auf den Seiten, wir haben die Homepage-Komponente. In der Homepage-Komponente brauchen wir das nicht mehr, also können wir es einfach entfernen und speichern. In der nächsten Vorlesung werden wir anfangen, den Header zu stylen. Wie Sie hier sehen, haben wir die Kopfzeile und wir werden es genau so gestalten, wie wir es in ihrem Design haben. 139. So gestaltest du die Kopfzeile: Okay, in dieser Vorlesung werden wir die Kopfzeile stylen, die Kopfzeile, die Logo, Zertifikat und einige Links enthalten wird . Also zuerst, lassen Sie uns etwas aufräumen. Wir verwenden nicht die Komponenten Diät, weil wir die Datei, die wir in den öffentlichen Stilen finden. Also haben wir hier im Shop etwas namens Header. Also werden wir das so weit verwenden, dass wir das löschen müssen, das wir zuvor erstellt haben. So können wir jetzt mit dem Header beginnen. Also, wenn wir zurück zum Design gehen, wie Sie hier sehen, dass wir das Logo hier und die Suche hier haben können, und auch die Navigation und einige Symbole für Autos und das Benutzerkonto. Aber wie das lokalisiert ist, wie wir diese Dinge lokalisieren können. Wenn Sie sich erinnern, dass wir ein Gitter in Prime End verwendet. Und Sie können mit einem Designer zustimmen, um Ihnen ein Gittergeführtes Design zur Verfügung zu stellen. Also, wie können wir das tun? Wenn Sie möchten, können Sie einfach zu View gehen und dann können Sie sicher Raster in XD oder Adobe XD aussagen. Und dann werden Sie diese Gitter sehen. Wir werden eine 12 Spalten haben und alle diese Spalten werden genau verwendet, wie wir sie in Prime Ende haben. Wenn Sie also mehr Augen behalten, können Sie sehen, dass die Suche vier Spalten verwendet. Und auch gibt es hier Raum eine Spalte, und dann hat die Navigation drei Spalten, und diese hat nur eine Spalte. Das Banner nutzt den gesamten Raum. Zum Beispiel Kategorien. Jedes Element verwendet zwei Spalten. Und auch hier, das Gleiche für ihren Produkt-Artikel. Wir werden sehen, dass wir drei Spalten für jedes Element haben. Auf diese Weise können Sie einen guten Designer haben und der Designer wird Ihnen das Gittersystemdesign geben, das für Sie die Dimensionierung einfach macht. Also denke ich, wir brauchen eine Rasterlinie, die drei Spalten und vier Spalten haben wird, und eine Leerraumspalte, die Offset von dieser haben wird. So werden wir drei Spalte mit Offset 11 Spalte am Ende für diese Symbole haben. Also lasst uns genau das Gleiche machen. Ich werde zuerst hierher gehen und ich werde ein Tag öffnen. Normalerweise kommt der Header mit einem Tag namens header, das HTML-Tag ist. Und dann werde ich ein div haben und ich werde ihm ein Klasse-P-Gitter geben. Und diese B-Klasse wird mehrere Spalten haben, wie wir zuvor gesprochen haben. Also zuerst werden wir ein div mit drei Spalten haben, also p genannt drei. Und wir werden sehen, wie wir am Ende dieses Kurses über Reaktionsfähigkeit sprechen werden. So wird dieser, zum Beispiel, col md wie mittlere Größen für drei haben , aber wir werden jetzt die allgemeine verwenden, die nur drei Spalten sein wird. Und auch brauchen wir ein anderes div, das für die Suchleiste haben wird, die P-Aufruf haben wird, und vier Spalten und weitere drei Spalten mit Offset eins, um es zu schieben. Also für das Menü, werden wir div P Anruf drei haben. Und dann werden wir auch eine Klasse haben, die versetzt ist eins. Also werden wir p Offset sagen und wir geben an, wie viel. So können wir nur einen ausgleichen. So können wir Offset haben und dann eins. Also in diesem Fall werden wir eine gedrückte Linie haben. Also lassen Sie uns hier wie ein paar Worte setzen. Zum Beispiel, hier setze ich Logo, und hier werde ich zum Beispiel suchen. Und hier werde ich zum Beispiel das Menü setzen . Und am Ende haben wir eine Spalte für die Symbole, die P-Aufruf und eine haben. Und hier werden wir Symbole setzen. Speichern wir das und überprüfen Sie unsere Anwendung. Auch hier werden wir sehen, dass wir Header-Komponente SCSS nicht auflösen können, ja, weil wir es gelöscht haben. Wir gehen zur ts Datei der Komponente und löschen diese Zeile, weil wir sie nicht mehr verwenden. Also gehen wir wieder zu unserer Bewerbung zurück. Wir werden sehen, dass wir Logo, Suche, Menü und Symbole haben. Also genau, wie wir diese Leerzeichen angeben. Jetzt füllen wir diese Leerzeichen. Zuallererst werde ich das Logo füllen. Also das Logo, ich habe es bereits in der Admin-Anwendung verwendet. Also, wenn Sie sich daran erinnern, dass jede Anwendung ihre eigenen Vermögenswerte hat. Also müssen wir auch das Logo verwenden, das sich im Assets-Ordner befindet und es in der Anwendung von Andy Shop. Also werde ich hier gehen, kopieren Sie die Datei oder den Ordner alle und sagen ND-Shop. Und dann gehe ich zum Ordner Assets und füge dann die Bilder hier ein. Also habe ich ein Logo und das Login-Foto, das wir auch für die Login-Seite benötigen. Also hier haben wir das Logo und ich werde es in der Kopfzeile verwenden. Also das Logo einfach können wir es hineinlegen, zum Beispiel ein div. Wir können ihm eine Klasse geben, wir können es Logo nennen. Und innerhalb des Logos werde ich das Bild platzieren. Also werde ich hier Bild haben und dann wird es wie eine Quelle haben, die der Ordner Assets sein wird. Und dann Bilder, und dann Logo. Und ich habe den Namen vergessen. Es wird Logo-Punkt sein. Png. So werden wir hier Logo Punkt PNG und der Wechsel wird lokal sein. Und dann können wir das retten. Und wir werden sehen, dass wir das Logo hier haben, aber wir müssen einige spezifische Größen haben. Um das zu stylen, können wir zu unserer Anwendung Styling gehen. Zum Beispiel kann es diese leuchten und wir brauchen die Komponente nicht. Wir können hier gehen und angeben, dass wir den Header haben. Und die Kopfzeile wird welches Logo enthalten. So können wir hier Logo setzen und innerhalb des Logos werden wir Bild haben. Und dieses Bild wird eine bestimmte Größe haben. Basierend auf dem Design können wir eine Breite geben, zum Beispiel 160 Pixel für das Logo. Also können wir hierher gehen und es überprüfen. Wir werden sehen, dass wir die Größe des Logos so haben. Auf diese Weise haben wir unser Logo vorbereitet und dann werden wir diese Suchleiste machen. Die Suchleiste befindet sich innerhalb dieses Elements oder dieser Spalte. Also werden wir hier einen Eingang haben. Und dafür können Sie auch eine separate IT-Komponente erstellen. Sie können es beispielsweise als Produktsuche nennen. Aber ich werde es vorerst so behalten, weil wir es durch eine Komponente ersetzen werden, wie wir später sehen werden. Also können wir es jetzt so behalten. Also lasst uns gehen und das Menü machen. Wir können auch das Menü, nicht alle Menüpunkte hier zu finden, um keine große Kopfzeile zu haben. Aber wir können auch eine Komponente erstellen. Wir können es EV nennen. Der Name kann N, G scharf, NADPH sein. Und dieses NG Shop nav wird eine Komponente sein, wo es meine Navigationselemente halten. Also lassen Sie uns diese Komponente erstellen. Für die Erstellung der Komponente können wir auch die NX-Konsole verwenden. Also werde ich hier gehen, um eine neue Komponente zu generieren, und ich werde nach Komponente suchen. Und diese Komponente wird einen Namen nav haben. Und die Projekte werden Ende Sie Shop sein. Und der Stil. Okay, ich ignoriere den Stil und auch, wir brauchen einen Lebensstil. Und auch, der Selektor wird N G scharf nav sein. Und wir müssen Tests überspringen. Und wo es sich befinden würde. Es wird sich nicht im Stammverzeichnis der Anwendung befinden, aber es wird sein, es wird in einem freigegebenen und dann nav in der Nähe der Kopfzeile und der Fußzeile befinden. So können wir das speichern und unsere Anwendung überprüfen. Wir werden sehen, dass wir die nav-Komponente hier erstellt haben, und es wird automatisch in das App-Modul importiert. So können wir jetzt diese Komponente verwenden. Also lassen Sie uns speichern und überprüfen, ob die Komponente wirklich in Ordnung ist, okay, es hat Navisworks, so dass wir die Navigation jetzt erstellen oder Vorlage erstellen können, was normalerweise ihre Navigation in unsortierter Liste ist. Und diese unsortierte Liste, können wir ihm eine Klasse geben, die nav genannt wird. Und dann können wir LI haben und wir werden drei Listenelemente brauchen. Und innerhalb des Listenelements werden wir einen Link haben. Wenn Sie also auf Tab klicken, werden Sie es so haben. Also zuerst werden wir H ref haben. Wir brauchen sie nicht, weil wir sie durch den Router-Link ersetzen werden, wie wir in der Admin-Anwendung gesehen haben. Und hier können wir zum Beispiel nach Hause haben und wir werden hier Produkte haben, und wir werden Kontakt haben. So werden wir auch ein Styling erstellen. Sie können die Kopfzeile auch hier verwenden, oder Sie können eine separate Datei für das Styling erstellen. Auf diese Weise werde ich eine andere Datei erstellen, die nav ul dot SCSS genannt wird. Und dieses nav CSS wird in meiner Anwendung importiert. Also werde ich hier zum MD Shop gehen. Und dann nach der Kopfzeile und der Fußzeile werde ich die NAV-Datei aufrufen. Also danach sparen wir und wir gehen zu dem genug Kampf, um unsere Navigation zu stylen. Also werde ich hier nav haben. Und wie Sie sich erinnern, werden wir in der Liebe LI haben. Der List-Stil dieses LI wird keine sein, die diesen Punkt nicht in der Nähe jedes Listenelements hat , und die Anzeige wird inline-Block sein, so dass sie sich nahe beieinander befinden können, nicht untereinander wie eine Liste. Und dann werde ich Marge schreiben etwa 15 Pixel geben, um die Elemente voneinander wegzuschieben. Also lassen Sie uns unsere Anwendung speichern und überprüfen. Wir werden sehen, dass wir alle diese Navigationselemente haben werden. So können wir jetzt die Links so gestalten, dass ein Link Farbe hat und die Farbe wie ein dunkelgrau sein wird. Also werde ich eine Variable verwenden, die Oberfläche genannt wird. 500. Und dann auf wen auch immer, ich werde andere Farbe verwenden. Wenn ich also die Maus auf den Link lege, werde ich eine andere Farbe verwenden. So können wir zum Beispiel hier über auf dem a haben, und die a wird eine Farbe haben, die die Primärfarbe sein wird. Wenn Sie sich erinnern, haben wir eine Primärfarbe in der Konfiguration definiert und diese Farbe können wir es hier verwenden. Also die primäre Farbe werden wir es immer in unserer Anwendung verwenden, wenn Sie das Thema oder die Färbung oder die Grundfarbe der Anwendung ändern möchten. So befindet sich die Farbe hier. Wenn ich also spare, gehen wir hierher, werden wir sehen, dass wir die Navigation so haben. Wir haben immer noch ein Problem, das wir brauchen. Wie irgendwie, wenn wir die Maus setzen, sieht es nicht so aus, als hätte es einen Text. Was wir wollen, um es als Link zu haben. So können Sie hier das Mausverhalten ändern. Sie können sagen, gröber wird ein Zeiger sein, also können Sie es so machen. Und dann wäre die Maus wie ein Zeiger. Und für die Router-Links müssen wir sie hinzufügen, damit wir wieder zur Navigation hier gehen können. Und dann können wir darauf sagen, wir gehen zum Router-Link, der Homepage sein wird. Also wird es nichts sein. Und für Produkte verwenden wir den Router-Link, der Produkte genannt wird. Und für den Kontakt werden wir den Router-Link verwenden , der Kontakt genannt wird. Das retten wir. Und dann können wir nicht überprüfen, ob wir die Produktliste und die Homepage haben. Schließlich, wie wir im Design gesehen haben, haben wir hier jedoch zwei Symbole. Lassen Sie uns sie durch die Symbole aus der Navigation ersetzen. Also hier können wir den Header haben und im Inneren haben wir die Symbole. Ich werde eine Prime NGO-Symbole verwenden. Ich habe zwei Symbole. Einer ist Benutzer, einer ist ein Warenkorb. Aber auch diese Komponenten oder diese Symbole werden durch die Komponenten ersetzt. Zum Beispiel der Warenkorb. Ich möchte zeigen, wie viele Artikel im Warenkorb sind. Also müssen wir es irgendwie durch ihre Komponente ersetzen, wie wir später sehen werden, wenn wir mit ihrem Warenkorb arbeiten. Aber jetzt lassen Sie es uns so stylen. Also auch, wir müssen die Stylings haben oder alle von ihnen sollten irgendwie wie eine Linie sein, weil Sie hier sehen, dass sie nicht miteinander ausgerichtet sind. So können wir für jeden Artikel eine Klasse geben. So zum Beispiel haben wir hier unser Logo, und hier können wir ein Glas namens Überspannung geben. Und hier können wir eine Klasse wie zum Beispiel Navigation geben. Und hier können wir ein Glas geben, wir können es Werkzeuge oder Aktionen nennen. So können wir es wie Werkzeuge geben. Und dann können wir wie ein Rand oben, einige Rand Polsterungen setzen. Also, um sie alle zusammen auszurichten, für mich ist die Navigation in Ordnung, wenn ich es überprüfe. Also okay, so ist es gut für mich. So können wir diese Werkzeuge einfach verschieben, wie sie mit etwas Polsterung oben bearbeitet haben, so dass wir es mit dem Element ausgerichtet haben können. So können wir sagen, dass dieses div padding haben wird, padding top, wir können sagen, wäre 15 Pixel oder mehr, bis sie zusammen ausgerichtet sind. So können wir dies als 22 Pixel haben. Also würden wir zum Header-Stil gehen. Also gehen wir zu unserem Header SCSS, und dann können wir hier gehen und ein neues Tag öffnen. Wir können es Werkzeuge nennen. Und diese Werkzeuge haben, wird das Banding oben 22 Pixel sein. Und wie Sie hier sehen, ist es ausgerichtet. Lassen Sie uns etwas Platz von diesen Symbolen ablegen. So wie Sie hier sehen, dass wir die Symbole nebeneinander erstellt haben. So kann ich von den Werkzeugen auf diese Klasse zugreifen. Also alles, was BI Insight Tools ihm Spielraum geben, richtig? Wie zum Beispiel fünf Pixel oder 10 Pixel. Also können wir hier sagen Punkt Py und dann Marge, richtig? Zum Beispiel 10 Pixel. Also können wir es so machen. Und wir werden sehen, dass sie jetzt weit voneinander entfernt sind. Das ist sehr großartig. Also jetzt ist der Header für uns bereit, außer der Suche. Wir werden eine Komponente erstellen, vor allem für den Anstieg, und wir werden es verwenden und in die Produktbibliothek einfügen. Aus der Produktbibliothek werden wir die Setkomponente verwenden, um in ihren Produkten zu suchen. 140. Produktsuche: Okay, wir gehen in dieser Vorlesung, um die Sucheingabe zu machen. Also die Person, die nach einem Produkt suchen kann, wenn er etwas Text in diese Eingabe. Aber eine andere Sache hier, dass wir es in den Header setzen werden, aber wir werden diese Komponente in ihrer Produktbibliothek zur Verfügung stellen. Natürlich können Sie es auch in der Header-Komponente behalten und Sie können es normal verwenden. Aber ich werde es hier als eine getrennte Komponente tun , die irgendwo anders lokalisiert und wiederverwendbar sein kann. Also zuerst gehen wir zu unserem Code. Zuerst werden wir dies durch etwas wie eine Komponente ersetzen , die sich in ihrer Produktbibliothek befinden wird. Etwas wie wir haben eine scharfe, aber jedes Geschäft nav befindet sich in der Anwendung selbst, in der Nähe der Kopfzeile und der Fußzeile. Diese Komponente wird sich jedoch in der Produktbibliothek befinden. Also, wie können wir das tun? Lassen Sie uns zunächst die Komponente erstellen. Also zuerst gehe ich zum NX-Generieren, und dann werde ich diesen Generator verwenden, nach Komponente suchen. Und dann werde ich im Komponentenordner und eine Komponente erstellen , die als Produktsuche bezeichnet wird. Und dieses Projekt wird Produkte sein. Und dann werden wir das Styling überspringen und Tests überspringen. Alles wie sind wir, wie wir machen immer mit jeder Komponente und wir können ihren Selektor als Produkte geben. Suchen. Das ist auch eine Option, die Export genannt wird. Ich werde es jetzt nicht sagen, aber ich werde Ihnen den Unterschied minimal zeigen. Also lassen Sie uns diese Komponente erstellen und dann diese Anwendung oder diese gemeinsame Zeile ausführen. Und dieser Befehl wird in ihrer Produktbibliothek ausgeführt werden. Wie Sie hier sehen, dass wir Komponenten Ordner erstellt haben. Und in diesem Komponentenordner gibt es eine Komponente namens Suche oder Produktsuche. Einfach, ich werde zu meiner Anwendung sagen, die diese Komponente irgendwie verwenden. Und ich werde hier zum Header gehen, und dann werde ich dies durch die Komponente ersetzen, die ich erstellt habe. Also rufen wir die Komponente auf diese Weise auf. Aber wie Sie hier sehen, dass es immer noch undefiniert ist, weil es sagt, dass Produktzertifikat kein bekanntes Element ist. Okay? Dafür werden wir das Produktmodul oder die Produktbibliothek verwenden. Hier hat die Produktbibliothek ein Modul und es enthält Komponenten. Damit der Header oder die Anwendung diese Komponenten sehen kann, müssen wir das Produktmodul importieren. Okay, Wir gehen hier und dann zu unserer Anwendung, wie Sie hier sehen, haben wir auf Modul in der Anwendungsebene und wir haben hier die Module importieren. Aber das Problem hier, dass wir das Produktmodul haben, wird importiert und sogar, dass wir nicht in der Lage sind, die Produktsuche Komponente zu sehen. Dies liegt daran, dass wir das etwas, das Export genannt wird, nicht überprüft haben. Sie müssen also die Komponente im NGO-Modul exportieren. Also, wie machen wir das? Wir gehen wieder zu unserem Produktmodul. Also werde ich nach Produkten Modul suchen, das sich in der Produktbibliothek befindet. Und dann, wie Sie hier sehen, haben wir eine Erklärung. Und innerhalb der Deklaration platzieren wir die Komponente. Aber auch, wir müssen sagen, dass diese Komponente exportierbar ist, so dass sie in anderen Komponenten außerhalb dieses Moduls verwendet werden kann. Wenn wir also alles speichern und wir zurück zu unserem Header gehen, werden wir sehen, dass, großartig, die Produktsuche definiert ist. Also, wenn wir zum Browser gehen und wir überprüfen, ob wir Produktsuche funktionieren. Denken Sie daran, immer wenn Sie eine Pistolenkomponente außerhalb der Anwendung erstellen, wie zum Beispiel in der Produktbibliothek, müssen Sie diese Komponente exportieren, nicht nur deklarieren. Und um das zu machen, wenn Sie eine Komponente erstellen, überprüfen Sie diese einfach in der NX-Konsole. Sie würden also nur sagen, auch in das Modul, diese Komponente, zu exportieren. Okay, also lasst uns diese Komponente stylen. Ich werde zu ihrer Komponente gehen und hier platzieren. Anstatt die Produktsuche funktionieren zu lassen, werden wir ein div erstellen. Und dieses div wird eine Klasse Produktsuche haben. Und dann als Design haben wir Symbol und in der Nähe eine Textbox. Also zuerst müssen wir das Symbol und das Symbol definiert haben, wie wir zuvor gesehen haben, es wird wie PI definiert werden. Und dann gebe ich das Icon PI an, das durchsucht wird. Okay, wir haben das Symbol und jetzt müssen wir Eingaben haben. Und Eingabe wird eine Art von Text haben, und dann mit dem Namen kann Suche werden. Und die ID wird auch suchen. Wir werden sehen, wie wir diese Suche später verwenden. Ein Platzhalter für die wir finden Produkte verwenden können. Und wir können ihm eine Klasse geben, die zum Beispiel Produktsuche sein kann , wie das gleiche Patent. Und dann können wir Input sagen. Auf diese Weise können wir auf diese Eingabe leicht in unseren Stilen zugreifen. Dafür werden wir diese Komponente stylen. Nennen wir alles andere. Als ob wir sie nicht alle brauchen. Wir brauchen nur diese Komponente und wir gehen wieder zu öffentlichen Stilen. Aber wir sind nicht im Laden, sondern in ihren Lippen, weil wir die Komponente in der Bibliothek erstellt haben. Also in der Regel für mich selbst, werde ich die Produktsuche Komponenten Dialing wird in der Produktbibliothek zu erstellen . Ich werde eine neue Datei erstellen und ich werde sagen, Produktsuche Punkt SCSS. Und dann werde ich das Glas hier platzieren und sparen. Also gehen wir zu unserer Anwendung, um zu sehen, ob alles gut funktioniert. Großartig. Wir haben hier das Symbol und die Texteingabe. Also zuerst müssen wir die Grenze setzen, wie wir zuvor im Design gesehen haben, dass wir hier haben, wie ein grauer Bereich und darin befindet sich Symbol und dann die Texteingabe. Der Benutzer wird also denken, dass all dies eine Texteingabe ist. zu tun ist also sehr einfach. Es ist nur ein Spiel mit dem SESS. Also zuerst, ich mag immer den Flex zu verwenden. So zeigen Sie Flex an. Wir lassen die Elemente wie das Symbol und die Eingabe nahe beieinander liegen. Und ich werde ihm eine Hintergrundfarbe geben, die von den Wertsachen von Prime NG stammt. Und es wird bald Phase sein. Und zum Beispiel 200 dunkler als der Hintergrund des Containers. Und es hat einen Grenzradius wie etwa 10 Pixel. Und wir können ihm eine Breite geben, wie anfangs können wir 275 Pixel als Design sagen und wir können ihm eine Höhe geben, zum Beispiel, 35 Pixel. Du kannst es mehr geben. Wir sparen, wir überprüfen wieder alles. Wir sehen, dass wir die Veränderungen nicht sehen. Warum? Weil wir diese Styling-Datei nicht verwendet haben. Also zuerst müssen wir die Stildatei importieren. Also muss ich sagen Import, und dann werde ich die Produktsuche sagen. Also in diesem Fall Produkte in Anti-Shop importiert, wie Sie hier sehen. Und dann werde ich in der Lage sein, diese Diät zu sehen, wie Sie hier sehen, wir haben die graue Box. Jetzt müssen wir ein orangefarbenes Symbol haben. Also gehe ich hier wieder zu meiner Produktsuche. Wir greifen auf das Symbol zu, wie immer tun wir mit PI, weil es eine Klasse namens PI hat. Und ich werde ihm eine Breite geben, die 25 Pixel sein wird. Und zum Beispiel können wir, Schriftgröße kann ein größeres, ein bisschen größeres Symbol sein. So können wir es 1,3 Uhr geben. Und dann können wir ihm eine Farbe geben, die unsere Primärfarbe sein wird. Also speichern wir, wir überprüfen, dass , okay, wir haben das Symbol farbig, aber wir müssen ihm etwas Marge geben und Padding gerne mehr im Raum sein. So können wir für untersuchten Rand, Top 10 Pixel und Rand rechts oder links, dann Pixel geben . Und wir sparen. Wir haben es nochmal versucht. Okay, es befindet sich an diesem Ort. Natürlich können Sie immer die Dev-Tools verwenden, um zu verwalten oder zu messen, wie viel Sie hier haben. Räume wie zum Beispiel, können Sie mit okay verwenden, was Sie mögen. Sie können es in Ihrem Stil platzieren. Okay, jetzt werden wir diese Eingabe stylen. Diese Eingabe hat also wie Hintergrund und Grenze. Lasst uns sie entfernen. Also werde ich hier sagen, wie ich es nannte. Also habe ich hier die Produktsuche minus Eingabe. Ich werde hier minus Eingabe sagen. Also bin ich in der Produktsuche mit SAS. Es gibt mir die Fähigkeit mit diesem kaufmännischen Und-Zeichen, ich kann minus Eingabe geben und dann werde ich ihm die Höhe geben wird genau die gleiche Höhe haben, die wir für den Container gegeben haben. Und Hintergrundfarbe wird transparent sein. Als ob wir keine Hintergrundfarbe und Farbe des Textes selbst haben. Es wird var sein, variable, die Oberfläche und 600 ist, wie es wäre dunkler ein wenig wie Schriftfarbe und Grenze, zum Beispiel können wir es vollständig entfernen. Wir brauchen keine Grenze, also gebe ich Grenze 0. Und dann sparen wir, probieren Sie es aus. Und wir würden sagen, Großartig, wir haben hier alles. Aber wie Sie hier sehen, dass ich, wenn ich die Maus darauf lege, einige Grenze sehe. Lassen Sie uns auch diese Grenze entfernen. Wie wir das innerhalb der Eingabe machen können, kann ich sagen, kaufmännisches Und-Fokus. Und dafür bin ich auch sehr aktiv. In diesem Fall oder in dieser Situation, wenn ich mich auf die Eingabe konzentriere, können Sie setzen, dass der Rahmen keine oder 0 ist und Umriss keine ist. In diesem Fall garantieren wir, dass wir nichts haben, wenn wir uns konzentrieren, wie Sie hier sehen. Jetzt haben wir es völlig Stil. Wir haben alle die Komponente erstellt wird. Was wir in der Zukunft tun werden, dass, wenn ich einen Text hier, werde ich eine Liste von vorgeschlagenen Produkten finden, wo es in der Datenbank gefunden. Aber jetzt schieben wir es ein wenig von oben. Also, wenn Sie sich erinnern, haben wir in der Kopfzeile, also wenn ich zum NG gehe, um den Header zu zeigen, haben wir eine Klasse gegeben, die Suche genannt wird. Also werde ich auf die CSS-Datei gehen und sagen, dass dieser Header auf der Spitze haben Sie sich erinnern, wir haben Werkzeuge und wir haben auch Suche. Und es wird Polsterung oben haben. Wir können sagen, 25 Pixel zum Beispiel. Also in diesem Fall müssen wir auch alles ausrichten. So können wir auch hier haben, diese Navigation kann wie mehr, mehr Platz auf der Oberseite haben . So können wir dann Navigation geben es auch Polsterung oben. Und wir können es wie 25 Pixel messen, damit es ausgerichtet werden kann. Und auch, wir müssen den Werkzeugen mehr Platz auf der Oberseite geben, damit wir es auch so geben können. Also für die Navigation brauchen wir 23 Pixel, etwa 23 Pixel, und die Werkzeuge, die wir brauchen etwa 38 Pixel. Also für die Werkzeuge brauchen wir 38 Pixel. Und die Navigationsauffüllung oben wird 25 Pixel betragen. Also retten wir alles. Wir speichern das ganze Styling. Wir sehen, dass wir die Kopfzeile bereit ist. 141. Banner: Okay, jetzt haben wir die Kopfzeile beendet, die Kopfzeile, die das Logo und eine Suchleiste enthält. Und auch, wir haben einige Icons und das Menü. Jetzt bewegen wir uns auf die Homepage. Gehen wir zurück zu unserem Design. Wie Sie sich erinnern, in unserem Design haben wir ein Banner und dann Kategorien Liste, und dann haben wir Liste der vorgestellten Produkte. Lassen Sie uns also Komponente für Komponente erstellen. Also, meiner Meinung nach, werde ich eine Komponente für die Homepage machen. So haben wir in unserem Code zuvor eine Homepage in der Anwendung erstellt und Sie kaufen ein. Wir sind hierher gezogen und wir sagten Homepage. Und wir sagten, dann Homepage-Komponente wird etwas enthalten ein und B. Dies, als ich Sie über das Gitter unterrichtete. Für mich werde ich mir vorstellen, dass die Homepage folgendes enthalten wird. Erstens etwas wie UI-Banner genannt. Und das wird eine Komponente sein. Und dann vielleicht werde ich Kategorien Liste oder Kategorien Banner als auch. Wir können es Kategorien nennen Banner, kein Problem. Und auch wir haben Produkt vorgestellt. Auf diese Weise werden wir drei Komponenten untereinander haben und sie werden auf meiner Homepage auftauchen. Aber wo ist der Standort dieser Komponenten? Also zuerst, UI-Banner, ich denke, es kann in der UI-Bibliothek sein, die wir zuvor in den Lippen erstellt haben. Und wir haben Bestellungen, Produkte, UI und Benutzer. Wir haben die Benutzeroberfläche. Also ich denke, hier werden wir die Komponente des UI-Banners erstellen. Um dies zu tun, möchte ich Ihnen zuerst zeigen, wie Sie eine Bibliothek löschen. Zum Beispiel, wenn ich diese Bibliothek löschen möchte , weil sie irgendwie falsch mit uns generiert wurde. Ich habe diesen Fehler absichtlich gemacht, wenn wir diese Bibliothek in der Befehlszeile erstellen, wenn Sie sich erinnern. Also möchte ich jetzt diese Bibliothek löschen. Wie wir eine Bibliothek löschen können. Zunächst einmal gehen Sie einfach hier und sagen, dass ich diesen Ordner komplett löschen möchte. Aber das reicht nicht. Sie möchten es auch aus dem JSON index.js entfernen, sich im Stammverzeichnis des Projekts befindet. Sie müssen also auch die Benutzeroberfläche hier entfernen. Sie müssen es von ts config base entfernen, wenn Sie sich erinnern, wir haben definiert, dass der Pfad hier ist, also müssen Sie das auch entfernen. Vergessen Sie nicht, die Bibliothek auch aus dem Angular JSON zu entfernen , da ich in Angular Jason meine Projekte definiere. Wenn Sie sich erinnern, haben wir die Benutzeroberfläche definiert, es Spiele, wie hier automatisch generiert. Also müssen wir diesen Teil auch entfernen. Also von vier Orten. Zuerst die Konfiguration NX und dann eckige JSON und dann der Ordner, der die Bibliothek enthält. Und dann können Sie ganz einfach eine neue Bibliothek mit einer ECS-Konsole generieren. Also lasst uns jetzt alles retten. Sehen Sie, ob unser Projekt noch gut funktioniert. Okay, wir haben das Projekt immer noch gut funktioniert. Wir haben hier kein Problem. Und jetzt werden wir eine neue Bibliothek erstellen. Also lassen Sie uns alle diese Registerkarten schließen. Wir brauchen sie nicht mehr. Wir müssen nur ein Generieren erstellen. Und dann können wir Bibliothek sagen, die hier ist. Und dann können wir den Namen der Bibliothek definieren. Ich werde sagen, UI, die Bibliothek namens UI. Ich werde meine UI-Komponenten wie eine Galerie, Banner usw. finden. Und dann drücken Sie einfach auf den Lauf diese Optionen. Sie können einen Blick auf sie werfen. Wir haben hauptsächlich in den ersten Vorträgen über sie gesprochen, als wir die Bibliothek erstellten. Also zuerst klicken wir auf Run. Und dann werden wir sehen, dass die Bibliothek wieder generiert wurde. Gehen wir hier zu den Lippen. Und dann werden wir sehen, okay, großartig, wir haben die Bibliothek wieder hier definiert und alles ist in Ordnung. Lassen Sie uns nun eine Komponente generieren, die die UI-Komponente sein wird, das UI-Banner. Wenn Sie sich erinnern, sagte ich, ich werde es in die UI-Bibliothek einfügen. Also öffnen wir wieder die gleiche Art von generieren. Also müssen wir das schließen, weil wir eine Bibliothek generiert haben. Wir müssen eine neue Sache erzeugen, die Komponente genannt wird. Also, so werde ich hier gehen, klicken Sie auf Komponente generieren, und diese Komponente wird einen Namen haben. Zuerst werden wir es in den Ordner legen, um in der Bibliothek mehr organisiert zu sein. Also erinnere ich mich an diese Ordnerkomponenten wie immer. Und dann werde ich ihm den Namen geben, der Banner ist. Und dann wird das Projekt mit erscheint UI. Und dann werden wir den Rest der Dinge tun, die wir zuvor getan haben. Das Wichtigste ist der Export. Denken Sie daran, dass wir vorher darüber gesprochen haben, damit wir es an anderen Orten verwenden können. Und dann haben wir nichts anderes in einem Lebensstil. Ein Lector, der sehr wichtig ist, müssen wir es UI-Banner nennen. Und dann müssen wir sagen, überspringen, wenn Sie nicht daran interessiert sind, Komponententests jetzt zu erstellen. Klicken wir also auf Ausführen und rufen Sie dann unsere Dateien auf und prüfen Sie, ob die Komponente generiert wurde. Lasst uns nachsehen. Okay, wir werden CUI Quelle Lippen Komponenten und wir haben die Banner-Komponente und es hat seine ts Datei mit dem richtigen Wähler. Und auch, es ist bereits in das Modul importiert und auch exportiert. Also muss ich wenigstens eine Sache tun. Also hier im Modul muss ich diese Komponente verwenden. Also in ihrer, auf ihrer Homepage, wie Sie sehen, gibt es mir immer noch Fehler, dass Sie, Ich Banner ist kein Element oder bekanntes Element. Was wir also tun müssen, ist, einfach wieder zum App-Modul zu gehen, und dann werden wir das UI-Modul importieren. Also werde ich zum Import gehen und UI-Modul sagen. Wenn Sie also manchmal, weiß es nicht, dass es erstellt wurde, besonders wenn Sie diese Bibliothek kürzlich erstellen. Sie müssen also sagen, UI-Modul geben Sie es so ein. Und dann klicken Sie auf Control Space oder Steuerpunkt auf Mac, um nur zu sehen, ob seine Autos das abgeschlossen haben oder nicht. Wir sehen also, dass es nicht automatisch abgeschlossen ist. Wir gehen und importieren es manuell. Also werde ich hier gehen und sagen Import. Und dann IKT-Modul aus, und dann werde ich sagen, fügen Sie blaue Bits, UI, den Organisationsnamen, und dann die Benutzeroberfläche. Denn wenn Sie sich erinnern, die ts config für mich bereits ein Bad definiert, das sich auf die UI-Bibliothek bezieht. Also und dann speichern wir, und wir sehen, dass UI-Banner den Fehler nicht mehr hat. Lasst uns die auskommentieren. Also kommentieren wir diesen Teil und wir speichern, und dann gehen wir zur Anwendung. Wir werden sehen, dass das Banner funktioniert. Also lasst es uns jetzt stylen. Okay, um die Art und Weise zu stylen, würde ich gerne einen Blick auf das Design werfen. Also zuerst gehen wir zum Design. Wir werden sehen, dass wir zum Beispiel dieses Banner in zwei Spalten geteilt haben, wie ich es mir vorstellen kann. Wenn Sie fortfahren, können Sie auch das Layoutraster aktivieren, damit Sie sehen können, wie das Layout hier abläuft. Also zuerst möchte ich zum Beispiel fünf Spalten hier haben und dann eine Spalte versetzen. Also habe ich eine 1, 2, 3, 4, 5 für diesen Titel und die Schaltfläche, und eine andere Spalte für das Bild, die sechs Spalten sein wird. Also zuerst müssen wir ein div erstellen, das das Banner enthält, und wir geben ihm diese Farbe des Hintergrunds. Und auch, wir werden ein Raster machen, das darin ist, diese beiden Spalten. Also werde ich hierher gehen und ich werde div geben, und ich werde dieses div Banner im Allgemeinen nennen. Und dann werde ich ein div erstellen und es wie Peak Grid geben. Und dann in dieser Spitze lesen, werde ich zwei Spalten haben. Zuerst wird P Call sein, und dann fünf, wie wir im Design gesehen haben. Und der zweite wird nur sechs haben. Hier haben wir sechs, aber dieser wird b Offset und dann eins haben. So können wir diesen Inhalt eine Spalte nach rechts schieben. Wie wir im Inneren des Designs sehen, haben wir zwei Teile, wie zwei Texte, die besten Produkte in jeder Kategorie. Wir müssen also zwei Texte haben. Also würde ich zum Beispiel die ersten Texte in H1 setzen , und ich werde die besten Produkte sagen. Und auch eine andere Kante, zum Beispiel, wird es H2 sein und es wäre in jeder Kategorie. Also hier haben wir zwei Texte und dann werden wir einen Knopf haben. Also der Knopf, wir können es von Prime Energie holen. Wie Sie wissen, dass wir eine Schaltflächen-Bibliothek haben, aber wie können wir diese Schaltfläche verwenden. Also gehen wir hierher und gehen zu ihrer besten NG-Bibliothek. Wir können es nicht überprüfen. So können wir hier haben, wir haben die Symbole. Gehen wir zu den Knöpfen. Also hier haben wir die Knöpfe. Ich möchte eine Schaltfläche, die Text und dann Symbol enthält. Also müssen wir diejenige verwenden, die in Quellen ist. Ich denke, wir müssen diese verwenden, weil es Augenzusammensetzung ist auf der rechten Seite. Wir können diesen Teil kopieren. Und dann gehen wir zu unserem Code und platzieren diese Schaltfläche hier. Aber wie Sie sehen, haben wir ein Problem, dass die Schaltfläche nicht definiert ist , weil wir das Schaltflächenmodul importieren müssen, aber tun Sie jedes Modul, das wir haben, um es zu Ihnen oder auf die Anwendungsebene zu importieren, würde ich zur Benutzeroberfläche sagen, weil es in der Benutzeroberfläche diese Komponenten. Und diese Komponenten sehen keine anderen Komponenten , die sich außerhalb dieses Moduls oder außerhalb dieser Bibliothek befinden. Also müssen wir das Tastenmodul hier wieder importieren. Also werde ich hier gehen und sagen Import. Taste, Modul von und dann werde ich sagen prime end g Schrägstrich Taste. Wie Sie sehen, ist es bereits hier definiert. Und dann setzen wir es in den Import des Moduls und wir werden sehen, dass unsere Schaltfläche definiert wurde. So wird die Beschriftung dieser Schaltfläche mehr sehen. Und die Ikone wird sein, wie wir sahen, wir haben ter, Kinder, richtig? Und dann sparen wir. Wir überprüfen, ob wir alles gut funktioniert, wir haben alles funktioniert gut, aber die Schaltfläche wird nicht angezeigt, weil das Modul nicht gespeichert ist. Wir gehen wieder zu unserer Bewerbung. Wieder nicht auftauchen. Sie können ihre Komponente erneut speichern. Okay, es zeigt sich. Manchmal müssen Sie also mehrmals sparen, damit die Dinge funktionieren oder in ihrem Front-End erscheinen. Also, jetzt müssen wir das stylen. Zuallererst müssen wir eine Stildatei für das Banner erstellen. Wenn Sie sich erinnern, haben wir öffentliche Stile und wir haben Sprünge erstellt. Und in diesen Schleifen haben wir Ordner für jede Bibliothek. Also werde ich eine UI-Bibliothek erstellen oder tun Sie ich Ordner. Und in diesem UI-Ordner, werden wir diesen Banner Punkt SCSS haben. Und dann werden wir es hier stylen. Also zuerst werde ich schnell gehen, um es zu stylen. So haben wir verstecken es wird als Design zu einem 180 Pixel sein. Und auch wir haben eine Breite, es wird 100% sein. Und eine Hintergrundfarbe, die so sein wird, wie eine leicht blaue Farbe. Wie wir hier im Design sehen, haben wir eine Folie, eine blaue Farbe. Also, wenn ich hier gehe und dann können wir das Layout verstecken, werden wir dieses hellblaue sehen. Sie können die Farbe kopieren, die die gleiche wie hier ist. Sie können es kopieren, oder Sie können etwas von der Oberfläche verwenden. Die definierte Reihenfolge, die definierten Farben, die in der Prime Engine sind, aber ich würde dem Designer genau folgen. Also hier werde ich wie dieses Banner Hintergrundfarbe haben. Und dann brauchen wir einen Grenzradius, weil er einige kurvige Grenzen hat. Also müssen wir Grenzradius haben und es wäre 15 Pixel. Lassen Sie uns überprüfen, ob wir auf dem richtigen Weg sind. Jetzt sehen wir nichts von dem Styling, weil wir kein Banner SCSS in unsere Anwendung importieren. Also müssen wir Banner CSS in unsere Anwendung importieren. Aber wie wir es immer tun, legen wir eine Datei, die alles importiert, alle Komponenten, und dann importieren wir diese Datei in unsere Anwendung. In diesem Fall sparen wir weniger Zeilen. Also werde ich hier, um eine andere Datei zu erstellen. Ich nenne es BWI Punkt SCSS. Und in dieser UI SCSS muss ich importieren, um so zu sein. Und dann wird dieser Import für mich dieses Banner oder CSS importieren. Und in meinem Geschäft werde ich hier gehen und ich werde sagen, Import für mich alle Bibliothek, die wie diesen Sprung enthält. Und dann haben wir die Benutzeroberfläche und dann ihr Banner oder sorry, die UI scss. Also in diesem Fall habe ich YOU IS CSS importiert, das das Banner enthielt. Also lasst uns alles retten. Gehen Sie wieder zu unserer Bewerbung. Okay, wir haben diese Farbe, wir haben alles in Ordnung. Also lassen Sie uns ein wenig das Banner von oben schieben. So können wir entweder Rand unten der Kopfzeile oder Rand oben des Banners tun, würde ich zum Beispiel sagen, Rand oben in der Kopfzeile. Sie können auch Rand oben oder oben auf dem Banner setzen. Also gehen wir hier und wo sind unsere Header-Stile? Wir haben Apps. Und dann scharfe Shared Header. Ich werde es zum Beispiel geben, Rand Taste zum Header, drücken Sie alles unter der Kopfzeile, etwa 25 Pixel, sagen wir alles, was Sie mit einem Design messen können. Also haben wir es jetzt so. Und jetzt werden wir etwas Styling machen. Lassen Sie uns zunächst diese Titel stylen. Ich gehe wieder durch ihr Banner. Und dann werde ich sagen, Vielleicht kann ich eine Klasse für all diese Gruppen geben, damit ich es wie einen Text geben kann. Wir stornieren ein Banner-Texte. Also gehe ich hierher und mache hier so etwas wie Banner definiert. Und dann Text. Und all diese Texte können gestylt werden. Also zuerst wird es eine Farbe haben. Ich habe schon diese Farbe, die variabel sein wird, Anzug Phase. Und dann 700. Und dann am Rand oben. Wir können es geben, wie den Text von oben etwa 50 Pixel zu schieben. Und dann fangen wir an, die Titel so zu gestalten, dass Titel zuerst, H1, es wird wie zum Beispiel, Rand oben 0 oder Rand im Allgemeinen 0 haben, um diese Leerzeichen nicht herum, wir können es initialisieren. Und dann gebildete Größe wird drei AM und ein Schriftgewicht sein. Wir können es wie ein Schwergewicht geben, etwa 400. Und auch H2. Und dann können wir ihm auch eine Marge 0 geben. Und dann können wir auch eine Schriftgröße und Schriftgewicht angeben. So können wir hier sagen, Schriftgröße wird 20 Uhr und das Schriftgewicht 300 sein. Ich bin schnell im Styling, weil unser Kurs nicht über Styling geht, es darum, die Winkelstruktur zu zeigen und wie wir unsere Anwendung strukturieren werden. Deshalb bin ich so schnell darin, das CSS zu erklären. Also lassen Sie uns Scheck speichern. Okay, wir sind sehr nah an unserem Design. Jetzt haben wir den Knopf hier. Wir müssen ihren Code drücken oder den Knopf ein wenig drücken. Sie können das durch Styling tun. Wenn Sie sich erinnern, geben wir Stil, nicht Klasse direkt, sondern Stil Klasse. Und dann können Sie die vordefinierten Ränder und Polsterungen verwenden, die sich in Prime NG befinden. Also würde ich sagen Rand oben, und dann werde ich es geben, zum Beispiel, drei oder vier. So können wir das sagen und wir werden sehen, dass es automatisch geschoben wird. Okay, nett. Wir brauchen jetzt auch einen Platz für unser Image. Ich habe zum Beispiel das Bild bereits definiert. Ich habe es bereits in meinem Assets-Ordner. Es nennt sich Bannerbild. Also ist es SVG. Sie können ein beliebiges Bild sammeln und es im Ordner „Assets“ der Anwendungsebene ablegen. Also haben wir hier die App-Assets, und dann setzen wir Bilder, wie wir zuvor mit dem Logo gesehen haben. Und dann in dieser Spalte werde ich Bild sagen. Und die Bildquelle wird Assets Ordner und nach Assets, Bilder sein. Und nach Bildern, Banner, Bild, Punkt SVG. So können wir auch SVG importieren, okay, wir haben unser Bild hier. Wir müssen es etwas nach links oder rechts schieben. Aber ich möchte Ihnen etwas zeigen, was Animation ist. Ich benutze eine Bibliothek, die Any gemacht SCSS animieren oder CSS animieren heißt. Ich werde Ihnen zeigen, wie wir können, zum Beispiel, wenn der Benutzer diese Seite oder diese Website öffnet, wird dies wie von links nach rechts kommen, um wie gleiten. Dieser Wagen gleitet von links nach rechts. Das werde ich Ihnen in der nächsten Vorlesung zeigen. 142. Banner animieren: Okay, bevor wir mit dem Vortrag über die Animierung der Art und Weise beginnen , die ich über das Schriftproblem erwähnen möchte. So haben wir bereits zu Beginn des Kurses über Schriftarten gesprochen, die Schriftarten, die wir zuvor installiert haben, aber sie werden nicht nur wirksam, wenn Sie etwas in der grundierten NG-Klasse konfigurieren, die Peak-Komponente genannt wird. Stellen Sie also sicher, dass Sie dies konfiguriert haben, und sicher, dass Sie beim Aufruf Ihrer Bibliotheken und anderer Komponenten die Konfiguration nach Prime NG-Aufrufen setzen. Danach haben wir diese Konfigurationsdatei. Die Konfigurationsdatei wird hier aufgerufen und hat eine Peak-Komponente für die Schriftart. Jetzt werden wir sehen, wie wir das Banner animieren können. Das Banner. Ich denke, der beste Fall hier, dass wir dieses Bild von rechts oder von links nach rechts schieben können. Dafür verwende ich eine Bibliothek, die animate CSS genannt wird. Wenn Sie auf ihre Website gehen, die als Animate Punkt-Stil bezeichnet wird, dann finden Sie diese Bibliothek. Diese Bibliothek ist sehr gut für Animationen. Es hat viele Animationen, wie Sie für Ihre divs, für Ihre Bilder, zum Beispiel Texte, verwenden können . Sie können tun, was Sie wollen, CSS und sehr leicht und sehr leicht für den Browser, ohne JavaScript und diese komplizierten Dinge zu verwenden. So sind sie CSS-Animation ist sehr leicht und auch browserfreundlich. Also, was wir eigentlich hier brauchen, dass wir das Bild von links nach rechts schieben wollen. So können wir diese Animation verwenden. Aber zuerst mal sehen, wie wir diese Bibliothek installieren können. Zuallererst müssen wir diesen Befehl ausführen npm installieren Sie jede main.css minus speichern. Also werde ich ein neues Terminal öffnen und dann werde ich diese Bibliothek installieren. Die Installation dieser Bibliothek kann also einige Zeit in Anspruch nehmen. Ich werde es überspringen. Also hier habe ich die Bibliothek installiert, ein Paket hinzugefügt, wie Sie hier sehen. Jetzt werden wir es zu unserem Stil hinzufügen. Also, wenn Sie sich erinnern, wir waren hier in ND-Shop, SCSS, nicht in Admin in irgendeinem Geschäft. Dies ist für ihren Shop spezialisiert, dass wir Bibliotheken hier hinzufügen. Also wollen wir das animierte CSS hier hinzufügen. Also, wie können wir das tun? Zuallererst habe ich Ihnen mit diesem Zeichen gesagt, Sie alle Bibliotheken erreichen können, die sich im npm-Modul oder im Knotenmodulordner befinden. Hier haben wir den Knoten Module Ordner. Was wir eigentlich wollen, haben wir bereits installiert ist animate CSS. Also NMAC als S befindet sich hier und wir wollen die Datei animieren Punkt CSS einschließen. Das war's also. Also zuallererst werde ich importieren. Und dann werde ich dieses Schild benutzen. Und dann würde ich sagen, jeder gemachte Punkt CSS und dann Schrägstrich, weil, wenn Sie sehen, dass der Ordnername animierte CSS hat. Und dann werden wir das Glas oder die Datei eingeben, die wieder aufgerufen wird animieren das CSS. In diesem Fall haben wir die Bibliothek importiert. Also, jetzt ist es wichtig für unsere Anwendung. Wir werden eine dieser Animationen verwenden, so wie wir sie verwenden können. Also zuerst müssen Sie sagen, dass ich sage, dass dieses H1 oder dieses div oder dieses Bild animiert ist. Wie können wir das tun, indem wir jeden Kumpel animiert sagen. So können wir diese Klasse kopieren. Und dann gehen wir zu unserem Banner. Also haben wir das Banner in der Bibliothek erstellt, die UI-Bibliothek genannt wird, und dann haben wir das Banner hier. Also, was ich eigentlich animieren möchte, ist nicht nur das Bild, wir können alle div animieren. Also kann ich hier auf den div-Container des Bildes setzen. Also, dieser Container dieses Bildes hier, kann ich es in ein div legen und dann können wir es animieren. Also haben wir Any animiert gemacht. Also jetzt ist es, wir sagen, dass dieses Ding animiert ist, aber was ist die Animation? Die Animation wird also nach links verschoben. Also hier können wir es kopieren. Sie haben hier einen Button, um es zu kopieren. Und dann gehen wir hier wieder zu unserer Klasse und wir setzen Raum, dass wir eine andere Klasse haben, die links Schleim genannt wird. So speichern wir, gehen Sie zu unserer Anwendung und wir aktualisieren. Und wir werden sehen, dass auf diese Weise gleiten. Es ist eine sehr gute Möglichkeit, das zu tun. Also, was ich jetzt tun werde, nur um dieses Bild hier am Ende zu setzen, wie so etwas wie das Design, denn Design zeigt, dass dies meistens nach rechts geht. Also lasst uns das machen. Also zuerst können wir den div Container des Bildes geben, so etwas wie Bannerbild. Also haben wir hier das Bannerbild. Also danach haben wir Bannertext und jetzt Bannerbild. Also gehen wir zum Styling des Banners. So haben wir es bereits in den Stilen, öffentlichen Stil Lippen. Und dann gehe ich hier zum Banner, und dann werde ich hier wählen, nicht Text, aber ich werde ein neues Tag öffnen, das Bild sein wird. Also hier wird es Bild sein. Und dieses Bild können wir es geben, zum Beispiel, Text ausrichten Zentrum, wie die Dinge in diesem Bild zentriert werden. Gehen wir zurück zum Browser. Wir werden sehen, dass es immer noch da ist, weil ich diesen Teil hier nicht gespeichert habe. Wenn wir also wieder zurückgehen, werden wir sehen, dass es mehr nach rechts ist, also ist es zentriert. Aber wenn Sie zum Beispiel das Bild selbst setzen, Text mehr nach rechts ausrichten, dann wird es ganz nach rechts geschoben werden, wie Sie hier sehen. Aber wir brauchen hier wieder etwas Polsterung, damit wir diesem Bild geben können , als müssten wir es ein wenig von oben und von rechts schieben. So können wir dem Container selbst etwas Polsterung geben. Also können wir nicht sagen, dass die Polsterung von oben ungefähr 15 Pixel sein wird. Und dann von rechts wird es wie wieder 15 Pixel sein. Und von unten wird 0 sein, und von links wird es 0 sein. Danach werden wir sehen, dass wir genau das bekommen, was wir wollen. Also haben wir hier die Animation, und wir haben das in der Konsole überprüft. Vielleicht brauchen wir also mehr Polsterungen wie von links, damit wir es wie mehr nach links schieben können, so etwas wie 50 Pixel. Ich glaube, damit war ich nicht genug. Also muss ich hier 50 Pixel setzen. Also sparen wir. Wir gehen wieder. Wir sehen, dass die Animation sehr schön läuft. Natürlich, wenn Sie kein Absack verwenden, können Sie einfach Polsterung oben sagen. Und dann können Sie zum Beispiel alle diese Werte auf 0 setzen. Und dann können Sie einfach sagen, Text ausrichten Mitte. So wird es in der Mitte des div sein, das wir Jahr angegeben haben. Ich bevorzuge immer in der Mitte. So animieren wir Dinge mit CSS. Mit dieser großen Bibliothek, die als animate CSS bezeichnet wird. Natürlich können Sie auch die Animation von CSS oder Winkelanimate verwenden. Aber ich ziehe es vor, immer einfache Dinge zu verwenden, die die Leistung meiner Anwendung beeinflussen können. Also verwende ich meist mehr CSS- und HTML-freundlich, ohne einige extra komplizierte Bibliotheken oder JavaScript-Bibliotheken zu verwenden. 143. Overriding PrimeNG: In diesem Vortrag werde ich Ihnen zeigen, wie Sie den Button von Prime NG zu einem bestimmten Stil überschreiben , den Sie wollen. Wenn Sie sich erinnern, haben wir den Button von Prime Energy importiert und es kam als Standard-Styling, das blau ist. Aber wir wollten wie im Design, wie wir es hier haben. So können wir das leicht tun, indem wir das Styling von Prime NG überschreiben. Also lasst uns das jetzt machen. Also zuerst werde ich wieder zu der Banner-Komponente gehen, die ich zuvor erstellt habe. Und dann kann ich in der Style-Klasse eine neue Klasse hinzufügen. Wir können es geben Taste oder Banner-Taste. Und hier wird der Banner-Button einen Stil in Banner, CSS haben. Also lasst uns hier gehen und ein anderes Tag erstellen, dem wieder ein Banner und dann Button vorangestellt wird. Also, wenn Sie diese Schaltfläche überschreiben möchten, haben wir Klasse dafür angegeben. Also lassen Sie uns es zum Beispiel einige Eigenschaften geben. Also, was ich zuerst will, ist ein Hintergrund, der weiß ist. Also werde ich Hintergrundfarbe setzen wird var sein, und dann passen Phase 0. Und dann können wir einen weißen Hintergrund haben, und dann wird diese Farbe eine Primärfarbe sein, die ich zuvor für unsere Anwendung definiert habe. Und darüber haben wir schon mal gesprochen. Und auch Grenze oder lassen Sie uns jetzt versuchen ohne Styling mehr zu sehen, ob wir vorankommen werden. Nun, okay, wie Sie hier sehen, haben wir jetzt die Grenze ist immer noch blau. Und auf Hoover haben wir es immer noch blau. Also lasst uns zuerst gehen, die Grenze entfernen. Ich werde die Grenze wie begrenzt 0 entfernen. Jetzt sparen wir. Okay, lass uns jetzt den Hover entfernen. Also, wie können wir das tun? Erster? Wenn Sie schweben oder entfernen Sie den Hover, Es ist sehr einfach. Wie Sie hier in CSS sehen, wird das Schweben in ihrer Art sein, als ob ich in der Buttonklasse bin. Und dann sage ich das und wieder. Also kaufmännisches Und-Zeichen schweben. Es bedeutet also wie der Knopf. Und dann habe ich dieses Attribut, das Hover genannt wird, und dann kann ich auch den Hintergrund entfernen. So kann ich hier auch die gleichen Eigenschaften machen. So können wir sparen und wir werden feststellen, dass es keine Wirkung hat. So prime end, Es ist Styling einige Knöpfe auf andere Weise. Wenn Sie also einige Stile von Prime NG überschreiben möchten, ist nicht nur die Schaltfläche, die einzige Möglichkeit, es richtig zu machen, zu inspizieren. So können Sie die Entwicklungstools öffnen. Sie können mit der rechten Maustaste auf die Schaltfläche klicken und dann überprüfen. Und dann sehen Sie zum Beispiel das Styling hier. Also möchte ich nicht das Styling der Spanne des Textes darin. Ich will den Knopf selbst. Und nicht nur die Taste, ich will die B-Taste, wie diese Kachel, wie ich, wo hier die Banner-Taste Styling. Wie Sie hier sehen, haben wir alle Informationen, die hierher kommen. Aber wir haben immer noch Problem, dass wir unsere Klassen nicht sehen, die wir angegeben haben. Sie sind in der Schaltfläche und hier sind unsere Eigenschaften. Wie Sie sehen, ist dieser Banner-Button, die Klasse, die wir definiert haben, hier und auch auf der Schaltfläche selbst. Also prime ND tut alles für Sie ist durch Style-Klasse. Also, was ich jetzt tun werde, um den ganzen Grund zu überprüfen, warum es nicht funktioniert. Um das Hover-Styling zu aktivieren, können Sie auf diesen Schalter klicken. Und dann können Sie auswählen, welche Aktivität wie Sie tun können, als ob Sie die Mausaktivität nicht selbst durchführen müssen. Du kannst einfach sagen, ich will vorbei. Also, okay, jetzt ist es im Harvard Zustand der Taste. So wie Sie sehen, dass wir nicht direkt über haben, hat es aktiviert und dann schweben. Also müssen wir das Gleiche tun, denn schauen, es überschreibt unsere Veränderungen, weil dies wichtiger ist als unsere Veränderungen. Also in diesem Fall muss ich es genau so machen, wie ich es hier mache. So können wir dies aktivieren Hover und dann gehen wir wieder zu unserem Code. Also werde ich hier gehen und sagen, nicht nur schweben, sondern auch aktivieren, aktiviert. Und dann werden wir sehen, dass wir hier die Veränderungen vor allem gehen. Lassen Sie uns versuchen, die Seite neu zu starten. Und wir gehen hierher. Und wir werden sehen, dass es normalerweise den Hover-Effekt hat. Also haben wir dieses Problem nicht mehr. Auf diese Weise können Sie nicht nur den Knopf, sondern alles in Prime NG überschreiben . Manchmal brauchst du das. Sie müssen einen Stil von Komponente wie Akkordeon oder einigen Lehrbüchern oder zum Beispiel eine Umschaltfläche überschreiben . Sie müssen das also für jeden Teil von Prime NG basierend auf Ihrem Design tun. Es ist also der einfachste Weg, um zu überschreiben. Und das ist das Ziel, die öffentlichen Stile zu haben. Da Sie keine öffentlichen Stile haben, werden die Änderungen in Ihrer Komponente nicht angezeigt. Denn wenn ich dieses Zifferblatt in der Komponente habe, dann ist das Prime-Ende, wo auch basierend auf der Komponente gerendert wird. In diesem Fall werde ich nicht in der Lage sein, auf den Stil der, zum Beispiel, diese Schaltfläche nur mit etwas namens Host und, oder zum Beispiel, Host tief zugreifen diese Schaltfläche nur mit etwas namens Host und, . Und dies wird in Angular verwendet, um innerhalb einiger Komponenten oder untergeordnete Komponenten zuzugreifen , die innerhalb der Haupt- oder der übergeordneten Komponente definiert sind. In diesem Fall garantieren wir in der Art und Weise mit öffentlichen Stilen, dass alles öffentlich und für uns geöffnet ist. Wir können einfach durchgehen und dann stylen wir, wie wir wollen, basierend auf dem, was wir hier inspizieren. Deshalb verwende ich die öffentlichen Stile immer. Ich verwende nicht die Komponentenstile. Natürlich liegt es an dir. Sie können auch die Komponenten Styling verwenden. Also lassen Sie uns das Design noch einmal überprüfen, wir werden sehen, dass wir hier wie mehr Grenzradius haben. Also können wir sagen, als wäre es 13. Lassen Sie uns also den gleichen Randradius wie ein Design setzen. Also gehen wir wieder zurück zu unserem Code. Und dann werden wir hier sagen, dass die Schaltfläche Grenzradius wird 13 Pixel sein. Lassen Sie uns speichern, überprüfen Sie es erneut in unserem Browser. Und wir werden sehen, dass wir es auch auf diese Weise haben. Wir bemerken, dass der Knopf mehr Höhe hat. So können Sie ihm auch eine Höhe geben, die Sie hier mögen möchten, es hat 48 oder vielleicht lassen Sie es uns zum Beispiel 50 machen , um eine konstante Zahl zu haben. Also hier gehen wir wieder und wir sagen, okay, die Höhe des Knopfes wird 50. Also geht er hierher, Pixel, 50 Pixel. Also wieder, wir gehen zum Browser, wir überprüfen, dass, okay, wir haben den Knopf mit 50 Pixel. Dies ist also ein Weg, wie wir die Dinge umsetzen und wie wir dies überschreiben stirbt von Prime NG. 144. Kategorien Banner: Okay, zurück zu unserem Design, wir werden jetzt die Kategorien Komponente oder Kategorien Banner zu tun. Diese Kategorien haben also einen Titel und die Kategorieliste. Und jedes Kategorieelement hat das Symbol, das wir im Backend angegeben haben, und den Namen der Kategorie. Und wenn ich auf eine Kategorie klicke, würde ich auf die Produktlistenseite gehen und ich werde die Produkte zeigen, die in dieser Kategorie sind. Also lassen Sie uns das schnell machen und wir werden es auf die gleiche Weise implementieren, wie wir dieses Banner implementiert haben. Also zuerst muss ich hierher gehen. Wir können jetzt alles schließen. Also brauchen wir hier nichts anderes zu tun. So werden wir nur eine neue Komponente erstellen, die Kategorien Teig genannt wird. Und wo dies gut sein könnte, wird IS-Banner erstellt. Ich schlage vor, jetzt kann ich es in der Produktbibliothek erstellen. So haben wir Lippenprodukte, und hier können wir Komponenten definieren, die wir mit der Produktsuche gemacht hatten. Wir können auch die Kategorien Banner hinzufügen. Also können wir hier gehen und generieren, und dann geben wir eine neue Komponente. Und diese Bauteilschematik. Und ich werde es hier Komponenten geben. Und es wäre nicht das Ziel ist planar. Und dann werden der Projektname die Produkte sein. Und dann gehe ich hier in der Liste, wie wir es immer tun, ich gebe es Export, weil ich es auf der Homepage und dem Weg und der Ziele verwenden werde. Wir müssen einen Selektor geben, den Selektor, wie gesagt, definieren wir das, dass wir dem Produkt den Namen der Bibliothek wie in der Regel geben. Und dann definieren wir, was wir wollen. So können wir sagen, Produkte, Kategorien, Banner. Und hier haben wir diesen Selektor. Überspringen Sie Texte und wir müssen keine Notwendigkeit für Styling angeben, damit wir in Linienstil setzen können. In diesem Fall haben wir die Kategorien Banner auf diese Weise generiert. Also lasst uns auf Ausführen klicken. Und dann gehen wir wieder zu unseren Akten. Wir werden sehen, dass wir Kategorien Banner haben. So wie jede Kategorie oder als jede Komponente brauchen wir div und wir können diese div Qualität Kategorien Banner geben. Und diese Kategorien Banner wird einen Titel enthalten, wie wir im Design gesehen haben. Es würde hier Kategorien genannt werden. Also gebe ich H3, Sie können jedes Alter geben, das Sie für mich wollen, Ich gebe die H3, weil es die dritte Ebene der Seite ist. Also hier haben wir jetzt Kategorien und dann definieren wir, vereinbart, so p Raster, denn wenn Sie in dem Design erinnern , dass diese Kategorien unter metrisch sind, vereinbart. Also an jedem Gitter wird zwei Spalten haben, weil wir sechs Kategorien drin haben. Also geben wir dieses div und rufen dann und zwei an. In diesem Fall haben wir die Kategorien hier. Also, was wir zuerst wollen, brauchen wir ein div, das die Kategorie selbst oder Kategorieelement enthält. Und dann innerhalb dieses Kategorieelements haben wir einen Hintergrund und dann das Symbol und den Namen. Also werde ich hier div geben. Und dann würde ich sagen, zum Beispiel hier div, ein Kategorie-Symbol oder es wird sein, ja, okay, Sie sind Kategorie-Symbol, weil ich hier das Symbol zuerst brauche. Also haben wir hier Kategorie-Symbol und ein anderes div, wo ich den Kategorienamen setzen werde , so dass wir div dot Kategorie, Bindestrich Name sagen können. Und hier werden wir ein Symbol setzen. Das Symbol, das wir lesen mit es war von prime und g, Wenn Sie sich erinnern, wir waren mit dem Tag, das heißt I und dann P Symbol, und dann gebe ich das Symbol, das ich möchte, zum Beispiel, PI überprüfen. Also hier haben wir das Symbol und der Name wird sein, zum Beispiel wird der Kategoriename sein, zum Beispiel Garten. Also werden wir später all diese Komponente oder diesen festen Text oder hartcodierten Text durch die Kategorie ersetzen all diese Komponente oder diesen festen Text oder , die aus dem Back-End kommt. So jetzt sind wir unsere Seite strukturiert. Gehen wir wieder auf die Homepage. Also haben wir alles funktioniert gut, aber wir haben dieses Banner nicht, weil wir es nicht auf der Homepage genannt haben. Also zuerst muss ich zur Anwendung gehen und Sie einkaufen, wie Sie sich erinnern, haben wir die Seiten und hier die Homepage. Und die zweite Komponente, an der wir arbeiten , ist, dass Kategorien Komponente oder Kategorien Banner. Also hier nannten wir es als Produkte. Okay, ich denke, oder IS-Banner und auch wir müssen es schließen, also haben wir hier kein Problem. Also in diesem Fall werde ich wie die Kategorien Banner aus der Produktbibliothek aufgerufen werden. Wenn Sie sich erinnern, haben wir das Produktmodul bereits importiert. Also das Produktmodul, innerhalb des Produktmoduls, Ich habe bereits die Kategorien Banner, die in ECS-Konsole es in den Export gemacht und diese Komponente, die in den Bibliotheken Produkt oder die Produktbibliothek. Also hier haben wir alles. Lassen Sie uns das versuchen. Wir werden sehen, großartig. Wir haben Kategorien. Und die Ikone und der Garten. Also, was wir brauchen, eigentlich brauchen wir zuerst, um dieses Banner zu stylen. Also gehen wir auch zu unseren öffentlichen Stilen. Wir haben Lippen. Wenn, wenn Sie sich erinnern, wir haben die gleiche Struktur definiert. Also werde ich eine neue Datei in der Produktbibliothek erstellen und sie als Kategorie-Banner geben. Und diese Kategorien Banner haben, wird ein CSS sein. Und dann werden wir es hier stylen. Aber zuerst müssen wir es auch in unsere Produkte importieren, die in unserem Anwendungsstil importiert werden. Also haben wir auch hier, wir haben nicht die Produkte, wir haben Kategorien, Banner. In diesem Fall kann ich die Stile in meiner Anwendung sehen. Wie wir im Design sehen, haben wir hier etwas Platz. Also entweder können Sie Banner geben oder zum Beispiel hier, Rand unten, oder hier geben Sie Rand oben für mich, Ich werde Marge oben für die Kategorien geben. Vielleicht können wir hier zwei Kategorien gehen, Banner und vor allem müssen wir diese Klasse nennen. So haben wir hier die Klasse von Kategorien, Banner in Kategorien Säugetier fein, CSS-Datei. Also werde ich hier Ferraris wie Marge geben, aber Dope oder ja, Dope, wir können nicht sagen, 75 Pixel. Und auch wir werden die H3 stylen, die innen ist. So können wir es geben, zum Beispiel, Margin Button. So können wir das Kategorie-Symbol darunter drücken, etwa 20 Pixel. So können wir dies speichern, um zu überprüfen, ob wir dieses Mal wirklich importieren. Okay, Wir sehen, dass wir haben, der Stil wird importiert. Okay, Nett. Und wir werden dies wie die Farbe färben, die hier definiert ist. Es ist nicht ganz schwarz, aber es ist wie Licht in Grau. So können wir die Graue verwenden, die in der Oberfläche sind und in der definiert, in der Hauptenergie. Wie Sie hier sehen, haben wir viele Variablen für Farben, so dass wir auf diese bleiben können. So können wir zum Beispiel dieses dunkelste nehmen. Also können wir diese Folie machen. Wir können zum Beispiel, Umfragen 500 zum Beispiel nehmen . Also gehen wir hier, wir geben ihm eine Farbe zu diesem H1 oder H2, H3. Und wir sagen weit, also Phase 500. So haben wir jetzt die Farbe des Titels angegeben. Wir gehen wieder und wir werden sehen, dass es diese Farbe hat. Vielleicht können Sie dunkler verwenden, also erhöhen Sie einfach die Zahl, die hier angegeben ist. Also werde ich es zum Beispiel 700 geben. Also gehen wir hierher, wir geben ihm 700. Oder basierend auf dem Design, können Sie Ihre eigenen Farben definieren, unsere eigenen Variablen. Und dann können Sie sie in Ihrer Anwendung basierend auf dem Design verwenden , das vom Designer zur Verfügung gestellt wird. Also hier haben wir Stil, die H3, was wir auch brauchen, um diese Kategorie selbst zu stylen. Also innerhalb der Kategorien Banner, haben wir ein div definiert, das Kategorie oder Kategorieelement genannt wird. Wir können es wie nennen, ich nenne es hier, Kategorie. Und in dieser Kategorie werde ich einige wie Werte haben. Wie zum Beispiel haben wir minimale Höhe dafür, wie es eine gewisse Höhe hat, können wir es 100 Pixel geben. Ich kopiere diese oder ich kenne diese Informationen aus dem Design, so dass wir auch kopieren können. Der Randradius zwei beträgt fünf Pixel. Und dann haben wir Text ausrichten. Wir geben ihm ein Zentrum. Also wäre alles drin in der Mitte. Und dies wird als Flex angezeigt. Ich werde Ihnen sagen, warum, Weil wir wollen auch ihren Inhalt zu rechtfertigen, um in der Mitte zu sein. Also, zuerst können wir es so geben. Ich möchte nur eine Hintergrundfarbe, zufällige Hintergrundfarbe geben, nur um zu sehen, wie meine Änderungen ablaufen, weil jetzt alles transparent ist. So können wir zum Beispiel auch zufällig diese Farbe sein . Natürlich werden wir es durch ihre Kategorien Farbe ersetzen, die wir auch im Backend definiert haben. Also haben wir diesen Garten hier, wir haben dieses Banner. Also möchte ich ihren Inhalt rechtfertigen. Wenn Sie sich erinnern, definieren wir dies als Flussmittel. Sie können also nicht sagen, einfach Inhalte rechtfertigen und dann werden Sie sagen, zentrieren und dann Elemente ausrichten. Sie können es geben, zum Beispiel, auch zentrieren. Also wird es genau in der Mitte dieses div sein. Also zwei Dinge, Inhalte zu rechtfertigen und Elemente auszurichten. Also lasst es uns hier geben. So wie wir sehen, rechtfertigen Inhalt, sagen wir zentrieren und ausrichten Elemente. Es wird auch sein, Center. Also wird alles in ihm zentriert sein. Aber wie Sie sehen, sind sie nahe beieinander, wie das Symbol und auch der Name, sie sind nahe beieinander, weil wir sagten Display flex. Also, um sie untereinander zu setzen, gibt es schön, ich denke, in Flex können Sie Flex-Richtung sagen. Es wird nicht aktiviert sein, sie sind alle wie keine horizontale, aber es wird Spalte und auch Spalte umgekehrt sein. Sie haben hier mehrere Optionen. Du kannst zwischen all diesen Sachen wechseln. So sehen Sie, Dinge zu tun ist wirklich wichtig zu lernen. Wie Sie sehen, können Sie die Dinge nicht nur tun, wenn Sie etwas Praktisches lernen. Deshalb mache ich diese Arten von Kursen. Kurse, die mit praktischer Erfahrung kommen. Nicht nur ich führe ein Dokument und dann okay, Sie können es anwenden. Nein, du siehst es vor dir. Sie sehen, wie wir zum Beispiel Flex-Richtung wirklich brauchen . Vielleicht hast du die Flex-Richtung gesehen. Ok. Du weißt nicht, was es ist? Sie haben noch nie erlebt, warum wir es verwenden, aber jetzt können Sie sehen, wie es verwendet wird. Das ist also ein großer Wert, Dinge praktisch zu tun. Also hier haben wir jetzt diese Kategorie. Also, was wir brauchen, basierend auf dem Design, um das Symbol wie eine größere Größe zu geben und auch den Text ein wenig größer zu sein. Also lasst uns das im Code machen. Geh, ich gehe hierher. Also werde ich sagen, dass, wenn Sie sich erinnern, wir haben Symbol, Kategorie, Symbol angegeben. Also werde ich hier gehen und ich werde sagen, ich bin Prozent Kategorie oder Symbol, weil ich Prozent mir Punkt-Kategorie geben. Und dann habe ich Strich-Symbol. Es wird für mich in dieser Kategorie Symbol machen. Also hier werden wir die Klasse haben, und innerhalb dieser Klasse verwenden wir das Symbol. So können wir diese Klasse auch verwenden. Also hier kann ich PI sagen, es wird Schriftgröße sein. Wir können es wie zum Beispiel 40 Pixel geben. Alles, was Sie die EM-Einheiten verwenden können, können Sie EM sagen. So können wir es als großen Text haben. Also zurück zum Browser, werden wir sehen, okay, wir haben es so. Ich ignoriere die Änderungen, weil wir das nicht gespeichert haben. Also müssen wir wieder setzen, Flex-Richtung wird Spalte sein. Okay, wir haben jetzt alles in Ordnung, also ist es neu geladen. Und wir haben es so. Auch vielleicht, dass Text, können wir es ein bisschen größer geben. Also werde ich auch eine andere Klasse ausrichten, die Text oder Name genannt wird. Nein, wie wir das Glas nennen. Wir haben es als Namen. Also werde ich hier Namen gehen, und dann wird der Name Schriftgröße wie ein bisschen größer sein. Wir können ihm 1,2 Uhr morgens geben. Also diese 1,2 E m, was es bedeutet, wie, Ich werde 1,2 mit 14 Pixel multiplizieren und dann wird es Ihnen die Größe in Pixel geben. So wird es berechnet, weil wir den Körper zuvor in ihrer Konfiguration angegeben haben , dass wir haben. Die Textgröße der Schriftart beträgt 14 Pixel. Danach können wir sparen und wieder gehen. Und wir werden sehen, dass wir hier eine größere Schrift haben. Lassen Sie uns auch ein wenig Platz hier unter dem Symbol geben. So können wir hier zum Symbol selbst gehen. Und wir können hier wieder gehen und zum Beispiel zum Auge selbst oder zum PI sagen , wir können Margin-bottom wie 10 Pixel geben. So können wir auch diese Klasse hier verwenden. Und wir sagen, wie, Ich will ein Rand unten wird 10 Pixel sein. Also, um den Text ein wenig weg vom Symbol zu schieben. Also speichern wir, neu laden, okay, alles ist jetzt in Ordnung. Also lassen Sie uns zumindest den Grenzradius überprüfen. Ich denke, es ist größer. Es hat 14. So können wir auch einen größeren Grenzradius geben. So können wir hier 14 Pixel geben. Und dann gehen wir wieder zu unserem Design. Und wir werden sehen, dass wir eine bestimmte Kategorie haben. Also, jetzt, was wir tun werden, ist nur wiederholen Sie die Kategorien, die in der Datenbank sind, die wir von Postman bekommen, und wir lösen das vorher in der Admin-Panel-Anwendung und legen sie hier. Also zuerst müssen wir diesen Kategorie-Service anrufen. Wie Sie hier sehen, haben wir alles gestylt. Zuerst müssen wir wie Array von Kategorien haben. So können wir hier in den ts Dateikategorien definieren, warum es als Array sein wird. Und dieses Array wird Typ des Kategoriemodells sein. Wenn Sie sich erinnern, haben wir dieses Modell auch definiert. Also wird es zunächst leer sein, weil wir es aus dem Back-End bekommen werden. Und was, wie oder wie kann ich die Kategorien verwenden oder bekommen. Wir können sie durch den Service bekommen, wenn Sie sich erinnern, die wir in der Kategorie Service erstellt haben. Und wir haben alle diese Liste, damit wir Kategorien bekommen können. Also werde ich hier zu meiner TypeScript-Datei im Kategorie-Banner gehen, und ich werde diesen Kategorie-Service aufrufen. Ich werde sagen, private Kategorien Service. Es wird Kategorien Service sein, wie Sie hier sehen. Also, wenn Sie wollen, können Sie dieses verwenden. Und dann auf NGO auf Edit, können wir wieder diesen Kategorie-Service aufrufen. Und dann können wir diese Kategorien spüren. Also lasst uns das machen. Wir können sagen, dass dieser Punkt Kategorie Service, dann GetCategories. Und wenn Sie sich erinnern, müssen wir abonnieren, wir müssen auf einen Wert warten, der vom Backend kommt und dann schieben wir ihn in das Array. Also haben wir hier dot abonnieren, weil es HTTP-Anfrage ist. Und dann bekomme ich ihre Kategorien in der Rückgabe des Abonnements. Also hier haben wir Kategorien. Und dann werde ich sagen, dass diese Kategorien, wie die Variable, die ich hier definiert habe, die Kategorien sind, die zurückkommen, oder die Antwortkategorien, die aus dem Backend zurückkamen. Und wenn Sie sich erinnern, wir müssen uns auch abmelden, müssen wir. Nehmen Sie zum Beispiel, bis, wenn Sie sich erinnern, wir haben gemacht, dass nur für die Leistung, um keine Probleme zu machen. So wird dieses Abonnement nicht geöffnet bleiben. Also müssen wir es auch tun. Und subs, wenn Sie sich erinnern, und wir haben das definiert und wir haben darüber im Admin-Panel Refactoring gesprochen. So werden n subs eine Variable sein, die hier so gut definiert sein wird. Also können wir das n subs nennen, sorry. So n subs auch mit Dollar. So wird es einen Typ haben, der Subjekt genannt wird. Und das Thema kommt von unserem x js und der Typ davon wird beliebig sein. Und dann wir als Initialisierung, wenn ich diese Komponente besuche, sage ich neues Thema. Also das endet, na ja, es wird enden, wie ich hier sage, nehmen, bis, Okay, ich nehme, bis dieser U-Boot. Und wenn es endet, werden wir enden, wenn ich diese Komponente zerstöre. Wenn ich diese Komponente zerstöre, wenn ich von der Homepage weg navigiere, wenn ich diese Komponente nicht mehr sehe. Deshalb müssen wir auch etwas auf zerstören rufen. Dies onDestroy ist also Teil des Angular Lebenszyklus von Komponenten. Und dann können wir es verwenden, so dass es ausgeführt wird, wenn die Komponente zerstört wird. Also hier implementieren wir onDestroy und dann sage ich NG onDestroy, und dann werde ich angeben, was es tun wird. Also möchte ich, dass dieses Ende subs abgeschlossen ist. Wie ich gesagt habe, müssen wir es natürlich so machen. Wir sagen Weiter, wie gehen nächsten Schritt und dann abgeschlossen. Wenn diese Komponente abgeschlossen wurde, wird das Abonnement beendet und wir werden keinen Speicherverlust haben. Also sparen wir. Und wir haben jetzt die Kategorie Das ist zum Beispiel hier, machen Sie ein Konsolenprotokoll, um sicherzustellen, dass wir die Kategorien aus dem Back-End erhalten. Natürlich müssen Sie sicher sein, dass Sie das Back-End ausführen. Also speichern wir wieder und wir gehen zur Konsole. Und wir werden sehen, dass es vielleicht einen Fehler gibt. Das ist hier ein Fehler. Es steht, dass drei Injektorfehler sind. Category Service verwendet HTTP-Client und es gibt keinen Anbieter für HTTP-Client. Also müssen wir auch tun oder anrufen. Wenn Sie sich erinnern, haben wir das im Admin-Panel getan, müssen wir auch am Ende Sie Shop-Anwendung aufrufen, das HTTP-Client-Modul. Also nehme ich hier wieder ein HTTP-Client-Modul auf, wie wir es zuvor in der Admin-Verpflichtung getan haben. Also hier haben wir jetzt angerufen, okay, ich bekomme fünf Kategorien, wie Sie hier sehen. Aber im Frontend machen wir noch nichts, weil wir das nicht zur Vorlage hinzugefügt haben. So gehen wir wieder zurück zu unseren Kategorien Banner hier. Also haben wir Array verwendet. Natürlich würden Sie das Konsolenprotokoll immer entfernen , da es sich auf die Leistung der Anwendung auswirkt. Sie nicht viele Konsolenprotokolle aus und bewahren Sie sie in der Produktion auf. Also ist es besser, sie zu entfernen. Also hier, wie Sie sehen, haben wir Kategorie und wir haben Spalte zwei. Also müssen wir über diese zwei Spalten oder zwei jede Kategorie schleifen. Und dann wird es für mich generieren, dass Kategorien, die aus dem Kategorie-Array bereitgestellt werden. Also würde ich hier in Spalte zwei sagen, G4. Und dann am Ende Sie für, Ich werde sagen, lassen Kategorie wird off Kategorien sein, Kategorien. Wir definieren das schon und es ist voll. Also jetzt haben wir die Kategorie hier. Ich werde sagen, ersetzen Sie für mich den Kategorienamen. So können wir es auf diese Weise tun. Ich sage Kategorie Punktname und dann Breiten überprüfen, um zu sehen, ob alles gut funktioniert. Schön, wir haben sie alle so. Lassen Sie uns also die Hintergrundfarbe ersetzen. zu tun ist sehr einfach. Wenn Sie sich erinnern, haben wir die Farbe über die Kategorie, also haben wir es in der CSS hier. So haben wir hier die Hintergrundfarbe auf Kategorien Klasse oder Kategoriekomponente. Also hier Kategorie div. Also hier gehen wir und wir sagen, dass wir eine Eingabe für Entwickler oder das beliebige HTML-Element haben , das von Angular kommt, haben wir gerade NG-Stil genannt. Und in jedem Stil haben wir das in Klammern angegeben. Es ist also ein Input. Also müssen wir innerhalb dieser Eingabe einen eckigen Code machen. Und im Inneren öffnen wir ein Objekt, und dieses Objekt wird die Eigenschaft des Stylings enthalten, den Hintergrund, die Eigenschaft des Stylings, wir definieren es so. Hintergrund. Farbe. So wird es wie diese Hintergrundfarbe haben. Und dann werde ich sagen Kategorie, die Kategorie, die ich von der MD4 bekam, und dann Farbe. Also hier wird dieses div diese Hintergrundfarbe haben, die Kategorie Punktfarbe sein wird. Also sparen wir. Und dann gehen wir zur Anwendung. Wir werden sehen, dass wir die Farbe bekommen haben, die wir im Admin-Panel zuvor definiert haben , wenn Sie sich erinnern. Auf diese Weise haben wir diese Farbe. Energiestil macht die Arbeit für Sie. So können Sie auch andere Eigenschaften verwenden, wie zum Beispiel Farbe. So sehen Sie hier, dass sich die Farbe auch basierend darauf ändert. Es ist also sehr einfach. Sie können das innerhalb der NG vier und auch das Symbol, wenn Sie sich erinnern, wir haben hier angegeben Symbol für ihre Kategorie, so dass wir es auch verwenden können. Sie haben zwei Möglichkeiten. Einer von ihnen ist nur das zu tun und dann sagen Sie Kategorie Punktsymbol. Denn wenn Sie sich erinnern, haben wir das Symbol nur den Symbolnamen angegeben, von Prime NG stammt. Also müssen wir es verbinden, um pi und dann minus zu sein, und geben Sie dann den Namen des Symbols an. Und dann kriegen wir es hier. Genau so haben wir es mit dem Admin-Panel gemacht. Deshalb gehe ich schnell hierher. So wie Sie sehen, haben wir alles definiert ist. Ich denke, die Schriftart ist ein bisschen groß. Lass es uns kleiner machen. Ich werde hier wieder zu den Kategorien Banner gehen und dann werde ich den Namen zu sein. Wir behalten es wie eine. Also müssen wir hier nichts oder etwas ändern. Also können wir es einfach so behalten. Und wir werden sehen, okay, wir haben den Text und die Symbole sind sehr schön. Wir haben fünf Kategorien nur, weil wir fünf Kategorien im Back-End definiert haben, können Sie eine weitere Kategorie hinzufügen. Ich werde es für die nächste Vorlesung hinzufügen. Sie können die Admin-Panel-Anwendung verwenden, um Kategorie hinzuzufügen, und es wird hier mit dem rechten Symbol hinzugefügt. Natürlich ist das letzte, was ich erwähnen möchte, wenn ich auf eine dieser Kategorien klicke, möchte ich auf die Produktliste und dann die Kategorie dieses Produkts gehen. Also möchte ich die Produkte dieser Kategorie sehen, der Kategorie, auf die ich geklickt habe. Um das zu tun, müssen wir auf dem Banner selbst tun. Hier, die Kategorie. Wir können Router-Link nicht sagen, wenn Sie sich erinnern. Also kann ich das hier nicht sagen. Es kann ein Router-Link sein. Also der Router Link, was es sein wird, wird es ein Produkt sein. So können wir hier in doppelte Anführungszeichen setzen, weil ich diese Eingabe definiere. Also hier schreibe ich einen TypeScript- oder JavaScript-Code, sagen wir, oder eckigen Code. Also hier spezifiziere ich den Boss. Es werden Produkte sein. Und dann erstelle ich zum Beispiel die gleiche Komponente, die ich nenne, aber es wäre wie unter Kategorie. Also gehe ich zu einer bestimmten Kategorie und dann übergebe ich diese Kategorie-ID, weil ich in diesem Router oder in diesem Link verwenden werde, werde ich eine Komponente verwenden, die ihre Kategorie-ID liest. Und dann wird es für mich die Kategorie zurückkehren, die ich will. Also hier kann ich sagen plus, natürlich setzen wir dies in ein einfaches Anführungszeichen, weil es String ist. Und ich werde mit ihm Kategorie Punkt-ID kombinieren. Also werde ich die ID lesen, dann wird es mit diesem Router-Link sein. Aber wir bekommen immer noch hier Fehler. Warum? Da wir das Router-Modul im Produktmodul nicht verwendet haben, müssen Sie dieses Router-Modul innerhalb des Produktmoduls verwenden. Also lasst uns das benutzen. Natürlich werden wir zu diesem Router-Modul detaillierter zurückkehren , wenn wir definieren, dass die Produkte aus sind. Also müssen wir nur das Router-Modul so nennen. Und dann haben wir eine bestimmte unsere Kategorie, wie es sich verhalten wird, genau das, was wir wollen. Also, wenn ich jetzt auf sie klicke, werde ich vielleicht Fehler bekommen, weil ich nicht zu dieser Kategorie gehen kann , weil wir keine Route dafür haben. Wenn Sie also wollen, dass es funktioniert, müssen wir eine Komponente erstellen. Und dann werden wir die Produktliste basierend auf gefilterten erstellen, basierend auf diesen Kategorien, wie wir später in den nächsten Vorträgen sehen werden. Wie Sie hier sehen, klicke ich auf, ich bekomme einen Fehler, weil ich nicht auf diese Komponente zugreifen oder zu gehen kann. Also für mich werde ich genug hier sein. Ich möchte nur erwähnen, dass wir ein großartiges Verhalten oder mehr freies und freundliches Verhalten machen können . Wenn ich die Maus lege, wird es wie ein Zeiger sein. So können wir das auf Kategoriestil tun. Wenn ich also auf Control klicke, wenn Sie sehen, klicke ich auf Control, dann klicke auf die Klasse und es wird mich zu der angegebenen Klasse bringen. Also kann ich hier Cursor Zeiger sagen. Und dann sparen wir. Und wir gehen wieder zu unserer Anwendung im Front-End, werden Sie sehen, dass wir jetzt alle Kategorie klickbar haben. Also können wir, wenn ich hier klicke, okay, Ich bekomme Fehler in der Konsole, weil sie aus ist noch nicht definiert. In der nächsten Vorlesung werden wir sehen, wie man diese Anwendung vergrößert. Wir werden zur Produktliste gehen und wir werden nach Kategorie filtern. Wie Sie später sehen werden, Schritt für Schritt. 145. Produktgegenstand: Okay, wir sind jetzt noch auf der Homepage. Wir werden die vorgestellten Produkte erstellen. Die vorgestellten Produkte werden einige Produkte Artikel haben. Wie wir es genau im Backend gemacht haben, wenn Sie sich erinnern, wir haben Galling, dass vorgestellten Produkte API. So können wir hier nur die vorgestellten Produkte haben. Wenn Sie sich erinnern, wir haben jedes Produkt mit Flagge markiert, die aufgerufen wird, und wir setzen es auf true oder false. Und darauf basiert, bringen wir das vorgestellte Produkt an das Front-End. Aber zuallererst möchte ich das Arbeitselement oder das Produktelement stylen. Diesen Artikel werden wir auch in ihrer Produktliste und auch an anderen Stellen wie vorgeschlagenen Produkten oder zum Beispielwieder auf der Homepage oder irgendwo anders auf der Produktseite selbst verwenden und auch an anderen Stellen wie vorgeschlagenen Produkten oder zum Beispiel wieder auf der Homepage . In diesem Fall brauchen wir hier zwei Arten von Komponenten. Erstens, der Behälter all dieser Produkte Artikel, die als vorgestellte Produkte und das Produkt Element selbst bezeichnet wird. So können Sie auch vorgestellte Produkte machen und Produkt Artikel setzen. Aber in diesem Fall wird der Artikel nicht in woanders wiederverwendbar sein. zunächst Lassen Sie unszunächstzwei Komponenten erstellen. erste Komponente wird in der Bibliothek der Produkte befinden, wie wir es mit Kategorien, Banner und Produktsuche getan haben, werden wir die vorgestellten Produkte und das Produkt zu finden, so dass wir auch die Konsole verwenden können. Das werde ich schnell machen. So, wie Sie hier sehen, haben wir jetzt zwei Komponenten. Erstens nennt es vorgestellte Produkte und auch das Produkt Artikel. Ich habe hier Fehler gemacht, dass ich die, zum Beispiel, Ich hielt, als ich das Element zu generieren, Ich war mit dem gleichen Generation-Tool. Also habe ich das falsch gemacht. Ich habe noch die Produkte oder der Selektor blieb Produkte Produkt Artikel. Also müssen wir das auch tun. Also müssen wir das in Ordnung bringen. Also, wie können wir es beheben? Wenn Sie einen Fehler machen, können Sie einfach wieder zu der Komponente gehen und Sie können es direkt hier bearbeiten. Also haben wir den Selektor, dann möchte ich Produkte und ich werde auch vorgestellte Produkte sagen. In diesem Fall wird sich nichts ändern, nur dieser Selektor. Wenn ich diese Komponente aufrufen möchte, möchte ich den Selektor verwenden. Und ich benutze Produkte als Präfix. Denn wenn Sie wissen, dass wir eine Regel in ES fusselt haben , haben wir Produkte als Attribut als Präfix. Daher müssen wir unseren Selektoren immer Produkte wie den Namen der Bibliothek vorstellen. Und dann habe ich den Namen der Komponente, die ich will. So auch, wir haben hier das Produkt Artikel, das wir zuvor erstellt haben. So können wir jetzt den Container zuerst machen, wir können zum Beispiel sagen, wir haben div, die die Feature-Produkte und den Titel enthalten. Also werde ich hier ein div erstellen und ich werde ihm eine Klasse geben, die vorgestellte Produkte genannt wird. Und auch, ich werde einen Titel geben, der wirklich, wirklich wie H3 ist. Und dieses h3 wird auch vorgestellte Produkte haben. Und dann muss ich ein Raster haben, weil wir die Elemente in das Raster legen, den Produkt-Artikel. Also müssen wir auch ein Gitter haben, genau wie wir es im Design haben, im Design, wenn Sie sich erinnern, wir haben vier Spalten, also brauchen wir 34 für jedes Produkt Artikel. Wenn wir also wieder zum Code gehen, können wir ein div oder ein Gitter definieren. Wir können es ein Gitter nennen. Und dann in diesem div werden wir die Spalten definieren. Also werde ich div dot P Spalte sagen, denn hier verwende ich das Grid-System von Prime NG. Und dann werde ich drei sagen. Wir haben 12 Spalten, also brauche ich vier Spalten. In diesem Fall muss ich es durch drei teilen. Also 4 multipliziert mit 3 ist 12. Also hier werden wir vier Spalten haben. Und darin werden wir den Artikel der Produkte verwenden. Also werde ich hier sagen, Produkte, Produkt Artikel. Also haben wir hier diese Komponente bereits definiert. Also in diesem Fall werde ich speichern, alles speichern, und dann werden wir die Feature-Produktkomponente in der Shop-Anwendung verwenden. Auf der Homepage, wie Sie sich erinnern. Also haben wir auf der Homepage, diese DAG auch. Wir haben das Banner, wir haben die Kategorien, und jetzt werden wir das Produkt selbst oder die Feature-Produkte verwenden. Also lasst uns diesen Teil auskommentieren und dann sagen wir , dass wir das neue Tag haben, das vorher definiert ist. So Produkte und dann vorgestellte Produkte. Auf diese Weise haben wir die Komponente aufgerufen, die als Feature-Produkt bezeichnet wird. Und innerhalb dieser Feature-Produkte rufe ich den Artikel der Produkte an. Also in diesem Fall muss ich im Front-End-Produkt-Artikel für die Zeit arbeiten. Also lasst uns hier gehen und nachsehen. Okay, wir haben Produktartikel, funktioniert. Wir haben auf einmal, weil wir es nur einmal nennen. Wir haben hier nicht eine for-Schleife für jedes Produkt. Also für jetzt werden wir das Produkt Artikel erstellen. Und in der nächsten Vorlesung werden wir die Feature-Produkte nennen und diese in Schleife setzen. So haben Sie die alle Produkte Artikel. Also zuerst, lassen Sie uns das Styling von Produkten Artikel tun. Also in dem Produkt Artikel, wenn Sie sich erinnern, im Design, haben wir auf dem oberen Bild, Titel, Preis, und dann Button, Schaltfläche, die in den Warenkorb gelegt wird. Also müssen wir ein div erstellen, div. Und dann würde ich sagen, Klasse dieses div wird Produkt-Artikel sein. Wir müssen dafür eine Stylingdatei erstellen, wie wir später sehen werden. Und in diesem div werde ich etwas Produkt-Wrapper oder Produkt-Item-Wrapper haben. Warum brauche ich das? Denn wenn Sie im Design sehen, haben wir hier einen grauen Hintergrund. Das wird also der Wrapper und außerhalb davon sein, als würde ich das Bild herausschieben. Also hier werden wir auch das Bild haben. Also frage ich mich, dass Arbor so gefärbt wird. Und dann werde ich das Bild und den Text und den Preis darin stecken. Und in der Produktverpackung werden wir das Bild haben. Und das Bild wird wie eine Quelle haben, die das Produktbild selbst sein wird. Und auch wir werden eine Klasse für dieses Bild haben. Wir nennen es Bild und dann Abwechslung. Wir können es für jetzt leer halten, Alle ersetzen den Produktnamen innen. Und auch, wir brauchen einen Titel, der auch ein Glas haben wird, das wird der Name, der Produktname sein, und im Inneren wird es den Produktnamen haben. Und wir müssen auch einen Preis haben. Also haben wir hier einen Preis. Wir setzen es in H5 und innen oder ihre Klasse wird Preis sein. Und darin werden wir den Produktpreis haben. Und am Ende brauchen wir einen Knopf. Und dieser Button wird genau so sein, wie wir den Button des Banners gemacht haben. So wird es P Taste und Stil Klasse sein. Ich werde ihm eine Klasse geben, die in den Warenkorb gelegt wird. Und das Etikett wird in den Warenkorb gelegt, und das Symbol wird ein Warenkorb sein. Aber hier haben wir ein Problem, dass wir nicht das Produktmodul oder das Tastenmodul aufrufen, sorry. Also müssen wir auch dieses Tastenmodul im Modul oder Produktmodul aufrufen. Denn wenn Sie sich daran erinnern, dass jedes Modul vollständig getrennt ist, sieht das nicht die anderen Komponenten oder die anderen Module, die in der Anwendung oder in einer anderen Bibliothek aufgerufen werden. Also müssen wir das Schaltflächenmodul erneut aufrufen, innerhalb dieser Bibliothek von Produkten, Lassen Sie uns alles wieder speichern, damit wir ein Speichern haben können und dann gehen wir zu der Anwendung. Wir sehen immer noch nichts, weil, okay, hier ist es leer. Wir haben nur wie sie Button sind und hier sollten wir einen Namen, ein Bild usw. haben, aber jetzt haben wir sie leer, weil wir das nicht angegeben haben. Also, was es hier sein kann, okay. Wenn ich erneut zum Artikel oder zu den Merkmalsprodukten gehe, kommt die Funktion der Produkte aus dem Backend. Und hier in diesem Fall möchte ich diese Produkte an Produkt-Artikel weitergeben. Und dann Produkt Artikel wird basierend auf was gerendert werden? So in ihn eingefügt. Also brauchen wir etwas, das Input genannt wird. Und diese Eingabe kann auf diese Weise definiert werden. Wenn Sie sich erinnern, haben wir Eingaben immer als Eigenschaften verwendet. Also geben wir wie eine Eingabe an, die es etwas genau so tun kann, wie wir Eingaben haben. Zum Beispiel Quelle des Bildes. So ist es Eingabe, auch gestylt Klasse ist Eingabe. So können wir Eingabe angeben, die Produkt genannt wird, das Produkt selbst. Und dann werde ich hier das Produkt übergeben , das ich aus dem Backend oder der Liste der Produkte habe, die ich es vom Backend habe. So werden wir das in der nächsten Vorlesung sehen. Aber jetzt werde ich dieses Element oder diese Eingabe definieren. Also lasst uns das machen. Wir können alles zurücksetzen und zum Produkt-Artikel gehen. In diesem Fall kann ich jede Eingabe sehen, die zu dieser Komponente kommt, und ich kann sie hier rendern. Also gehen wir zum TypeScript dieser Komponente oder zur Klassendatei dieser Komponente. Und dann werden wir eine Eingabe hinzufügen. Eingabe ist etwas, das Sie in Angular definieren können, und dies wird injizierbares Element sein, also wird es wie diese Eingabe sein. Und dann können Sie den Namen der Eingabe definieren, die Sie wollen. Zum Beispiel möchte ich ein Produkt. Das, was ich auch in den Produkt- oder Feature-Produkten werde ich hier übergeben. Ich werde sagen, Input-Produkt wird das Produkt sein, das vom Back-End kommt. Also hier habe ich ein Produkt und den Typ, wenn Sie einen Dipol definieren wollen. Es wäre also einfacher für Sie, auf diese Eingabe zuzugreifen. Zum Beispiel möchte ich auf ihren Namenspreis leicht zugreifen. So können wir dieses moderne Produkt nennen, weil ich ein Produkt übergebe und die Eingabe aus Winkelkern importiert wird. Also hier haben wir eckig oder Import von Winkelkern. Also in diesem Fall haben wir jetzt die Eingabe. Jetzt bin ich in dieser Komponente. Ich kann dieses Produkt im Inneren verwenden, wie ich die Produkte habe, die ich vom Backend bekommen habe und ich kann es hier verwenden oder seine Eigenschaften hier verwenden. Also zuerst kann ich zum Beispiel das Bild verwenden . Also werde ich hier die Quelleingabe haben, wie Sie hier sehen, ist es Eingabe. Also kann ich nicht sagen, Produkt Punktbild. So werden wir das Bild des Produkts haben. Und hier im Alt können Sie auch den Namen angeben. So können Sie auch über den Produktnamen hinaus. Und auch hier können Sie den Produktnamen angeben, der im Namen betitelt wird. So haben wir hier Produktnamen. Und auch, wir können das einen Preis definieren. Also haben wir auch hier, Produkt, welchen Preis. Und dann können Sie auch passieren oder eine Pfeife machen, die ist, wird eine Währung sein. Also, wenn Sie sich erinnern, haben wir den Preis in eine Pfeife für Währung gesetzt , um es zu stylen und Dollarzeichen dahinter zu setzen. Also lasst uns das retten. Wir würden bemerken, dass wir nichts sehen werden , weil diese Komponente noch keine Eingabe hat. Also haben wir hier keine Daten. Also ist es besser, immer zu sagen, dass, wenn es ein Produkt gibt, wie wenn dies definiert ist, es gibt, dass das Innere es dann diese Komponente zeigt. Ich tue das immer, um Fehler zu vermeiden. Also, wie wir das tun können, können Sie einfach sagen ng-if in diesem ng-wenn Sie nur Produkt sagen. Wenn also ein Produkt mit unseren Daten zu dieser Komponente eingeht, dann zeigt diese Platte, wenn nicht, nichts an, so dass wir es speichern und erneut überprüfen können. Wir werden sehen, dass wir nichts haben, weil wir kein Produkt von zukünftigen Produkten an ein Produkt weitergeben . Also, was wir als nächstes tun werden, ist, dass Feature Produkte. Wir werden sie anrufen. Und dann gehen wir zum Produkt-Artikel oder zum Produkt-Artikel über. Das Produkt selbst, das aus dem Backend von Feature-Produkten stammt. 146. Empfohlene Produkte: Wenn Sie sich in Postman oder im Back-End erinnern, haben wir die Feature-Produkte basierend auf einer gewissen Anzahl erhalten. Wie Sie sich erinnern, haben wir API im Back-End erstellt, die besagt, dass Produkt erhalten und dann vorgestellt wird. Und dann geben Sie an, wie viele Produkte Sie im Front-End zeigen möchten oder zu zeigen, oder zu bekommen Ihre Front-End. Also zuerst möchte ich Ihnen zeigen, wie ich diese API aufrufen kann. Also habe ich es in Postman, wie Sie sich erinnern, haben wir jetzt drei Produkte, die wie die Ost-Featured Flagge ist wahr den ganzen Weg. So wie wir es immer mit jedem Produkt oder mit jedem Service getan haben, die wir die Feature-Produkte nennen können. So können wir die Feature-Produkte innerhalb der Komponente nennen, die wir vier vorgestellte Produkte erstellt haben. Also zuerst muss ich diesen Dienst erstellen. Also zuerst gehe ich zum Produktservice und dann erstellen wir eine neue Funktion. Wir können es nennen, erhalten Sie vorgestellten Produkt. Und dann werden diese Produkte oder diese Funktion für mich beobachtbar zurückkehren. Und das beobachtbare wird Produkt-Array sein, als würde ich mehrere Produkte erhalten, nicht nur eines. Und dann wird dies für mich HTTP-Anfrage zurückgeben und dann erhalten. Und dann können wir wieder angeben, dass wir eine Reihe von Produkten wollen. Also werde ich es auch hier haben. Und dann können wir angeben, was eine URL ist. Es wird genau das Gleiche sein, wie du hier bist. Also können wir all diesen Teil haben und dann werden wir ersetzen, was wir im Backend haben oder wie wir es im Back-End haben. Also haben wir hier die URL, und dann sagen wir, wir müssen bekommen und dann vorgestellten Produkte. Und dann geben wir Konto an. Und dieses Konto, können Sie es dynamisch machen. Sie können es an die gleiche Funktion übergeben, so dass Sie es woanders wieder verwenden können. Also werde ich sagen, hier zählen Nummer. Also werde ich die Nummer zwei übergeben, wenn ich diese Funktion aufrufe. Also werde ich hier sagen, dass ich vorgestellt habe und dann für mich die Zählung angeben. Also werde ich hier zählen müssen. Also in diesem Fall haben wir diese Funktion einige spezifische Konto von Produkten genannt, wie ich brauche drei Produkte vorgestellt. Und dann wird es für mich diese API nennen. So speichern wir das und gehen wieder zu unserer Feature-Produktkomponente. Und wir müssen den Produktservice anrufen. Also müssen wir hier sagen, private Produkt-Service, oder zum Beispiel, prod Service. Sie können den Namen angeben, den Sie hier wünschen, basierend auf Ihrer Fähigkeit, den Code zu lesen. Und dann würde ich sagen, Produkte Service, die von Dienstleistungen kommt, Produktservice. Und dann am Ende können Sie auf Bearbeiten, Ich kann eine Methode angeben, die als auch aufgerufen wird, wie ein privater, können wir sagen, erhalten Sie vorgestellte Produkte. Und dann gebe ich Zählung an, wie wir bereits gesagt haben. So können Sie das Konto hier angeben oder Sie können eine direkt definieren, wenn wir diese Methode erstellen. Also hier werde ich diese Methode erstellen und ich werde privat sagen und dann die Methode angeben. Und dann werde ich sagen, dieser Punkt Produktservice und dann erhalten Sie vorgestellte Produkte. Und dann wird das für mich zum Beispiel Abonnent zurückkehren. Aber zuerst muss ich angeben, wie viele Feature-Produkte ich möchte. Zum Beispiel möchte ich in meinem Fall vier, weil ich vier Produkte in einer Zeile habe. Und dann können wir sagen, abonnieren wie, wenn ihr Wert bereit ist, Geben Sie es mir innerhalb eines Produkts. Und dann werde ich hierher kommen und ich muss die Variable des Produkts angeben, wie wir es immer tun. Also muss ich hier ein Klassenmitglied sein, das Produkte genannt wird. Sie können es auch zukünftige Produkte nennen, die ein Produkttyp sein werden und dann wird es Array sein. Und darin wäre es ein leeres Array. So werden diese Produkte gefüllt werden. Wir werden es in der Vorlage verwenden und dann, wie es gefüllt wird, können wir in diesem Punkt sagen, Produkt ist gleich Produkten, die von abonnieren kommt. Wenn Sie verwirrt sind, können Sie dies umbenennen, Sie können es als gut vorgestellte Produkte nennen. Lassen Sie es uns so umbenennen, um nicht verwirrt zu sein. So haben wir zukünftige Produkte. Und dann ist dies, diese Feature-Produkte sind ein Produkt, die von dieser API oder von diesem Aufruf kommen. Und dann werden wir diese Funktion Produkte im Front-End verwenden. Also muss ich auf die Vorlage gehen und dann werde ich in den Feature-Produkten sagen, bringen Sie für mich jede Spalte ein Produkt und übergeben Sie es an einen Produkt-Artikel. Also hier werde ich sagen, MD4 und dann lassen Produkt, wie ein Produkt von vorgestellten Produkten, wie ich werde durch alle Produkte gehen, die durch diese Funktion Produkte kommen. Und dann werde ich sagen, Pass für mich. Wenn Sie sich in der vorherigen Vorlesung erinnern, haben wir eine Eingabe erstellt, die Produkt genannt wird. Und dann werde ich dieses Produkt an diesen Eingang oder an diese Komponente übergeben. In diesem Fall wird diese Komponente dieses Produkt jedes Mal erhalten, und dies würde viermal ausgeführt werden weil wir vier Produkte aus dem Back-End haben. Und dann wird es auf diese Weise gerendert. Also werde ich zu ihrer Komponente gehen. Und hier wird die Vorlage genau so gerendert, wie wir das Produkt erhalten haben. Also tatsächlich, wir haben vier Komponenten hier genannt werden , weil wir Prediger Produkte für Produkte haben. Also lassen Sie uns alles speichern und überprüfen, ob alles gut funktioniert. Ich klicke auf Alle speichern. Und dann gehen wir zum Frontend und wir werden sehen, okay, großartig, wir haben alle diese Produkte, aber es ist nicht gestylt und wir werden jeden Artikel in der nächsten Vorlesung stylen, wie wir Sie später sehen werden. Aber vor allem, denken Sie daran, dass immer die Fertigstellung des subskapulären Abonnements zu tun. Also hier haben wir ein Abonnieren. Und wie Sie sich erinnern, dass ich, wenn ich mit dieser Komponente gehe, das Abonnement beenden muss. Andernfalls werde ich Speicherleck in Zukunft haben. Um das zu tun, müssen wir gehen und genau machen, wie wir mit jedem Abonnement zuvor gemacht haben, über das ich oft gesprochen habe. Also werde ich das schnell machen. 147. Styling: Okay, hier habe ich das Produkt Artikel gestylt. Ich werde Ihnen den Stil schnell zeigen, wie das CSS, weil ich Ihnen gesagt habe, dass wir uns hier in Angular konzentrieren. So ist der Styling-Teil für uns wie nur Sekundärteil. So kann ich es schnell erklären, wenn Sie bereits Erfahrung mit CSS haben. So konzentriert sich unser Kurs hier nur auf Angular und wie wir unser Projekt richtig strukturieren können. Aber natürlich kann ich Ihnen schnell das CSS zeigen, um den Kurs nicht Boarding und länger zu machen. So kann ich den Code direkt vom CSS mit Ihnen teilen. Also zuerst habe ich hier eine Produkt-Element-Komponente oder Styling-Datei, die ich in unserem öffentlichen Style-Ordner erstellt habe, wie wir vorher vereinbart haben, dass wir den öffentlichen Stil in den Bibliotheken haben. Und diese Bibliothek ist, dass jede Bibliothek ihren eigenen öffentlichen Stil für jede Komponente hatte , die sich in dieser Bibliothek befindet. Also hier haben wir den Produkt-Artikel, den ich erstellt habe. Und wie Sie sich in der Vorlage des Produktes erinnern, wenn Sie wieder zum Produkt Artikel gehen, haben wir hier Artikel und dann Produkt Artikel Wrapper, und in ihm habe ich Bild und dann Name, Preis und et cetera. Also gehe ich wieder zum Stil, also werde ich dir zeigen, dass ich den Wrapper habe. Ich gebe ihm eine Hintergrundfarbe, um diesem grauen Hintergrund hier zu geben. Und auch ich gebe eine Grenze, denn wenn Sie es bemerken, haben wir hier ein bisschen Grenze. Und auch gab ich Border-Radius-Anzeige-Flex, weil ich diese Elemente in der Mitte untereinander ausrichten möchte. Also haben wir einen Flex, alle von ihnen zentriert, rechtfertigen auch ihren Inhalt. Center, wie alle von ihnen in der Mitte, in der Mitte der Box. Und wie biegt die Richtung Spalte ist, wie ich sie nicht nahe beieinander wollen, aber ich möchte sie von oben nach unten Spalten. Wie Sie hier sehen, haben wir auch minimale Höhe, um ihnen alle die gleiche Höhe zu geben, wie diese Box wird die gleiche Höhe haben. Und dann am Rand oben, schiebe ich den Code ein wenig, oder diese Komponente von oben, ein wenig, etwa 85 Pixel. Okay, das Bild selbst, wir haben es als Breite. Hier. Wir haben 60% ihrer oberen, weil es in der Wrapper ist. So werden wir nicht die volle Breite des Bildes haben, aber wir haben 60 Prozent ihrer oberen hier. So wird es so und in der Mitte sein, weil wir hier Rechtfertigungs-Inhalt-Zentrum angegeben haben und der Rand oben minus 85. Warum habe ich das getan? Weil ich es aus dem Wrapper schieben möchte. Also gab ich ihm einen Rand oben, wie der Bildrand oben, schieben Sie es aus dem reiferen 85 Subpixel. Der Name, den ich gab es ein wenig wie Rand, oben und unten. So wird es 10 Pixel sein, vom Bild-Editor-Bit und auch vom Preis entfernt zu sein. Und sie dann den Preis. Ich gab ihm eine Primärfarbe, die unsere primäre Farbvariable wir zuvor definiert haben, einige Schriftgröße und wie wir 0 Rand, weil es anfänglich diese H1 oder h5 kommt, zunächst mit einigen Rändern. Also mache ich sie zu 0. Und das Ende, Ich habe die Taste, wie Sie hier sehen, Ich überschreibe es den Knopf mit der Styling-Datei oder dass die Styling-Klasse wir hier haben, Stilklasse der Schaltfläche und ich habe In den Warenkorb. Also überschreiben wir es, dass. Und dann gingen wir hierher und wir gaben wie das Styling. Ich ging zum Styling und ich gab Hintergrundfarbe wird Primärfarbe sein. Es ist, als ob ich es die Farbe und dann den Rand überschreibe und ihm 0 gebe. Ich will keinen Rand und ich gebe ihm mehr Border-Radius basierend auf dem Design, wie ich es habe. Und dann habe ich diese Datei in Produkte SCSS exportiert oder importiert. Und dann diese Datei Produkt SCSS, die alle Stile enthalten, importierte ich es in und Sie kaufen, die wir bereits in den Import für Lippen importiert haben. Und dann werden wir sehen, dass das Styling so aussehen wird. So ist das Styling ziemlich einfach. Wir müssen es nicht kompliziert machen. Wir verfolgen das Design so, wie es ist. Und dann werden wir in den Einkaufswagen Button machen, wenn wir mit dem Warenkorb arbeiten. 148. Styling: Hallo und willkommen zurück. Jetzt in diesem Abschnitt werden wir die Produktlistenkomponente oder die Produktseite erstellen . Also, wenn der Benutzer, wenn er auf der Homepage ist und er zu den Produkten geht, wird er diese Liste des Produkts sehen. Und wie Sie sehen, dass wir einige Komponenten verwenden, die wir zuvor erstellt haben. Wir haben diejenige verwendet, die wir für zukünftige Produkte erstellt haben, die als Produkt Artikel bezeichnet wird, und wir werden es innerhalb der Produktliste verwenden. Darüber hinaus werden wir einige Filterung für die Produkte durchführen. Wenn Sie sich erinnern, haben wir Kategorien und die Kategorien können wir auswählen, welche Kategorie ich anzeigen möchte. Und in diesem Fall, meine Produkte, werden sie gefiltert. Also fangen wir an, das zu tun. Wie Sie sehen, haben wir zwei Spalten, eine Spalte für die Kategorien und eine Spalte für die Produktliste. Und in der Produktliste gibt es drei Spalten. Lassen Sie uns das tun und mit dieser Liste beginnen. Und wir werden zuerst alle Produkte präsentieren, die wir im Shop haben. Und danach werden wir weiter nach Kategorien filtern. 149. Produkte Seite Wiederverwendung von Komponenten: Okay, so wie Sie sich erinnern, haben wir den Link erstellt, der sich auf die Produktliste bezieht. Und diese Produktliste befindet sich in unserer Anwendung. Wir haben hier in den Quellen, wir haben einige Seiten und diese Seiten, unsere Homepage und wir haben Produktliste erstellt. Aber basierend auf der neuen Architektur, die ich vorgeschlagen habe , dass wir mehrere Jobs erstellen werden, dann müssen wir diese Produktliste in die Produktbibliothek verschieben. Also werden wir es nicht nur dafür verwenden und Sie einkaufen, vielleicht werde ich auch ND-Shop haben. Also werde ich wieder die Produktlistenkomponente verwenden. In diesem Fall werde ich die Anwendung in meinem Code haben. Es ist besser, ihre Produktliste in die Produktbibliothek zu verschieben, wie wir hier sehen, dass wir Produktbibliothek haben und wir alle gemeinsam genutzten Komponenten hier finden. So können wir auch hier eine kältere erstellen, die Seiten genannt wird. Und in diesem Ordner Seiten, werden wir die Produktliste Seite zu setzen. Also lasst uns zuerst diese Komponente löschen. Ich werde es loswerden. So haben wir nun die Komponente gelöscht und vergessen Sie nicht, sie auch aus dem Anwendungsmodul zu löschen , wo wir diese Komponente aufgerufen haben werden. Daher entfernen wir immer die Komponenten aus dem zugehörigen Modul. Also entfernen wir es. Und auch, wir werden diesen Weg entfernen. Und wir werden diese Kind-Puffer verwenden, wie wir es mit der Login-Seite getan haben. Also lasst uns das auch entfernen. Und wir werden den Import entfernen, weil er nicht mehr existiert. Also jetzt sind wir sauber und bereit für den Beginn der Arbeit. Lassen Sie uns zunächst eine neue Komponente generieren, die sich in ihrer Produktbibliothek befinden wird. Also zuerst werde ich nach Komponente suchen. Und dann befindet sich diese Komponente in einem Ordner, der Seiten genannt wird. Und innerhalb dieser Seiten werde ich zum Beispiel die Produktliste nennen. Also würde ich sagen, Produkte Liste, sorry, Liste. Und dann werde ich in das Projekt oder die Bibliothek setzen, die Produkte genannt wird. Und wir werden vor allem exportiert, weil wir es auch in der Anwendung verwenden werden. Oder und dann werden wir Inline-Stil haben, um nicht wie eingebettetes CSS zu haben. Also müssen wir auch diese Tests überspringen, wie wir es immer getan haben. Also haben wir hier das überspringen, dies und der Selektor ist auch. Wir werden verwenden oder wählen Sie die selektive basierend auf unseren Regeln in Island, und wir nennen es direkt Produkte Liste. Also in diesem Fall können wir diesen Befehl ausführen und zu unserer Komponentenbibliothek oder zur Bibliothek gehen , die Produktbibliothek ist. Und wir werden sehen, dass die Seiten hier erstellt wurden, die Produktliste ist. Nun, wenn Sie wissen, dass, wenn ich hierher gehe, ich Fehler in der Konsole haben werde, weil ich dies nicht oder diese Route mehr sehen kann. Also, wie können wir das lösen? Wenn Sie sich erinnern, haben wir das Gleiche genau mit dem Login gemacht. Wenn Sie sich erinnern, haben wir die Login-Komponente. Und im Modul des Benutzers habe ich diese Login-Seite verwiesen und Routen für Kinder verwendet , wie wir es genau mit dem Login getan haben. Also lassen Sie uns das Gleiche auch mit dem Produkt machen. Also zunächst muss ich sicher sein, dass ich das Produktmodul importiere, das im Anwendungsmodul im Motorenshop sein wird. Also müssen wir das überprüfen, okay, wir haben die Produkte nicht, wir haben sie hier. Wir haben Produkte Modul. Jetzt, im Produktmodul, werde ich Routen erstellen. Okay, gehen wir zum Produktmodul. Und im Produktmodul werden wir wieder eine Konstante schaffen, wie wir es vorher gemacht haben. Also nennen wir es Routen. Und diese Routen werden einen Typ Routen haben. Und dann werden diese Routen den Wert von Array haben. Und jedes Array oder jedes Mitglied dieses Arrays wird ein Objekt sein. Und das erste Objekt, das wir haben werden, ist der Weg, der Produkte genannt wird. Also, wenn ich dieses Modul anrufe, und dann gehe ich in meine Seite zwei Produkte, dann wird es hier umgeleitet weil ich dieses Modul im Anwendungsmodul aufrufe. So werden alle Routen, die hier hinzugefügt werden, auch in der Anwendung definiert. Also lasst uns das machen. Wir haben hier Produkte und wir werden die Kartierung als Kinder haben , wenn Sie wollen, oder Sie können den Weg so genau wie Sie hier wollen. So können Sie zum Beispiel Komponente sagen und dann können Sie die Produktlistenkomponente importieren. Also lassen Sie es uns vorerst so behalten. Und ich werde die Kinder später benutzen, wenn wir die Kategorien Seite Garth haben und auschecken, et cetera. Also zuerst, lass es uns so machen. Also, wenn ich zu den Produkten gehe, muss ich den Köder oder Produktliste Artikel sehen, den ich erstellt habe, aber in der Produktbibliothek. Zunächst einmal müssen wir auch diese Route nutzen, wie wir sie nutzen werden. Also, wenn Sie sich erinnern, wir rufen ein Router-Modul, aber in unserem gesamten Modul wird rein hier verwendet, aber wir müssen ihm eine Eigenschaft geben, die für Kind aufgerufen wird, und dieses Kind wird die Routen akzeptieren. Also in diesem Fall sage ich, dass dieses Produktmodul Kind des Anwendungsmoduls ist und es es verwendet es Routen. Also, wenn ich jetzt zu meiner Anwendung gehe und auf Produkte klicke, okay, ich habe Produktliste Arbeit, die sich in ihrer Produktbibliothek befindet. In meiner Bewerbung habe ich also nur eine Route, die zum Beispiel die Homepage ist. Und dort meine Produkte Modul, Ich habe ihre Route für die Produkte. Also alle Produkte Liste. Also hier haben wir Produkte. Wir gehen auf diese Route Produkte. Und dann werde ich sehen, dass ich wirklich auf Produktlistenkomponente gerichtet bin. Also wählen wir jetzt diese Komponente und machen es funktioniert. So werden wir auf der rechten Seite haben, wie die Produktliste, und auf der linken Seite werden wir die Kategorieliste haben. Wir müssen also Dienstleistungen, Kategorien und Produkte anrufen. Und die beiden haben wir sie schon gemacht. Also lasst uns hier gehen und unsere Komponenten definieren. Also zuerst werde ich dieses Gitter verwenden, damit wir alles in ein div einwickeln und ihm einen Namen geben können . Wir können sagen, Produktliste oder Produktseite. So können wir, es liegt an Ihnen und wir können es so einen Namen geben. Und dann werden wir das div haben, das B-Gitter genannt wird, um wie eine Reihe von Rastern zu haben. Und dann werden wir zwei Spalten haben. Also wird man drei Spalten haben. Also haben wir hier P, nennen drei, die die Kategorien enthalten wird. So können wir hier Kategorien sagen. Und auch, wir werden ein anderes div für den Artikel selbst haben. Also haben wir hier div und P Aufruf an es wäre der Rest. 12 minus drei werden neun sein. Also werden wir die Produkte hier setzen. Also lassen Sie uns sparen, um sicher zu sein, dass alles funktioniert. Also gehe ich hier zu meiner Anwendung perfekt, ich habe hier Kategorie und ich habe hier die Produkte. Beginnen wir also mit den Produkten. Wenn Sie sich erinnern, haben wir in unseren Produkten so etwas wie eine Komponente erstellt , die als Produkt Artikel bezeichnet wird. Und dieses Produkt, wir nannten es überall, zum Beispiel in vorgestellten Produkten. Also werde ich das gleiche verwenden. So können wir genau das Gleiche tun, was wir getan haben. Also haben wir hier wie Produkt Artikel, aber zuerst, teilen wir es. Also haben wir in diesem div, wir werden ein anderes Raster haben. Also div dot grid oder p grid. Und in dieser B-Klasse werden wir mehrere Spalten haben. Also Paar Reihe, es wird drei sein. Also werde ich P-Aufruf haben. Also in diesem, so werden wir drei Spalten haben. 12 geteilt durch 4 werden drei Spalten sein. Also gehen wir hier, um unseren Produkt-Artikel zu verwenden. So haben wir hier das Produkt Artikel. Aber zuerst müssen wir dafür die Produkte übergeben. Also müssen wir erneut den Produktservice anrufen, nicht Feature Produkt, aber wir werden den Produktservice nutzen, alles davon. Und dann können wir in der Lage sein, über die Produkte zu schleifen und Produkte zu bekommen. Und hier wird es mehrmals wiederholt und es wird mein Produkt auflisten. Also lasst uns das machen. Also gehe ich hierher und rufe meinen Produktservice an. Also würde ich hier sagen, private Produkt-Service. Und hier werden wir wieder Produktservice haben. Und wir werden ein Klassenmitglied definieren, das Produkte genannt wird. Also wird es mein altes Produkt enthalten, es wird Art von Produkt sein und es wird Array sein, und am Anfang wird es leer sein. Also hier werden wir Methode haben, die aufgerufen wird, können wir sagen, bekommen Produkte und wir werden diese Methode zu implementieren. Also zuerst werde ich hier als private gute Produkte haben. Und das bekommt Produkte den Produktservice nutzen. Also werde ich sagen, diese Punkt-Produkt-Service, dot get Produkte. Wir haben diese Methode bereits definiert, als wir die Admin-Anwendung erstellt haben. So können wir es hier wieder benutzen. Also werde ich hier abonnieren. Und dann nach dem Abonnement, würde ich die Produkte bekommen. Sich selbst aus dem Backend. Und dann diese Produkte, Ich werde sie den Produkten oder dem Klassenmitglied zuweisen , die ich zuvor definiert habe. So kann ich es erreichen sagen, dieses Produkt und dann verwenden Sie die Response-Produkte so kann ich einen Namen wie Risikoprodukte nur für Sie geben, um nicht zwischen Namen verwechselt werden. Also werden wir das diesem Array zuweisen. Danach gehen wir zur Vorlage. Und dann in der Vorlage werden wir MD4 sagen. Genau so haben wir die Dinge vorher gemacht. Wir haben es im Detail erklärt. Also sagen wir, lassen Sie Produkt von Produkten, die ich in meiner Anwendung oder als Klassenmitglied definiert habe, und dann schleifen Sie es und zeigen Sie für mich den Produktelement. Also lassen Sie uns das speichern und zur Anwendung gehen. Und wir werden sehen, dass wir nichts haben weil ich denke, dass ich die Vorlage nicht gespeichert habe oder nein, vielleicht habe ich das Produkt nicht zugewiesen. Also habe ich hier Produkteingabe, wie Sie sehen. Und dann muss ich ihr Produkt zuweisen, das ich von der for-Schleife bekommen habe. Also hier habe ich Produkt, und dann werde ich diese Produkte hier zuweisen. Also, wenn wir wieder auf die Anwendung gehen und wir werden sehen, dass wir alle unsere Produkte aufgelistet haben und das Produkt Artikel verwenden, die wir zuvor erstellt haben. Um manchmal Fehler zu vermeiden, können die Produkte nicht bereit sein. Es ist also besser, sie nicht anzuzeigen, bis die Produkte wirklich fertig sind. Also müssen wir hier sagen, ng-if Produkte. Wenn also Produkte bereit sind, wird dieses Raster erstellt. Und dann werden wir die Produkte für jeden Produkt-Artikel durchlaufen, wie wir hier sehen. Jetzt haben wir alle unsere Produktliste bereit, wir werden jetzt die Kategorien erstellen. Kategorien werden also genau die gleichen sein. Ich werde die Kategorie Service anrufen. Also würde ich hier privat sagen. Und dann werde ich sagen Kategorie Service. Und dann wird der Kategorie-Service aufgerufen. Und hier werden wir auch sagen, dies obwohl, GetCategories. Also werden wir nicht nur Produkte bekommen, wir werden auch Kategorien bekommen. Also hier nennen wir diese Methode. Wir werden diese Methode erneut erstellen. Also haben wir hier getCategories privat und dann getCategories. Und die GetCategories, werden wir einen gatt Service und diese Kategorie Service verwenden. Es wurden für mich alle Kategorien zurückgegeben. Und dann abonnieren wir. Und dann werden wir die Antwortkategorien haben. Zum Beispiel wird eine Antwort. Und dann werden wir eine Variable oder ein Klassenmitglied definieren. Wir nennen es Kategorien. Es wird eine Typkategorie haben und es wird Array ebenso initialisiert wie ein leeres Array. Und dann werden wir diese Variablenkategorien unseren Antwortkategorien zuweisen. Also haben wir hier Antwort bekommt. Danach werden wir es im Front-End verwenden. Wenn Sie sich erinnern, haben wir Spalte vier Kategorien. Also werde ich hier zum Beispiel H4 haben, und ich werde hier Kategorien sagen. So können Sie ihm einen Titel auf der Oberseite geben. Und dann werde ich das Prime Ende der Checkbox verwenden. Wie Sie hier sehen, haben wir Prime NG-Komponente, die als Checkbox verwendet wird. Also können wir das auch verwenden. Also lasst uns das grundlegende wie dieses verwenden. Also zuerst können wir diesen Teil in die Quellen kopieren. Wir können hier ein div haben, und dies wird ein Feld haben, und es wird NG-Modell-Eingabe-ID haben. Und ich werde sehen, wie wir das vorbereiten können. Also werden wir hier im Feld selbst haben. Aber P Checkbox ist nicht wichtig, weil wir Checkbox-Modul in unser Produktmodul importieren müssen , nicht in das Anwendungsmodul, weil wir diese Komponente innerhalb des Produktmoduls haben. Also lassen Sie uns das auch importieren. Am Ende ihrer Importe werde ich wie Checkbox-Modul sagen. Und dieses Checkbox-Modul mit kommen von Prime NG Checkbox. So können wir auch hier importiert, Import und sagen Kontrollkästchen Modul von Prime und g Schrägstrich Checkbox. Also haben wir jetzt das Checkbox-Modul. Und wenn wir zur Anwendung gehen, werden wir sehen, dass wir den Fehler hier nicht mehr haben. Also jetzt werden wir dieses Kontrollkästchen verwenden und wir werden die Kategorien durchlaufen. Also wieder, wir müssen hier NG vier haben, Ich werde n 24 und diese MD4 Lead Kategorie sagen. Also werde ich alle Kategorien durchlaufen. Also würde ich sagen, dass Kategorien von Kategorien, die ich zuvor definiert habe. Also zuerst werde ich sagen, dass dieses Kontrollkästchen haben wird, wird binär sein, wie wahr oder falsch. Und es wird, oder die ID wird sein, wir können es als Eingabe setzen. So können wir hier Kategorie Punkt ID setzen. Also werde ich haben, die Eingabe wird diese ID haben, und dann können wir wie ein Etikett nicht überprüft geben, aber wir können Kategorie Punktnamen zum Beispiel geben. Also in diesem Fall werden wir diese Kategorie Punktnamen als Checkbox angezeigt. Und hier für, es war hier für binäre. Also müssen wir es in Kategorie-ID ändern. Also in diesem Fall werden wir hier KEINE Eingabe-ID wie vor der Binärdatei haben. Es wird die Kategorie-ID sein. Also die vier, also wenn Sie auf das Etikett klicken, wird es aktiviert oder deaktiviert das Kontrollkästchen. Also hier müssen wir auch sagen, geben Sie mir die Kategorie-ID. Nachdem wir das gespeichert haben, gehen wir zur Anwendung und wir werden sehen, ob wir alles schön haben. Wir haben nun die Kategorien als Checkboxen aufgelistet. Auf diese Weise werden wir unseren Filter erstellen, den wir in der nächsten Vorlesung sehen werden. 150. Produkte nach Kategorie filtrieren: Okay, jetzt in diesem Vortrag werden wir nach Kategorie filtern. Also, wenn ich zu meiner Demo, die ich bereits vorbereitet habe, Ich möchte Ihnen zeigen, wie ich werde filtern, wie Sie hier sehen, wenn ich auf Mehr klicke, während ich nur mobil sehe, aber wenn ich auch auf Schönheit klicke, dann werde ich eine Schönheit und Handy zusammen haben. Also in diesem Fall brauchen wir so etwas wie kombinieren alle diese Kategorien IDs, und senden Sie sie an das Back-End. Und das Backend wird mit mir mit diesen Kategorien IDs für diese Produkte antworten. Also gehen wir zurück zu unserer Anwendung, werden wir zuerst etwas implementieren. Wenn ich auf dieses Kontrollkästchen klicke, passiert etwas. Also lasst uns das machen. Also zuerst gehen wir zu der Vorlage und wir werden sehen , dass wir hier Checkbox haben und wir haben hier einen Fehler. Dies ist NG-Modell ist nicht bekannt Eigenschaft von Peak Checkbox. Warum? Da wir auch Formulare Modul importieren müssen, Foren-Modul einschließlich der, natürlich das NG-Modell. Also haben wir hier Formulare Modul. Und in diesem Fall wird der Fehler verschwinden. Okay, jetzt haben wir das schon. Was wir also tun werden, ist im Wandel. Wenn sich dieses Kontrollkästchen ändert, heißt es, dann werden wir filtern. Also werde ich hier eine Methode haben, die onchange genannt wird. Und es kommt als Eigenschaft oder Ausgabe-Eigenschaft von diesem Kontrollkästchen. Also lasst uns das hinlegen. Wir brauchen es nicht mehr so, um mehr Platz zu haben. Und jetzt werde ich sagen, onchange, okay, Kategorie-Filter. Also haben wir hier Kategorie Filter. Und ich werde diese Methode definieren. Gehen wir also zur TypeScript-Datei. Und wir werden hier öffentliche oder direkte Methode haben, die Kategoriefilter genannt wird. Und jetzt müssen wir Log wie etwas trösten. Zum Beispiel, sagen Sie console.log Kategoriefilter, zum Beispiel. Um sicher zu sein, dass alles gut funktioniert. Also habe ich hier Kategorie Filter. Ich gehe zu meiner Anwendung, öffne die Konsole erneut und überprüfe, ob wir perfekt sind. Also haben wir Kategorie-Filter. Wie Sie sehen, nachdem ich das NG-Modell hinzugefügt habe, sehen wir, dass alle überprüft werden. Eins, ich habe einen Scheck. Dies liegt daran, dass ich eine Variable für jedes Modell definiert habe. Wenn diese Variable wahr ist, werden sie alle durchkommen, wie alle diese Kontrollkästchen, die in dieser MD4-Schleife generiert werden , folgen dieser Variablen. Also brauchen wir etwas Getrenntes. Wir müssen das für jede Kategorie angeben. Dafür muss ich für jede Kategorie ein Feld erstellen, das als checkt bezeichnet wird. Also, wenn dieses Feld aktiviert ist oder nicht. So können wir das auch tun, wenn wir zum Kategoriemodell gehen oder wenn ich sage, zum Beispiel, Kategorie Punkt überprüft. Aber ich werde hier einen Fehler bekommen, weil es kein Feld in der Kategorie namens überprüft gibt, also müssen wir das hinzufügen. Aber in diesem Fall sehe ich, dass diese überprüft für jede Kategorie wahr oder falsch sein werden. Also, um es mehr zu erklären, lasst uns das tun. Also zuerst werde ich diese Überprüfung definieren. Ich werde zu den Modellen gehen, die wir zuvor definiert haben. Also haben wir hier Kategorie und in dieser Kategorie werde ich überprüft haben. Und es wird optional mit einem booleschen Wert sein. Also, wenn wir hierher gehen, werden wir diesen Fehler nicht mehr haben. Und dann in der Kategorien-Fußzeile, werde ich die Kategorien zeigen. Also im Allgemeinen, So werde ich hier sagen, Konsole protokollieren diese dritten Kategorien. Also haben wir hier, um diese Ladekategorien. Also möchte ich nicht nur sehen, dass alle Kategorien bei jedem Klick auf das Kontrollkästchen ich hier habe. Also lassen Sie uns das auch schließen. Und jetzt, wenn ich auf Scheck klicke, sehe ich, dass sie alle überprüft werden, weil ich nicht gespeichert habe. Ich vergesse immer das Sparen. Also gehen wir wieder zur Anwendung zurück, sie wird neu geladen. Wenn ich zum Beispiel auf Handy klicke, werde ich hier zu diesem Konsolenprotokoll gehen und ich werde mehr prüfen, während und es öffnen. Und ich werde durchgecheckt sehen. Das ist sehr gut. Aber hier, wenn ich zu dieser Kategorie gehe, die die Schönheit genannt wird, habe ich dieses Feld nicht vollständig. Und jetzt lassen Sie uns alle entfernen, schließen wir diesen Teil oder entfernen Sie die Konsole und deaktivieren Sie das Handy. Also, wenn ich sie überprüfen wollen, während und dann hier gehen, werde ich sehen überprüft ist falsch und die anderen sind, hat nichts. Auf diese Weise kann ich nicht sagen, dass ich oder ich basierend darauf filtern kann, welche Liste oder welche Kategorien überprüft werden. Und dann kann ich ihre Ideen bekommen und sie dann an das Backend schicken, um die gefilterten Produkte zu bekommen. Also müssen wir diesen Hund übersetzen. Also zuerst muss ich nur die gefilterten oder die ausgewählten Kategorien erhalten. Wie kann ich das machen. Also werde ich Kategorie Filter. Wir gehen hier, ich werde wieder anrufen, die Produkte bekommen, aber mit einigen Filtern. Also mit Ideen von Kategorien, die ich an das Back-End weitergeben möchte. Aber vorher machen wir zum Beispiel eine Liste ausgewählter Kategorien IDs. So können wir eine Liste von Kategorien IDs haben. Also auf Kategoriefilter, werde ich eine Konstante haben. Zum Beispiel nenne ich es ausgewählte Kategorien, zum Beispiel. Und in diesen ausgewählten Kategorien wird es diese Punktkategorien sein. Sie bemerken also nicht jeden Klick, wenn ich auf den Kategoriefilter klicke, dieser wird ausgeführt. So ausgewählte Kategorien, Ich werde filtern, Kategorien filtern. Also, wie ich dies filtern werde, filtert Array oder wir werden das Array filtern. In diesem Fall wird es für mich nur die Kategorien filtern und zurückgeben, die überprüft werden, was das Feld durchsucht hat. Also, wie können wir das tun? Also werde ich hier sagen Filter und dieser Filter, es wird für mich zurückkehren oder ich kann von ihm Kategorie, Kategorie eins nach dem anderen bekommen . Und mit der Pfeilmethode direkt werde ich sagen, Rückkehr für mich Kategorie, die überprüft wird. Also, wenn sie Kategorie aktiviert ist, dann geben Sie es zurück und legen Sie es dann in ausgewählte Kategorien. Also, nachdem wir das tun, lassen Sie uns die ausgewählten Kategorien zu protokollieren, um zu sehen, ob wir wirklich nur die ausgewählten Kategorien erhalten. Also gehen wir hier, Konsolenprotokoll. Ich verwende gerne Konsolenprotokoll. Ich kann auch einen Debugger verwenden, aber ich mag Konsolenprotokoll, weil ich die Ergebnisse nicht live vor mir sehen kann. Wenn Sie also möchten, können Sie auch den Debugger verwenden. Also, aber jetzt haben wir hier die ausgewählten Kategorien. Ich werde jetzt auf Handy klicken. Okay? Ich habe nur das Handy. Das ist sehr großartig. Also lassen Sie uns wieder reinigen, klicken Sie auf Schönheit und Computer. Ich werde drei Punkte überprüfen lassen. Aber ich habe nicht alle Kategorien bekommen, was so gut ist. Und wenn Sie hier überprüfen, werden Sie alle von ihnen durchsucht sehen. Und jedes Mal, wenn ich auf Scheck klicke, habe ich wieder die Kategorien reduziert. Also sind sie jetzt zwei. Ich habe Mobilgeräte und Computer nur überprüft. Das ist sehr gut. Also jetzt brauchen wir nicht nur ausgewählte Kategorien, die Sie hier sehen, ich kehre zurück alle Kategorien. Ich möchte nur die ID zurückgeben. Also in diesem Fall haben wir hier, der Filter kehrt für mich Array zurück. Wie Sie sehen, geben wir hier Array zurück. So kann ich durch dieses Array kartieren und es wie eine neue Form wieder geben. Also werde ich wie wieder Kategorie sagen, aber nicht Kategorie selbst oder für mich zurückgegeben, aber für mich nur die Kategorie und ID zurückgeben. In diesem Fall würde ich nur die Kategorie-IDs in ausgewählten Kategorien erhalten. Also lasst uns das noch mal versuchen. Also werde ich hierher gehen, mobil. Also habe ich die Idee von Computern der mobilen Kategorie, okay, ich habe zwei IDs. House, nett, ich habe drei Ausweise. In diesem Fall wählen oder sammeln wir die Ideen ausgewählter Kategorien. Jetzt müssen wir sie an die API übergeben und die Produkte zurückgeben , die diesen Kategorien zugeordnet sind. Und wenn wir zum Postboten gehen, wenn Sie sich erinnern, wurden wir an das Backend die Kategorien als Abfrageparameter übergeben. Also, wenn ich eine Anfrage mit senden, um ihre Produkte waren und wenn diese Anfrage Kategorien oder Kategorien Ideen hat, dann wird es für mich basierend auf den IDs filtern, die in dieser Anfrage übergeben werden. So können wir das leicht machen. Also kann ich hier im Menschen haben, die Kategorien oder wir können ihren Schlüssel haben, der Kategorien genannt wird. Wenn Sie sich erinnern, haben wir das erschaffen. Und die Werte sind die Kategorien, die durch Komma getrennt sind. So können wir auch diese Kategorien haben. So können wir hier zum Beispiel gehen, wir können den ersten abholen und wieder zum Postboten gehen. Und wir können zum Beispiel passieren, lasst uns jetzt eins bekommen. Also werde ich die Produkte haben, nicht alle von ihnen. Ich werde nur die Produkte haben, die diese Kategorie haben. Also, wenn ich klicke, werde ich bekommen, Goodie von den Telefonen. Also werde ich Produkte oder zwei Produkte haben, die Telefone genau so sind , wie wir es im Front-End in der Demo haben. Also, wenn ich eine andere Kategorie gebe, wie zum Beispiel, wenn ich Komma setze und dann lass uns die Kategorie einer anderen bekommen. Also können wir hier wieder zum Postman gehen und dann mit einem Komma, einer anderen Kategorie übergeben. Dann bekomme ich perfekte zwei oder viele Produkte basierend auf ausgewählten Kategorien. In diesem Fall müssen wir unseren Produktservice anpassen, um auch oder frühere Kategorien durch sie in das Backend zu bekommen . Also, wie wir das im Frontend machen können. Also nach dem Filtern oder Kategoriefilter, muss ich die Produkte wieder bekommen. Ich möchte das noch einmal anrufen und dann werde ich das Produkt selbst aktualisieren. Also, wie können wir das tun? Lassen Sie uns zunächst dieses Konsolenprotokoll entfernen. Und dann werde ich hier sagen, dass für mich dieses Punkt-Produkt anrufen oder Produkte erhalten, aber mit Kategorien Filter oder ausgewählte Kategorien. Also hier haben wir bereits Array von ausgewählten Kategorien, Array von IDs, und wir werden es hier übergeben. Also muss ich auch zu diesem Methodenparameter hinzufügen , der Kategorien sein wird, zum Beispiel ausgewählte Kategorien, oder wir können es nennen Kategorie ist Filter. So können wir hier Kategorien haben. Filter. Und diese Kategorie ist Filter haben, zum Beispiel, optional und es wird String sein, Array von Strings, weil wir unsere Kategorien gefiltert haben und wir nur die ID zurückgeben, wie Sie sich erinnern. Also jetzt haben wir die Kategorien Filter. Wir müssen es jetzt an unseren Produktservice weiterleiten. Also müssen wir gehen, um Produkte zu bekommen und dann zu diesem Filter und dann an das Backend senden. So Kategorien Filter ist in dieser Methode nicht definiert. Also müssen wir auf diese Methode in unserem Produktservice gehen und angepasst, um auch die Goodies Filter zu akzeptieren. Und dieser Kategorie-Filter wird Array von Strings sein. So können wir auch die Möglichkeit haben, die guten Produkte, die wir in der Admin-Panel-Anwendung erstellt haben, nicht zu zerstören . Also hier haben wir es optional. Also, wenn Sie einige Kategorien übergeben, dann, okay, es wird Ihnen die gefilterten Produkte geben. Aber wenn Sie nichts passieren, dann wird es Ihnen das ganze Produkt geben. Der Typ dieses Feldes wird also string sein, und es wäre ein Array von String. Also jetzt werden wir diese HTTP-Anfrage übergeben. Wie können wir das machen? Zunächst einmal müssen wir definieren, zum Beispiel, Variable, die params genannt wird. Hier verwende ich lead, nicht const, weil ich es in den nächsten Zeilen ihres Codes ändern werde. Dies wird also ein neuer HTTP- oder HTTPS-Kleinbuchstaben sein. Das sind also Bomben, die von Angular kommen und diejenigen, die Sie aus der eckigen Core-Bibliothek oder HTTP-Bibliothek aufrufen können. Also das params, wir werden sie an ihre Anfrage weiterleiten, genau wie wir es mit Postman gemacht haben, wie ich hier arbeite, Abfrageparameter. Und im Frontend, wie wir das übergeben können, verwenden wir HTTP-Parameter. Okay, hier haben wir die Handflächen sind durch Komma getrennt. Also müssen wir das auch tun. Also lassen Sie uns überprüfen, ob es Kategorien Filter gibt. So können wir sagen, wenn Kategorien Filter wie wir Kategorien Filter übergeben haben , um nicht zu zerstören, so gut, dass ich Ihnen die Admin-Panel-Anwendung gesagt. Dann werde ich sagen, dass params params dot the band sein. Hier müssen Sie einen Parameter anhängen, der Kategorien genannt wird. Genau wie wir es mit einem Postboten gemacht haben. Also hier haben wir Kategorien. Und dann werden diese Kategorien was sein? Sie werden Kategorien Filter sein, die ich vom Frontend oder vom Benutzer oder von den Kontrollkästchen erhalten habe. Es wird die Kategorie-ID enthalten, aber es ist Array. Also müssen wir dieses Array verbinden, um eins zu sein, wie zum Beispiel, um ID oder ID der Kategorie Komma ein anderes, Komma ein anderes zu sein. Es ist also sehr einfach. Sie können ein Array von Strings verbinden, indem Sie diesen Array-Punkt-Join sagen. Und dann können Sie angeben, was Sie auf der Grundlage von Komma verbinden möchten, basierend auf Punkt oder basierend auf Zitat. Also musst du nur Komma sagen. In diesem Fall werden diese Kategorien die Form davon haben. So sparen wir das und wir sparen auch hier. Also lasst uns überprüfen, ob wir wirklich die richtigen Dinge tun. Also möchte ich zum Beispiel die Parameter in der Konsole protokollieren. Also können wir hier Konsolenpunktprotokoll haben, und dann können wir die Parameter übergeben. Also, und jetzt gehe ich zur Anwendung Checkbox, eine Kategorie, okay, ich habe hier einen Array-Parameter aktualisieren, und wir haben ein Muster. Also, wenn Sie hier begegnen Encoder gehen, haben wir die param bereits definiert ist. Also wieder, wenn ich klicke, bekomme ich auch den HTTP-Patch. Sind innerhalb von HTTP-Parametern begrenzt, die über ihre Anfrage gesendet werden. Ich werde Ihnen zeigen, wie Sie die Anfrage sehen können, ist Br Dinge oder Aufforderungen oder nicht. Aber im Moment gehen wir auf den richtigen Weg. Also sicher, dass wir die Kategorien oder die Kategorien ID übergeben , um Produkte zu erhalten, und wir übergeben es, um Produktservice zu erhalten. Und diese guten Produkte pro Service zurückgegeben für mich, die Produkte. Aber jetzt die Anfrage, wie Sie hier sehen. Also, wenn ich zum Beispiel hier klicke, klicke ich, wenn ich wieder ins Netzwerk gehe. Also versuchen wir es noch einmal. Lass uns dieses Netzwerk säubern. Ich klicke hier, ich schicke, wie Sie sich erinnern, eine Anfrage. Also sehe ich nichts. Sie müssen sicher sein, dass Sie nicht nur einen Typ haben. Sie filtern nach einem Typ. Ich möchte alle filtern, damit ich alle Anfragen sehen kann. Also klicke ich auf Mehr Wein, okay, ich bekomme Produkte, wie Sie hier sehen. Und diese Produkte fordern zuerst an, die durch das Backend geht und nicht mit Parametern geladen wird. Daher müssen wir einige Parameter oder Abfragemuster für diese Anfrage laden. Also hier werden wir ein Fragezeichen Kategorien haben, und dann würden die Kategorien durch Komma getrennt werden. Nun, wir können das sehr einfach tun, wenn wir zur GET-Anfrage zurückkehren. Und dann werde ich Objekt übergeben. Erinnern Sie sich nicht direkt an die Params, wie Sie nicht sagen können, okay, Boss für mich, die Params wissen es oder nicht, Gabelarbeit für Sie. Sie müssen Objekt und dieses Objekt übergeben, der eine Schlüssel davon wird params genannt. Und dann übergeben Sie die params-Variable, die wir hier erstellt haben. Also lassen Sie uns dieses Konsolenprotokoll entfernen und gehen Sie zurück zu unserer Anwendung, neu geladen. Und dann werden wir zum Beispiel die saubere diese Konsole alles reinigen. Ich werde mehr Galle haben. Okay, ich habe Kategorien. Wie Sie in dieser Anfrage sehen. Ich habe hier Kategorien und ihre Kontiguität, die ich ausgewählt habe. Und auch, wenn ich hierher gehe, Schönheit, okay, wir haben eine weitere Bitte und suchen danach. Es sind Produktkategorien, okay, Nice. Wir haben hier die Produktkategorien und sie sind durch Komma getrennt. In diesem Fall arbeitet der Filter jetzt, indem er eine Anfrage mit Abfrageparams an das Backend sendet. Und das Backend sendet mir die Produkte zurück, die unter diesen Kategorien sind. Bei jedem Klick klicke ich hier, ich filtere. Ich frage das Backend, schicken Sie mir die Produkte zurück, die diese Kategorie haben. In diesem Fall haben wir unsere Produktseite gefiltert. So haben wir Filterprodukte. Und im nächsten Vortrag möchte ich Ihnen zeigen, wenn ich auf eine dieser Kategorien auf der Homepage klicke. Und ich springe hier zur Produktseite. Ich werde nur die Produkte zeigen, die unter dieser Kategorie sind. Also werden wir nicht haben, wir werden nicht auf die Produktseite umgeleitet werden, aber wir werden in Ordnung sein, das Produkt ist Komponente, aber wir werden nur die Kategorie anzeigen, die wir auf ihrer Titelseite geklickt haben. 151. Seite der Kategorie: Okay, in diesem Vortrag werden wir sehen, was, wenn ich auf eine dieser Kategorien klicke und was dann passieren wird. Also für mich würde ich sagen, vielleicht Sie, wenn ich auf einen von ihnen klicke, werde ich auch auf ihre Produktseite gehen. Und dann werde ich nur die Produkte zeigen, die unter dieser Kategorie sind, auf die ich geklickt habe. Und natürlich können wir zusätzliche Sache machen, damit wir diese Sidebar verstecken und auch nur ihre Produkte zeigen können . So können wir das leicht machen. Das werde ich Ihnen in diesem Vortrag zeigen. Also zuerst müssen wir eine neue Route angeben. Also in Produkte Modul, wenn Sie sich erinnern, wir haben einige mehrere Routen und eine dieser Routen als auch vier Kategorien. Also können wir hier keinen neuen Weg haben. Also können wir sagen, wir können es Kategorie nennen. Und diese Kategorie wird als Parameter haben, wie wir zuvor gesehen haben, dass wir auch Kategorie-ID haben. Wir haben also die Kategorie-ID mit dieser Kategorie übergeben. Also in diesem Fall werden wir auch auf Produkte Liste Komponente gehen. Aber im Produkt dieser Komponente, Ich werde überprüfen, ob ich meinen Klick von Produkten erhalten , die von der Navigation oben oder aus der Kategorie in der Heimat kommen. Dafür müssen wir zur Produktlistenkomponente gehen. Und dann werden wir die aktivierte Route haben. Deshalb müssen wir auch die aktuelle Route abonnieren. Also müssen wir wissen, auf welcher Strecke ich bin, zum Beispiel auf Produkten oder auf Kategorie. In diesem Fall werde ich einen anderen Dienst nutzen, der als aktivierte Dürre bezeichnet wird. So können wir es nennen, diesen Dienst als Route aufrufen und dann aktivierte Route von Angular aufrufen. Und hier gehe ich auf NDI drauf. Ich werde sagen, sieh nach mir, sie sind draußen. Also hier werde ich das sagen, Forelle, die ich als Service angerufen habe, dann params, dann abonnieren Sie diese Parameter und dann überprüfen Sie, welche Biome ich habe. Also haben wir hier params und dann werde ich die überprüfen und behandeln. Vielleicht, wenn es in ihren Parametern Kategorie-ID gibt. Wie wir in der Routendefinition angegeben haben, dann bringen Sie für mich die Produkte mit dieser Kategorie-ID, die in dieser URL übergeben wird. So können wir das leicht machen. Also werde ich sagen, diese Punktkategorie oder gute Produkte, genau wie wir es vorher gemacht haben. Also müssen wir das abbrechen oder es komplett entfernen. Lass es uns entfernen. Also habe ich hier nichts. Ich werde die Produkte basierend auf ihrer Kategorie erhalten, die in der URL übergeben wird. Aber ich kann es nicht direkt passieren. Ich kann nicht sagen, params dot category ID. Weil ich zu dieser Methode übergebe. Gutes Produkt, ich übergebe Array, Array von Strings. Also müssen wir das in Array setzen, so einfach. Sie würden also nur sagen, Array von Parametern Kategorie-ID. Es wird also eine Kategorie-ID sein, die innerhalb eines Arrays, die übergeben wird, um Produkte zu erhalten. Und das wird als Kategoriefilter sein. Und dann wird es die Daten von Produkten der Kategorie greifen. In diesem Fall werden wir nur die Produkte haben, die unter diesen Kategorien sind, auf die ich geklickt habe. Also wissen Sie, das ist in der Schlange. Wenn ja, wenn es dieses Ding oder diese Variable gibt, dann tun Sie das. Ansonsten erhalten Sie einfach Produkte ohne Filter, wie Sie alle Produkte erhalten, wie wir es zuvor getan haben. Also hier sagen wir diesen Punkt, bekommen Produkte ohne Filter. In diesem Fall bekomme ich die Produkte aus dem Backend basierend auf dieser Kategorie. Schön. Also lasst uns das speichern und das ausprobieren. Also gehe ich wieder auf die Homepage, damit wir auf Startseite klicken können. Klicken Sie auf Handy. Okay, wir sehen, dass es nicht funktioniert. Schauen wir uns unsere Konsole an. Wir werden feststellen, dass ich denke, dass wir diese Route nicht so weit haben, dass wir Produkte Kategorie definiert haben und dann setzen wir die Kategorie-ID. Also für das auf der Homepage, wenn Sie sich erinnern, wir setzen oder in Kategorien Banner, wir sagten, dass, okay, Ich möchte zuerst zwei Produkte gehen und dann werde ich in Kategorie gehen. So können wir dies als ein Kind dieses Pfades definieren. Wir können die Kategorie riesig als Kind von Produkten Pfad definieren. Oder Sie können einfach die Kategorien Banner anpassen, wie wir hier gesehen haben, um keine Router-Link-Produkte Kategorie haben, können wir direkt diese Kategorie haben. Wenn Sie also auf Speichern klicken, damit ich keine Produkte mehr habe. Also, wenn wir auf Speichern klicken, gehen Sie wieder zu unserer Anwendung, ich werde auf eine von denen klicken. Okay, ich bekomme immer noch Fehler, weil dies nicht definiert ist, weil ich nicht gespeichert habe, wieder ihr Produktmodul. Es passiert immer mit mir. Also muss ich Produkte Modul speichern. Ich gehe wieder her, mobil, nett. Ich habe hier nur zwei Produkte und mit dieser ID. Aber wenn ich zur Produktseite gehe, bekomme ich alle Produkte. Aber wenn ich auf eine dieser Kategorien klicke, bekomme ich nur die Kategorien, die unter sind, ich bekomme nur die Produkte, sorry, die unter dieser Kategorie sind. Aber ich habe hier immer noch diese Kategorie Sidebar, die nicht schön ist, wie sonst müssen Sie es wie überprüft machen. Andernfalls können Sie oder eine andere Lösung, die Sie zum Beispiel vollständig verstecken können . Lassen Sie uns wie eine praktische Sache mit dem Verstecken machen. Machen Sie diese Komponente dynamisch, um mehr zu erfahren. Also zuerst werde ich zuerst diese Sidebar nicht vollständig zeigen. Also in diesem Fall haben wir in der Produktliste, wir müssen auch überprüfen, ob ich in Kategorien Seite bin oder nicht. So können wir ein anderes Klassenmitglied definieren. Wir können nicht sagen, ist Kategorie. Zum Beispiel, Seite Ordinate. Also kann ich nicht als boolescher Wert sagen, ich kann das als booleschen Wert definieren. Und dann gehe ich hier zu den Parametern, wo ich die Parameter von der URL gelesen habe. Also habe ich Parameterkategorie-ID oder nicht. Ich kann nicht dasselbe tun. Also können wir sagen, Ticker ist karge Punkt-ID, dann setzen Sie diese Kategorie oder jede Kategorieseite auf true. Also bin ich wirklich in seiner Kategorieseite. Andernfalls setzen Sie es auf false. Also, okay, warum mache ich das? Also werde ich diese Variable in der Vorlage verwenden. Also, hier in der Vorlage, wenn ich zur HTML-Vorlage gehe, möchte ich zuerst ihre Kategorien ausblenden. Also werde ich hier für ihre Kategorieliste sagen, die Checkboxen ist, die in Spalte 3 ist, wie wir es vorher definieren. Also würde ich sagen, ng-if ist Kategorieseite. Also, wenn es Agouti Seite hat, dann zeigen Sie es. Aber wir brauchen nicht Kategorieseite. Wir müssen es verstecken. Dann geht es nicht auf die Seite. Okay. Habe ich. Es wird falsch sein, weil es das nicht zeigen wird. Aber wenn es sich um eine Kategorieseite handelt, wird diese Komponente ausgeblendet. Es wird also diese Spalte hier ausgeblendet, die die Kontrollkästchen für ihre Kategorie enthält. Und auch hier, wenn wir sparen, lassen Sie uns das versuchen. Und wir gehen hier zum Frontend. Okay, wir haben hier die Kategorien. Also haben wir hier das Produkt, sorry, also wenn wir auf die Homepage gehen, habe ich hier mobil. Okay. Ich habe zwei Artikel und wenn ich zu Produkten gehen oder ich werde die Sidebar mit den Produkten, die ich habe sie hier zu bekommen. Es ist also genau die gleiche Komponente, aber es verhält sich basierend auf der Route, die hier ist. Aber ich möchte auch auf den Fall hinweisen. Was ist, wenn wir mehr als drei Produkte hier in der Linie haben? Ich will dir zeigen, was passiert ist. Es ist ein Käfer. Also brauchen wir zum Beispiel, wir gehen zu zwei Computern. Okay, wir haben drei Produkte. Gehen wir zum Admin-Panel und gehen Sie erneut zu unseren Produkten. Und lassen Sie uns ein Produkt machen, um wie ein Computer zu sein. Also gehe ich hier zum Computer, Tom mit diesem wilden und setze es als Computerkategorie. Aktualisieren Sie das und gehen Sie erneut zu unserer Anwendung im Frontend. Okay, und ich klicke auf Computer. Und wie Sie das sehen, okay, ich habe ein zusätzliches Produkt hier, aber es ist nach unten dargestellt, als hätte ich 123 und dann ging es eine Nudel. Weil es hier leer ist. Und das passiert, wenn ich diese Spalte ist immer noch mit neun Spalten. Also lassen Sie uns das untersuchen. Ich möchte Ihnen zeigen, dass wir dies als neun Spalten definiert haben. Jetzt ist diese Kategorie-Sidebar ausgeblendet, sodass ihr Inhalt nach links verschoben wird. Also haben wir jetzt dieses Content-Raster. Es hat nur neun Spalten. Also müssen wir es auch dynamisch machen. Also wir, wir enden, wir wollen es als auch 12 machen. Also, wenn ich hier klicke oder ich gehe hier, werde ich dies als 12 Spalte haben, so dass es vollständig auf dem Bildschirm sein wird. So können wir den gleichen Wert verwenden, den wir zuvor für jede Kategorieseite definiert haben. Aber ich werde hier eine andere Klasse verwenden. Anstelle von neun Spalten werde ich 12 Spalten verwenden. Also, wie können wir das tun? Also sagen Sie hier einfach NG-Klasse damit, und Sie definieren es als Eingabe für dieses div. Und hier werden Sie ein Objekt definieren. Und dieses Objekt wird Anruf neun schlagen, wenn ich außerhalb der Kategorieseite bin. Also, wenn es nicht Kategorieseite ist, so ist Contiguity Seite nicht. Andernfalls können Sie jede neue Klasse definieren. Wir können es nennen. Es wird 12 genannt. Und wann ist Kategorieseite. Also speichern wir das und wir sehen, dass, wenn es nicht auf Seite geht, es neun sein wird. Also, wie Sie hier sehen, ist es keine Zusammenhängigkeit. Es ist Kategorieseite, sorry, und es ist 12. Also haben wir es hier, 12 Spalten. Aber wenn ich zu Produkten gehe, alle Produkte, habe ich es als drei Spalten. Also haben wir es wie neun Spalten. Und hier haben wir die Sidebar Spalte existieren, so wird es als neun sein. Also in diesem Fall habe ich hier auch eine dynamische Definition von Klassen. So kann ich in der Vorlage in der gleichen Komponente spielen, basierend auf dem, was ich kam. Also, wenn ich von dieser Seite oder diesen Kategorien komme, werde ich diese haben. Und wenn ich aus ähnlichen Produkten herkomme, in grundsätzlicher Behauptung, habe ich hier keine Parameter, keine Kategorie. Also werde ich das hier zeigen. Also, aber wir haben ein kleines Problem hier. Also, wenn ich wieder zu Computern gehe, sehen wir, dass sie eine sehr breite sind, ich möchte sie zum Beispiel in der Linie halten, damit wir das gleiche verwenden können, wie wir es mit ng-Klasse hier getan haben. So können wir auch die Kategorie setzen, ist Kategorieseite oder nicht. Auf der, zum Beispiel, diese, wo wir die Breite des Produkt-Artikels definieren. So können wir auch hier diese ng-Klasse oder diese Klasse entfernen und sagen, wenn es nicht Kategorieseite ist, dann machen Sie es wie zum Beispiel die 3, wie es vor oder vier war. Aber wenn es Kategorieseite ist, dann machen Sie es als drei. Also werden wir hier vier Spalten haben, weil 12 durch 3 geteilt, wird es vier sein. Also lassen Sie uns das speichern und aktualisieren Sie für mich automatisch die Anwendung. Und wir werden sehen, dass wir hier vier Produkte haben werden. Und wenn ich gehe, denn hier bin ich in Kategorie Projekt oder Kategorie Pfad. Wenn ich zum Produkt gehe, werde ich sie auch hier als drei haben. So sehen Sie, dass Sie einen dynamischen, dynamischen Bereich haben , um mit Ihrer Komponente zu spielen, indem Sie von wo aus Sie kommen. Also haben wir die gleiche Komponente verwendet, was sehr schön ist, um die Produkte auf der Grundlage dieser Liste auflisten zu müssen. Jetzt haben wir mehr Freiheit für den Benutzer, sich innerhalb meiner Anwendung zu bewegen. 152. Product: Okay, in dieser Vorlesung werden wir sehen, wie die Produktdetailseite erstellt wird. Wir werden also eine Komponente erstellen, die wir auf ein bestimmtes Produkt beziehen werden, besonders wenn ich auf eines der Produkte klicke. Also werde ich hier gehen und ich werde das Detail des Produkts in allen Details sehen. Also zuerst müssen wir einen Titel und eine Beschreibung haben, die wir auch haben werden. Sie bewerten. Es wird von Sternen kommen, die von Prime NG Preis verwenden werden. Und wir können wie ein gefälschtes Angebot hinzufügen. Außerdem werden wir diese Menge hinzufügen, damit Sie auswählen können, wie viel Sie von diesem Produkt kaufen möchten. Und dann werden wir zwei Knöpfe haben. Und auch, wir werden hier die Beschreibung, die wir als HTML im Editor erstellt haben , haben. So wird es genau so gerendert, wie wir es hier im Frontend haben. Wir werden sehen, wie man den HTML rendert , der im Admin-Panel geschrieben wird, und es wird auch im Frontend sein. Wir werden eine Galerie erstellen, also werde ich keine fertige Komponente verwenden. Wir werden lernen, wie man eine Galerie mit unserer Hand baut. Und damit, was wir Sie in der nächsten Vorlesung sehen werden. Und ich möchte Ihnen zeigen, dass das Erstellen der Galerie IS oder das Erstellen einer UI-Komponente im Allgemeinen ebenfalls möglich ist. So können Sie es überall in Ihren Anwendungen verwenden. So können wir unsere eigenen Komponenten wie eine Galerie und Vol Beispiel, Sterne Bewertung oder zum Beispiel, einige Schieberegler bauen . Sie können es selbst erstellen und sich in Ihren Bibliotheken in Ihrem Projekt befinden. Also fangen wir an, diesen Teil hier zu bauen. Und in der nächsten Vorlesung werden wir die Galerie bauen. Also zuerst mal, schauen wir uns hier an. Also brauchen wir eine Titelbeschreibung, Bewertung und dann etwas Preis und Menge. Also zuerst möchte ich eine Komponente erstellen, die sich innerhalb der Products Library innerhalb der Seiten befinden wird. So haben wir eine Seite speziell für Produktdetails. Also werde ich auf Generieren klicken und dann werde ich eine Komponente hier haben, und es wird sich auch in Seiten befinden. Und dann können wir es Produktseite oder Produktdetail nennen. Also liegt es an dir. Also werde ich es Produktseite nennen. Und die Produktseite befindet sich in den Projektprodukten. Und auch, wir werden die gleichen Optionen verwenden, die wir immer verwenden. Also hier haben wir Präfix-Selektor, wir werden hier Produkte haben. Und natürlich wird es Produktseite sein. Natürlich werden wir den Selektor nicht verwenden, weil wir direkt den Router zu dieser Komponente lesen werden. Und wir werden sagen, überspringen Tests. Und dann werden wir diese Komponente generieren. Wir sind sicher, dass es in der Produktbibliothek ist. Perfekt. Wir gehen hier wieder und wir werden sehen, dass diese Seite oder Produktseite hier erstellt wird. Also, was wir tun werden, werden wir gehen, wenn ich auf ein Produkt hier in meinem Front-End klicke, dann werde ich zum Produktdetail weitergeleitet. Nehmen wir zum Beispiel an, dass wir auf das Bild klicken. Also, wenn Sie sich erinnern, haben wir Artikel, Produkt, Artikel erstellt. Dieses Produkt Artikel, es hat Bild, und wir werden den Link über das Bild setzen. Wenn ich also auf das Bild klicke, wird es mich zum Produktdetail weiterleiten. Also haben wir hier den Router. Also, welcher Router? Wir werden Router Link verwenden. Und dann werde ich das Produkt selbst verwenden. Also werden wir hier einen Code wie das Produkt selbst, Produkt-ID haben. Aber vorher können wir zum Beispiel sagen, dass ich die Produkte will. Wie wir es in eine Schnur setzen können, damit wir Schrägstrich Produkt setzen können. Also nimm mich auf ihre Produktseite. Und dann fügen Sie für mich die ID, die ID des Produkts hinzu. Also werde ich hier Produkt Punkt ID haben. Also das eingehende Produkt zu Produkt Artikel, Ich werde seine ID und Schrägstrich es mit ihren Produkten. Also lassen Sie uns gehen und diese Route im Produktmodul erstellen. Also im Produktmodul haben wir zuvor Produktkategorie erstellt und wir werden einen anderen Pfad erstellen , der Produkte und dann die Produkt-ID genannt wird. Also haben wir hier Produkt-ID. In diesem Fall wird jede ID nach der Produktseite kommen. Es wird in einer Produktseitenkomponente gerendert, nicht in der Produktliste, sondern in der Produktseitenkomponente. Deshalb haben wir diese Produktseiten-Komponente für dieses Ziel erstellt. Also lasst uns das testen. So, wie Sie hier sehen, haben wir hier die ganze Anwendung. Wenn ich auf das Bild klicke, bekomme ich Produktseite funktioniert. Das ist also genau das, was wir wollen und wir haben hier die ID ihres Produkts. Also gehen wir wieder zu unserem Code und wir werden dieses Produkt oder diese Produktseite Vorlage. Also lasst uns hier gehen und alle anderen Seiten schließen. Wir werden hier bleiben. Und übrigens, lassen Sie uns eine Stildatei erstellen. Wenn Sie sich erinnern, haben wir die öffentlichen Styles in ihrem Leben. Produkt können wir auch hier erstellen, einige Datei für die Produktseite. Also lassen Sie uns einen Namen Produkt Seite geben, SCSS. Und dann in den Produkten möchte ich es auch importieren, genau wie wir es immer tun. Also haben wir zwei Produktseite, SCSS, dann wird jeder Stil, den ich hier schreiben werde, hier wird es in meine Anwendung importiert und die Anwendung kann es sehen. Zunächst einmal werden wir wie immer ein Gitter haben. So können wir dieses Gitter zuerst in ein Produkt einwickeln. Wir können es Produktseite nennen. So haben wir hier Produktseite. In dieser Produktseite werde ich ein Raster haben, also div, p grid. Und in diesem Gitter werde ich zwei Spalten haben. Der erste wird sechs sein und der andere wird auch sechs sein. Wir haben also gleiche Spalten. Also haben wir hier P genannt sucht, und wir werden einen anderen haben, der auch sechs genannt wird. Also haben wir jetzt das Gitter hier. Wir werden wie eine UI-Galerie-Komponente suchen und wir werden das später finden. Also werde ich das kommentieren. Und wir setzen hier, dass Details des Produkts. Also zuallererst werde ich zum Beispiel haben, können wir hier eine Klasse setzen. Wir können es geben, nennen es Produkt. Und dieses Produkt werden wir sein Detail setzen. Also zuerst möchte ich den Titel des Produkts, der von einem Produktnamen stammen wird. So werden wir später sehen, wie wir ihr Produkt bekommen werden. Dafür müssen wir eine wertvolle TypeScript-Datei haben , um das Produktdetail zu erhalten, wenn Sie sich erinnern. Also haben wir diesen Service erstellt und wir werden ihn wieder greifen und ihn hier benutzen. Also haben wir hier den Produktpunktnamen, und dann werden wir die Produktbeschreibung haben. Also werde ich es in Absatz setzen und ihm eine Klasse geben, zum Beispiel Produkt. Und es wird Beschreibung sein, zum Beispiel, Festplatte. Und dann werden wir die Produktbeschreibung setzen. Also hier werden wir alle Informationen über das Produkt anrufen. Also und gut, wir müssen gehen, um für eine Bewertung und andere Komponenten zu gehen. Aber lassen Sie uns zuerst das Produkt importieren, damit wir das Produkt aus dem Backend bringen können und dann können wir es hier verwenden. Also zuerst, ich gehe auf diese Produktseite. Ich werde diesen Produktservice anrufen. So haben wir hier wieder stolzen Service. So haben wir Produktservice, der hier sein wird. Und wir werden auch einen Router verwenden, weil wir die ID von der URL erhalten werden. So haben wir auch hier, privat und Route. Und ich werde die Route aktiviert haben, der ich geschnappt habe, von der URL. Ich werde die Daten von der URL abrufen. Also werden wir hier sagen, diese Punktroute, und dann geben Sie mir die Parameter, die vom Backend oder über die URL kommen. Und diese Parameter werden wir sie abonnieren, weil jedes Mal, wenn wir die ID ändern, müssen wir abonnieren und fangen, was sich die ID ändert, um das richtige Produkt zu sehen. Also können wir hier sagen, params, wir haben die Böden auch im Abonnement. Und dann werden wir diese Parameter verwenden, um es im Produktservice zu verwenden. Also werden wir hier diesen Punkt haben. Oder lassen Sie uns tun, wie, wenn erste Parameter Punkt Produkt-ID. Wie wenn wir einen Parameter haben, der eine Produkt-ID genannt wird, dann werden wir diesen dot-product Service verwenden. Alles, was wir in separater Funktion sagen können, erhalten Sie das Produkt im Allgemeinen gerne nur unseren Code zu organisieren, um netter zu sein und wir können die Produkt-ID hier übergeben. Danach gehen wir zu einer anderen Zeile und öffnen eine neue Methode. Wir nennen es auch Produkt erhalten. Wie Sie hier sehen, erhalten wir Produkt und dieses Produkt erhält die Produkt-ID. So können wir ID sagen, es wird eine Zeichenfolge sein. Und dann werden wir diesen dot-product service nutzen und dann zum Produkt kommen. Und erhalten Sie Produkt, wenn Sie sich erinnern, es fragt nach Produkt-ID. Also werde ich die Produkt-ID geben und dann werde ich sie abonnieren, und dann bekomme ich ein Response-Produkt. Zum Beispiel können wir hier diesen Namen und dieses Response-Produkt geben. Ich werde es verwenden, um es einem Klassenmitglied zuzuweisen, das Produkt genannt wird und einen Typ hat. Produkt. Also werden wir ein Klassenmitglied definieren. Wir nennen es Produkt. Und das wird Klasse haben, die Typ Produkt ist. Und wir gehen wieder hier und wir sagen dieses Punktprodukt. Es wird das Response-Produkt sein. Das war's also. In diesem Fall erhalten wir das Produkt aus dem Backend. Wir haben zuvor gesehen, wie wir dies in der Admin-Panel-Anwendung erstellt haben. Denken Sie also immer daran, das Abonnement zu beenden. Also, wenn Sie sich erinnern, Ich sage Ihnen immer zu sagen, dass diese nehmen, bis, und wir werden sagen, diese Ende subs, wie zwei Enden und Abonnement und n subs wird ein Thema sein. So können wir es auch hier definieren. Und es wird Subjekt und Typ jeder sein. Und das Thema wird einem neuen Thema gleich sein, das auch von unserem x js kommt. Und dann müssen wir onDestroy anrufen. Also haben wir hier in der Klasse, wir müssen auch auf diesem Troja umsetzen. Und wir brauchen, dann wird es uns Fehler geben, dass wir die Methode NG auf zerstören nicht implementieren. Sie müssen also auch diese Methode aufrufen. Also, wenn diese Komponente zerstört wird, diese Punkt n subs, sorry, dieser Punkt. Und tut mir leid, ich muss hier die Klammern setzen und dann diesen Punkt n subs, dann weiter. Und dann endet das komplett. Also in diesem Fall, wenn dies beendet wird, wenn die Komponente zerstört wird, wird dieses Abonnement beendet und wir werden kein Speicherleck haben. Perfekt, Jetzt haben wir, dass ein Produkt. Hier. Wir haben alles, was wir überprüfen werden. Wie wenn wir ein Produkt haben, dann zeigen Sie für mich die Produktdetails, um keine Probleme zu haben. Also hier werden wir ng-if Produkt haben. Also, wenn ich ein Produkt habe, dann zeigen Sie die Produktinformationen für mich. Also lasst uns das speichern und zu diesem Frontend gehen. Wir werden sehen, dass wir das Produkt bekommen, auf das wir geklickt haben. Wenn ich also zu einem anderen Produkt gehe, würde ich sehen, dass ich dieses Produkt auch bekommen habe. Also werden wir fortfahren und die Dinge genau so gestalten, wie wir es in ihrer Demo gemacht haben. Also gehe ich hierher, wie Sie sehen, ich werde jetzt die Bewertung hinzufügen, die Bewertung, ich mag etwas zu verwenden, das von Prime Energie kommt. So können Sie danach suchen. Es nennt sich Ratenkomponente. Und wie Sie sehen, hat es viele Verwendungen. Für mich werde ich die Behinderte benutzen. Zuerst müssen wir das Modul so importieren, wie wir es immer mit jeder UI oder jeder Prime-Z-Komponente tun. Also möchte ich das Bewertungsmodul und dann werde ich es in meine Module importieren. Also können wir hier keine Module, Bewertungsmodul, und dann werden wir herausfinden, welches gut für uns ist. Also lassen Sie uns Beispiel fallen, erhalten die eine, die NO Cancel dieses genannt wird, und dann können wir es deaktivieren. Also, wenn wir hier zur Quelle gehen, können Sie all diese Beispiele sehen. Also lasst uns das hier abholen. Zum Beispiel können wir sagen Bewertung, Modell und dieses Ding. Also gehen wir wieder auf unsere Produktseite, und danach öffnen wir ein div und wir können ihm einen Namen geben, den wir wie Produktbewertung nennen. Und dann platzieren wir diese Komponente hier. Die Bewertung, die vom Backend kommt, wird also Produktpunktbewertung sein. So können wir hier Produktpunktbewertung haben, und dann werden wir es verwenden. Also zuerst brauchen wir diesen Abbruch nicht. Wir müssen Behinderte haben. Also, wenn Sie sich erinnern, wir haben deaktiviert und dann setzen wir es wahr, wie ich weiß, dass es diese deaktiviert ist, weil ich die Dokumentation überprüft. Also, wenn Sie hier gehen, werden Sie dieses deaktivierte und nicht behinderte Beispiel sehen. Er mochte so etwas wie Behinderte. Er hat es auf wahr gesetzt, damit wir dasselbe tun können. Die Standardsternnummer wird also fünf sein. Also r nichts Problem hier, wir sind in der Lage, fortzufahren. Nehmen wir das also in unserer Anwendung. Also gehen wir wieder zu unserer Seite oder Produkt. Schön, wir haben hier. Sie essen. Lasst uns das entfernen. Mal sehen, wie wir es entfernen können. Also haben wir hier stornieren falsch. So können wir Stornierungsfälle geben. Wir haben es zurückgelegt. Deshalb habe ich hier Ratsformulare vorgelegt und den Antrag nochmals überprüft. Perfekt. Wir haben es so. Und jetzt werden wir noch andere Dinge hinzufügen, die der Preis des Produkts ist. Also lassen Sie uns den Preis hinzufügen. Also werde ich hier auch live haben, was als Produktpreis bezeichnet wird. Und dieser Produktpreis wird Folgendes enthalten. Zuerst werden wir das Produkt haben und das wie mit einer Währung sein wird. Also werden wir hier Produkt haben. Punkt-Preis. Und wir werden diese Pfeife haben, die Währung genannt wird. Also werden wir das Produkt in wie ein Geld zeigen. Also in der Währungsweise. Und dann haben wir noch eine Spanne, die wir wie ein Angebot machen können. So können wir Klasse haben und wir können Preis vorher sagen. Wir können es vorher den Preis nennen. Und das können wir zum Beispiel denken lassen. Zum Beispiel können wir sagen Produkt des Preises plus 18 und es wird auch Währung sein. So wird jedes Produkt mit einem Preis wie diesem kommen, Originalpreis und plus 18, die so fallen gelassen werden. Und wir können, danach, wir werden es stylen, so dass wir es groß machen können und wir können dies wie eine Linie durch machen , so dass es fallen kann, als wäre dies ein Preis vorher. Und jetzt werden wir die Menge haben. Also die Menge, wie Sie sich erinnern, wir haben sie hier. Also haben wir eine Zahleneingabe im Prime End. Ich werde diese Eingabenummer verwenden. Und wie Sie sehen, haben wir es hier. Es ist also auch eine nette Möglichkeit, es auch zu benutzen. Wir müssen das Zahlenmodul importieren. Ich werde zum Produktmodul gehen, dieses Zahlenmodul importieren und dann dieses Eingabenummernmodul in meinen Modulen verwenden. Und dann können wir diese Komponente überprüfen, wie es aussah. Also dieses, das MAX bedeutet Grenzen genannt wird, gehen wir und überprüfen es. Und wir haben diesen, der wie mit einem Knopf sein wird, damit wir alle diese Zeile kopieren können. Und dann gehen wir hier auf die Produktseite und wir können div dot Produkt sagen. Wir können es wie eine Menge geben. Wir können diese Klasse geben. Und dann platzieren wir diese Eingabenummer hier. Und auch hier werden wir nicht etwas Nummer haben. Wir werden Mengenvariable haben. Und diese Mengenvariable, müssen wir es als Klassenmitglied definieren, um den Wert daraus zu lesen. Und dann werden wir es verwenden, um das Produkt in den Warenkorb mit einer bestimmten Menge hinzuzufügen , die hier hinzugefügt wird. Also hier wird es diese UML sicher sein, Tasten. Wir können hier Namen, Menge und max Min. Und wir werden auch hier Quantität, Großbuchstaben haben. Und dann setzen wir das in eine Menge. Wenn ich also auf das Etikett klicke, werde ich mich automatisch auf dieses konzentrieren. Wenn ich hier klicke, werde ich mich auch auf den Import konzentrieren. Also hier funktioniert es gut. Natürlich brauchen wir mehr Styling, wie wir später sehen werden. Das letzte, was wir hinzufügen werden, sind die Schaltflächen. Und wir werden hier noch ein div haben. Also haben wir hier div, und wir nennen es wie Produkte. Aktionen. Und diese Aktionen, wir werden zwei Knopf haben. Erste Schaltfläche wird vier sein jetzt, und die zweite Schaltfläche wird vier in den Warenkorb und in den Warenkorb, Ich werde Methode aufrufen, die Anzeigenprodukt in den Warenkorb aufgerufen wird. Also müssen wir auch die Methode hier implementieren. Also haben wir eine andere Methode bei Produkt in den Warenkorb und wir haben es für jetzt leer. Wir werden es nicht umsetzen. Jetzt. Wir werden es umsetzen, wenn wir einen Wagen haben. Hier haben wir also den Button benutzt, der auch vom Prime End kommt. Also habe ich das Tastenmodul verwendet, das wir zuvor für andere Zwecke aufgerufen haben. So haben wir jetzt hier die Tastenbeschriftung und alle werden auch verwendet, die abgerundete. Also, wenn Sie hier zu den Tasten gehen, Wir haben hier mehrere Tasten. Also haben wir auch hier, abgerundet. Sie müssen es also nicht stylen und etwas runden. Sie können das direkt verwenden. Wenn Sie also zur Quelle gehen, werden Sie diesen abgerundeten Button hier sehen. Also habe ich genau diesen benutzt. Also auch, ich habe hier den Button für In den Warenkorb gelegt. Also lassen Sie uns überprüfen, dass in der Anwendung, okay, wir haben zwei Tasten. Alles funktioniert gut und ich drücke diesen Knopf und es hat sich von seinem Bruder befasst weil du dich erinnerst, dass wir diese Brille benutzen, um Dinge voneinander zu schieben, wie Bim NG, Marge, richtig? Zwei, dann wird es von rechts schieben. Jetzt werden wir das stylen. Also haben wir eine Styling-Datei erstellt. Also werde ich es schnell stylen. Wir haben, vor allem, müssen wir die Produktseitenklasse oder die Produktklasse haben. So haben wir hier das Produkt, wie Sie auf unserer Produktseite sehen. Wenn wir es wieder öffnen, haben wir hier das Produkt. Daher müssen wir Produktnamen, Produktbeschreibung haben. Also habe ich vergessen, hier Unterricht zu geben. So können wir auch einen Namen geben hören. Also gehen wir zu unserem Produktnamen Beschreibung, Bewertungen, Preismenge, et cetera. Also werden wir all das stylen. Beginnen wir also zuerst mit dem Namen. Also dieser Name wird wie Wir können es nicht geben Schriftgröße wird wie zwei EM sein, wie wir es doppelte Größe machen können, es wird groß sein. Und dann werden wir die Beschreibung haben. Beschreibung wird genauso gut wie die Schriftgröße wird wie 1,4 EM sein. Und auch, wir haben ihre Bewertung. Also werden sie in der Art und Weise sein, wie sie, wir schieben es von oben und unten. So können wir Marge 15 Pixel 0 sagen. Also von oben und unten, gib es mod 15 Pixel von oben und unten. Und dann werden wir den Preis haben. Also zuerst wird der Preis so sein. So haben wir Produktpreis, wir haben die Klasse bereits, Schriftgröße. Wir geben es zum Beispiel 1, Tool EM sowie und Schriftgewicht, wir können es fett machen. So können wir es wie 600 font-weight border button für den gesamten Container des Preises geben . So können wir eine Zeile darunter haben, um von den Aktionstasten zu trennen, so weiter und die Menge. So können wir Border Button haben, wir geben ihm ein Pixel und solide. Und dann können wir eine Variable geben. Und diese Variable wird eine Kanalphase haben, die die Farben, die ich von Prime NG 300, die es ein grau sein wird. Und dann werden wir einige Polsterung 25 Pixel von oben und unten geben , um den Inhalt weg von ihm zu schieben. Also lasst uns sparen und sehen, was passiert und was hier vor sich geht. Also gehe ich auf die Seite, Okay, ich habe hier den Titel, die Beschreibung, ich habe hier, die Bewertung. Und wir werden diesen Teil stylen. Also hier haben wir, wenn Sie sich erinnern, eine Klasse und diese Klasse definiert, die hier für den Preis vorher war. Also werde ich das auch stylen. Also innerhalb des Preises werden wir den Klassenpreis vorher haben. Es wird Schriftgröße sein. Wir geben es wie ein EM, als wäre es ein wenig kleiner. Und dann margin-links, zum Beispiel, um den Inhalt ein wenig von links zu schieben, können wir ihm 10 Pixel geben, um nicht aneinander geklebt zu werden. Und wir können ein Schriftgewicht geben wird wie ein 100, um es leichter zu machen. Und wir können es wie eine hellere Farbe geben. Wir können Var sagen, wie Sure, Phase. Es wird wie grau, ausgegraut sein. So bald Phase 500 ist gut. Und dann zum Beispiel, Textdekoration gerne, wie man Zeile durch sagt. So können wir Linie durch diese wie der vorherige Preis geben. Dann können wir das überprüfen, wenn es gut funktioniert. Sehen Sie, wir haben jetzt eine Linie durch und wir haben den Preis des Produkts. Ich würde sagen, lass es uns ein bisschen größer machen. Zum Beispiel, hier können wir haben, der Preis kann 1,4 sein und wir können es erneut überprüfen. Wir werden sehen, okay, wir haben schwächeren Preis und dann haben wir die Schriftgröße dafür ist keine Wirkung, wenn ich weiß, warum, denn hier haben wir 1 für EM, okay, Wenn ich hier auch E M 1 M, dann Dies bedeutet, dass es die Größe des Elternteils sein wird. Also hier kann ich sagen, dass Patente sind, oder die Größe oder Schriftgröße dieser Klasse wird ein EM sein, wie genau die gleiche dieser Größe. Also, wenn ich es wie 0 oder 0, zum Beispiel sieben, dann wird es kleiner. Also, weil EM ist wie ein, wie man sagt, es ist verwandt, Es ist mit ihren Eltern verwandt. Also, wenn ich sagen verwandt, dann wird es die gleiche Größe sein, wenn ich es ein EM, die gleiche Größe ihres Patents. Also in diesem Fall werden wir es kleiner machen und wir setzen es 0,7. Wenn ich das also größer mache, wie wenn ich es zum Beispiel auch auf das setzen würde, werden wir größer, aber mit einem Prozentsatz, der kleiner ist als der Elternteil, weil ich es auch hier habe, 0,7. Das sind also die EM-Einheiten, wie sie funktionieren. Jetzt haben wir alles. Jetzt werden wir diese Menge stylen. Also zuerst, es ist ein wenig nach rechts und links geschoben , weil wir hier mit ihrer Klasse haben, wenn Sie sich erinnern, wir haben so etwas wie ein P-Anruf 12 PM D3. So können wir dieser Klasse geben, und diese Klasse ist, kommen standardmäßig mit padding. Wir können es auch geben, Bettwäsche 0. Also lassen Sie uns dies initialisieren, um 0 aufzufüllen und dann würde es genau geschoben werden. Also jetzt werden wir auch die Menge haben. Also werde ich diesen Kurs haben. Also haben wir hier nach dem Preis, wir öffnen ein neues Tag und sagen, dass Menge, wir geben es wieder, wie Marge oben oder Marge rechts und unten. So können wir Rand 25 Pixel und 0 haben. Und dann können wir das Etikett geben, das sich in dieser größeren Schrift befindet, größere Schriftgröße. So können wir hier auf das Etikett sagen wird etwas solides Etikett falsch ist. Das Label würde Schriftgröße haben, die für die Prüfung 1.2 M. So können wir nicht so gut hier 1 zu EM sagen. So werden wir sehen, dass es größer wurde, genau wie wir wollten. Aber wie Sie sehen, will ich diese Orange, wie meine Knöpfe, ich habe überall Knöpfe mit Orange. So können wir auch das haben, so dass wir die Schaltflächen hier außer Kraft setzen können, die von Prime NG kommen. Also, wenn Sie auf diese Schaltfläche überprüfen, werden Sie sehen, dass es eine normale Taste ist. Und diese normale Taste hat eine Klasse, die PI-Taste genannt wird. Scrollen wir, bis wir die Farbe erkennen. Wenn wir also mehr nach unten gehen, werden wir den Knopf sehen und es hat diese Farbe, so dass wir diesen Hintergrund ändern können. Also lasst uns diese Klasse fangen. Dies ist der Vorteil von öffentlichen Stilen. Andernfalls können wir es nicht einfach innerhalb der Komponente ändern. Denn wenn diese Glanzkomponente, dann sind wir nicht in der Lage, das zu ändern. Also sagen wir, wie die Hintergrundfarbe dieser Schaltfläche wird Primärfarbe sein, die ich meine Primärfarbe definiert habe. Und dann wird der Rahmen 0 sein, um diesen blauen Rahmen nicht zu haben. Und jetzt wird es, denke ich, orange sein , wie Sie hier sehen. Es ist also sehr schön. Jetzt werden wir auch diese Tasten Stil ist sehr einfach. Wir haben nur hier, nicht Quantität, aber wir haben eine Klasse definiert, die Aktionen genannt wird. Also kann ich hier gehen und Aktionen definieren. Und innerhalb dieser Aktionen haben wir auch PI-Taste. Wir können das Gleiche hier kopieren. So können wir auch die Hintergrundfarbe orange dieses Knopfes haben. Also bin ich mir nicht sicher, ob ich den richtigen Namen der Klasse habe. So können wir hier Quantität haben. Und hier sind Art von Aktion ist nicht Aktionen. Also muss ich S. setzen und jetzt wird es sein, ich denke, orange, wie Sie hier sehen. Schön. Also alles, was wir haben jetzt alles, was ich gerade verpasst eine Sache, die die Beschreibung des Produkts ist. Also werden wir ein neues Raster haben. Also ein neues Raster in der gleichen Ebene. Also, weil es den ganzen Platz unter der Produktgalerie und der Produktseite bekommt. Also unser völliger Mangel Detail. Also haben wir hier ein weiteres Spitzengitter und dann werden wir ein div geben genannt werden und dann 12, wie es getäuscht wird. Und in diesem div werde ich die Daten der HTML-Daten erfassen, die für das Produkt kommen. Wenn Sie sich erinnern, haben wir hier in der Admin definieren diese und es wird kommen oder in der Datenbank als HTML gespeichert. Also, wie können wir das packen? Also, weil, wenn ich hier gehe und ich sage, okay, drucken Sie für mich Produkt, das Beschreibung erreichen, weil wir es in Reichweite Beschreibung gespeichert, wie Sie sich erinnern. Also hier werde ich sehen, dass ich HTML-Code bekommen werde, was schrecklich ist. Also müssen wir etwas dafür tun. Der einfachste Weg, dies zu tun, besteht darin, ein div zu definieren. Und dieses div, können Sie eine DAG verwenden, die mit Angular als inneres HTML kommt. Und in diesem inneren HTML, der Eingabe, können Sie sagen, geben Sie mir Produktpunktbeschreibung auf diese Weise. Der gesamte Inhalt dieses div wird also als HTML gerendert, wie Sie hier sehen. Also brauchen wir etwas mehr Styling, weil es von den Stilen von Prime NG oder meiner Anwendung überschrieben wird. So können wir geben, zum Beispiel hier, Ich mag auch etwas wie Produkt und erreichen Beschreibung zum Beispiel. Also, und wir werden diese Klasse auch verwenden, damit wir ihre Handlungen hören können. Und wir werden hier draußen haben, weil es nicht im Produkt ist. Also werden wir es hier draußen haben. Ich werde Produkt haben und dann die Beschreibung erreichen. Und dann werde ich Zeilenhöhe haben, zum Beispiel wird 1,6 sein. In diesem Fall werde ich einige Leerzeichen zwischen all diesen Elementen haben. Also lassen Sie uns auch den HTML speichern, weil ich ihn nicht gespeichert habe. So werden wir sehen, dass wir hier etwas schönere Zeilenhöhe bekommen haben. Auf diese Weise haben wir die Beschreibung der detaillierten Beschreibung des Produkts. Was uns fehlt, ist eine Galerie. Ich gehe in die nächste Vorlesung, erstelle eine Komponente für die Galerie. Und dann werden wir die Daten hier packen und sie oder die Bilder ablegen und sie in die Galerie legen. Aber bevor wir gehen, sehe ich, dass wir Fehler in der Konsole haben. Also, wenn Sie sehen, dass lesen Beschreibung von undefined, so möchte ich erwähnen, dass das ist, warum ich Ihnen gesagt, dass Sie das ng-if Produkt setzen müssen. Wenn es also ein Produkt gibt, dann werden wir dieses Produkt anzeigen. Also ziehe ich es vor, dieses nach oben zu verschieben, wie zu ihrem Container div Wie alles hier enthalten sein wird. Also, wenn es ein Produkt gibt, dann zeigen Sie es an. Wenn nicht, dann tun Sie nichts. In diesem Fall erhalten Sie diesen Fehler hier nicht. Hier geht es also um das Produkt. Wie ich Ihnen gesagt habe, werden wir die Galerie in der nächsten Vorlesung erstellen. 153. Product: Okay, Jetzt werden wir mit unserer Produktseite fortfahren und wir werden die Galerie implementieren, die Galeriebilder des Produkts. Also, wenn Sie sich daran erinnern, dass wir zuvor mit der Kugel Act Anfrage mit allen Bildern kommen, die Bilder Feld genannt wird. Und wir haben das Hauptbild, wo wir das Produkt selbst anzeigen, wie Sie hier sehen. Und auch das Galeriebild, wo die oder die Bilder, wo die Bilder ihrer Galerie gespeichert sind. Wenn Sie also an dieser Komponente arbeiten möchten, werden wir nichts von Prime NG verwenden. Natürlich prime NG bietet auch einige gunnery, wie zum Beispiel hier, dieses, wenn Sie es überprüfen, Es heißt Gonorrhoe und es hat eine sehr schöne ähnliche Dokumentation und Sie können Bilder hinzufügen und entfernen Sie sie dynamisch. Aber ich werde in dieser Vorlesung meine eigene Komponente verwenden, weil ich Ihnen zeigen möchte, wie Sie UI-Komponente erstellen und sie in Ihrer Anwendung verwenden können. Zunächst einmal werden wir diese Galerie-Komponente in Ihrer Augenbibliothek erstellen. Wenn Sie sich erinnern, wenn wir zur Ellipse gehen, haben wir eine UI-Bibliothek, in der wir unsere Banner-Komponenten platziert haben. Also werden wir eine neue Komponente erstellen, die Galerie genannt wird. Wir werden es UI-Galerie nennen. Also zuerst werde ich einen neuen Komponentenbenutzer mit dieser NX-Konsole generieren. Und dann werden wir es innerhalb des Komponentenordners nennen. Ich werde ihm einen Namen geben, der Galerie genannt wird. So wird es wie Galeriebilder sein. Das Projekt wird UI sein. Und das Gleiche für alle anderen Optionen, die wir hier tragen. Deshalb habe ich dir zu Beginn des Kurses gesagt, sei geduldig. Sie werden alles wissen, warum es passiert, warum wir diese Checkboxen überprüfen. Jetzt kennst du sie alle. Der Selektor wird also Gallery sein, wie auf diese Weise. Und weil es mit dem Namen der Bibliothek beginnt, wie gesagt, sind sie alle in der ES verlinkt. Also lassen Sie uns jetzt diese Komponente erstellen und ausführen. Okay, ihre Komponente wurde erstellt. Lasst es uns überprüfen. Wir werden sehen, dass wir Galerie hier haben und auch es ist in Ihrem Modul platziert und auch, Es ist mit, dass. Es wird auch exportiert. Okay, jetzt gehen wir weiter. Wie Sie in meiner Demo sehen, die ich bereits vorbereitet habe, habe ich das Hauptbild und dann zwei Bilder, und ich klicke über sie und dieses Bild wechselt. Also brauchen wir etwas wie div, main, div, wo ich das Hauptbild anzeige und hier wie eine Liste, wo ich mehrere Bilder anzeigen werde. Also gehen wir dorthin, machen die Galeriearbeit, und dann werden wir das umsetzen. Aber zuerst nennen wir es in unserer Komponente. Also, wenn Sie sich erinnern, haben wir hier einen leeren Platz. Also werden wir diese Galerie in unseren Produkten nennen. Also gehen wir zu diesem Produkt und Seiten, Produktseite. Und wenn Sie sich erinnern, habe ich hier die UI-Galerie kommentiert. Also hier Sie, i Galerie, wir werden es nennen. Und wir sehen, dass es immer noch Fehler gibt, weil wir das UI-Modul hier nicht verwenden. Also lassen Sie uns das UI-Modul hier verwenden. Modul, in dem ich exportiert oder importiert werde. Es wird aus der UI-Bibliothek importiert. Also werden wir Import haben. Und dann dein Augenmodul aus. Und dann werde ich den Namen der Organisation setzen, dann sagen Sie, i.Und in diesem Fall werde ich sehen, dass mein Produkt hier oder UI Gallery, der Fehler dieser App noch. Also lassen Sie uns alle speichern und prüfen, ob unsere Komponente dort platziert ist. Also gehen wir hierher. Okay, Galerie funktioniert. Also werden wir diesen Bereich füllen. Gehen wir also zur Galerie-Komponente. Wie ich mich erinnerte oder wie ich Ihnen bereits sagte, drücken Sie Control P und dann können Sie zu jeder beliebigen Komponente springen, indem Sie den Namen der Komponente eingeben. Also habe ich hier Galerie Komponente, nett, ich bin hier. Also ist es besser, hier nicht zu suchen. Also, jetzt haben wir Galerien arbeiten. Lassen Sie uns nun die Vorlage erstellen. Okay, dafür werde ich ein div erstellen und ihm eine Namensgalerie geben. Und diese Galerie wird Featured Bild enthalten, zum Beispiel, oder Hauptbild dergleichen, die wir oben haben. Damit dv darin sein wird, ein Bild, und dieses Bild wird eine Quelle haben, die das ausgewählte Bild sein wird , auf das ich klicke. Und auch die anderen Bilder werden darunter sein, wie wir hier div haben können. Und wir können es Bilder nennen. Und diese Bilder, wie ich Ihnen sagte, ein Werkzeug B listet auf, so dass ich verwenden kann. Die UL und LI. Also in diesem Fall kann ich UL und LI sagen und darin nach dem Drücken der Tabulatortaste, wenn Sie sehen, dass wir Emmet verwenden, so dass es automatisch meinen HTML-Code vervollständigt. Und hier werde ich nicht verwenden, um Bild wie auf diese Weise zu setzen, wie hier, Bild etwas. Ich möchte Ihnen eine andere Art zeigen, Bild als Hintergrund zu setzen. So können wir einen Stil Hintergrund des Bildes setzen und dann wird es als das Bild dieses LI angezeigt werden. Aber jetzt lassen Sie uns wie etwas sagen, nur um sicher zu sein, dass alles funktioniert. Wir können Bild sagen. Und hier haben wir eine Quelle und wir können zum Beispiel anrufen, wir nennen es ausgewähltes Bild. Und das wird eine Variable sein. Also werden wir dies als Eingabe haben. Also müssen wir die Variable oder dieses Klassenmitglied ausgewählte Bild innerhalb der ts-Datei definieren. Also kann ich hier gehen und ein Klassenmitglied definieren und es ausgewähltes Bild nennen, und es wird eine Zeichenfolge sein. Also hier werden wir das benutzen. Lassen Sie uns alles speichern, um zu sehen, ob es uns gut geht, so haben wir jetzt, wo wir keine Fehler machen, also haben wir keine Probleme in ihrem Code. Und wir müssen hier sehen, okay Bild, aber ich habe kein Hauptbild. Machen wir also ein statisches Bild. Also werde ich hier wieder durch die ts Datei gehen und das wie ein paar Bilder geben. Bild. Zum Beispiel gehe ich zum Ordner „Assets“ meiner Anwendung und rufe dann ein Bild auf. Natürlich können Sie jedes Bild auf Google anrufen. Also zum Beispiel werde ich die URL eines Bildes hier setzen. Zum Beispiel suche ich nach Bildern wird Produkt genannt. Ich werde zum Beispiel zu diesem Bild gehen, und ich werde sagen kopieren Bild-Adresse. Also, wenn ich hierher gehe und dann das Bild aufstelle, okay, ich habe die Bild-Adresse hier. Also lassen Sie uns dorthin gehen und legen Sie es in unserem ausgewählten Bild wertvoll. Also hier haben wir Bild ausgewählt, und dann werden wir das ausgewählte Bild haben, denke ich, in unserer Anwendung. Nachdem wir das gespeichert haben, gehen wir zu unserer Anwendung, werden wir sehen, dass dieses Bild hier platziert wird. Wenn Sie also wissen, dass wir Eingaben Quelle, wenn Sie als Eingabe verwenden, dann haben Sie plötzliche Quelle als Eingabe, die von der Variablen kommt, die in der ts-Datei definiert ist. Andernfalls wird es nur eine Zeichenfolge sein und es wird Ihnen hier keine Eingabe geben. Also ist es besser immer oder nicht besser. Sie müssen es wie in dieser Klammer setzen, um zu sagen, dass dies eine Eingabe ist, und ich werde wertvoll verwenden, was in der Galerie-Komponente ts Datei hier definiert ist. Nachdem wir das gespeichert haben, sind wir sicher, dass wir das Bild bekommen. Jetzt werden wir die Bilder erhalten, Liste der Bilder, wie ich eine Liste der Bilder erhalten kann. Also, wenn Sie sich erinnern, haben wir mit den Eingaben gearbeitet. Also diese Galerie, ich denke, wir werden eine Eingabe haben, die entfernt wird. Dieser Teil hier. Wir sagen hier, nichts, machen Sie es einfach leer. Und wenn Sie sich erinnern, habe ich über die Eingaben gesprochen. Input ist also etwas, wo ich Eingaben für diese Komponente definieren werde. Diese Komponente akzeptiert diese Eingabe und verwendet sie, um sich in der Vorlage zu rendern. Also können wir Bilder sagen. Wir können sagen, es ist ein Array von String. Wir können eine Reihe von Partnern haben, so wie wir nicht nur einen Weg haben werden. Wir werden mehrere Bilder haben, mehrere Parteien. Warum? Weil ich diesen Teil hier anzeigen möchte, Liste der Bilder. Also werden wir diese Bilder hier verwenden. Danach gehen wir in diese LI, ich sagte Ihnen, wir werden anders gehen. Also hier werde ich sagen, ich werde es wie MD4 geben. Also haben wir hier NG vier. Dann lassen Sie Bild wie ein Bild von Bildern, die Bilder, die man die Eingabe, die ich bereits definiert habe. Also jetzt danach werden wir sagen, dass wir das Bild als kantigen Stil geben können. Wie ich Ihnen sagte, ist dies eine andere Art, das Bild zu geben. Also werde ich Ihnen sagen, warum ich das tue. Es ist nur für die Dimensionierung. Also möchte ich feste Größen behalten, damit alle Bilder gleich sind. Also setze ich sie als Hintergrundfarbe oder ein Hintergrundbild ein. Also hier können wir Hintergrundbild haben. So können Sie wie dieses Hintergrundbild definieren. Und dann wird dieses Hintergrundbild eine URL wie diese haben. Weil Sie wissen, in CSS sage ich das Bild, Hintergrundbild als URL. Also in diesem Fall haben wir hier URL. Und dann werde ich noch ein doppeltes Zitat und plus setzen. Und mitten in dieser Klasse würde ich das Bild setzen, das ich von Bildern bekommen habe. Also für jede Schleife, werde ich ein Bild haben und es hier platzieren, so dass die URL ersetzt oder hier in dieser Hintergrundbild-URL platziert wird. Also in diesem Fall werden wir unser Image haben. Aber natürlich. Wir brauchen immer noch Styling. Also lasst uns das zuerst stylen, damit wir sehen können oder was vor sich geht. Also zuerst, wie Sie hier sehen, haben wir nichts. So können wir hier auch gespeichert haben, um keinen Fehler zu haben. Also retten wir alles. Wieder haben wir nichts. Also, jetzt werden wir diese Komponente verwenden, diese u i Galerie, um es wo in der Produktseite, in der Produktseite und geben Sie diese Galerie Eingabe, die Bilder genannt wird. Und diese Bilder werden die Produktbilder sein. Aber zuerst, lass uns das tun. Also möchte ich Ihnen zeigen, dass diese Anfrage, wie es aus dem Backend kommt. Also will ich hier Netzwerk, ich werde zu DevTools und offene Netzwerke gehen. Und lassen Sie uns die Seite aktualisieren und suchen Sie nach Anfrage, die mit dieser ID endet, weil ich, die Anfrage endet immer mit unserer Produkt-ID. Wie Sie hier sehen, habe ich diesen hier. Wenn ich also zur Vorschau gehe, wenn ich darauf klicke, werde ich sehen, dass ich Marke oder alles über das Produkt habe. Jetzt werden wir die Bilder haben. Wenn Sie sehen, haben wir Bild, das Hauptbild und dann Bilder ist, sind mehrere Bilder hier, die aus dem Back-End kommen. Also werden wir diese Bilder in unserer Galerie verwenden. Also müssen wir nur Produkt sagen, wie die Eingabe, die wir bereits definiert haben. Wir sagen, Bilder werden Produkt sein, wie das Produkt, das ich verwende Bilder. So wie Sie sehen, haben wir nun die, unsere Galerie innen, wie diese Produktseite eingegeben . Und wir übergeben die Bilder an diese Eingabe. Und die Eingabe oder die Komponente, wir rendern es hier auf diese Weise. Also lasst uns hier gehen und glühen, dass wir sehen werden. Okay, wir haben ein paar Sachen, von denen du gehört hast. Sie sind völlig unstylt. Wir werden es stylen. Lassen Sie uns zunächst eine Stylingdatei erstellen. Also in den öffentlichen Stilen haben wir Bibliothek und dann Sie, ich, und lasst uns auch wie Galerie haben. Dot SCSS, tut mir leid, es ist CSS, also müssen wir es als S, S, OK setzen. Und jetzt müssen wir das importieren. Also sagen wir auch Import für mich Galerie. Also haben wir auf diese Weise und diese UI ist wichtig, auch in jedem Geschäft. Also, wenn du einkaufst, kann das nicht sehen. Also jetzt werden wir verwenden oder Stil, dass Ghana. So können Sie auch meinen Weg verwenden, ich gehe immer auf diese Weise. Also trenne ich hier den Bildschirm, so dass ich hier sehen kann, welche Klassen ich verwendet habe. Also werde ich mit Galerie beginnen. Und diese Galerie enthält Hauptbild. Und wie Sie hier sehen, und Hauptbild, zum Beispiel, lassen Sie es wie für jetzt leer halten. Ich werde auch das Styling der Bilder haben. Also haben wir hier Bilder. Und diese Bilder, wie Sie sich erinnern, haben wir sie als U L. definiert also wird diese UL ein Flex sein. Also müssen wir ein Display flex machen, so dass es nahe einander ausgerichtet wird, diese Elemente oder jene Verbündeten. Und wir initialisieren es mit Marge 0 und Bedding 0, weil es mit einem Standardwert aus dem Browser oder aus der Bibliothek kommt. Also jetzt haben wir diesen Flex, und lassen Sie uns überprüfen, ob wir wirklich nahe einander setzen und sie nahe beieinander setzen. Also sparen wir, okay, wir haben immer noch nichts, weil wir auch den Stil des LI sagen müssen. Also speichern wir und dann setzen wir mit dem LI in diesem UL fort, wir haben eine LI und wir haben, zum Beispiel, Hintergrundgröße. Denken Sie daran, dass wir das Hintergrundbild haben, das dort definiert ist, also legen wir es auf Cover. So wird es den gesamten Bereich abdecken, der eine Breite von 100 und Pixel hat, wie ich ihm 100 Pixel Breite und 100 Pixel Höhe geben werde. Und immer LI-Elemente, wir müssen ihnen einen Anzeigeblock geben, weil sie sonst als Text angezeigt werden, Inline-Texte, sie werden nahe beieinander sein. Also, wenn Sie ihnen Anzeigeblock geben, wird es ihr geben oder ihm ein Verhalten wie so geben. Lassen Sie uns speichern und dann überprüfen, was im Front-End passiert. Okay, deine Würfel, jetzt haben wir sie alle nahe beieinander. Also lasst uns wieder, mehr zum Styling. Wir stylen die Bilder. Wir haben es nicht gestylt, das Hauptbild. Also müssen wir wie etwas Spielraum geben, oder? sie gerne ein wenig weit voneinander legen. Lassen Sie uns 15 Pixel geben. So können wir in ihnen wie getrennt haben. Nun, es ist sehr schön. Wir werden jetzt das Hauptbild stylen, wie wir das tun können. Zuallererst müssen wir dieser Variablen einen Wert geben. Also lasst uns klautern und dann wieder hierher gehen. Und ich werde dieser Variablen einen Wert geben. Diese Variable sollte also, wie Sie sich erinnern, eine URL sein, die vom Backend kommt. Also, was wir hier haben, nur die Bilder. In diesem Fall kann ich also die ersten Bilder oder das Bild des Image-Arrays anzeigen , das von der Produktseite kommt. Also in diesem Fall kann ich nicht sagen, in meiner Energie auf, in ihm, diese ausgewählt das Bild wird diese Punktbilder wie diese Bilder sein, und nehmen Sie das erste Mitglied des Arrays. Also, um netter zu sein, können Sie überprüfen, ob es Bilder gibt. Und diese Bilder haben Länge, wie es Elemente in diesem Bild gibt, dann können Sie ihm das ausgewählte Bild geben. Und auch, wir müssen die Galerie überprüfen, wie wir später sehen werden, ob es Bilder oder keine gibt. Also jetzt haben wir diese ausgewählten Bilder hier platziert. Sehen Sie, wir haben jetzt das Hauptbild platziert. Und dann haben wir auch diese Galeriebilder darunter. Also lasst uns das ein bisschen stylen. Wir werden etwas Styling darauf verwenden. Gehen wir zur Stylingdatei, so dass div des Hauptbildes hier das Bild selbst enthält. So kann ich alles in ihm in der Mitte ausrichten, so dass wir Text ausrichten Zentrum geben können. Ich möchte es in der Mitte machen, nur um es ein wenig in der Mitte der, dieser Seite oder dieses div zu machen . Danach werden wir einige Werte dafür haben. Wie wir den Inhalt darunter schieben können, etwa 15 Pixel. Und auch, wir können eine Höhe machen, wir geben verstecken wie 600 Pixel maximal, um nicht sehr groß zu sein. Und dann können wir das Bild darin stylen. So erinnern Sie sich, wir haben das Hauptbild im div und darin befindet sich Bild. So kann ich direkt darauf zugreifen. Ich kann nicht sagen, Oh mein Gott. Ich sage, EMG-Bild wird die maximale Breite 100% haben. Also möchte ich das Bild nicht mehr als die Größe setzen. Andernfalls wird es in diesen Inhalt geschoben. Also wollte ich maximal 100% des übergeordneten Containers haben , der dieser ist. So haben wir eine maximale Breite 100% und wir geben Höhe 100%. Also, um die Höhe des Patents wie 600 Pixel zu haben. Also lassen Sie uns das speichern und versuchen, zu überprüfen, ob es uns richtig geht. Aktualisieren, Nice. Wir haben alle Gegenstände sind gestylt. Wir haben diese 600 Pixel und wir haben hier, dass Galerie Bilder. Also lasst uns jetzt die in der Mitte machen. Wie wir Dinge in der Mitte tun, wenn Sie sich erinnern, wir verwenden flex, so können wir sagen, rechtfertigen Inhalt ihres Containers, die die URL zum Zentrum ist. Danach werden wir sehen, dass wir nach dem Laden diese Elemente zentriert haben. Also schauen Sie, wir haben eine sehr große Galerie und das erste Bild wird ausgewählt, wie dieses ausgewählt ist. Also lasst uns jetzt das Klicken machen. Wenn ich also auf eines dieser Bilder klicke, werde ich dieses Bild ändern. Es ist also sehr einfach. Ich bin sicher, du denkst dasselbe wie ich. Also hier werde ich eine Veranstaltung machen. Wir können sagen, klicken. Dieser Klick wird wie zum Beispiel das ausgewählte Bild ändern. Auf diese Weise kann ich das Bild wechseln, damit wir das Bild, das ich hier auswähle, nicht so gut weitergeben können . Also lasst uns jetzt gehen und das überprüfen. Und wir können diese Methode erstellen. Ich kann einfach hier in der ts-Datei sagen, hier eine neue Methode definieren, die die gleiche ist, die wir aufrufen, und es hat ein Bild und es wird eine Zeichenfolge sein, weil wir Bild-URL verwenden. Und dann haben wir hier, dass diese beiden ausgewählt das Bild wird das Bild sein, das ich vom Frontend bekommen habe. Also lassen Sie uns das in Bild-URL umbenennen. Es ist besser, mehr zu haben, weil Bild wie eine Daten ausdrückt. Damit wir es so machen können. Also Bild-URL hier auch. So können wir es haben. Bild ausgewählte Bild-URL, die Bild-URL ausgewählt. Hier haben wir noch einen. Und dann haben wir hier syntaktische Bilder. Und wir können auch diese Bild-URL sagen. Um also keine verwirrende Benennung zu haben, weil wir nicht das Bild selbst übergeben, übergeben wir nur die Zelle, die URL davon. Also hier speichern wir, dass, Speichern Sie auch, diese Komponente hier, und wir werden das überprüfen. Also haben wir gewählt, um den Konstruktor nicht zu verwenden. Ich werde Ihnen zeigen, dass wir hier Pfeile haben. Wir werden sie alle in Ordnung bringen. Wir verwenden ein X, wie Sie später sehen werden. Also haben wir eine Zwei, zum Beispiel hier beschwert es sich darüber. Ich habe keine Methode darin, weil sie leer ist, also ist es besser, sie zu löschen, wenn Sie nicht haben oder wenn Sie diese Methode nicht verwenden möchten. So speichern wir und wir sind jetzt sauber von Fehlern wie gebrochenem grammatikem Fehler. Also, wenn ich klicke, wie Sie sehen, klicke ich auf das Bild und das Bild ist diese Umschaltung. Es ist sehr nett. Und auch, wir werden überprüfen, ob wir Bilder eingegeben haben. Sie müssen also überprüfen, ob Bilder eingegeben werden. Also ist es besser, das sehr einfach zu machen. Sie können also nicht sagen, dass get seine Methode ist, wie Sie einen Getter definieren können und sagen, dass er Bilder hat. Auf diese Weise können Sie diese Methode als Variable definieren, die als Variable oder Klassenmitglied verwendet werden kann und sie in der Vorlage verwenden kann. Und ich werde sagen, Rückkehr für mich dieser Punkt Bilder Punktlänge. Also möchte ich überprüfen, ob es Länge mehr als 0 hat. Dann habe ich Bilder in der Komponente. Also habe ich Bilder vom Frontend oder von der Produktseite. Sonst wird es mir falsch geben, dann werde ich nichts anzeigen. So ist es die Art, wie wir das machen. Also hier haben wir ng-if. Also, wenn es eine Galerie, so können wir sagen, hier hat Bild. Also, wenn es Bild hat, dann zeigen Sie alle Komponenten. Andernfalls zeige ich nichts an, denn in diesem Fall werde ich das gesamte Personal brechen, weil ich hier Bilder, Links und mehrere oder andere Sachen verwende . Auf diese Weise ist es besser, dieses wertvolle immer zu verwenden. Also werde ich hier sagen, wenn dieser Punkt Bild hat, also, und auch, wenn dies als undefiniert kommt, dann wird es mir ein Problem geben. Ich werde es dir so zeigen. Also lasst uns hier gehen und ich werde alles retten. Also möchte ich Ihnen zeigen, dass, wenn wir keine Bilder im Array haben, in der Eingabe, nur um ein bisschen vorsichtig mit den Eingaben zu sein, denn in diesem Fall werden Sie vielleicht defekte Komponente verursachen und es wird Konsolenfehler geben. ist also besser, immer sicher zu sein, dass die Eingabe wirklich Daten hat oder nicht. Und dann, besonders wenn es sich um ein Array handelt und Sie in diesem Array schleifen und einige Dinge in der Vorlage machen. Es ist also besser, sicher zu sein, dass Sie 3D-Bilder haben und dann die Vorlage anzeigen. Nun, hier. Denn jetzt frage ich, ob es Bilder gibt und wenn Bilder nicht definiert sind, bekomme ich einen Fehler. Länge ist undefiniert oder Sie rufen Längen von etwas, das nicht definiert ist. In diesem Fall würden wir einen Fehler bekommen. Also ist es besser, das zu lösen, wie ich es Ihnen jetzt zeigen werde. Also lasst uns hier gehen und leere Anordnung von Bildern geben. Ich werde nichts geben. Also können wir hier nicht null oder undefiniert sagen. Damit wir sparen können. Und dann werden wir natürlich nichts in der Galerie bekommen. Aber wir werden einen Fehler in der Konsole erhalten. Wir sagen Länge von null, wie Sie hier in der Galerie-Komponente ts T2 und T4 sehen. Also, wenn wir zu dieser Galerie-Komponente ts 24 gehen, wie Sie hier sehen, sage ich: Okay, es gibt Fehler hier. Deshalb habe ich Ihnen gesagt, dass es besser ist, jede Codezeile zu überprüfen, wenn Sie verwenden, besonders die Eingaben. TypeScript gibt Ihnen die Möglichkeit, dies zu überprüfen, indem Sie ein Fragezeichen setzen. Und dann, wenn dies undefiniert ist, dann wird es für Sie einen Wert zurückgeben. Versuchen wir das nochmal. Wir speichern, wenn dieses Bild einen Nullwert hat, dann wird es hier nicht fortgesetzt und es wird im Allgemeinen undefiniert zurückgegeben. Also jetzt bekomme ich diesen Fehler nicht mehr, wie Sie hier sehen. Und auch meine Galerie ist leer. Also garantiere ich, dass ich mit diesem Fragezeichen gesagt habe, dass, okay, wenn es dieses undefiniert gibt, ihren Zustand nicht fortsetzen, einfach undefiniert zurückgeben. Und hier, wenn dies nicht definiert ist, wird die gesamte Galerie nicht angezeigt. So sehen Sie, seien Sie immer vorsichtig mit Ihren Eingaben. Deshalb machen wir hier praktische Dinge. Sonst wirst du in Schwierigkeiten sein. Wir haben eine Menge Fehler in der Konsole und Sie werden nicht wissen, woher sie kommen. Die letzte Korrektur, die ich hier hinzufügen möchte, dass wir hier haben Sie Galerie gibt Fehler, deaktivieren oder sollte von einem der Präfixe, blauen Bits vorangestellt werden. Also, weil ich hier in der ES-Lint-Datei in der Bibliotheks-UI das definiere. Okay, ich will dieses Attribut als blaues Bit spezifisch für seine blauen Bits. Also lasst uns das auch reparieren. Wir schaffen es, wie Sie hier sehen. Und auch wird dem Element oder dem Selektor als UI vorangestellt. Wenn wir das speichern, gehen wir wieder in unsere Galerie. Natürlich wird es manchmal dauern, um irgendwann repariert zu werden, oder es kann sofort behoben werden, wie Sie hier sehen. Und auch wir haben hier das Banner, Sie ich Banner auch diesen Fehler behoben. Auf diese Weise haben wir hier keine Fehler. Wir sind sauber. Aber wie auch immer, wir werden sie alle am Ende beheben, wie ich Ihnen später mit einem hervorragenden zeigen werde. Das ist also alles über der Galerie. Nun, lassen Sie uns den Fehler zurücksetzen, welche Reihenfolge sie Fehler sind, die ich hier gemacht habe, damit wir die Produktbilder haben können. Jetzt haben wir die ganze Galerie gesehen und wir haben die Produktseite komplett fertiggestellt. So kann ich alle Produktbilder sehen, zum Beispiel dieses, und auch jedes andere Produkt, das Sie sehen möchten. Also in diesem Fall ist es sehr schön. Wir haben die Produktseite vollständig implementiert. Wir werden den nächsten Abschnitt mit ihrem Warenkorb arbeiten. Wir werden in den Warenkorb legen, wir fügen diese Menge hinzu und wir werden mit NGO RX arbeiten, um die Artikel des Warenkorbs zu speichern. Und wir werden sofort sehen, wie es sich hier ändert. 154. Papierkorb in LocalStorage: Okay, also zurück zu unserer Diagrammstruktur. Wir müssen die Checkout-Komponente, Kartenkomponente und User History Komponente erstellen , wie wir in der Übersicht gesehen haben. Also jetzt, was wir zuerst brauchen, um die Kartenkomponente zu erstellen, sondern auch die Kartenkomponente benötigen einen Warenkorb-Service. Und dieser Warenkorb-Service, können Sie eine Bibliothek dafür erstellen. Oder Sie können auch alle Dinge in Bestellungen Bibliothek platzieren, die Sie auf der rechten Seite sehen. Auf der rechten Seite wird die älteste Bibliothek für den Kasse Warenkorb verantwortlich sein und auch wie alle Benutzer bestellen und vielleicht können wir die Zahlung verwalten. Also zuerst, fangen wir mit dem Wagen an. Der Warenkorb, Ich werde einen Dienst erstellen, der Warenkorb Service genannt wird, und es wird in Bestellungen Bibliothek befinden. Und für die beobachtete Woche, den Wagen, den wir werden Algen gut verwenden, die Observables oder NDR X. Also werde ich Ihnen beide Wege zeigen. Ich werde mit der einfachen beginnen, die wie Observables ist. So können wir in der Kopfzeile beobachten, wie Sie hier sehen, so etwas wie wir immer Live-Update auf dem Warenkorb sehen können. Also zum Beispiel, wenn ich auf In den Warenkorb hier klicke, OK, es wird auch hinzugefügt. Wenn ich wieder auf klicke, zum Beispiel, gehen wir zur Produktseite und ich klicke auf dieses Produkt. Ich sehe, dass, wie Sie es sehen, aktualisiert wird, damit wir sehen können, wie diese Karte live aktualisiert wird. Also werde ich beide Wege und DRX und Observables verwenden. Aber jetzt fangen wir mit einfach an, was Observables ist. Also zurück zu unserem Projekt und Code. Lassen Sie uns einen neuen Dienst erstellen, der Cart Service genannt wird. Und es wird in Ordnung Service oder Bestell-Bibliothek befinden. So können wir hier und wieder zu NX-Konsole generieren gehen und wir haben Service, und wir werden diesen Dienst in einem Ordner namens Dienste innerhalb der Bestellbibliothek nennen. So können wir hier Dienstleistungen Warenkorb haben. Der Projektname wird Aufträge sein, und wir müssen diesen Test überspringen. Wir brauchen sie momentan nicht. Danach erstellen wir diesen Wachdienst und wir werden unseren Code dort spüren. Also lassen Sie uns schließen alles geht zwei Lippen und wieder, niedrige Aufträge und dann Lippen und Dienstleistungen. Und hier sind wir in unserem Warenkorb Service. So wird der Warenkorb-Service vor allem, wie einige, zum Beispiel, Initialisierung für den Warenkorb haben wie einige, zum Beispiel, . Also für die Karte werde ich den lokalen Speicher verwenden. Warum lokaler Speicher? Also, wenn der Benutzer nach dem Neuladen der Anwendung in den Shop zurückkommt, möchte ich immer die Karte behalten, die er zuvor ausgefüllt hat. Also möchte ich alle Daten der Wachen behalten, die er fühlt, dass P4 sie nicht verlieren. Wenn ich zum Beispiel besonders von Seite zu Seite gehe oder zum Beispiel, wenn ich die Anwendung woanders lasse, möchte ich die Guard-Daten hier immer noch gleich halten. Der beste Weg ist, wie Sie hier sehen, dass wir den lokalen Speicher nutzen können. Der lokale Speicher wird zum Beispiel den Warenkorb haben . Und denken Sie daran, dass wir auch das JWT-Token hier gespeichert haben. Und jetzt werden wir auch diesen Cartier retten. Der Warenkorb hat also Artikel und jeder Artikel hat die Produkt-ID und eine Menge dieses Artikels. So kann ich in diesem Fall das Produkt, das verwendet wird, und auch die Menge davon speichern. Und auch, wenn ich etwas zu ihrem Warenkorb hinzufügen möchte, wieder, Ich werde sehen, dass dieser Warenkorb geschnitten aktualisiert und wir haben die Menge für das gleiche Produkt. Also muss ich das Produkt nicht wieder hinzufügen, aber ich erhöhe nur seine Menge, wenn der Benutzer mehrmals auf In den Warenkorb klickt. In diesem Fall müssen wir so etwas wie lokalen Speicher haben. Also, wenn ich meine Seite aktualisiere, gehe ich hierher, aktualisiere. Und ich sehe immer noch meine Warenkorb-Artikel, die sich auf ihrer Warenkorbseite befinden. Und wir haben diese auch im lokalen Speicher. Einige Leute verwenden auch die Datenbank, sie halten den Wächter der Benutzer in der Datenbank. Aber hier sind wir noch nicht eingeloggt, also verlieren wir nur den lokalen Speicher, wie für die Öffentlichkeit ist, für jeden, jeden Benutzer, es wird nur unter der Domain gespeichert, die lokalen Host ist, oder für Beispiel, mein E-Shop dot com. Und dies könnte jedes.com, wir haben lokalen Speicher, wie Sie hier sehen. Und dieser lokale Speicher wird einen Wagen haben. Also, wenn der Benutzer wieder in den Laden kommt, wird er sehen, dass seine Karte immer noch da ist und er die Artikel des Einkaufswagens nicht verloren hat. Also hier sind wir nicht zwingen den Benutzer, sich anzumelden, Es ist nur öffentlich. Wir haben keine Erzwingung für die Anmeldung. Deshalb speichern wir es im lokalen Speicher, nicht in der Datenbank. In diesem Fall werden wir diesen Service basierend auf dem lokalen Speicher erstellen. Zunächst einmal, wie ich weiß, dass alles oder jeder lokale Speicher initialisiert werden muss. Wir müssen unseren lokalen Speicher mit ihrem Warenkorb initialisieren, wie leere Warenkorb-Artikel. So können wir init, lokalen Speicher verwenden. Wir können eine Methode machen, die in seinem lokalen Speicher ist. Und dann sagen wir wie konstant, wir können Anfangskorb geben, wie wir es nennen können Anfangskorb. Und diese Anfangskarte wird haben, wird wie Objekt sein, das zwei Dinge enthält, oder eine Sache, die Elemente genannt wird. Und diese Artikel sind die Artikel, die ich wie gewohnt finden möchte, wie wir zuvor gesehen haben, Produkt-ID und die Menge. Also für jetzt die Gegenstände oder die NHL-Karte, der Anfang wird völlig leer sein. Und hier werden wir lokalen Speicher im Allgemeinen sagen, weil dies JavaScript ist. Jetzt schreiben wir, sagen wir set item und dann setze ich den Artikel auf diese Weise, Ich sage Wache, oder wir können sagen, wie normaler Wagen, die die k sein wird, Der Schlüssel hier haben wir hier c0. Und dann setzen wir den Wert, und der Wert wird Anfangskarte sein. Ok, nett. Wir erhalten hier einen Fehler, weil nicht dem Parameter der Zeichenfolge zuweisbar ist, weil wir keine Objekte zuweisen können, um eine Zeichenfolge innerhalb des Set-Elements zu sein. Element würde erfordern, dass es sich um eine Zeichenfolge handelt. Wie können wir das tun, wie Sie hier sehen, dass wir die Daten speichern, okay? Array von Objekten und all diese Daten. Wir können sie in String ändern, indem wir JSON stringify verwenden. Dies ist also wie eine Methode, die JSON Stringify genannt wird. Es wird für mich dieses Objekt ändern, um es zu string und im lokalen Speicher als String zu speichern. So können wir das leicht machen. Es ist also, als hätten wir einen Strahl, der JSON oder String ist, und wir speichern die Daten darin. So können wir sagen konstant, wieder, eine andere Konstante. Wir können Anfangskarte sagen, gleich, aber es wird nicht Anfangskorb als Objekt sein, es wird JSON sein. Und dieser Wächter wird haben, wird diese Klasse oder diese Bibliothek verwenden, die intern in JavaScript ist. Und wir sagen JSON Punkt stringify. Machen Sie dieses Objekt also als String und speichern Sie es dann in der anfänglichen Wache hier. Nachdem wir das gespeichert haben, sehen wir, dass alles in Ordnung ist. Wir bekommen keinen Fehler. Aber die Frage hier, wer wird diese Funktion nennen? Als ob wir es nur beim ersten Mal anrufen müssen, als ich in meinen Laden kam. Wie ich hier will, gehen Sie den Kunden, den er betreten wird, in meinen Laden. Aber ich muss irgendwie ein Auto zu einem leeren Gegenstand initialisieren. Also muss ich seine Karte mit leeren Gegenständen am Anfang für einen neuen Besucher initialisieren , der zum ersten Mal zu meinem Shop kam. Also müssen wir es wie das erste Mal und nur einmal nennen. Nicht nur wie jedes Mal, wenn ich zu einer Seite gehe, muss ich initialize aufrufen, initialisieren. Andernfalls wirkt sich dies auf die Leistung aus. Also ist es besser, es irgendwie zu nennen, irgendwann einmal. Sie haben also eine von zwei Möglichkeiten. Also, wenn Sie wissen, dass wir Module haben und wir werden das Bestellmodul im Anwendungsmodul hier verwenden. Lassen Sie uns also das Bestellmodul im Anwendungsmodul des Energieshops aufrufen. Also werde ich zu einem Shop gehen und dann App-Modul hier, was wie die Root-Komponente ist, die wir sagen können, oder das Route-Modul. Es ist der Anfang meiner Anwendung, der Hauptcontainer. Also sage ich hier Modul hinzufügen und dann rufe ich in Ordnung, oder das Modul. Also die Reihenfolge ist Modul wird aus dem Namen der Organisation importiert werden und Reihenfolge ist, hängt es von der Bibliothek ab, wie wir den Namen dort angegeben. Also jetzt wird das Bestellungsmodul, welches dieses ist, in meinem Anwendungsmodul aufgerufen. Lasst uns das hier retten. Und jetzt überprüfen wir. Wir müssen also wissen, dass, wenn dies aufgerufen wird, Sie den Warenkorb initialisieren können. Dies wird also nur für eine Zeit aufgerufen, nur mit einem ersten Mal, wo ich das bestellte Modul verwenden werde. In diesem Fall müssen Sie sicher sein, dass all diese Module wirklich nur einmal aufgerufen wird. Im Ordnungsmodul kann ich einen Konstruktor definieren. Und wenn das Gold ist oder dieses Bestellmodul erstellt wird, kann ich den Auftrag oder Carter Service anrufen. So können wir sagen, Warenkorb-Service innerhalb des Moduls, das Sie sehen, wie Sie auch die Dienste innerhalb des Modulkonstruktors verwenden können. Also, und dann sage ich Warenkorb-Service Punkt initialisieren Karte lokalen Speicher. So, wie Sie hier sehen, haben wir hier diese Methode. Und ich werde den Konstruktor unseres Moduls die Methode aufrufen , die initialisierten Warenkorb lokalen Speicher genannt wird. Wenn wir also speichern, wird meine Anwendung neu geladen und es wird das Bestellungsmodul aufrufen. Das heißt, Modul wird wie am Anfang konstruiert, weil es eine Klasse ist. Also ruft jede Klasse, wenn Sie es intern aufrufen, Angular dieses Ordnungsmodul auf und erstellt ein neues Objekt davon. Und dann wird es automatisch den Konstruktor aufrufen. Der Konstruktor hat diese Methode, die sich innerhalb des Kartendienstes befindet. Wenn wir also zu unserer Anwendung gehen und aktualisieren, werden wir sehen, dass der Warenkorb erstellt wird. Also lassen Sie uns dieses Token erneut entfernen oder wie diesen lokalen Speicher oder alle davon. So gehen wir zum Beispiel zur Homepage. Also jetzt haben wir nichts, weil ich es gelöscht, weil er seinen Beweis hatte , dass ich nicht das Orders Modul mehrere Typen aufrufe. Wenn ich also die Seite neu lade, wie wenn ich meine Anwendung zum ersten Mal aufrufe, wird der Warenkorb-Artikel mit seinem Wert in ihrem lokalen Speicher erstellt. Also hier garantieren wir, dass wir die Karte nur einmal verwenden oder erstellen. Und es wird nicht mehrmals erstellt, wenn ich in meiner Anwendung navigiere. Aber auch manchmal würden Sie vielleicht Bestellungen Modul an anderen Orten verwenden , wie Sie es verwenden werden. Zum Beispiel, in Ihrer Anwendung, haben Sie Seiten oder zum Beispiel, Sie haben ein anderes Modul und Sie gehen, um Aufträge Modul verwenden , weil Sie einige Komponenten von dort benötigen, wie wir zuvor gesehen. Und in diesem Fall wird es ein Problem für Sie machen, dass dies mehrmals aufgerufen wird. In diesem Fall ist es besser, es anzurufen und einen Ort zu finden , wo aufgerufen wird oder Dinge nur einmal aufgerufen werden können. Zum Beispiel schlage ich für Sie vor, der Header, wie Sie sich an den Header in meiner Anwendung erinnern, wird nur einmal aufgerufen. Also haben wir hier in der App mehr Komponente, wir haben ND Shoppe Header. Und dieser Energie-Shoppe-Header wird nur einmal genannt. Um das zu beweisen, werde ich Ihnen zeigen, wie ich hier Konsolenprotokoll haben werde. Zum Beispiel können wir in der Kopfzeile sagen. Und dann werden wir sehen, dass jedes Mal, wenn ich in meiner Anwendung navigiere, ich werde sehen, dass, okay, jeder Header nur einmal aufgerufen wird. Sie sehen, es heißt Nur die Zeit, in der ich den Header definiert habe , weil er sich im Stammverzeichnis meiner Anwendung in ihrer Haupt-App-Komponente befindet. So würde es nur einmal genannt werden, unabhängig davon, dass aus oder die Partner, die ich besuche. Dies ist eine Möglichkeit, eine andere Möglichkeit, die ich Ihnen gezeigt habe, dass Sie einen Konstruktor von Arthurs Modul verwenden können , wenn Sie nicht sicher sind, dass Sie das Bestellmodul nicht mehrmals verwenden werden. Also hier haben wir die Initialisierung ihres Warenkorbs. Jetzt werden wir diese Wache füllen und sehen, wie wir Artikel in diesen Warenkorb setzen können. Wie wir in der nächsten Vorlesung sehen werden. 155. Füge Produkte zum Warenkorb hinzu: Willkommen zurück. Wir werden jetzt Artikel in den Warenkorb legen. Also, wenn ich auf diese Schaltfläche klicken, In den Warenkorb, Ich werde dieses Produkt mit seiner ID und wie viele oder Menge zu den Artikeln Array hinzufügen, die in der lokalen Lagerung in ihrem Warenkorb definiert ist. Dafür müssen wir eine neue Methode hinzufügen, die auch dem Warenkorb-Service hinzugefügt wird. Ich nenne es Set Guard Artikel und es wird einen Einkaufswagen Artikel akzeptieren, wie wir später definieren werden. Und dieser Einkaufswagen Artikel wird ein Modell sein und es wird für mich die Karte zurückgeben , die ich gerne immer für alles, was ich benutze, wie String, Nummer oder sogar ich erstelle meinen eigenen Typ. Dafür werde ich den Warenkorb und den Artikel des Warenkorbs erstellen. Also gehen wir einfach zu den Modellen, die wir hier haben oder den Artikel oder wir können so gut definiert Warenkorb. Und wie Sie hier sehen, definieren wir es als eine Klasse, so können wir sagen, Export-Klasse. Und diese Klasse wird als Warenkorb am Anfang benannt werden, und es wird Elemente haben, und diese Elemente werden Art von Schutzelement und Array von Garth Element sein. Also in diesem Fall muss ich auch diese Klasse definieren, ich werde Klasse Garth Element sagen. Und dieser Garth Artikel wird zuerst das Produkt selbst haben. Oder wir können Produkt-ID sagen, die einfacher sein wird. So können wir ihm diesen Namen geben und es wird eine Zeichenfolge sein. Und dann können wir die Menge definieren. Also die Menge dieses Produkts im Auto. Es wird also eine Zahl sein. Also für das, Es ist besser, immer diese Elemente als optional zu geben. Wenn Sie also ein neues Objekt dieser Klasse erstellen, wird es Ihnen keinen Fehler geben, wo Sie zum Beispiel die Menge nicht übergeben. Also in der gleichen Datei habe ich zwei Arten, Warenkorb und Garth Artikel. Ich werde diese Typen hier verwenden. Also drücken wir einfach den Kontrollraum und wir importieren den Warenkorb-Artikel und auch Konturraum oder Punkt, es wird mir den Warenkorb selbst geben. Also jetzt, wenn ich einen Einkaufswagen Artikel setzen, möchte ich den Warenkorb selbst zurückgeben. Also zuerst müssen wir Artikel in den Warenkorb im lokalen Speicher hinzufügen. Lass uns das machen. Also zuerst kann ich sagen, dass ich den aktuellen Wächter bekommen kann, der sich im lokalen Speicher befindet , weil ich diese Gegenstände verwenden und ihnen mehr Gegenstände hinzufügen werde. Also zuerst muss ich die aktuelle Karte bekommen. Also, was Wache habe ich derzeit in der lokalen Speicher vielleicht, weil ich zuvor einige Elemente hinzugefügt, so muss ich die aktuelle Wache zu bekommen. Und dann schiebe ich auf die Gegenstände dieser Wache, das neue Produkt. So können wir das leicht machen. Also zuerst können wir diese Guard Const Karte bekommen, und diese Karte wird eine Art Wache sein. Und dann können wir sagen, lokale Lagerung, Punkt bekommen oder Artikel bekommen. Genau. Und jetzt definieren oder bekommen wir die Warteschlange, die wir hier gesetzt haben. Also will ich diese Wache holen. Also, wenn Sie sehen, dass, wenn Sie mehrmals verwenden diese Konstante ist besser, es oben hier zu definieren. So können Sie sagen, Export, und wir können es wie Wache, Artikel oder Kartenschlüssel nennen . Wir können so sagen. Und es ist besser, dass Konstante Großbuchstaben sein kann. Wir sanken und sagen Wache und Schlüssel. Und dieser Wagen und Schlüssel werden in der Art sein, wie der Wagen genannt wird. Auf diese Weise definieren wir diese Konstante und die wir in unserer ganzen Klasse hier oder in unserem ganzen Service nutzen werden. Also in diesem Fall ist es besser, diesen Kartenschlüssel und Ross von diesem und anstelle dieses zu haben. In diesem Fall haben Sie keine hartcodierte Zeichenfolge, die nicht schön ist. So ist es, als hätte ich den ganzen Wagen und diese Artikel mögen. Und drinnen werde ich hier wie der Wachposten in den Wagen schieben lassen. So können wir das leicht machen. Also zuerst müssen wir auch die Karte bekommen. Wenn Sie sich erinnern, setzen wir es als JSON oder Zeichenfolge von JSON. Also müssen wir es zurückgeben, um als Objekt zu sein. In diesem Fall reichen wir nicht aus, um das zu tun. Es ist nicht genug, weil dies für mich eine Schnur zurückgeben wird und das wird mir einen Fehler geben, weil es hier sagt, Karte wird als eine Schnur sein, aber es hat eine Karte. Also geben wir eine Zeichenfolge zurück und wir definieren, dass diese Karte Typkarte hat, was so weit falsch ist, dass es besser ist, diesen JSON zu analysieren. Also würde ich sagen, JSON dot Parts. Hier kehren wir von String zu Objekt zurück, also müssen wir es nicht stringify, denn wenn wir Element in diesem Garth setzen, setzen wir es ein. Aber wenn wir Element aus dem lokalen Speicher erhalten möchten, werden wir es als von der Zeichenfolge zu JSON analysieren. In diesem Fall habe ich es als Objekt und dann kann ich auf Elemente oder alle Klassenmitglieder in diesem JSON zugreifen. Also hier gehe ich einfach und ISA-Karte Punkt-Elemente, die schieben würde. Also schiebe ich einen neuen Artikel in den Warenkorb und ich gebe ihm Warenkorb Artikel. Also hier haben wir unseren Warenkorb-Artikel definiert und auf ihre Warenkorb-Artikel geschoben. Aber es gibt mir einen Fehler, weil ich die Karte nicht zurückgeschickt habe. Wieder. Ich möchte die aktualisierte Wache zurückgeben. So können wir hier sagen, geben Sie den Warenkorb zurück, der mit einem neuen Artikel hier aktualisiert wird. Also zuerst müssen wir diese Methode nennen, wie wir sie nennen können. Wie gesagt, dass wir auf diese Schaltfläche klicken und diesen Artikel in den Warenkorb hier. Also, wie wir das tun können, können wir zu unserem Produkt Artikel gehen, wenn Sie sich an diese Komponente erinnern, die wir zuvor definiert haben, so können wir nach ihm suchen und wir sagen Produkt Artikel. Und hier ist es. So können wir sagen, Produkt Element Komponente. Und wenn Sie sich in diesem Produkt Artikel Komponente erinnern, haben wir Taste. So können wir sagen, diese Schaltfläche onclick. Und wir können sagen Produkt in den Warenkorb. Also hier, in diesem Fall, können wir dieses Produkt in den Warenkorb legen. Also müssen wir auch diese Methode definieren. Also gehen wir zu diesem TypeScript dieses Produkt-Artikel und wir sagen, dass Werbeprodukt in den Warenkorb wird den Warenkorb-Service aufrufen. Also müssen wir auch den Warenkorb-Service anrufen. Ich werde sagen, private Wachdienst. Und dieser Service wird aus dem Warenkorb Service importiert werden. Aber wie Sie hier sehen, kommt es als der vollständige Weg. Wir brauchen so etwas wie eine Abkürzung, wie wir sagen müssen, wie hinzufügen. Und dann habe ich den Namen der Organisation und ich würde sagen, welche Bibliothek ich den Dienst erstellt habe, aber es gibt mir immer noch Fehler, weil wir die Bestellungen oder den Warenkorb-Service nicht in der bestellten Bibliothek exportiert haben. Also gehen wir hier zur Indexdatei. Also klicke ich auf die Indexdatei innerhalb oder die Bibliothek. Und ich sage Export auch für mich, nicht oder deren Service, aber auch die Wachen Service. So können wir hier Cart Service haben. Also hier, wenn ich zum Produkt-Artikel gehe, werde ich kein Problem haben, wenn ich diesen Wachdienst importiere, weil er definiert wird. Also, jetzt haben wir, wenn wir diesen Wachdienst nutzen, wenn ich hierher gehe und diesen Kartenservice in meinem Produkt benutze, werde ich hier kein Problem haben. Ich bekomme immer noch Fehler, weil es sein sollte oder es keine Ordnung gibt. Und jetzt gehen wir zu unserer Methode, wieder, fügen Sie Produkt in den Warenkorb. Und dann sagen wir dieses Punkt-Produkt oder Service. Und dann werden wir Wachposten gesetzt haben. Aber hier brauchen wir einen Warenkorb-Artikel. Wie können wir einen Warenkorb-Artikel erstellen? Wir können ein Objekt erstellen, wir können const sagen, und dann nennen wir es Garth Element. Und dieser Artikel wird eine Art von Schutzelement haben, aber dieser Wächter Artikel auch ich denke, ist nicht exportiert. Also müssen wir auch zu unserer Indexdatei gehen. Und um zu Bibliothek. Und dann sage ich Export, beginne von nicht Oberflächen, aber wir brauchen Modelle. Wir müssen ein neues Modell importieren oder exportieren, das das GARCH-Modell sein wird, das wir erstellt haben. Also in diesem Fall, Produkt-Artikel, Produkt-Bibliothek kann diesen Einkaufswagen Artikel sehen. So können wir es hier übergeben und diese Zeile löschen. Also in diesem Fall wird hier mein Warenkorb-Artikel definiert. Ich muss einen neuen Wächter erstellen. Also, dann haben Sie Artikel wird Produkt-ID sein. Und diese Produkt-ID wird diese Punkt-Produkt-Punkt-ID sein, weil ich hier Eingabe-Produkt habe, wenn Sie sich erinnern, wir haben das Produkt übergeben oder Tally zu diesem Produkt Artikel und dann bekomme ich es zurück. Und so kann ich alle Details des Produkts erhalten, einschließlich der ID und dann Menge. So sind wir in dem Produkt Artikel, so dass der Benutzer, wenn er einmal auf das Produkt oder in den Warenkorb Schaltfläche in Produkt Artikel klicken, werden wir nur eine in den Warenkorb legen. Und dann übergeben wir diesen Wächter Punkt zwei. Schutzartikel, und wir sind alle in Ordnung. Also lassen Sie uns alles speichern und die Anwendung neu laden. Ich hoffe, wir werden keine Fehler bekommen. Okay, los geht's. Also, jetzt habe ich hier das Produkt Artikel, wenn Sie sich erinnern, wir haben das Produkt Artikel in Feature-Produkten verwendet und auch wir haben es als auch in der Produktliste verwendet. Also werde ich das in den Warenkorb legen. Wenn ich hier klicke, sehe ich, dass der Warenkorb hier nicht aktualisiert wird. Warum? Denn auch im Service, wenn Sie zu ihrem Warenkorb-Service gehen, sind Sie nicht genug, um Artikel hier zu schieben. Sie müssen sie auch erneut in den lokalen Speicher zurückschieben. In diesem Fall müssen Sie wieder alles beschneiden, als müssten Sie diese Zeilen erneut machen. Also, nachdem Sie diese Karte gedrückt haben, können Sie wie anfängliche Wache JSON sagen oder Sie können Wache JSON sagen. Und das wird diese Wache stringify sein, nachdem wir diesen Gegenstand dazu drängen. Und dann werden wir diesen Wächter JSON mit diesem Wächter-Schlüssel zu ihrem lokalen Speicher schieben . Also lasst uns das machen. Natürlich werden wir diese Methode umgestalten. Ich zeige Ihnen nur die Schritte, wie wir das machen können. Also gehe ich wieder zur Anwendung und dann in den Warenkorb. Ich sehe, dass der Artikel hier hinzugefügt wird. Klicken Sie erneut, ich sehe, dass das Element hinzugefügt wird. Ich klicke auf IC, ich habe jetzt drei Elemente. Also lasst uns etwas Refactoring machen. Lassen Sie uns dies zuerst in eine neue Methode setzen. Wie alle diese wie JSON-Bars, LocalStorage, erhalten Sie Artikel wie den Warenkorb selbst. Lassen Sie uns es auf eine Methode setzen, die wir nennen können, dass sie Wache wird. So können wir sagen, bekommen Warenkorb wie im Allgemeinen. Und das wird für mich den Warenkorb selbst zurückgeben, wie Warenkorb als Objekt, nicht schützen wie zum Beispiel diese JSON-Daten. Also zuerst können wir sagen, geben Sie mir das Gleiche und auf diese Weise würde ich Karte JSON.Parse sagen, aber wir können auf diese Weise sagen, wie ich es detaillierter machen möchte, nur Sie können es verstehen. Also natürlich können Sie es so halten, wie wir es vorher gemacht haben, aber ich möchte detailliert, also können wir hier sagen, JSON-Daten zu schützen, oder wir können es Auto JSON-String nennen, weil wir diese Stringify müssen. Und dann definiere ich Konstante, ich nenne es wieder Karte. Und diese Karte, es wird auch von der Art der Wache sein. Also hier wird es keine Karte sein, es wird String sein. Also erhalten wir den Artikel aus dem lokalen Speicher. Es wird für mich die Zeichenfolge zurückgeben, die sich mit diesem Schlüssel im lokalen Speicher befindet. Und dann verstehe ich es. Und dann werde ich hier sagen, JSON-Punktteile, und dann JSON-String bewachen. Und hier werde ich auch die Warenkorbdaten haben. Und am Ende werde ich sagen, Rückkehr für mich diese Wache als Objekt. Also hier müssen wir uns nicht stören. Wir sagen nur hier, gib mir einfach eine Konstante wird Wache sein. Und dieser Wagen wird diese Dot Get Karte haben. Das ist also einfach. Wir haben alle diese Zeilen gespeichert, weil wir Garth auch mehrmals in anderen Methoden verwenden werden, wie wir später sehen werden. Danach schieben Sie Elemente und dann bewachen Sie JSON Stringify erneut. Und dann setze ich den Artikel in den lokalen Speicher und ich bringe die Wache wieder zurück. Okay, danach gehen wir wieder zu unserer Anwendung und prüfen, ob alles gut funktioniert. Ok. Wir fügen Artikel zu ihrem Warenkorb hinzu. Ok. Aber mit dem Hinzufügen, haben wir ein Problem, dass Sie , wenn Sie sehen , dass, wenn ich auf diesen Artikel in den Warenkorb klicken, es wird das Produkt immer wieder und wieder hinzufügen. Ich werde Produkt-ID haben und es wird mehrmals hinzugefügt. Wir müssen nur, wenn ich auf In den Warenkorb klicke. Und wenn dieses Produkt bereits in ihrem Warenkorb, dann muss ich die Menge hinzufügen, erhöhen Sie nur die Menge, nicht fügen Sie ein neues Produkt Artikel. Andernfalls wird unser Wächter Probleme haben, dass er das Produkt selbst dupliziert. Daher müssen wir überprüfen, ob die Produkt-ID oder das Produkt bereits in ihrem Warenkorb vorhanden ist. Erhöhen Sie einfach die Menge und machen Sie keine Ergänzung zu dieser Reihe von Artikeln so weit, dass wir überprüfen müssen, ob das Produkt innerhalb oder innerhalb der Karte bereits ist. Also bekomme ich die Karte, dann kann ich eine Konstante erstellen, wir können es als Wächter nennen. Element ist vorhanden. Wir können sagen, dass Garth Artikel existiert, dieser Einkaufswagen Artikel existiert. Wir werden die Artikel des Warenkorbs durchlaufen und prüfen, ob Garth Artikel bereits in diesem Warenkorb übergeben wurde. So können wir sagen, Karte zu finden oder feste Punkt Elemente zuerst, Punkt finden, weil wir es als Array haben. Und ich werde überprüfen, ob es Produkt Artikel oder Produkt-ID ähnlich wie Warenkorb Artikel, die hier übergeben wird, dann ist der Warenkorb Artikel vorhanden. Also werde ich sagen, finden. Und dann Artikel, Sie wissen, dass wir diese Strafe auf diese Weise verwenden können. Und wir können einen booleschen oder wie einen booleschen Rückgabewert angeben , der für mich definiert, dass dieses Element existiert oder nicht. Überprüfen Sie also für jedes Element in diesem Array die ID. Wenn es genau das gleiche von Guard Artikel ist, auf das ich klicke oder in ihren Warenkorb hinzufüge, dann geben Sie es für mich zurück. Im Einkaufswagen ist Artikel vorhanden. Also hier werde ich überprüfen, ob es Garth Artikel existiert. Erhöhen Sie dann die Menge sonst, schieben Sie den neuen aktuellen Gegenstand an die Wache, und geben Sie den Wächter dann wieder zurück. So werden wir es also tun. So werden wir die Menge für das Produkt, das wir nennen, das wir gefunden haben oder den Artikel, den wir gefunden haben, erhöhen . Bisher muss ich, wenn ich mehrere Produkte habe, eines finden. Wie gehen Sie durch das ganze Array, das ganze Element, und überprüfen Sie, wenn ich einen finde, dann erhöhen Sie die Menge davon. Der beste Weg, um diese Elemente zu durchlaufen, ist die Verwendung der Karte. Also, wenn ich hier gehe und ich sage Carte Artikel wieder, und dann Punktkarte. Und dann können wir hier Wache Artikel oder wie Artikel sagen, einfach so. Und dieser Artikel wird es überprüfen. Also, wenn Artikel gleich, sorry, Artikel Punkt Punkt Produkt ist , ist es genau, wie wir den Garth Artikel gefunden. Also werde ich hier sagen, wenn Artikel, dass Produkt-ID gleich Garth Artikel ist, die ich in diesem Set hier übergeben, guard item dot Produkt-ID. Dann müssen wir diesen Artikel haben, die Menge erhöht. Also sagen wir einfach item.quantity gleich dem Artikel der Menge, die wir vorher wie zuvor hatten, plus der Menge, die mit dem Garth Artikel übergeben wird. Also werde ich hier sagen Warenkorb Artikel Punkt Menge. Danach sparen wir und prüfen, ob wir die Menge wirklich erhöhen. Also hier wird meine Wache wieder initialisiert. Ich klicke auf OK, ich füge hinzu, Sie sehen, wir haben die Menge basierend auf ihrem Schutzelement erhöht, wenn es existiert oder nicht. Also, wenn ich auf ein anderes Produkt klicke, okay, ich habe hier nur ein Produkt. Wenn ich auf ein anderes klicke, wird es dieses Produkt nicht finden, also wird es einen neuen Artikel hinzufügen, wie Sie hier sehen. Wenn ich erneut klicke, werden wir sehen, dass dieser Artikel die Menge erhöht. Drittes Produkt. Wir haben hier drei Produkte. Wieder wird es seine Menge erhöhen. Wir haben also nur ein Produkt, aber die Menge ist anders, basierend auf diesen Klicks. In einigen Fällen ist es besser, in der Zuordnung geben Sie das aktualisierte Element zurück. Also sagen Sie einfach hier wieder, dass die Rückkehr für mich den Artikel. Natürlich verwenden wir die Array-Referenzen, aber es ist auch besser, das Element auf die Karte zurückzugeben, damit Elemente wie auf eine nette Art aktualisiert werden können. Also, nachdem wir gespeichert haben, versuchen wir es noch einmal. Wir haben wieder unseren Warenkorb-Artikel initialisiert. Ich klicke auf OK. Ich erhöhe die Menge und füge ein neues Produkt mit der neuen Menge hinzu. Ich habe wieder hier geklickt. Und ich sehe, dass wir auch diese Menge haben. Natürlich, als Hausaufgaben für Sie, werde ich es zum nächsten Abschnitt hinzufügen. Wenn ich möchte, um ihre Karten auf Artikel hinzufügen, Ich möchte, dass Sie ein Boot bis zum Benutzer zeigen, dass er kann, dass der Wächter Element hinzugefügt wird, weil wenn er manchmal nehmen kann und es ist nicht gute Benutzererfahrung wie wir nicht sehen, was passiert ist. Natürlich wird der Benutzer dieses Konsolenprotokoll nicht sehen, aber Sie werden einfach klicken, aber er sieht nichts, wenn sein Warenkorb-Artikel hinzugefügt wird oder nicht. Natürlich später werden wir diese Tabelle hier aktualisieren, um zu zeigen, dass, okay, dies, gibt es einen neuen Warenkorb Artikel hier hinzugefügt, aber es ist auch besser, einen Bestätigungsdialog hinzuzufügen oder zu bestätigen, dass dieser Warenkorb oder dieser Artikel hinzugefügt wird Warenkorb erfolgreich. Dies ist also unsere Set Guard Item Methode. Es ist einfach, wir haben definiert und bekommen Guard auch. Also werden wir diesen get cart Artikel verwenden. Wie Sie hier sehen, dass wir beim Neuladen der Anwendung den lokalen Speicher erneut initialisieren. So bekommen wir keinen Vorteil aus dem lokalen Speicher, weil es ist, wenn der Kunde oder der Benutzer die Website verlassen und zurückgehen, wird er seinen Einkaufswagen Artikel verlieren. Also müssen wir sie irgendwie in ihrem lokalen Laden aufbewahren. Und das wird es sein, was wir in der nächsten Vorlesung Schritt für Schritt sehen werden. 156. Einkaufswagen auf Reload wiederherstellen: Okay, so wie Sie hier sehen, wenn wir die Anwendung erneut laden, verlieren wir die Artikel des Warenkorbs. Also, wenn ich ein paar Warenkorb zwei Artikel zu ihrem Warenkorb Geschichte, dann werden Sie neu laden die Anwendung wieder und wir verlieren die Artikel und die Artikel werden wieder initialisiert. Also in diesem Fall müssen wir irgendwie den Vorteil des lokalen Speichers zu bekommen weil wir gesagt haben, dass der Kunde die Website verlassen und wieder kommen, wir wollen seinen Wagen voll zu halten, so wie wir das tun können? Also zuerst möchte ich zu meiner Initialisierung des lokalen Speichers des Einkaufswagens gehen. Bevor wir dann den Garth initialisieren, können wir überprüfen, ob es Wachen im lokalen Speicher gibt oder nicht. So können wir auch Kegel definieren, die Karre genannt wird. Und das kostet oder wird Art der Wache sein. Und dann können wir sagen, dieser Punkt bekommen Wache, die Methode, die in der vorherigen Vorlesung definiert. Also hier sehe ich, ob ich einen Wagen habe oder nicht. Also, wenn es einen Wagen gibt oder wenn es keine Karte gibt, können wir dann Initialisierung des Warenkorbs erstellen. Und dann können wir die Anfangskarte verwenden, um sie zu unserem lokalen Speicher hinzuzufügen. So können wir dann all diesen Teil des Codes hier verwenden. Es wurde keine Karte zuvor initialisiert. Also eigentlich initialisieren wir nur den Wagen. Andernfalls tun Sie nichts anderes, denn wenn wir den Wagen bereits haben, dann werden wir ihn nicht initialisieren. Wieder. Wir nennen nur diesen Teil. Wir haben keine Wache, die von der Karte selbst kommt, die aus dem lokalen Speicher stammt. Also lassen Sie uns das speichern und Grids versuchen hier. Und wir werden sehen, dass, wenn wir die Anwendung neu laden , nachdem wir einige Artikel zu ihrem Warenkorb hinzugefügt haben, wir sie immer noch haben werden. Also hier zum Beispiel, ich habe zwei Artikel, Menge 2 und 1. Ich werde die Anwendung neu laden. Mein Code überprüft also, ob sich eine Karte im lokalen Speicher befindet oder keine, wenn keine lokale Speicherkarte vorhanden ist, initialisiert eine. Andernfalls behalten Sie es. Tun Sie nichts, initialisieren Sie nichts noch einmal. Auf diese Weise erhalten wir den Vorteil, wieder auf die Website zu gelangen, nachdem wir einige Artikel in ihren Warenkorb gelegt haben. So wird der Benutzer in der Lage sein, seinen Warenkorb wieder zu sehen, wenn er jetzt keine Zeit zum Kauf hat. So kann er jederzeit wieder auf die Website zurückkehren, und dann kann er nicht sehen, dass seine Karte noch gefüllt ist. Da. 157. Ansicht von Cart Cart in der Kopfseite: Okay, jetzt in dieser Vorlesung werden wir den Wagen beobachten. Also, hier, wenn der Benutzer etwas zu seinem Warenkorb hinzufügt, dann werden wir hier einige schlechte hinzufügen, um zu zeigen, wie viele Artikel in ihrem Warenkorb wir hier haben. Also zunächst möchte ich dafür eine Komponente erstellen. So können wir dann verwenden, wie viele Artikel wir hier haben. Also lassen Sie es uns Schritt für Schritt tun. Lassen Sie uns zuerst zum Header unserer Anwendung gehen. Wie Sie sich erinnern, haben wir dieses Symbol in der Kopfzeile erstellt, so haben wir gemeinsam Header und in der Kopfzeile, wie Sie sich erinnern, haben wir ihre Warenkorb-Symbol platziert. Stattdessen werde ich eine Komponente verwenden, die es wie zum Beispiel Bestellungen und Bestellungen nennen kann . Wir können es einkaufen, oder wir können sagen, nur Wache. Und ich kann zum Beispiel einfach so. Also lassen Sie uns diese Komponenten in Reihenfolge Bibliothek definieren. So können wir ein Ei erzeugen sehen und dann möchte ich eine Komponente generieren. Und diese Komponente wird in das Projekt platziert, das Aufträge genannt wird. Und hier können wir sagen, dass wir in den Komponenten Warenkorb Icon oder Warenkorb schlecht definieren. Wer kann sagen, es liegt an dir. So können wir hier das Garth-Symbol haben, das in der Kopfzeile sein wird. Und dann machen wir alle Mitarbeiter, die wir tun, immer ich will keinen Inline-Stil, ich will nicht so gut Tests. So können wir auch einen Selektor verwenden, den wir zuvor definiert haben. Wir können sagen, Warenkorb und dann Symbol. Und hier können wir Tests überspringen. Und dann führen wir diese Komponente aus. Wir haben diesen Kommentar oft gemacht. Also müssen wir es nicht mehr erklären. So haben wir jetzt hier die Komponente, die erstellt wird, das ist Warenkorb-Symbol. Und in diesem Warenkorb-Symbol werde ich mein Warenkorb-Symbol platzieren, das ich in der Kopfzeile definiert habe. Und dann müssen wir auch alles speichern und prüfen, ob unsere Komponente wirklich gut funktioniert. Also, weil ich den Export nicht überprüft habe, haben wir das alles. Ich sehe, dass ich immer noch den Fehler hier erhalte oder es gibt Einkaufswagen Artikel ist nicht unbekannt. Ja. Ok. Ich habe hier Tippfehler, also lasst uns das retten. Ich bin sicher, dass wir jetzt das Symbol perfekt haben. Jetzt ist dies kein Symbol, Ebenen-Symbol. Es ist eine Komponente, die wir hier im Header unserer Anwendung aufgerufen haben. Also lassen Sie uns diese Komponente verwenden, um die aktuelle Karte zu beobachten. Zunächst einmal möchte ich hier zeigen, wie lange oder wie viel Wache wir hier haben. Also zuallererst, bei der Initialisierung dieser Komponente, können wir auch den Kartendienst verwenden. Also werde ich sagen, private und dann Wachdienst, die wir bereits in unserem Bestellmodul definiert haben. So können wir sagen Warenkorb-Service und die Wachen Fehler oder in Orangion auf Bearbeiten, können wir sagen, dieser Wachdienst und dann können wir sagen, get cart, wie Sie hier sehen. So können wir die aktuelle Karte bekommen, die zu unserer Anwendung geladen wird. Also zunächst müssen wir eine Variable definieren, die aufgerufen wird, zum Beispiel können wir Kartenzahl sagen. Und diese Kartenanzahl hat vielleicht eine Nummer. Und diese Zahl kann vielleicht als 0 initialisiert werden. So können wir sagen, count wird als 0 initialisiert werden. Und dann können wir sagen, dass nach dem Erhalten dieser Wache, denn dieser Wagen wird als Karte zurückkehren. So können wir sagen, dass diese Karte zählt. Ich möchte, dass Sie zeigen, wie alles in einer Zeile sein kann, nachdem Sie den Warenkorb bekommen, können wir sagen, dass Artikel, weil dies für mich zurückkehren Wache. Und dann sage ich Längen. So wird diese Pushcart Anzahl Länge der Artikel, die in dieser Wache sind. Also lassen Sie uns das speichern und wir gehen auf die Vorlage und zeigen diesen Warenkorb oder diese Nummer in der Nähe dieses Symbols, so dass wir klein bleiben können, dag. Und wir definieren, wie wir Wächter zählen können. Also ohne Styling, nur um zu sehen, wie wir die Kartenzahl in der Kopfzeile dieser Komponente haben. Also laden wir die Anwendung neu. Manchmal, nachdem Sie diese Änderungen nicht sehen, müssen Sie nur vielleicht den Header wieder speichern, dann werden Sie diese Änderungen sehen. Wie Sie hier sehen, haben wir drei Artikel, da wir in unserem lokalen Lager drei Produkte hinzugefügt haben. Okay, jetzt haben wir die Nummer der Symbole oder, oder Gegenstände, die in unseren Karten sind. Jedes Mal, wenn ich die Anwendung neu lade, werde ich die Artikel oder wie viele Artikel in ihrem Warenkorb habe ich hier. Also zuerst müssen wir es auch stylen. Also machen wir es wie ein Abzeichen, ein rotes Symbol hier zu sein. Es wird zeigen, dass wir hier drei Elemente haben. Also, um das zu tun, prime end bietet Ihnen auch etwas namens Abzeichen. Sie können das Symbol auch direkt mit diesem Abzeichen verwenden, oder sonst können Sie nur das Abzeichen verwenden und es irgendwie platzieren und in Ihrem Weg erweitern. Also lasst uns das grundlegende verwenden. Ich werde diese Nummern verwenden. Also werde ich das hier benutzen. Also, wenn wir zu ihren Quellen gehen, werden wir sehen, dass diese, die Gefahr genannt wird, so wird dies drei haben und dann wird es aktuelle Farbe haben, die Gefahr genannt wird. Also, was wir zuerst brauchen, um das Modul zu importieren, das Badge-Modul genannt wird. Aber in diesem Fall, an dem Ort, wo wir ihre Komponente erstellt haben, oder an dem Ort, wo wir dieses Abzeichen nennen werden. Also in unserem Fall wird es in Bestellungen Modul sein. Also in Bestellungen Modul, werde ich das importieren. Also haben wir hier Import Badge Modul. Und das Badge-Modul wird im Importarray dieses Moduls sein. Wir speichern und wir gehen wieder zu unserem Warenkorb-Symbol. Wir bekommen die Vorlage dieses roten Abzeichens. Also gehen wir hierher, wir sagen P-Abzeichen. Und statt dieses kleinen, was wir hier definiert haben, legen wir es einfach und der Wachzähler wäre als d dt dieser Theorie, die hartcodierte Zahl. Also können wir sagen, Garth Count wird der Wert dieses Abzeichens sein. Und wir entfernen die alte, die wir haben, und wir laden die Anwendung neu und sehen, ob wir den Batch haben, schön, wir haben es hier auch. Haben Sie eine andere Möglichkeit, eine zu verwenden, die auch mit Symbol kommt? So können Sie diesen verwenden. So können wir auch hier gehen und in den Quellen sehen, zum Beispiel haben wir Badge positioniert und es wird das eine sein. Wir können zum Beispiel den mittleren nehmen. Okay, kopieren Sie den ganzen Teil. Und dann entfernen wir all dies, weil es standardmäßig mit Symbol kommt. Also haben wir hier dergleichen, es ist zurück oder die Gegend. Also jetzt haben wir ihre Farbe und die Anzahl oder der Wert dieses Artikels oder Warenkorb-Artikel wird Kartenzahl sein, die wir zuvor definiert haben. Und wir haben einige Schriftgröße, wir haben etwas Styling. Und hier sind Zähne des Icon-PI-Kalenders. Wir werden dieses Symbol verwenden, das als Warenkorb bezeichnet wird. Nachdem wir das gespeichert haben, gehen Sie erneut zu unserer Anwendung im Frontend. Wir werden sehen, dass wir den Warenkorb hier haben. Okay, es scheint groß zu sein, aber ja, wir können, du kannst es stylen, wie du willst. Sie können hier eine kleinere Schrift geben, wie Sie sehen, weil er eine Schriftgröße im Stil dieses Auges angegeben hat , so dass wir es kleiner machen können wie 1.5. Es wird wie klarer und schöner und für die Benutzer alle von ihnen gesehen. Hier haben wir den Schutzartikel, der mit der aktuellen Anzahl meiner Einkaufswagen Artikel in meinem lokalen Lager aktualisiert wird. Also vielleicht in diesem Fall, lassen Sie uns auch Stil dieses Symbol, so dass sie das gleiche sein können, wir können es die gleiche Eigenschaft geben, so können wir die gleiche Färbung geben, wie wir hier haben, eine Klasse P Texte sekundär. So können wir wieder zu unserer Header-Komponente gehen, und wir können dieses Styling dieser Klasse, dem Benutzersymbol geben . Also nicht überall verschiedene Stile zu haben. Und auch, wir müssen den Stil der Farbe geben, sind Größe, Schriftgröße des Symbols. So kann es auch die gleiche sein, die wir hier geben können Stil und gehen Sie zu Header-Komponente. Und dann sagen wir hier, Schriftgröße wird 1,5 Gramm betragen. Natürlich wird dies auch eine Komponente in der Zukunft sein, wenn wir die Bestellungen des Benutzers sehen, wenn wir auf dieses Symbol klicken. So werden wir wie dies immer auch mit der Komponente ersetzen , wie wir es mit dem Bestellwagen-Symbol gemacht haben. Also lassen Sie uns jetzt alles speichern und überprüfen, ob wir haben, dass ich stylen würde, wir haben kein Problem. Schön. Wir haben jetzt den Warenkorb und die Benutzersymbole sieht gleich aus. Aber jetzt habe ich ein Problem, wie wenn ich diesen Wächter hinzufügen möchte, zum Beispiel, fügen wir diesen hinzu. Ich sehe, dass es nicht aktualisiert wird. Also nur, wenn ich mich erfrischen. Ok. Ich sehe, dass der Artikel meinem Warenkorb hinzugefügt wird. Also müssen wir irgendwie beobachten, wie diese Summenvariable machen und diese Variable beobachtet ihren lokalen Speicher, beobachtet, dass der lokale Speicher meine Warenkorb-Artikel immer beobachtet. Also, wenn Ellie Änderung in der Anwendung in Bezug auf ihren Warenkorb passieren, dann wird dies die Änderung spüren und dann wird es berichten und zeigen Sie es mir hier. Also werden wir dafür die Observables verwenden. So zu verstehen, Beobachter wird mehr, Sie werden es hier sehen. Also werden wir eine Variable in ihrem Dienst machen, die Subjekt genannt wird, und dieses Thema ist beobachtbar. Also können wir diese Beobachtbare abonnieren, wie ich kann , diese variable Wachzahl. Wann ist, werden wir immer beobachten, dass die Karte wie der Wagen immer aktualisiert wird. Also jedes Mal, wenn ich irgendwo klicke, um in den Warenkorb zu legen, entfernen Sie einige Karten, dann wird das hören und sagen, okay, ich aktualisiere, ich habe ein Update bekommen. Lass uns das machen. Also Schritt für Schritt, lassen Sie uns das Beobachtbare machen. Wie können wir eine öffentliche Beobachtung machen. Öffentliche Beobachtung für mich, ich kann es innerhalb des Karten-Service tun. So können wir ein beobachtbares einfach definieren, indem wir etwas namens Subjekt definieren. Wenn Sie sich erinnern, haben wir das Thema auch in jeder Shell verwendet oder das Abonnement beendet, wie Sie zuvor gesehen haben. So können wir auch hier ein Thema verwenden. Aber statt dessen sagten wir so, wir können Wache definieren und diesen Wagen, wie ich Ihnen sagte, immer, Observables sind Suffix mit diesem Dollarzeichen. Und wir können nicht sagen, dass diese Karte einen Typ oder ein Thema hat und das Thema wird eine Art haben wir zuvor gesetzt, wenn Sie sich erinnern, wenn wir Abonnements beenden. Aber jetzt werden wir sagen, dass dieses Thema den Warenkorb enthalten wird. Und dieses Thema, wir machen ein neues Thema. Wir initialisieren es so schnell. Wir schaffen ein Objekt. Okay, Also in diesem Fall, wenn ich zu meiner Komponente hier gehe, wie zum Beispiel, sagen wir Warenkorb-Symbol, dann werde ich nicht nur Get Guard verwenden. Get Guard ist nur für mich die aktuelle Wache zurück, wenn ich die Anwendung lade. Nein, ich will es irgendwie beobachten. So können wir auch hier sagen, dieser Punktkarten-Dienst. Also haben wir hier ihren Warenkorb Service definieren und dann den Warenkorb, diesen Artikel oder diese Variable, die ich definiert habe. Und dann sage ich abonnieren. Also werde ich diese Karte abonnieren, die für mich den Warenkorb selbst zurückgibt. Und dann die Karte selbst. Ich kann die Länge erhalten und sie ihrer Warenkorbzahl zuweisen. Also können wir hier nicht sagen, dass diese Top-Kartenanzahl die Wache sein wird. Das hier wäre der Wagen. Gute Artikel Punktlänge In diesem Fall werden wir den Wagen immer beobachten lassen. So wird jede Änderung, die in ihrem Warenkorb geschieht, durch ihre Warenkorbzahl beobachtet werden. Okay, jetzt lassen Sie uns diese Zeile entfernen. Also, wenn ich jetzt zur Anwendung gehe, bekomme ich hier 0, okay, ich möchte etwas zu ihrem Warenkorb hinzufügen. Es wird immer noch nicht beobachtet. Also ein Zustand der Veränderung, wie hier sagen wir, dass die Änderung nicht wie dieser Artikel oder diese Karte lokalen Speicherelement fühlt sich nicht die Änderungen. Und das können wir auch nicht beobachten. Also müssen wir zu diesem Thema sagen, dass Sie sich aktualisieren. Jeder, der dich abonniert, kann diese Veränderung spüren. Also, wie können wir das tun? Wenn wir zum Wachdienst gehen. Am Ende dieser Methode werde ich sagen, nachdem ich alles initialisiert habe, ich, bevor ich sage, das Auto zurückgeben, kann ich nicht sagen, diese Punktkarte, das Thema, das ich erstellt habe. Und dann weiter. Dann anstatt die Karte zurückzugeben, kann ich sagen, auch als nächstes, aktualisieren Sie den Warenkorb. Also in diesem Fall wird jeder, der hinzufügt, wenn ich etwas zu seinem Warenkorb hinzufüge, jeder, der diesen wertvollen abonniert, die Veränderung spüren, denn dann hat sich das aktualisiert und mit die neueste Wache, nachdem ich Elemente hinzugefügt habe. Und dann wird jeder, der es abonniert , sagen, okay, das ist ein Update. Ich werde dieses Update bekommen und es dem Benutzer zeigen. Dafür möchte ich Ihnen ein Konsolenprotokoll zeigen. Sie sehen also, dass dieses Konsolenprotokoll jedes Mal ausgeführt wird, wenn ich zum Beispiel ein Update für den Warenkorb habe , der Artikel zu ihrem Warenkorb hinzufügt. Also lassen Sie uns das speichern und gehen Sie zu unserer Anwendung. Wieder. Es wird neu geladen. Okay, jetzt haben wir immer noch den Euro, weil wir das Abonnement oder den Abonnenten nicht initialisiert haben. Also werde ich einige Artikel zu ihrem Produkt hinzufügen. Also zum Beispiel werde ich dieses hinzufügen. Wenn ich klicke, sehe ich, dass dies eine 5 hat, weil es aktualisiert wurde. Der Wagen, den wir haben oder das Beobachtbare, das wir dort definiert haben. Und das beobachtbar. Immer beobachten, oder dieser Artikel ist immer beobachten, was wir tun, um ihren Warenkorb. Also Glukose, ich habe hier wie das Konsolenprotokoll, das ich dir gezeigt habe. Wenn ich also auf In den Warenkorb klicke, wird das Symbol hier oben die Änderung und Konsole spüren. Also hier können wir sagen, zum Beispiel, klicken Sie, Ich sehe Sie schauen, das ist Elemente, die die Wache aktualisiert wurde. Und wegen dieser nächsten, die wir hier haben, dann wird der Wachmann beobachtbar oder Wächter Objekt, Intel aktualisieren und zu jedem sagen, der es abonniert, wie in unserem Fall, dieses Warenkorb-Symbol dass in Ordnung, ich bin aktualisiert. Bitte aktualisieren Sie sich selbst und führen Sie den Code aus, was Sie innerhalb des Abonnements gemacht haben. In diesem Fall tröste ich das Protokoll und aktualisiere die Wachzählung, die ich hier definiert habe. Und ich habe es im Wert dieses Abzeichens verwendet, also sehe ich die Nummer hier. Aber jetzt, wenn ich die Anwendung neu lade, Ich bekomme immer noch 0 und nicht, dass die aktuelle oder die vorherige Zählung meiner Wache, wo ich zuvor in meinem lokalen Speicher, weil Europa, dass Ocker Lagerung ist in Ordnung, alles ist in Ordnung. Wir haben fünf Artikel, aber wir können das Update hier nicht sehen. Denn auch, wenn wir das vollständige Beispiel initialisieren, dass Wache, wenn Sie sich erinnern, wir sagten, wenn es keine Karte, dann okay, aktualisieren oder erstellen Sie eine neue Wache in diesem Speicher. Andernfalls, wenn es keine Karte gibt, dann können wir auch hier sagen, dass diese Wache Thema sein wird oder das nächste mit der aktuellen Karte aktualisiert, die Sie hier haben. So kann ich zum Beispiel dieses sagen. Also in diesem Fall kann ich sonst sagen, wenn es Warenkorb dann für mich mit der aktuellen Karte aktualisiert. Wenn also keine Karte vorhanden ist, initialisieren Sie eine neue Karte und fügen Sie sie dem lokalen Speicher hinzu. Andernfalls aktualisieren Sie einfach das Gerunde-Thema, das ich mit der Wache beobachte, die Sie im lokalen Speicher gefunden haben. Speichern wir das und gehen Sie erneut zur Anwendung. Sie werden sehen, dass dies nicht wieder funktioniert. Das liegt daran, dass wir Subjekt verwenden. Es ist auch besser, etwas zu verwenden, das dem Thema ähnlich ist, aber es wird Verhaltenssubjekt genannt. Sie können stattdessen Verhaltenssubjekt verwenden. Also macht es genau das Gleiche. Aber wir, weil wir gehen, rufen wir dies im Instruktor des Modulkonstruktors des Moduls auf, dann wird dies nicht fertig sein. Das Thema ist noch nicht bereit, daher wird es nicht ausgeführt und es wird nicht das nächste bekommen. Dies wird also ausgeführt und beendet, bevor dieses Thema initialisiert wird. Es ist also besser, für dieses Verhaltensthema zu verwenden. Wir haben Ihr Thema, es ist genau das gleiche. Der Unterschied hier, dass Sie sagen müssen, Verhaltensobjekt muss mit etwas wie in Ihrem Warenkorb initialisiert werden. Also können wir nicht einfach hier sagen, dieser Punkt bekommen Warenkorb. Also bekomme ich ihren Warenkorb, der sich im lokalen Speicher befindet, und dann erstelle ich mein Verhaltensthema. Und in diesem Fall brauchen wir das sonst nicht mehr. Danach haben wir den Warenkorb mit dem aktuellen Guard initialisiert, der im lokalen Speicher gespeichert ist. Auf diese Weise werde ich jedes Mal fünf hier kommen, wenn ich meine Anwendung neu lade. Wenn ich nun ein neues Produkt zu meinem lokalen Speicher hinzufüge, habe ich zum Beispiel dieses. Wir können in den Warenkorb legen und wir kommen hier, sechs wird erhöht und beobachtet, dass die Zählung. Und wenn ich die Anwendung neu lade, habe ich noch sechs hier. Okay, Lassen Sie uns versuchen, den Warenkorb zu entfernen, der sich im lokalen Speicher befindet. So total und sehen Sie für den Benutzer, der zum ersten Mal in unseren Shop kommt. Also werde ich ausgewählte löschen. Ich habe die Wache gelöscht. Jetzt gehe ich wieder auf die Homepage und bin ein neuer Kunde, der in den Shop kommt. Ich möchte die Konsole öffnen. Ich möchte sehen, ob ich einen Fehler bekomme. Also laden wir die Anwendung neu. Also sage ich hier, nachladen. Zuerst bekomme ich einen Fehler. Eigenschaftenelemente von null können nicht gelesen werden, wo ich diesen Fehler in der Warenkorbsymbol Komponente erhalte. Okay, wir müssen zu dieser Komponente gehen, weil wir gesehen haben , dass diese Elemente nicht definiert sind, weil der Wächter noch nicht initialisiert ist. Also lassen Sie uns dieses Konsolenprotokoll entfernen. Und dann sagen wir, wenn die Karte Gegenstand hat oder dieser Wächter, den ich bekommen habe, definiert ist, dann gib mir die Länge davon. In diesem Fall haben wir dieses Fragezeichen. Andernfalls können Sie in TypeScript das Fragezeichen sagen, wenn dies nicht definiert ist. Dann bewacht Count, gib es als 0. Also ist es wie wenn sonst, also wird die Wachzählung dieser sein. Aber wenn dieser wegen dieses Fragezeichens nicht definiert ist, um den Fehler in der Konsole zu vermeiden, wie wir zuvor gesehen haben, geben Sie als 0 zurück. Also speichern wir das erneut, laden Sie die Anwendung neu. Wir haben jetzt nichts in ihrer Wache, also okay, wir haben nicht den Fehler, aber um es mehr zu testen, müssen wir entfernen, wieder, laden Sie die Anwendung, gehen Sie zu ihrer Konsole. Schön, wir haben keinen Fehler. Jetzt werde ich Artikel zu diesem Karp hinzufügen. Ich klicke Lügen, ich habe 123. Ja, wie du siehst. Wenn ich also klicke oder ein anderes Produkt, sehe ich, dass es nicht hinzugefügt wird, weil ich nur die Anzahl der Artikel bekomme. So werden sie wiederholt Produkt wird hier nicht gezählt werden. So haben wir nur die verschiedenen Produkte. Und wir werden sehen, wenn wir auf die Wache Detail gehen, werden wir sehen, wie viele Artikel wir haben und wie oft der Benutzer auf In den Warenkorb für Sie in der nächsten Vorlesung als Hausaufgaben klicken, Ich möchte, dass Sie ein Pop-up hinzufügen, wie Sie sehen werden, und ich erkläre es bei den Hausaufgaben. Also, wenn ich auf In den Warenkorb klicken und alles ist Erfolg, Ich möchte, dass Sie ein Pop-up zeigen, wie der Artikel erfolgreich in den Warenkorb gelegt wird. In diesem Fall wird der Benutzer nicht oft klicken und er weiß das nicht. Er, okay, es ist dem lokalen Speicher alles hinzugefügt, weil richtig. Aber wir haben keine Benachrichtigung für den Benutzer, was nicht schöne Erfahrung ist. Als letzte Frage: Müssen wir die Abonnements hier beenden? Nein, das brauchen wir nicht, weil wir immer ihren Einkaufswagen abonnieren. Wir brauchen kein n Abonnement zu haben, weil ich nicht zuerst gehe. Und diese Komponente, dieser Header ist immer vorhanden. Diese Komponente wird immer nur für eine Zeit erstellt und wird nicht mehrfach erstellt. Also erstelle ich keine Multicolor von mehreren Abonnements. Aber hier haben wir nur eine Zeit und es ist die ganze Zeit, die ganze Zeit, wenn ich besuche oder in meiner Anwendung surfe, habe ich diesen Artikel abonniert und es beobachtet den Warenkorb immer. Also in diesem Fall, als eine Zusammenfassung, haben wir in ihrem Warenkorb Dienst etwas namens Verhalten Thema erstellt, das beobachtbar ist und dies beobachtbar wird beobachtet und nicht alle Menschen oder alle Elemente oder ihre Komponenten trotzen , die abonniert dieses Verhalten über seine Änderungen. Also, wenn ich sage Karte Punkt als nächstes, zum Beispiel, in diesem Fall hier haben wir eine von ihnen. Hier haben wir Punkt als nächstes. Dann aktualisiere ich dieses Verhaltensthema. So Warenkorb-Symbol wird auf diese Änderung hören und den Code ausführen, der es innerhalb des Abonnements sein wird , basierend auf ihrer Wache , die von diesem Verhaltenssubjekt zurückgegeben wird. Dies ist also der einfachste Weg, um die Dinge in meiner Anwendung zu beobachten. Andernfalls können wir NG RX verwenden, was komplizierter ist. Und dafür sehe ich es nicht wie eine Wärme, MDR x zu verwenden, oder das ist staatliches Management nur für diesen einfachen Fall , den wir nur vier dieser Karte haben. Ich werde natürlich am Ende dieses Abschnitts erklären, wie man mit NX-Schaltplänen in den RX-Zustandsspeicher einfügt. Und auch wir werden diesen Wagen wie im State Store implementieren, nicht wie wir hier mit Observables haben. Und Sie haben optional, wenn Sie dem MDR x Weg folgen möchten, oder Sie können diesen einfachen und schönen Weg hier folgen. 158. Füge Produkt zum Produkt mit Menge hinzu: Ordnung, jetzt gehen wir in dieser Vorlesung, um Produkt in den Warenkorb zu legen, aber mit der Menge, wenn Sie sich erinnern, haben wir hier nur einen Artikel dieses Produkts hinzugefügt. Also jetzt gehen wir zum Produktdetail und wir werden Menge auswählen. Und dann klicke ich auf In den Einkaufswagen. Es ist genau das gleiche, wie wir es mit Produkt-Artikelkomponente gemacht haben. Wir werden mit Produktdetailkomponente zu tun. Also zuerst, ich werde das Produkt Artikel hier haben. Wenn Sie sich erinnern, haben wir auch den Warenkorb-Service verwendet. Und im Warenkorb-Service waren wir mit Werbeprodukt in den Warenkorb. Also der Hauptunterschied hier, wir werden die in den Seiten verwenden, Produktseite. Wir müssen diese Menge verwenden, die wir von der Mengeneingabe oder der Eingabenummer erhalten und sie dann platzieren oder übergeben, wenn wir den Artikel erstellen. Also in der Produktseitenkomponente, werde ich zur TypeScript-Datei gehen und dann werde ich das Produkt oder den Dienst wieder haben. Und dann werden wir diesen Warenkorb-Service verwenden , wenn ich werde, um das Produkt in den Warenkorb zu legen. Also zuerst, wir können diese Menge bekommen. So haben wir zuvor die Variable definiert, die Quantität genannt wird. Also für wie ein Präfix zu machen, können wir dieses Element mit einem initialisieren und min kann eins bis 100 sein, haben nicht 0. Und auch wir können es Menge mit Nummer eins initialisieren. Also können wir hier anstelle von Nummer sagen, können Sie auch sagen, das kann eins sein. Aber natürlich er ESL und beschweren sich, wenn Sie den Typ und dann den Wert definieren, weil der Wert eins ist. Es ist also bekannt, dass es eine Nummer ist. TypeScript sagt also automatisch, dass dies eine Zahl ist. Also sagen wir, dass diese Menge initialisiert und dann gehen wir und speichern alles. Wir probieren das aus, nachdem wir unsere Anwendung aktualisiert haben. Wir sehen also, dass es nicht initialisiert ist. Ich glaube, ich habe einen Dipol, ja, okay, wir müssen hier gleich sein, nicht tippen. So können wir hier Quantität gleich eins haben. Und wie wir sehen, dass es mit einem initialisiert ist und ich kann nicht zu 0 gehen. Wenn ich nun auf In den Warenkorb klicke, muss ich diesen Artikel in den Warenkorb legen. Zunächst einmal kann ich feuern, um den Wachdienst genau so zu rufen, wie wir es mit diesem Artikel gemacht haben oder in dem Produkt Artikel, den wir zuvor definiert hatten. Also zuallererst werde ich das Erstellen von Warenkorb-Artikel haben. Also würde ich sagen const cart Artikel. Und dieser Garth Artikel wird Art von Einkaufswagen Artikel sein. Und es wird gleich wie der Artikel selbst, Produkt-ID sein wird, wird die Produkt-ID sein, wo ich jetzt bin. Also, wenn Sie sich erinnern, wir haben hier das Produkt, das bekommen, so können wir nicht sagen, danach bekommen wir dieses Punkt-Produkt, weil wir hier nicht definiert haben. Und wir füllten unser Variablen- oder Klassenmitglied mit dem Produkt, das wir vom Backend hier bekommen haben. So können wir sagen, dass diese Punkt-Produkt-Punkt-ID. Also habe ich das Gefühl, dass die Produkt-ID von Garth Artikel diese Punkt-Produkt-Punkt-ID sein würde und eine Menge wird diese Punkt-Menge sein. So wird eine Menge basierend auf meinen Änderungen hier geändert , weil ich das NG-Modell verwende, das eine Zwei-Wege-Bindung haben wird. Und es wird reflektieren, dass immer oder spiegeln immer die Seite oder Eingabenummer, die ich hier vom Benutzer ändere. Und dann wird es das in die Variable legen, die Menge genannt wird. Und ich habe es hier als Mitgliedsklasse definiert, wie Sie hier sehen. Also jetzt gehen wir wieder und wir fügen diesen Warenkorb Artikel in unseren Warenkorb. Also werde ich sagen, dies obwohl, Wachdienst, Punkt, hinzufügen oder setzen Sie Schnitt Artikel. Und dann gebe ich den Warenkorb-Artikel, den ich will. Also, wenn wir das speichern und wir versuchen, dass in unserer Anwendung, so werde ich hier speichern, und ich würde fünf oder sechs wählen und dann in den Warenkorb legen. Und dann wird dieser Artikel in meinen Warenkorb gelegt. Also lassen Sie uns überprüfen, ob wir es wirklich in unserem lokalen Speicher haben. Also haben wir hier zwei Gegenstände. Ich sehe hier, dass es nicht hinzugefügt wird. Also vielleicht funktioniert dieser Knopf nicht. Also lassen Sie uns wieder zu unserer Anwendung gehen und überprüfen. Okay, wir haben hier Knopf. Wir haben keine PI-Taste, also können wir nur Glick verwenden, wie wir nicht den onclick verwenden werden, der nur mit PI-Taste von Prime NG kommt , wissen, dass wir eine Taste haben. Also die, noch weiter die Schaltfläche, um dieses Ereignis zu starten, können wir nur klicken, aber wenn Sie die Hauptenergie in der Dokumentation verwenden, sagten sie, dass Sie onclick verwenden müssen. Also in diesem Fall haben wir nur Knopf. Wir werden es ändern, um zu klicken. Also lassen Sie uns speichern und wieder zu unserer Anwendung gehen. Und dann überprüfen wir das. Also wählen wir vier aus. Wir haben hinzugefügt, okay, Karte aktualisiert. Wir haben jetzt den Artikel, der Menge fünf hat, wie weil wir ihn vorher im Warenkorb haben. 159. Cart: Okay, in diesem Vortrag werden wir die Schutzseite vorlegen, die aktuelle Seite. Es wird alle Warenkorb-Artikel haben, wo ich für die Bestellung einreichen werde und dann kann ich meinen Warenkorb und ICU überprüfen, was ich bestellt habe. Und ich kann immer die Menge ändern, wie viel oder wie viele Artikel ich bestellt habe. Und natürlich werden wir wie so etwas wie mein Warenkorb hat drei Artikel auflisten und wir haben einige Schaltfläche gerne wieder in den Shop gehen und auch einige Informationen. Und wir werden auch implementieren, ein Element von der Karte zu löschen. Zunächst einmal werden wir diese Vorlage machen, die ich Ihnen hier zeige. Also zuerst werden wir eine Komponente erstellen, die Guard Page genannt wird, und es wird in Bestellungen Seite sein. Also gehe ich zu einer ECS-Konsole und klicke dann auf Generieren und dann auf Komponente. Und dann werde ich hier die Seiten auf den Seiten in der Bestellbibliothek haben. Also werde ich hier Seiten und dann Warenkorb Seite haben. Und dann werden wir das Projekt auswählen, das Aufträge sein wird, weil wir das in der Auftragsbibliothek tun müssen. Und das Gleiche für andere Komponenten. Also haben wir einen Lebensstil. Wir haben auch den Test übersprungen. Also hier haben wir all dies und auch der Selektor kann Bestellungen und Warenkorb-Seite sein. Also in diesem Fall haben wir eine Komponente erstellt. Wir müssen nur jetzt diese Komponente auf ihre Routen verweisen. Also, wenn Sie sich erinnern, wie wir Routen im App-Modul erstellt haben. Also haben wir hier im App-Modul von Energie-Shop, wir haben einige Routen erstellt und wir haben nur die Hauptroute. Aber im Produktmodul definieren wir auch die untergeordneten Module. Wir werden dasselbe tun, wie wir es genau mit dem Bestellmodul gemacht haben oder wie wir das in den Produkten gemacht haben. Also lasst uns das machen. Also zuerst werde ich in die Ordnungsbibliothek gehen. Lass uns alles schließen und wieder zu den Lippen gehen. Und natürlich haben wir bereits die Bestellung ist Modul in unser Anwendungsmodul importiert, so dass wir kein Problem haben werden. Also schließen wir alle und wir ziehen zu unseren Bibliotheken und wir haben hier Aufträge. Und ich werde die Routen in Bestellungen Modul implementieren. So definieren wir eine Konstante, die Routen genannt wird. Und es wird eine Art von Routen haben. Also haben wir hier Routen und es wird Art der Route und die Route haben wir es aus Angular importieren. Und das wird Array sein, und dieses Array wird Array-Objekte sein, und die Objekte werden Bath sein. Und zum Beispiel kann ich den ersten Pfad definieren, der Wagen sein kann. Und die Komponente dieses Pfades wird die Komponente sein, die ich erstellt habe, die Guard Page Komponente ist. Also jetzt sind wir bereit dafür und wir gehen einfach wieder zu Routen oder zum Router-Modul. Und sagen Sie, dass für Kind, wie wir genau mit den Produkten getan haben, und dann passe ich die Routen, die ich erstellt habe. Also jetzt müssen wir überprüfen, ob alles gut funktioniert. Ich gehe zu meiner Bewerbung, ich zeige diese. Wenn Sie sehen, dass es gleichgültig Port, Ich habe Demo, Ich habe es bereits vorbereitet, so dass Sie zeigen, was wir tun werden, und dann implementieren wir das leicht. Also zuerst möchte ich, wenn ich auf dieses Symbol klicke, gehe ich auf ihre Warenkorb-Seite. Also haben wir die Komponente für das Warenkorb-Symbol erstellt und wir müssen nur etwas hinzufügen, das Router, Router Link genannt wird. Und es ist Router Link bringt mich auf die Warenkorb-Seite. So einfach. So speichern wir einfach, gehen Sie wieder zur Anwendung und neu geladen und wir klicken auf diese Karte. Ich habe hier einen Fehler, ich muss ihn entfernen. Und dann gehen wir zurück zu ihrem Warenkorb oder wieder auf die Seite. Und wir werden sehen, dass wir in der Lage sind, auf die Warenkorb-Seite zu gehen funktioniert. Also das, was wir gehen, um Vorlage. So gehen wir zu der Komponente, die Warenkorbseite genannt wird. Und in der Warenkorbseite sowie jeder Komponente definieren wir es zuerst mit der Warenkorbseite oder dem Namen der Komponente. Und dann sagen wir div p grid, und wir werden das Gitter auch hier verwenden. Und wie Sie sehen, haben wir in der Vorlage, dass wir hier acht Spalten haben, denn hier werde ich die Zusammenfassung der Aufträge wie den Gesamtpreis und wenn es Steuern und Schiffe oder so etwas gibt. Also zuerst können wir das Gitter haben und es wird acht Spalten haben. Also werde ich div Anruf setzen und, oder, sorry P Anruf. Und 8 erste div wird wie eine Schaltfläche haben und wir können es so geben. Und dies wird eine PI-Taste haben, so dass wir die Taste auch verwenden können. Also der Knopf, ich kann es von Prime Energie nehmen. So können wir genau den gleichen Knopf verwenden, wie wir zuvor oft gemacht haben. Ich muss es nicht wiederholen. Das einzige, was hier fehlt, ist, dass ich das Modul erneut von der Schaltfläche importieren muss. Also müssen wir nur hier Knopfmodul haben. Also müssen wir Knopfmodul hinzufügen, das auch von Prime Energie kommt. Titel. Also im Titel werden wir so etwas wie meine Karte haben, damit wir ein anderes div erstellen können. Und dieses div wird auch H4 und H4 haben. Ich werde einen Text haben, der meinen Warenkorb genannt wird. Und dann, wie ich die Informationen setzen kann, zum Beispiel, können wir sagen, Kartenanzahl. So können wir hier wie die Zählung des Wagens setzen, wie wir es auch nehmen werden. Wir haben das bereits mit der Navigation gemacht, aber wir können es hier wieder tun, um die Informationen zu beheben. Also haben wir hier H4 und wir können danach einen Satz hinzufügen , wie wir hier wie Versand nach Zahlung, Lieferzeit, ja, so etwas. So können wir diese Entzündung auch hinzufügen. Also werde ich ein anderes div hinzufügen. Und in diesem div kann ich ihm auch eine Klasse geben. Und dieses Glas, wir können es eine Wache Versand geben, zum Beispiel, Info, so können wir es färben. Und dann können wir den Text hier einfügen. Natürlich kann dieser Text basierend auf den Versandmethoden dynamisch sein , wenn Sie ihn im Back-End implementieren. Also lassen Sie uns diesen Teil speichern und stylen. Ich bin sicher, es wird nicht direkt funktionieren. Wir müssen etwas Styling machen. Also zuerst müssen wir eine Tasche haben, um den Knopf zu zeigen. Also wir nur alle können wir diesen Knopf entfernen oder wir können es so lassen. So können wir hier im Komponentenskript eine andere Methode dafür haben. Damit wir wieder einkaufen können. Und dann werden wir den Knopf haben, wo er mich zurück in den Laden bringen würde. Also brauche ich im Konstruktor, ich muss den Router anrufen. Also würde ich hier sagen privaten Router. Und dann brauchen wir einen Router. Und in diesem Router werden wir den Zurück-Button bestellt haben. Wir werden sagen, dass dieser Router Punkt navigieren. Und dann geben wir die Navigation an, die Produkte sein wird. Also werde ich setzen oder ich werde auf die Seite zurückkehren, die Produkte auf diese Weise genannt wird. Und wir werden sehen, dass wir Basis in unsere Seite bekommen haben. Also, wenn ich gehe zurück klicken, um Shop zu mögen, dann werde ich zurück in den Laden gehen, wie ich war, wer du bist, wie ich dir mit diesem äußeren gezeigt habe und hier haben wir meine Karte, diese Nummer, wir werden es mit der aktuellen Karte ersetzen. Artikel zählen. Und hier, Versand werden wir es stylen. Also müssen wir diese Klasse nur irgendwie hinzufügen. Also zuerst muss ich eine Klasse oder eine Datei oder eine Stil-Datei definieren, die in den Lippen genau in der Bibliothek basiert, in der wir erstellt haben. Es würde also keine Konflikte geben, oder es wird uns nicht verwirren, um zu sehen, wo es ist. Also werde ich dieser Karte geben, dass CSS, Ich erstelle eine neue Datei und diese Datei, Ich werde es in den Bestellungen importieren. Also hier müssen wir sagen Import, nicht URL, sondern nur den Link importieren, den wir importieren möchten, der Karte Punkt SCSS ist. Also danach müssen wir sicher sein, dass auch Bestellungen in jedem Geschäft wichtig sind. Wir müssen das überprüfen, okay. Es ist importiert, also arbeiten wir hier gut. So wie Sie zuvor gesehen haben, haben wir eine Klasse erstellt, die Guard Page genannt wird, wie wir Einkaufswagenseite sagen können. Und diese Karten Seite können wir es geben, zum Beispiel, die mittlere Höhe. Geben Sie hier gerne eine minimale Höhe für den Warenkorb. Also können wir hier einen leeren Raum haben, um uns gut arbeiten zu lassen. Und natürlich werde ich später implementieren, wenn wir kein Element in ihrem Warenkorb haben. So können wir zeigen, wie Ihr Warenkorb leer ist. müssen wir also auch umsetzen. Und danach werden wir diesen Warenkorb-Artikel haben, oder wir hatten gesagt, dass wir den Garth Artikel erstellen müssen. So können wir Punktkarte sagen. Und in diesen Punktkarten können wir diesen Versand haben, sorry, Versand. Und wir können diese Lieferung wie Farbe grün geben. Und wir können den Kontext unter ein wenig mit 15 Pixel schieben oder wir können wie keine Notwendigkeit dafür geben. Wir können es einfach mit den Klassen schieben, die in unserem Prime End bereit sind. So können wir sagen, wie hier, B oder Rand unten, was sein wird, wie wir fünf nehmen können. Und auch können wir das für jedes Div tun, das wir erstellt haben. Also, um einige Leerzeichen zwischen all diesen Blättern zu geben, um nicht aneinander geklebt zu werden. Und wir retten alles. Und dann sind wir bereit mit den ersten Zeilen. Wählen wir jetzt den Wächter , der hier ist. So wird der Warenkorb-Artikel auch in einem div sein. Also haben wir hier etwas wie div und wir können ihm einen Namen geben, der Einkaufswagen Artikel genannt wird. Und in diesem Wächter werden wir ein anderes Raster haben, weil ich wie eine Teilung des Gitters haben möchte. So können wir hier zwei Spalten für das Bild haben. Beispiel 9 Spalte für die Entzündung und den Namen, und auch drei Spalten für die Schaltfläche hier. Also natürlich kannst du nicht, du weißt wie, du musst wissen, dass wenn ich Raster innerhalb eines hier erstelle, also innerhalb von acht Spalten, dann habe ich auch hier wieder eine 12 Spalten. So wird es mit dem Elternteil verwandt sein. Also bin ich drin was? Ich bin in P Anruf acht. Ich bin nicht innerhalb der wie alle Breite der Seite weil hier, wenn Sie sehen wollen, haben wir b, sorry, erinnern. Und dann können wir sagen, 12 minus 8 ist 4. Und hier werden wir Bestellzusammenfassung setzen, wir können es nennen. Also hier in diesem Bereich, in diesem Raum, werde ich die Bestellzusammenfassung setzen. Bisher, die Vorlage des Warenkorbs Artikel, wie gesagt, erstellen wir ein neues Raster. Wir können ein Gitter geben. Und in diesen großartigen Wochenende, ein weiteres Live für Spalte, die das Bild enthalten wird. So können wir P Call Tool sagen und es darin werden wir Warenkorb Artikelbild haben. So können wir sagen, direkt Bild wird die Quelle haben. Ich kann kein Bild von Google aufnehmen. Ich habe ein Bild kopiert. Ich werde es hier posten. Aber natürlich werden wir das auch ändern. Also können wir nicht sagen, dass dieses div eine Klasse hat. Wir können sagen, Warenkorb, Artikel und Bild. Also ist es immer besser, so voranzustellen. So können wir diesen Nutzen von SESS nutzen. So können wir immer mit einem Elternteil Präfix, ich sage Lückenelement und dann passe ich das Ding, das ich den Stil will. Und danach brauchen wir auch die Spalte, die zweite Spalte, die in der Nähe sein wird, wo ich die Informationen ihres Produkts haben werde . So können wir zum Beispiel aufgerufen werden, ja, wir können es auch acht oder sieben geben. So können wir jetzt neun Spalten haben. So können wir den Namen des Produkts angeben. So können wir div geben und es wird Warenkorb Artikelnamen haben. So werden wir den Namen des Warenkorbs haben , der wie hartcodiert sein wird. Jetzt können wir nur hart codieren die Dinge, die wir sagen können Just Produktname. Wir können auch ein div haben und das Warenkorb, Artikel und dann Preis haben wird . Und wir können auch einen hartcodierten Preis geben und die Währungsflagge verwenden. So können wir Währung wie die Pfeife geben, die wir zuvor geschaffen haben, alles, was wir vorher kennen oder darüber reden. Und nach ihnen werden wir die Schaltfläche Löschen haben. Also, wenn Sie sehen, dass ich auch die Schaltfläche löschen oder löschen Sie das Produkt aus dem Warenkorb. Natürlich, die Taste in Prime End. Es gibt eine Menge von ihnen. Einer von ihnen ist nur mit Symbol, so dass Sie eine Schaltfläche auf mir mit Symbol haben können. So können Sie das auch verwenden. So können wir auch ein div erstellen. Wir können es Klasse geben, die guard Item entfernen genannt wird. Also haben wir Schutzelement entfernt und es wird auch eine PI-Taste sein, und es hat einige onclick darauf. Also haben wir P Taste und diese B Taste wird Symbol Papierkorb haben, genau wie wir es von privaten NGOs bekommen und dann Guard Element löschen. Also muss ich zur Datei springen und die Methode erstellen, die CreateCars-Element genannt wird. Wir können es vorerst leer lassen. Danach haben wir die erste Seite geschaffen. Also lassen Sie uns überprüfen, ob wir alles in Ordnung haben. Nach dem Laden der Anwendung sehen wir, dass nichts gestylt wird. müssen wir stylen. Also lasst uns jetzt zur Stylingdatei springen. Ich werde hier haben, das Styling wieder. Also müssen wir alle Elemente, die wir erstellt haben, stylen. Also verstecke ich dieses Panel. Wir können auch alles schließen, was wir zuvor haben , damit wir sehen können, was wir beginnen werden. Also zuerst müssen wir den Artikel haben, wie Sie hier sehen. Wir haben einige einen weißen Hintergrund und war Grenze und Grenze Radius. Also werde ich hier in der Karte haben. Zuerst werde ich hineinspringen und sagen, dass ich Artikel will. Dieser Artikel wird eine Hintergrundfarbe von wie eine breite und auch einige Grenze haben, die wie ein helleres Grau sein wird. Und wir können es auch etwas Polsterung geben, damit wir den Inhalt innerhalb von 15 Pixel schieben können und wir können auch den Grenzradius geben , den ich Ihnen gesagt habe, dass wir einige Radios an der Grenze haben. Und dann können wir sagen, dass das Bild, das wir hier definiert haben, so können wir, dass wir IR haben, Garth Item Bild und in ihm ein Bild können wir es auch nennen und geben es in diesem Element, das wir hier als auch, Bild. So ist das Bild darin befindet sich Bild-Tag und es wird hoch bis 120 und maximale Breite 100% haben. Also, wenn die Website reagiert, ist es besser, sie wie maximale Breite zu geben, die 100 ist. Der Inhalt des Bildes wird also nicht aus dem Hauptcontainer oder ihrem übergeordneten Container herausgehen , um kein Problem im Styling zu haben. Also speichern wir und gehen zur Anwendung, okay, Jetzt haben wir die Artikel auf diese Weise. Also, jetzt müssen wir etwas Styling für ihren Namen und auch den Preis und diesen Knopf, bereits hier ist, tun, müssen wir nur die Farbe ändern, wie ich Ihnen später zeigen werde. Also zuerst müssen wir den Namen stylen, den ich hier geben werde. Styling oder eine Klasse, die Name genannt wird. Also, wie ich Ihnen sagte, das ist ein Vorteil von Garth und dann Element und dann Name und das, was wir tun, wie wir dieses Präfix und dann Namen geben können, wie Sie hier sehen. So können wir hier von SCSS profitieren. Das Schriftgewicht dieses Textes beträgt also 600 und die Schriftgröße kann 1 bis EM betragen. So können wir es ein bisschen größer geben. Und wir können diesen Inhalt etwa 15 Pixel darunter schieben, weil, wie Sie sehen, es aneinander kleben. Und für den Preis werden wir die gleichen Eigenschaften geben, die hier sind, außer dass wir es mit Orange oder unserer Primärfarbe färben werden. Hier wird also die Farbe die Primärfarbe sein, die ich in meinen SAS-Dateien definiert habe. Und wir werden sehen, dass wir hier das Styling fein haben. Ich werde Ihnen später zeigen, wie Sie alle Tasten mit unserer orangefarbenen Farbe mit einer Primärfarbe färben. Aber zuerst gehen wir weiter und wir werden umsetzen, was ich zuvor gesagt habe, dass wir die implementieren müssen, das Zählen oder was wird als Quantität. Und auch die Zwischensumme, wenn Sie sich erinnern, wir haben das bereits in dieser Karte Produktseite und wir haben hier die Produktdetailseite, dass wir diese Menge Artikel haben, so können wir es verwenden, wie wir es von prime Ende. Damit wir es kopieren können. Und zuerst, aber Sie haben, um eine andere Spalte zu erstellen, weil wir zwei Spalten für das Bild und sieben Spalten für ihren Inhalt fertig und löschen-Schaltfläche. Jetzt müssen wir eine andere Spalte erstellen, die der Rest sind. So können wir p Anruf sagen, und dann wird es vier oder sortiert3. So haben wir insgesamt 12 Spalten. Und innerhalb dieser 12 Spalten insgesamt werden wir diese P-Nummer oder die Eingabenummer haben , die wir auf unserer Produktseite definiert haben. Also, wenn wir auf Produktdetailseite gehen, so können Sie schnell gehen, sprang zu ihm. Wir können Produkt sagen. Und Seite, wie Sie hier sehen, sprang ich direkt zu dieser Komponente. Und wir haben in dieser Komponente, dass wir den Mengenknopf nennen , der diese ist. Damit wir das alles kopieren können. Es wird genau das Gleiche sein. Also müssen wir zu unserer Komponente zurückkehren, die hier ist. Also definieren wir diejenige, die auch hier ist. So brauchen wir zum Beispiel nicht all diese Informationen. Wir müssen nur Wache haben, zum Beispiel, Artikel und wir geben ihm Menge. In diesem Fall können wir es stylen und ihm eine Klasse geben. Und wir haben das nicht benötigte Etikett, wie wir im Design sehen, damit wir es entfernen können. Und p Eingangsnummer ist nicht wichtig. Wir müssen auch importieren. Wir überprüfen, wie wir es in Sole-Energie haben. So können wir hier Eingänge, mehrere Eingänge haben. Einer von ihnen ist die Eingabenummer, also sollte es diese sein. Sie können kopieren, okay, Eingabenummernmodul. Also müssen wir diesen in unser Bestellmodul importieren. Das gleiche wie wir mit dem Knopf und anderen Dingen gemacht haben. Also setzen wir hier nur Eingabenummernmodul. Also zurück zu unserer Vorlage, um zu sehen, ob alles gut funktioniert. Okay, wir haben, wir brauchen kein NG-Modell zu verwenden. Ich werde Ihnen später zeigen, wie wir den Wert davon bekommen können. Und der Modus wird diese UML sein, zeigen Schaltflächen durch Eingabe-ID-Menge, und es wird haben. Also, jetzt haben wir diese Eingabenummer. Lassen Sie uns die Seite neu laden. Okay, wir sehen wie ein Problem hier, dass es aus unserem Modul geht. Das ist, ich möchte nicht, dass Sie Ihnen das so sehr erklären, weil wir auch eine andere Klasse für diese Komponente hinzufügen müssen , die P Floyd genannt wird, was für dieses Gitter sein wird. Also müssen wir auf dem Gitter off guard Artikel als auch setzen, p Floyd, so in diesem Fall, oder Flüssigkeit. Also in diesem Fall werden wir hier die richtige Klasse fixiert haben, weil P-Flüssigkeit mit gestrichelt ist. Vorlagen oder die Formularkomponenten von prime end g. Und Sie müssen es jedes Mal verwenden, wenn Sie Formularkomponenten in einem Gitter verwenden werden. Das letzte, was ich hier haben möchte, nur das Hinzufügen von Zwischensummen. Und wie viel ist die Zwischensumme dieses Produktes Zwischensumme, ich meine, damit, wie ich wissen muss, wie viel unsere ganzen viele Homer zu diesem Preis dieses Produkts multipliziert mit der Menge sind. Also in diesem Fall kann ich auch das Zwischensummenkonzept verwenden. So haben wir hier auch Carte Artikel, Zwischensumme und Zwischensumme. Wir haben hier Spannweite, weil ich ihm eine andere Farbe geben werde, die grün sein wird und es wird hart zu einem $100 codiert sein. Und wir können diese Elemente oder die Komponenten, die wir jetzt hinzugefügt haben, stylen. Also zuerst muss ich diese Menge stylen. So haben wir hier P oder die Stückzahl des Warenkorbs. Also die Warenkorb-Mengenklasse, die wir hier und innerhalb der Eingabenummer erstellt haben. So können wir einige Margen geben, wie Marge. Wir können sagen, wir können zwei geben, wenn t, wie 20 Pixel oder 15 Pixel im Allgemeinen, wie wir können, und geben Sie es so von oben und unten und von links und rechts, nichts können wir es als 0 behalten. Und wir können auch für die Zwischensumme, wir können sagen, Subtotal-Klasse, wir können Schriftgewicht geben, das 600 sein kann, wie ein wenig fett. Und auch der Wert innerhalb dieser Zwischensumme, wie ich hier definiert habe, habe ich Guard Items Zwischensumme und dann Guard Items Zwischensumme und dann Wert. So kann ich diesen Nutzen nutzen, und ich gebe ihm eine grüne Farbe. Lass uns alles retten und sehen, ob wir es richtig machen. Nizza Jetzt haben wir unsere Guard Initialisierung ist bereit für die Tasten, die hier sind. Wir müssen sie mit unserer Primärfarbe färben, die auch orange ist. So können Sie das leicht tun, indem Sie auf die Warenkorb-Seite gehen und sagen, dass ich alle Tasten stylen und ihnen Hintergrundfarbe geben möchte , wie wir es zuvor getan haben. Also, wenn Sie sich erinnern, wir gaben Hintergrundfarbe, Primärfarben und Ränder ist 0. So können Sie es hier setzen, oder wenn Sie das Gefühl haben, dass Sie das immer verwenden, können Sie es auf die Root-Datei auf hier NG-Shop setzen. Sie können, wenn Sie sich erinnern, haben wir hier einige Gläser hinzugefügt und Sie können sagen, dass nur alle Tasten ihnen Hintergrundfarbe geben. primäre Farbe wird wie folgt sein, und der Rahmen ist 0. Also kannst du das tun. Alles, was Sie auf diese Weise tun können. So können wir die Veränderungen sehen. Und wir sehen, dass alle Tasten diese Grundfarbe haben, die wir haben. In der nächsten Vorlesung werden wir sehen, wie man diese Daten von einem echten Produkt spürt. Also jetzt haben wir nur das Produkt. In diesem Fall müssen wir fühlen, dass der Warenkorb mit realen Daten der Produkte aus der Datenbank, die der Benutzer ausgewählt und auf seine Karte hinzugefügt. 160. Verbinde den Korb mit Produkten: Okay, in dieser Vorlesung werden wir den Warenkorb mit Produkten verbinden. Wie Sie hier sehen, habe ich zwei Artikel in meinem Warenkorb, aber ich kann sie hier nicht anzeigen. Also werden wir diesen Warenkorb verbinden, den wir jetzt die Warenkorb-Seite mit einem echten Produkt, die darin sind. Also der beste Weg, dies zu tun, werden wir die Dienstleistungen des Produkts zu greifen. Also zuerst, lassen Sie uns auf ihre Warenkorb-Seite gehen, wie wir es zuvor getan haben. Und jetzt werden wir hier die hartcodierten Daten umsetzen , die wir hier mit den realen Daten eingeben. Also zuerst werde ich wie ein Modul haben, wo ich den Warenkorb-Artikel mit seinen Details haben werde. Also am Anfang hier können wir anfangen, diesen Wachdienst zu benutzen oder wie wir zuvor gesehen haben. Also werde ich hier private Wachdienst gehen. Und dann werde ich den Warenkorb-Service importieren. Danach. Bei der Initialisierung dieser Seite habe ich eine andere Methode, die mir die Initialisierung ihrer Warenkorbseite gibt. Also auf NG darauf werde ich eine Methode verwenden, wie wir es nennen können, zum Beispiel Einkaufswagendetails erhalten. Und dann definieren wir diese Kartendetails. Also wieder, wir haben hier Kartendetails bekommen und ich werde es als private Git-Karte Details geben. Und darin werde ich diesen Kartenservice nutzen. So der Warenkorb-Service, Ich werde die aktuelle Karte beobachten, die wir zuvor definiert haben und wir beobachtet haben, so werde ich hier sagen Warenkorb. Und dann bekommen wir Pfeife, wir machen eine Pfeife. Und dann müssen wir uns daran erinnern, dass, um zu nehmen, bis wie wenn ich diese Seite verlasse, ich werde das Abonnement zerstören, so dass wir das später tun können. Nun lassen Sie uns es wie durch spielen dieses und dann abonnieren. Und dann würde ich zum Beispiel die Antwortkarte bekommen , die wir nennen können. Und in dieser Antwortkarte, werde ich geben, zum Beispiel, wie eine Antwortkarte Elemente. Und dann werde ich über sie schleifen, weil Sie sich erinnern, dass wir alle Artikel des Warenkorbs erstellt haben und wir werden einige Schleifen im Inneren machen. So wie Sie hier sehen, haben wir für jeden, so für jeden Artikel im Warenkorb Artikel, so für jetzt habe ich zwei Artikel und sie sind in der lokalen Lagerung und in meinem Warenkorb gespeichert. Also werde ich hier gehen, über jeden Artikel schleifen und das Produkt bekommen, und die Menge so weit, dass wir auch brauchen, um über den Produktservice zu gehen. Also sagen wir hier wie Garth Artikel. Also werden wir hier jeden Einkaufswagen Artikel zurück und ich werde über sie schleifen. Also lassen Sie uns Konsolenprotokoll, um sicher zu sein, dass wir alles in Ordnung machen. Also werde ich hier sagen, Konsolenprotokoll für mich, dass der Warenkorb Artikel, wo ich schleife. Danach wird die Anwendung neu geladen. Wir öffnen die Konsole erneut und wir werden sehen, dass wir zwei Objekte erhalten haben, eines mit Produkt-ID und Menge und eines mit Produkt-ID und Menge. Aber die ID, wie Sie sehen, ist nicht genug, weil ich den Produktnamen, den Preis, das Bild, und auch diese up Tochter, die Menge, so viele Informationen über das Produkt brauche das Bild, und auch diese up Tochter, . Also muss ich den Produktservice nutzen. Dafür können wir auch diesen Produktservice nutzen. Aber ich bin sicher, dass Sie das nicht folgen müssen, weil ich es bin, ich möchte Ihnen einen Fehler zeigen, den wir jetzt sagen werden, und wir werden diesen Fehler in der nächsten Vorlesung weiter beheben. Also hier habe ich einen Produktservice. Ich habe es benutzt, damit wir es Produkt oder Service bekommen können. Und es wird aus dem Namen der Produktorganisation kommen. So können wir hier gehen und sagen, Import Produkte Service, aber von wo aus? Aus der Produktbibliothek. So können wir hier blaue Bits und dann Produktbibliothek haben. Okay, jetzt ist alles noch in Ordnung. Wir haben kein Problem. Ich gehe hier zu für jeden Warenkorb-Artikel, wenn Sie sich erinnern, haben wir Product ID, um das Produkt zu erhalten. Also lasst uns das machen. Also werde ich sagen, diese Punkt-Produkt-Service, dot, sorry, der Produktservice, den wir definieren dot get Produkt. Und dann Warenkorb Artikel, die ich hier in der Schleife, Punkt Produkt-ID. Denn wenn Sie sich erinnern, gutes Produkt funktioniert mit einer guten Produkt-ID, wie wir es in den Admin-Panel-Abschnitten getan haben. Also hier haben wir das gute Produkt und wir werden zum Beispiel, um es zu abonnieren. Und wir können ein Produkt wie dieses sagen. Als würden wir das Produkt in ihrer Antwort bekommen und lassen Sie es leer halten. Wenn ich speichere, erhalte ich einen Fehler in der Konsole und auch in der Anwendung. Ich werde dir sagen, warum. Dies liegt daran, dass wir Ressourcenaufrufe oder Zirkelabhängigkeit haben, die hier genannt wird. Denn wie wir bereits wissen, dass wir diesen Wachdienst in Produkt-Bibliothek verwendet, wo wir es in der Admin oder sorry, im Produkt-Artikel, wie wir uns hier erinnern. Also, wenn ich auf das Produkt Artikel in der Bibliothek der Produkte gehen, haben wir hier Produktseite Produktliste, und einer von ihnen ist Komponente genannt Produkt Element. Und wenn Sie sich erinnern, haben wir den Kartenservice genutzt. Das ist also ein großes Problem für mich hier, weil dieser Produktservice oder die Produktbibliothek die Bestellbibliothek verwendet. Und in der gleichen Zeit, bestellt Bibliothek verwendet die Produkte Bibliothek. Auf diese Weise werden wir Schleifen zwischen Bestellungen und Produkten haben. So wie Sie hier sehen, Ich habe von Produkten Bibliothek verwendet und hier habe ich in der, in den Produkten, die ich aus Bestellungen Bibliothek verwendet. Das ist also der Grund, warum wir hier einen Fehler bekommen. Und es wird einige nicht lesen Eigenschaft oder die von undefined, was wegen dieser kreisförmigen Abhängigkeit nicht definiert ist. Wie wir das lösen können, werden wir das mit der einfachsten Lösung lösen. Wie ich Ihnen zeigen, unsere, US, Ich werde Ihnen in der nächsten Vorlesung zeigen. Weil wir dafür mehrere Lösungen haben. Einer von ihnen dupliziert etwas Code in der Bestellbibliothek, um das Produkt zu erhalten. Oder wir werden eine Elternklasse machen, die zwei Bibliotheken hält, die referenziert. 161. Kreisförmige Dependencies zwischen Bibliotheken entfernen: Okay, wie wir zuvor gesehen haben, dass wir ein Problem in zirkulärer Abhängigkeit haben. Also, mit anderen Worten, wir sahen, dass Produkte Bibliothek ist abhängig von Bestellungen Bibliothek. Und auch die Auftragsbibliothek ist abhängig von der Produktbibliothek. Und dieses Konzept in x im Allgemeinen oder in eckig im Allgemeinen ist ärgerlich Angular. Angular mag also keine zirkuläre Abhängigkeit, weil es nicht versucht wird, Implementierung zu haben. Wenn Sie vorhaben, eine Bibliothek zu implementieren. Die Bibliothek muss völlig unabhängig sein und hängt nicht von anderen Bibliotheken ab, die sich im selben Repository oder im selben Projekt befinden. Vor allem, wenn Sie Produkte Bibliothek loswerden wollen, werden Sie keine Probleme haben, die ich dann auch von der Arbutus Library durchkommen muss. Also eine von zwei Lösungen, die wir tun werden. Zuerst werde ich eine einfache Lösung machen. Also, das heißt, ich gehe hier, zum Beispiel, in ihrer Produktseite oder Warenkorbseite. Ich werde in den Bestellservice etwas namens get Produkt erstellen, das genau der gute Produktservice ist , der vom Produktservice kommt. Also hier als Lösung werde ich sagen, dass, okay, gutes Produkt, und dieses Produkt wird zum Beispiel in den Dienstleistungen von Aufträgen implementiert werden . Also werden wir diesen Produktservice nicht mehr nutzen. Die andere Lösung besteht also darin, eine Basisbibliothek zu erstellen, wie Sie hier sehen. So haben wir zum Beispiel eine Abhängigkeit, die Basisbibliothek genannt wird. Ich erstelle eine dritte Bibliothek. Und dann wird diese dritte Bibliothek Modals wie Produktbestellung, Karte, Produkt I, Bestellartikel und zwei sowie, wie mehrere Modelle, alle Modelle meines Projekts enthalten Produkt I, Bestellartikel und zwei sowie, . Und dann werde ich abstrakte Dienste haben. Also werde ich nicht die Umsetzung dieser Bereiche haben, wie ich nicht Gesamtumsatz und die Umsetzung davon bekommen, nein, ich werde abstrakt haben. Und dann wird die Produktbibliothek diesen abstrakten Service implementieren. In diesem Fall werden alle diese Bibliothek nicht von der Produktbibliothek abhängen, es hängt von der Basisbibliothek ab. Also in jeder Änderung, die Sie in der Auftragsbibliothek tun möchten, müssen Sie es auch in der Basisbibliothek tun. Oder mit anderen Worten, Sie müssen immer einige Mitarbeiter implementieren, die in der Basisbibliothek erstellt werden. Sie müssen also immer alles in der Auftragsbibliothek implementieren, wenn Sie zum Beispiel die Bestellungsmethode in der Basisbibliothek erhalten haben . Also im Refactoring-Abschnitt, im nächsten Abschnitt dieses Abschnitts, werden wir ein Refactoring machen und diese Basisbibliothek erstellen. Ich werde es jetzt nicht tun, denn jetzt konzentrieren wir uns auf die Kartenseite. Wir werden später sehen, wie wir unser Projekt umgestalten und eine Basisbibliothek verwenden können, dann werden wir keine kreisförmige Abhängigkeit haben, wie wir hier sehen. Also lasst uns das machen. Erster. Ich werde anstelle von Produktservice haben, die ich aus der Produktbibliothek importiert habe, werde ich Bestellservice haben. So können wir hier Bestellungen Service verwenden. Und statt dieses, sagen wir Bestellungen Service und Bestellservice. Ich werde es importieren aus. Es ist besser, wenn Sie sich in derselben Bibliothek befinden, nicht aus dem Pfad zu importieren. Sie können aus relativem Pfad importieren. Das ist also einfacher und sauberer. Also jetzt löschen wir dieses Teil und wir nutzen den Bestellservice. Der Bestellservice muss in diesem Fall eine gute Produktmethode haben. Derzeit werden wir also eine Duplizierung von Code haben, was für uns jetzt kein großes Problem ist, weil wir ihn später umgestalten werden. Also für jetzt, werde ich zum Produktservice gehen. Hier. Wo ist sie? Hier? Wir haben Produktservice. Und ich will nur Produkt bekommen. Also kopieren wir das hier. Und dann gehen wir zum Bestellservice und erstellen diese Methode hier. So wird der Bestellservice sehen, dass auch der Produktservice. Also in diesem Fall werden wir keine kreisförmige Abhängigkeit haben. Aber schauen Sie, wir haben hier ein Produkt, auch das Modell mit Codes für mich, eine kreisförmige Abhängigkeit. Vielleicht können Sie das Modell auch hier verschieben, ein Duplikat davon machen oder es jetzt wie jedes andere einfügen. Und wir werden umgestalten, dass alles, was wir jetzt alle setzen, wie ich das Produkt natürlich Produktobjekt bekommen werde, aber ich werde jedes für jetzt verwenden. Und für die API-URL haben wir hier eine andere API-URL. Also, was heißt. Produkte, so können wir das ein Produkt nennen. Und hier werden wir auch Produkte haben. In diesem Fall haben wir die Anwendung des Codes, aber es ist kein Problem, weil wir ihn umgestalten werden. Seien Sie also geduldig mit mir, denn wir gehen Schritt für Schritt in diesen Kurs. So jetzt kann ich sehen, dass gutes Produkt hier gut funktioniert, was genau der Produktservice ist, den wir in der Produktbibliothek erstellt haben. Also, jetzt werde ich versuchen, zu sehen, ob ich wirklich diese Produkte aus meinem Warenkorb Artikel detailliert. Lassen Sie uns die Konsole protokollieren das Produkt, das wir von dem Dienst erhalten haben, den wir erstellt haben. Also lassen Sie uns alles speichern und zu unserer Anwendung gehen. Es wird neu geladen, und wir haben diese zirkuläre Abhängigkeit nicht mehr. So, wie Sie hier sehen. Also müssen wir auch in Zukunft diese Abhängigkeit, die wir über den Warenkorb-Service erstellt haben, entfernen , weil ein Auto-Service in der Produktbibliothek verwendet wird. Deshalb müssen wir das auch umsetzen. So haben wir jetzt alle Produktdetails. Wie Sie sehen, habe ich zwei Produkte in der Wache. Ich habe die Details von ihnen. Also lassen Sie uns erstellen oder lassen Sie uns Vorlage oder ersetzen Sie diese hartcodierten Dinge mit unseren Einkaufswagen Artikel. Also werde ich zuerst wie Array erstellen. Wir können es wie Garth Artikel detailliert nennen. So können wir sagen, carte-Artikel, die so detailliert sind, werden die tailed des Warenkorbs Artikel mögen nicht nur die Produkt-ID haben, aber es wird das Produkt selbst haben. So können wir dieses Produkt genau den gleichen Typ detailliert geben. Wir können es auch geben. Die Artikel des Einkaufswagens detailliert. In diesem Fall müssen wir dieses Modell erstellen. Also diese Wache als auch, wir werden nicht nur die Schutzartikel-Produkt-ID haben, wie wir Carte Artikel, detaillierte Produkt nur. Und dieses Produkt wird haben oder wird Typ für jetzt sein weil sonst werden wir eine andere kreisförmige Abhängigkeit haben. Also lasst es uns jetzt so wie jeder andere verwenden. Aber natürlich werden wir es durch ein Produktmodell ersetzen, das sich in der Produktbibliothek befindet. Und das werden wir im Refactoring tun. Also hier ist nicht Gegenstände bekommen, ist ein Element. Also brauchen wir hier einen Artikel und es wird Array von diesen Warenkorb Artikel Detail sein. Also müssen wir das auch aus unserem Warenkorbmodell importieren. Wir haben es hier definiert und wir haben auch die Menge, die wir auch weitere Felder hinzufügen werden, wie wir später sehen werden. Gehen Sie also zurück zu diesem Warenkorb-Artikeldetail, denken Sie daran, das immer mit einem leeren Array zu initialisieren , weil wir dieses Array innerhalb dieser Schleife füllen werden. So sagen wir, dass dieser Warenkorb Artikel detailliert, kann es nicht wieder anrufen. Ja, Einkaufswagen Artikel detailliert, weil wir hier mehrere haben, Dot Push. Wir werden das Produkt schieben. So können wir hier Objekt erstellen. Und dieses Objekt wird das Produkt sein, und wir bekommen das Produkt, das wir hier eine Antwort haben. So können wir hier keine Produkte haben, können wir sagen, Antwort Produkt. Also zwischen diesen Produkten und Reaktionsprodukt zu unterscheiden. Also in diesem Fall werden wir Produkt haben. Das Antwortprodukt und die Menge sind die Garth Artikelpunktmenge. Also retten wir alles. Okay, nett. Wir haben keinen Fehler. Jetzt springen wir zu dieser Vorlage. So, wie Sie sehen, haben wir bei Wache Element erstellt. Also muss ich diesen Warenkorb-Artikel mehrmals durchlaufen, um hier mehrere Warenkorb-Artikel zu erstellen. Also haben wir jetzt nur einen. Aber wenn ich hier MD4 und in diesem MD4, Ich werde sagen, lassen Sie Warenkorb Artikel off guard Artikel detailliert. Also müssen wir Warenkorb Artikel von Gott ItemDetail eins nach 1. Lassen Sie uns zuerst das Bild ersetzen. Also würde ich hier sagen, nicht die einzige Quelle, wie wir SRC hätten. Und dann werde ich Artikel Punkt Produkt, Punktbild sagen. Wie Sie hier sehen, erhalten wir keine automatische Vervollständigung, da wir das Produkt als beliebiges definieren. Aber wir werden Bildfeld bekommen, nachdem wir das tun werden. Wenn Factoring. Die Alt, natürlich können wir auch den Produktnamen setzen. Also für Are nicht kannst du das nicht tun. Sie müssen nur ATTR wie Attribut dot alt tun. Und dann können Sie wieder Warenkorb Artikel Punkt Produkt, Punktname verwenden. Und hier werden wir es durch den Produktnamen ersetzen , so dass wir nicht sagen, Produktname hartcodiert. Wir sagen Warenkorb Artikel Punkt Produkt, Punktname. Genau wie es im Modell ist, wie wir es aus dem Back-End bekommen. Also hier werden wir sagen, Punkt-Produkt, Punkt-Preis. Und hier haben wir das Verschieben des Warenkorbs Artikel. werden wir in der nächsten Vorlesung tun. Dann haben wir auch die Menge auch wir werden mit ihrer Quantität in der nächsten Vorlesung arbeiten. Hier, Zwischensumme ist, wird wie ein Warenkorb Artikel Punktpreis oder Produkt Punktpreis multipliziert mit oder plus sein. Es wird mit der Punktmenge des Warenkorbs multipliziert. So werden wir mehrere Artikel des Warenkorbs haben. Jeder Warenkorb-Artikel hat seine Menge. Und dann multiplizieren wir es mit dem Preis und ich bekomme die Zwischensumme. Okay, wie Sie hier sehen, müssen wir Gegenstände bewachen, die genau zwei hier sind. Und wir sind wir haben sie mit all ihren Details wie den Preis und den Namen, Bild und schreiben Zwischensumme. Also haben wir hier manchmal Warnung, es sagt, wie gefunden zwei Elemente mit der gleichen ID. Denn hier, wenn Sie sich mit der Menge erinnern, die ich sagte, ich brauche Eingabe-ID wird Menge sein. Also ist es besser, als könnten wir das ändern. Wir können zum Beispiel die Produkt-Punkt-ID setzen . So wird es einzigartig sein und wir werden diese Anwendung nicht auf jeder Schleife haben, da dieser Schutzartikel zwei Mal geschieht, basierend auf meiner Anzahl oder Anzahl meiner Einkaufswagen Artikel in ihrem Warenkorb. Danach sehen Sie, dass zwei davon erstellt werden. Also, wenn wir zu Inspect gehen, werden wir sehen, dass wir Artikel Warenkorb, wie Sie hier sehen. Lass uns mehr wie kleines Styling machen. Als könnten wir diesen Rand unten drücken. Wir können es 15 Pixel geben, als würde es so getrennt werden. Wir können das direkt in der Vorlage tun. Wir können Prime End verwenden, wie Margining-Werkzeuge. So können wir p Rand Taste fünf sagen. So wird es ihm etwas Platz darunter geben, der bereits in prime NG definiert ist. Wie Sie sehen, haben wir sie getrennt. Versuchen wir also, der Wache etwas hinzuzufügen. Ich werde weiter einkaufen. Ich möchte diesen Laptop hinzufügen. Also füge ich in den Warenkorb, Warenkorb aktualisiert. Wir haben hier drei Artikel im Warenkorb. Also lass uns das schließen und zu unserem Warenkorb gehen. Schön. Wir haben jetzt drei Artikel in ihrem Warenkorb. Also in der nächsten Vorlesung werden wir mit dem Löschen des Artikels aus dem Warenkorb arbeiten, und wir werden mit der Menge arbeiten die Menge aus dem lokalen Speicher aktualisieren. Als Zusammenfassung erinnern Sie sich, dass wir unseren Bestellservice refactored haben. Wir haben das Produkt hinzugefügt, um Produkt In Ordnung Service zu erhalten, was meiner Meinung nach falsch ist, weil wir die Anwendung im Code zwischen der Produktbibliothek und der Bibliothek haben . Aber wie ich Ihnen gesagt habe, werden wir das im Refactoring-Teil beheben. Ich möchte, dass Sie es von Ihrer Hand ausprobieren, um wirklich den Unterschied zwischen dieser Duplizierung zu sehen oder wie wir eine Basisbibliothek erstellen, davon alle abstrakten Methoden erben und sie in der Bibliothek implementieren. In diesem Fall werden wir keine zirkuläre Abhängigkeit zwischen Bibliotheken haben und wir werden es genau auf diese Weise haben. 162. Produkte aus dem Korb entfernen: Willkommen zurück. Jetzt werden wir in dieser Vorlesung gehen, um Artikel von der Karte zu löschen. So wie Sie sich erinnern, haben wir mehrere Artikel erstellt und ich werde sie jetzt aus meinem Warenkorb löschen. Also, wenn der Benutzer seine Meinung geändert hat und er einige Elemente filtern möchte , will er zum Beispiel nicht zu Y dieses. So kann er auf diesen Button klicken und dann kann er gelöscht werden. Also, wenn Sie sich in unserem Code in der Vorlage erinnern, haben wir eine Methode, auf klicken Sie auf dieses Symbol, dass wir Guard Element löschen haben. Also lasst uns auch weitergehen. Der Garth Artikel, den wir hier am Ende haben Sie FOR-Schleife ist aus dem Auto die Artikel detailliert. Also und dann gehe ich zur ts Datei und erhalte dann diesen Einkaufswagen Artikel. Natürlich wird dieser Warenkorb-Artikeltyp Warenkorb Artikel detailliert sein. Und dann rufen wir einen Service aus dem Wagen an. Und dieser Service können wir es hier erstellen. So ist es genau so etwas wie Set Cart Artikel. Wir erhalten einen Garth Artikel und dann schieben wir ihn wieder in unser lokales Lager und aktualisieren unsere beobachtbare von ihrem Warenkorb. Richtig definiert es, dass wir eine neue Wache Daten haben. Also lasst uns das machen. Also werde ich eine Methode erstellen. Wir können es löschen Guard Item nennen. Sie brauchen Artikel des Einkaufswagens. Es genügt, nur die Produkt-ID, ID zu erhalten , die sich innerhalb dieses Schutzartikels befindet. So können wir die Produkt-ID als String haben. Und dann machen wir wieder einen Empfang ihres Warenkorbs. Also müssen wir ihren Wagen wieder holen, weil wir diesen Wächter aktualisieren werden. Und dann haben wir einen Filter. So filtern wir die Artikel des Warenkorbs, um alles wieder zu erhalten, außer der Produkt-ID oder dem Warenkorb-Artikel mit dieser Produkt-ID. Also, was ich tun muss, werde ich eine Konstante erstellen, Ich werde es in Ihrem Warenkorb nennen. Und dies eine neue Karte wird Gott sein, die Gegenstände. Und dann werde ich sie filtern. Wenn Sie sich erinnern, haben wir wie Filtermethode, bei der es für mich Artikel unter einer bestimmten Bedingung zurückgibt. Also, wenn alle die Bestellung, die Produkt-ID ist nicht gleich dem Artikel, den ich hier erhalten habe. Dann wird es für mich alle anderen Artikel zurückgeben, die nicht die Produkt-ID haben. In diesem Fall erhalte ich einen neuen Einkaufswagen außer diesem Schutzartikel, der diese Produkt-ID hat. Also werde ich sagen, item dot product id, nicht gleich, wie geben Sie mir alles, was nicht gleich der Produkt-ID ist , die ich aus dem Warenkorb Artikel erhalten habe. Danach haben wir eine Empfangskonstante. Und einfach sagen wir, dass dieser Wagen oder Wagen, die wir erstellt Punkt-Artikel, geben Sie es wieder, dann Sie gefangen. Also wurde unsere Wache aktualisiert. Jetzt werden wir es im lokalen Speicher aktualisieren. Also genau so, wie wir es hier gemacht haben. Wir müssen diese JSON-Zeichenfolge erstellen. So können wir diese JSON nennen, wir können es als Wachen String nennen und, oder zum Beispiel, wir können JSON-String sagen. Und dann war es 10 Guifei es. So kann ich es im lokalen Speicher als String festlegen. Und natürlich vergessen wir am Ende nicht zu aktualisieren, das beobachtbar wurde. So werden wir die Updates auch im Frontend sehen. Wenn für jeden Gegenstand oder für jede Komponente, die Beobachtung dieser Wache beobachtbar ist. Also lassen Sie uns alles speichern und versuchen, das in unserem Frontend. So werden wir sehen, dass wir zwei Elemente haben. Lassen Sie uns einen von ihnen löschen. Wenn ich also einen von ihnen lösche, sehe ich, dass nichts passiert, weil ich den Dienst nicht erneut anrufe. Also gehen wir wieder auf unsere Warenkorb-Seite und wir müssen diesen Punktcart Service erhalten , der Garth Artikel löschen, aber was ich habe, um die Produkt-ID übergeben, so werde ich den Warenkorb Artikel dot-product, dot ID erhalten. Also lassen Sie uns versuchen, dass ich jetzt auf Löschen klicken werde. Schön. Es ist nichts passiert, aber ihre Karte wurde aktualisiert. Und hier habe ich extra Artikel, was etwas nicht stimmt. Ich werde dir sagen, warum. Denn wenn Sie wissen, haben wir einen Wächter beobachtbar und dieser Wächter der Beobachtbare feuert alles innerhalb des Abonnements wieder, wenn es Update auf ihrem Warenkorb kommt. Also in diesem Fall habe ich auch, wieder eine Antwort Wächter Elemente für jeden. Und dann bekomme ich das Produkt wieder und ich schiebe sie auf den Einkaufswagen Artikel detailliert wieder. So werden die alten Guard Item Details Elemente haben. Und auch wenn ich lösche und das aktualisiert wurde, wird es wieder Elemente hinzufügen, die immer noch sind. Ihr Wagen in der lokalen Lagerung. Der beste Weg, um dieses Problem zu lösen, können wir immer das Guard-Element mit leerem Array detailliert initialisieren. Also, wenn es Update kommt in den Warenkorb, dann leere einfach den Warenkorb Artikeldetails, wo wir hier Schleifen sind. Auf diese Weise wird es leer und es wird wieder gefüllt. Danach werde ich sehen, dass mein Warenkorb auf dem neuesten Stand ist. Also lassen Sie uns das speichern und versuchen Sie es noch einmal in unserem Front-End. Okay, jetzt haben wir nur einen Gegenstand. Also fügen wir zum Beispiel dieses hinzu und gehen Sie zurück zu ihrem Warenkorb. Okay, wir haben drei. Also, wenn ich diesen lösche, werde ich sehen, dass wieder aktualisiert wurde. Okay, es wurde aktualisiert. Wenn ich eine Blüte der Seite hinzufüge, habe ich noch diesen Einkaufswagen Artikel hier. In diesem Fall garantieren wir, dass wir immer diese Art von Element aus dem lokalen Speicher löschen. Und auch von unserer Wache beobachtbar, die jeden Kommentar oder jede Änderung an die Abonnenten sendet, wie zum Beispiel dieses Symbol, weil es das Konto abonniert. Und auch für andere Seiten, auf denen sie den Warenkorb abonnieren. Also jetzt haben wir hier ein Problem. Lass es uns schnell reparieren. Ich möchte die Kartenanzahl erhalten, damit wir das leicht machen können , indem wir eine andere Variable machen, die hier Guard Count genannt wird. Und das am Anfang wird es 0 sein. So zum Beispiel werden wir es als 0 haben. Wir haben das vorher genau hier im Warenkorb-Symbol gemacht. Also die Kartenzahl wird die nach dem Abonnieren auf den Warenkorb beobachtbar, Ich werde sehen, Carte Artikel Links geben mir die Länge oder geben Sie mir 0, und wie auch hier, vergessen Sie nicht, dieses Fragezeichen zu setzen, falls es keine Artikel oder ganz. Also gehen wir wieder auf die Warenkorbseite. Und in diesem Abonnement dieser Karte, wir gehen hier und wir sagen, wie nicht vor für jeden müssen wir sagen, diesen Punkt oder zum Beispiel, Antwortkarte hier in diesem Fall. Also sagen wir Wächter Graf, gib mir die Kartenzahl hier, aktualisiert mit dieser Antwort, die aus dem Garten beobachtbar oder Verhalten Thema kommt. Und hier müssen wir es durch Kartenzahl ersetzen, denn wenn Sie sich erinnern, haben wir es hier als fest codiert. Jetzt werden wir es als eine reelle Anzahl von wie vielen Artikeln im Warenkorb haben. Also lassen Sie uns das speichern, speichern Sie das hier. Und dann gehen wir zur Anwendung. Wir werden sehen, dass wir auch die richtigen Artikel haben, die wir hier hinzufügen. So genau wie wir mit diesem Abzeichen oder Symbol gemacht haben. Damit wir jetzt nachsehen können, sehen wir, okay, es sind drei. Wir haben gegessen. Es ändert sich zu zwei. So ist alles beobachtet und auf dem neuesten Stand. Also letzte Sache, ich möchte nur hinzufügen, dass wir immer brauchen, wenn ich diese Schutzseite besuche, müssen wir das Abonnement beenden. Also auch, wir müssen tun, bis, wie wir es immer tun. Und dann dieser Punkt n subs. Denken Sie daran, wir haben es mehrmals definiert. Und jede Komponente, die benötigt wird, um das Abonnement zu betreten. 163. Order: Okay, in diesem Vortrag werden wir diese Reihenfolge zusammenfassen. Und diese Bestellung jemand. Es ist genau, wie wir es gemacht haben und wie wir die Artikel des Warenkorbs beobachten und wir rufen das Produkt und wir haben die Berechnung der Zwischensumme. Ich werde das Gleiche hier machen. Also lasst uns gehen und die Komponente erstellen. Das habe ich schon erschaffen. Also die Komponente, Ich habe die Konsole ein x, und dann habe ich eine Komponente erstellt und geben Sie ihm einen Namen, Bestellübersicht. Und diese Komponente befindet sich in den Komponenten in der Auftragsbibliothek, und sie wird automatisch in das Bestellmodul importiert, so dass wir es auf anderen Seiten verwenden können. Also, warum habe ich es als Komponente gemacht? Weil ich es in ihrer Warenkorb-Seite verwenden werde, wie Sie hier sehen, habe ich es in unserer Warenkorb-Seite genannt, wie wir es vorher gemacht haben. Und auch, ich werde es auf der Kasse Seite nennen. Also, wenn wir gehen, um diesen Inhalt hier mit der Adresse des Benutzers zu ersetzen. Also werden wir auch diese Bestellzusammenfassung als jede formale E-sharp zu halten. Also, was ich jetzt genau getan habe, ist nur eine Vorlagensache zu geben. Ich gab wie h3. Führen Sie diese Bestellübersicht durch. Ich gehe schnell, weil wir das mehrmals gemacht haben. Ich werde für Sie den Code beifügen, damit Sie mit dem Kurs fortfahren können. Jetzt haben wir auch den zusammenfassenden Preis. Und ich mache hier eine Berechnung für den Gesamtpreis, der im Komponenten-Skript sein wird, wie wir später sehen werden. Und auch, wir machen einige Entzündungen wie Verpackung und Versand. Es sind hartcodierte Informationen. Ich gebe es wie ein Styling, das zusammenfassende Preis oder Übersichtslieferung genannt wird. Und dann zeige ich wieder den Gesamtpreis , der wie der Gesamtpreis hier gleich sein wird. Es ist also wie einige Deklaration Zufallsdaten. Ich mache es nur wie in einem Fall wie ein echter E-Shop aussehen. Also haben wir hier den Verkäufer Artikel und es wird genau sein, wenn ich einen neuen Artikel hinzufügen, der hier berechnet werden soll. So werden wir sehen, wie wir das gemacht haben. Also habe ich hier wie eine Vorlage, ich habe es gestylt. Ich habe diese Wähldatei zu unseren öffentlichen Stilen hinzugefügt, die sich innerhalb von Stilen, Lippen und dann Bestellungen befinden. Und ich habe hier Bestellübersicht. Und diese Bestellung jemand, den ich dem Behälter gebe, wie weißen Hintergrund und etwas Rand, um das gleiche Styling zu halten, etwas Polsterung. Dann gab ich die Preisanzeige Flex, die hier wie dieses div sein wird. So wird es zwei Spalten haben. Eine Spalte ist die Info oder ihre Beschriftung und dann der Wert der Beschriftung. Wieder hier haben wir so etwas wie wir einen anderen wie Artikelpreise haben. Und dann haben wir hier Spannweite, zwei Spannweiten wie sie als Flex angezeigt werden und sie werden nahe einander ausgerichtet werden. Und ich gebe diesem Diamant-Flex, dass sie als Block sind. Denn wenn Sie sie nicht als Block anzeigen, werden die Spannweiten aneinander hängen und sie werden nicht wie ein div betrachtet , können wir sagen. Also haben wir hier Anzeigeblock, der Spannweite, wie Sie sehen, haben wir zwei Spannweiten hier. Erstes Verbot und zweite Spanne, sagen die erste Spanne und die zweite in jeder Reihe. Also was, wie habe ich Stil gemacht? Ich habe diese Band gerade direkt gelesen. Ich gab dem ersten mit 80%. So, wie Sie hier sehen, hat es 80%. Natürlich können Sie auch das Gitter benutzen. Ich habe es einfach anders gemacht, nur um Ihnen zu zeigen, dass Sie sich auch nicht immer auf das Raster verlassen müssen. Und dann sagte ich, letztes Kind, letzter Riese des Containers, wie jemand, der Preis hat es Spanne. Und das letzte Kind dieser Spanne wird 20 Prozent Schriftgewicht 600 haben. Also habe ich diese Bands. Dies ist das erste Kind, und dies ist der letzte Riese des Containers, der zusammenfassende Preis genannt wird. Wie Sie hier sehen, haben wir diese 80% und das wird 20 Prozent sein. Und danach habe ich noch eine Reihe und dann haben wir einen Knopf für die Kasse. Diese Schaltfläche bringt mich also zur Kasse Seite, wie wir später sehen werden. Also, jetzt haben wir dieses Styling. Wie Sie sehen, haben wir einige Informationen, es ist sehr einfach. Ich füge hinzu, dass auch das Styling mit diesem Vortrag. Also füge ich diese Komponente hinzu. Also nicht, du musst nicht nochmal mit mir tippen oder das Video stoppen. Sie können einfach die Komponente greifen. Ich habe die Vorlage, ich habe das Skript, und ich habe das Styling als auch in den Anhang oder auf die Ressourcen dieser Vorlesung gesetzt. Also jetzt werden wir dafür tun, die Berechnung des Gesamtpreises. So habe ich zum Beispiel hier ein weiteres Produkt und ein anderes Produkt hinzufügen. Ich gehe nochmal zur Wache, um es zu überprüfen. Okay, Wir haben hier den Preis automatisch berechnet , der eine Zusammenfassung aller dieser Preise hier sein wird. So, wie das gemacht werden kann. Es ist also sehr einfach. Ich habe gerade wieder ihren Warenkorb abonniert, wie wir es genau mit dieser Schutzseite getan haben. Und dann habe ich bei jeder Änderung dieses Einkaufswagens initialisiert. Dann initialisiere ich etwas, das als Gesamtpreis bezeichnet wird. Es ist eine feste Variable oder ein Klassenmitglied, das als Gesamtpreis bezeichnet wird, was eine Zahl wäre. Und dann ging ich wieder in den Garten. Hier habe ich überprüft, ob ich einen Wächter habe, der von diesem Abonnement zurückkehrt, wir beobachten es. Und dann habe ich mir die Artikel dieses Warenkorbs angesehen und dann rief ich das Produkt für jeden Kartenartikel an. Nimm einen. Hier. Ich habe eine genommen, weil wir es einmal nennen. Also, wenn Sie ein Abonnement dafür machen, dann würde es Ihnen die Möglichkeit geben, sich leicht abzumelden, so dass Sie nicht tun müssen bis wie n subs, bis die Komponente so leicht zerstört wurde, dass Sie das tun können. Sie sagen, nehmen Sie einfach ein, ich nehme eine und beende das Abonnement automatisch. So wird es ein greifen und dann das Abonnement beenden. Hier haben Sie sich also nicht um Speicherleck kümmern. Dieses Steak stammt auch von unserem x j als Operatoren, so dass Sie sie auch verwenden können. Und dann abonnieren wir ihr Produkt. Und dann sage ich, dass der Gesamtpreis , den ich bei jeder Änderung ihrer Wache initialisiert, es wird der Produktpreis multipliziert Artikelmenge sein. Aber plus gleich. Das bedeutet, dass ich so etwas tun möchte. So Gesamtpreis für jeden Artikel nur es mit wie vorherigen Gesamtpreis kumuliert. Und dann mit diesem Preis überhaupt, Wie zum Beispiel die Abendmahlstochter. Also mit einer Zwischensumme, die wir hier berechnet haben. In diesem Fall können Sie es also kleiner machen. Du sagst einfach plus gleich. Und gleich wird Ihnen ein Produkt des Preises geben, wie item.quantity. Und es wird sich zu diesem Gesamtpreis ansammeln. Nur wenn es eine Änderung kommt, dann wird es auf 0 initialisiert werden. In diesem Fall sind wir in der Lage, über die Artikel zu schleifen und den Gesamtpreis zu berechnen, den wir hinzufügen, hinzufügen, hinzufügen. Und dann wird es auf die richtige Weise berechnet. Das war's also. Es gibt nichts Kompliziertes. So haben wir nun auch Subs definiert. So wird es auf NGO onDestroy sein. Das habe ich nicht hinzugefügt. Also müssen wir Energie aufDestroy als auch hinzufügen, um zu vermeiden. Und dann werden wir sehen, dass diese beiden Endungen als Nächstes sein werden. Und auch dieser Knoten n subs wird abgeschlossen sein. Also, wenn ich diese Komponente verlasse, werde ich das Abonnement für den Wächter, Abonnenten oder Verhaltensgegenstand beenden . Also in diesem Fall aktualisiere ich jedes Mal den Warenkorb. Hier wird die Bestellübersicht automatisch berechnet. Also gehe ich hier, gehe wieder, füge in den Warenkorb, wir können weitere Artikel hinzufügen. Ich gehe wieder in meinen Einkaufswagen. Das werde ich hier sehen. Ok. Ich habe mehr Artikel und es berechnet für mich die richtige Reihenfolge Zusammenfassung, die letzte Kachel, die ich gerne tun würde, vielleicht können wir diesen vollen Knopf machen, wie große Taste sein und gut gezeigt, es wird das Auge von der Benutzer. So können wir das einfach in dieser Wähldatei tun. Ich gehe zur Bestellübersicht. Wenn Sie sich erinnern, haben wir hier jemanden bestellen, den ich erstellt Checkout Button innerhalb der Bestellübersicht, damit wir hören können. Wir befehlen jemandem zu gehen und wir eröffnen eine neue Klasse. Wir nennen es Check-out-Schaltfläche und die Schaltfläche in der Zusammenfassung wird Breite 100% haben. Und wir überprüfen, dass wir die Anwendung neu laden, okay, wir haben die volle Breite der Checkout-Schaltfläche. Und wenn wir auf das Auschecken klicken, müssen wir zur Kasse Seite gehen. Wie wir später sehen werden. 164. Korb: Okay, in dieser Vorlesung werden wir sehen, wie wir Guard Item Menge aktualisieren können. In diesem Fall müssen wir diese Menge des Schutzartikels so aktualisieren , dass wir auch die Zwischensumme und die Kartenübersicht aktualisieren. Beginnen wir also zunächst mit der Initialisierung unserer Menge, wenn die Menge, die der Benutzer bestellt hat. Zum Beispiel, wenn ich wieder gehe, lasst uns diese Seite aktualisieren. Ich habe hier nichts. Lassen Sie uns also mit der Anzahl der Elemente innerhalb dieser Menge initialisieren. Also zuerst müssen wir zu unserer Eingabenummer gehen, die wir erstellt haben. Das ist gefaltet. Und diese Eingabenummer hat wie Menge Minimum, Maximum. Wir werden etwas als in der Dokumentation der Verbrechensenergie hinzufügen. Folgen Sie also immer der Dokumentation. Wie Sie sehen, haben wir hier NG-Modell und NG-Modell, können Sie Wert angeben, so einfach, Sie können einfach sagen, okay, und Sie modellieren, und dann am Ende Sie modellieren, sagen wir Punkt Punkt Menge, okay, aber wir sind immer noch Fehler. Es ist, als kann NG-Modell nicht binden. Immer, wenn Sie diesen Fehler erhalten, wie das NG-Modell nicht binden kann, da es nicht bekannte Eigenschafteneingabenummer ist. Dies liegt daran, dass wir ein Modul importieren müssen, das Force-Modul oder Forms-Modul genannt wird. Also, wo wir dieses Modul importieren müssen, haben wir zuvor in mehreren Modulen importiert, wie Produkte und auch in der Anwendung selbst. Also, was wir es auch hier importieren können. In der Auftragsbibliothek haben wir Bestellungen Modul. Wir sagen, dass unsere Komponenten auch Formulare Modul vier als Modul enthalten alle diese Elemente, die wir für das Formular benötigen. Also in diesem Fall haben wir, dass unsere Anwendung und wurde mit der neuesten Menge aktualisiert , die innerhalb des Einkaufswagens definiert sind. Und wir sehen hier, dass wir mit ihrer Quantität initialisiert haben. Ich werde in den Warenkorb legen einen anderen auch dieses Artikels. Also würde ich zum Produkt gehen und zu diesem Produkt gehen. Ich füge zum Beispiel vier hinzu. Okay, ich wurde aktualisiert. Ich gehe zu meinem Einkaufswagen. Ich werde sehen, dass ich fünf habe, weil vorher hatte ich eine. Also jetzt haben wir fünf von diesem Artikel. Und auch die Bestellübersicht funktioniert einwandfrei. Aber jetzt, okay, das funktioniert gut. Wie Sie hier sehen, mag eine Zwischensumme, da sie durch Berechnung zwischen der Artikelmenge und dem Preis des Produkts erfolgt. So ist es einfach zu berechnen und es wird automatisch aktualisiert. Aber was wir auch aktualisieren müssen, ist Bestellzusammenfassung. So, wie wir die Bestellübersicht aktualisieren können oder auch wenn wir die Seite neu laden, Sie sehen, ich habe hier wieder fünf, aber ich möchte es speichern. Ich möchte diese Veränderung immer behalten. Der beste Weg, dies zu tun, ist, den Warenkorb selbst zu aktualisieren. Wie wir auf den Warenkorb selbst aktualisieren. Lassen Sie uns zunächst ein Ereignis haben. Wenn ich dies ändere, werde ich den Wert lesen und etwas mit diesem Wert tun. Also zuerst, gehen Sie wieder zur Dokumentation. Ich möchte ein Ereignis, das ausgelöst wird, wenn ich den Wert dieser Eingabenummer geändert habe. Befolgen Sie immer die Dokumentation. Sie werden wieder zum Prime gehen, Ende der Eingabenummer. Und Sie sehen in der Dokumentation, dass Sie Eigenschaften haben, wie wir hier gesehen haben, dass wir Schaltflächen anzeigen, Eingabe-ID, et cetera haben. Und auch, wir haben auch Veranstaltungen. Und diese Ereignisse verhalten sie sich basierend auf der Interaktion des Benutzers auf dieser Komponente. Also hier habe ich etwas, das bei der Eingabe aufgerufen wird. Wenn also der Wert eingegeben wird, wenn der Benutzer einen Wert in diese Eingabe legt, wird ein Ereignis ausgelöst. Wie können wir die Veranstaltung feuern oder anrufen? Wir gehen einfach hier zur Komponente. Und es ist so, wie wir mit OnClick oder zum Beispiel, wie dieser oder zum Beispiel, auf etwas onclick, onmouseover fokussieren. Das gleiche, was Sie hier tun müssen, dass Sie nur bei der Eingabe sagen, weil es bereits als eine Eigenschaft dieser Komponente definiert ist, die p-Eingabenummer genannt wird. Also oninput, ich werde eine Methode erstellen, ich werde es aktualisieren, Guard Item Menge nennen. Okay, was sind die Parameter dieser Methode? Die Parameter werden zuerst ist Ereignis, weil ich den Wert dieser Eingabe lesen möchte. Wie viel ist jetzt der Wert, der wie hier in Wert kam. Okay, ich ändere es, ich brauche vier. Also muss ich diesen Wert lesen. Also, um das zu tun, passieren wir etwas namens Ereignis. Es muss dieses Dollarzeichen vorangestellt werden. Natürlich ist es ein Ereignis, das für jede Art von Ausgängen ausgelöst werden kann. Dies wird als Ausgabe bezeichnet, und dies wird als Eingabe bezeichnet. In eckigen Komponenten definieren Sie also Ausgänge und Eingänge für jede Komponente. Also jetzt haben wir dies hier definiert, und auch wir müssen den Warenkorb-Artikel selbst übergeben. Also lassen Sie uns diese Methode erstellen. Wir werden auf die TypeScript-Datei gehen und dann erstellen wir diese Methode, den Parameter, wie wir gesagt haben, es wird sogar sein, Sie müssen nicht mit Zeichen, Dollarzeichen vorangestellt setzen und wir setzen nur Ereignis und auch den Warenkorb-Artikel. Der Artikel des Einkaufswagens wird der Gegenstand detailliert sein, da wir aus der for-Schleife greifen. So wird es sein, den Gegenstand detailliert zu bewachen. Wenn Sie sich erinnern, als wir einen Einkaufswagen Artikel, Ich rief diesen Punkt Warenkorb Service und dann setzen Warenkorb Artikel, dass Warenkorb Artikel, müssen wir den Warenkorb Artikel selbst übergeben. Wie Sie hier sehen, müssen wir den Garth Artikel übergeben und dann wird er gesetzt. Aber dieser Fall, wenn ich einen neuen Einkaufswagen Artikel in den Warenkorb. Also, dafür werden wir überprüfen, ob wir den Einkaufswagen Artikel bereits haben und wir erhöhen die Menge. Ansonsten schieben wir den Artikel in letzter Zeit und in Europa, wie er ist. Also hier geben wir nicht den Warenkorb-Artikel, aber wir übergeben folgendes. Zuerst müssen wir Produkt-ID für den Warenkorb-Artikel haben, die aus dem Warenkorb Artikel Punkt Produkt, Punkt-ID kommen wird. Und auch wir müssen eine Menge übergeben, jene Menge, die wir von diesem Ereignis lesen. Also lassen Sie uns überprüfen, was dieses Ereignis mich zurückgibt und wie wir den Wert lesen können. Also lasst uns diesen Teil auskommentieren. Ich mache dies mit Steuerungsschrägstrich und es wird für mich oder die Teile oder die Zeilen, die ich ausgewählt habe, kommentieren . Also haben wir hier console.log Ereignis, genau so. Wenn ich also die Menge aktualisiere, möchte ich etwas sehen. Also öffnen wir die Konsole und dann werde ich die Menge aktualisieren. Ok? Ich bekomme ein Objekt, das als ursprüngliches Ereignis bezeichnet wird, wie das Ereignis, das gemacht wird , das Mausklick ist, und den Wert. Was uns also wichtig ist, ist der Wert. Also müssen wir hier sagen, Ereignis Punktwert. Wir gehen wieder zu unserem Frontend. Wir versuchen es. Wir ändern diesen Wert. Wir sehen, dass wir jetzt bekommen, dass ich Mehrwert hinzufüge, das ist großartig. Also brauchen wir für ihren Warenkorb Artikel hier, diese Menge wird das Ereignis sein, dass Wert. Also hier haben wir Ereignis Punktwert. Also, wenn ich jetzt zum Frontend gehe und das ausprobiere. Okay, wir sehen, dass wir zunehmen, aber falsch sind. Sie sehen, es ist wie mehrfach dupliziert, weil es eine falsche Berechnung passiert. Sieh mal, es wird wirklich falsch und falsch mehr. Also, was wir in diesem Fall tun können, müssen wir unseren Set Warenkorb Artikel überprüfen. Also, wenn Sie sich erinnern, wenn der Warenkorb Artikel existiert, Ich schicke den Warenkorb Artikel mit der neuen Menge und dann werde ich die Menge erhöhen. Also berechne ich, ob ihr Warenkorb-Artikel bereits vorhanden ist, ich erhöhe die Menge mit der vorherigen Menge. In diesem Fall bekommen wir eine falsche Anhäufung. Also steigen wir immer mehr an. Also habe ich, jetzt, wenn ich auf 525 klicke, wird es 525 hinzufügen. So wird es sein, was in ihren Autos vor, und dann wird es mehr Akkumulation haben, wie Sie hier sehen. Also in diesem Fall müssen wir sagen, Warenkorb Artikel zu setzen, um die Menge zu aktualisieren, nicht zum Beispiel, um die Menge hinzuzufügen. Also, weil vor hier haben wir das getan, weil wir gehen zu sagen, dass, wenn Gerichte, wenn der Benutzer kommt hierher und er auf In den Warenkorb klicken, ein weiterer in den Warenkorb legen, dann, wenn der Artikel bereits in ihrer Wache vorhanden ist, erhöhen wir die Menge. Aber jetzt unser Fall hier aktualisieren wir total diese Menge. Also müssen wir diesen Wert lesen und entfernen Sie die alte Menge und aktualisiert mit der Nummer, die sich hier befindet. Also füge ich einen weiteren Parameter hinzu, um den Einkaufswagenservice zu setzen , der als Update-Warenkorb-Artikel bezeichnet wird, wie nur dieses und dieser Update-Guard-Artikel wird optional sein, gerne nicht erforderlich sein, wenn Sie set cart item aufrufen, weil wir manchmal nur den Schutzartikel senden, um die Menge zu aktualisieren oder hinzuzufügen oder einen neuen Einkaufswagen Artikel zu schieben. Also wird dieser nicht benötigt. Wir werden keine Fehler in den anderen Zielen dieses Set-Warenkorbs erhalten. Und dann überprüfen wir, ob es Update Guard Artikel gibt, dann aktualisieren Sie die Menge vollständig. Oder wenn nicht, dann nehmen Sie einfach die alte Menge und fügen Sie Artikel einen neuen Artikel oder eine neue Menge hinzu und aktualisieren Sie den Warenkorb. Also, wo das getan werden muss. Also werde ich hier nachsehen. Ich werde sagen, wenn Update Guard Element, wie wenn diese Kaugummi als wahr, dann bedeutet es, dass ich hierher komme und ich klicke auf diese. In diesem Fall müssen wir sagen, dass die Artikelmenge nur gleich der Warenkorb-Artikelmenge ist. Wir müssen keine Akkumulation durchführen oder die ganze Menge zu der neuen hinzufügen. Andernfalls, wenn es falsch ist, dann, oder wenn es unbekannt, undefiniert oder falsch ist, dann müssen wir diese Akkumulation tun. Also lassen Sie uns das speichern und wir müssen unsere Warenkorb-Seite Komponente hier aktualisieren , dass wir den Satz Guard Artikel haben, okay, der erste Parameter ist dieser Schutzartikel. Und dann sagen wir durch, weil wir das Kartenelement aktualisieren müssen, nicht zu Descartes hinzufügen. Und sagen wir mehr wie einige Artikel, die wirklich groß geworden sind. Also können wir nur diesen haben. Also werde ich die Menge erhöhen, wie Sie sehen, wenn ich die Aktualisierung dieser Karte wird aktualisiert. Und auch die Zusammenfassung, weil jeder in dieser Anwendung beobachtet den Wagen, denn wie Sie sich erinnern, haben wir diesen Wagen beobachtbar. Und im Warenkorb-Service, jedes Mal, wenn ich einen Warenkorb-Artikel setze, sage ich dem Beobachtbaren, aktualisiere die Wache und benachrichtige alle. Also in diesem Fall haben wir die Gartenartikel Menge aktualisiert, die mir helfen wird, immer die Bestellübersicht zu verfolgen und dass Gott immer gleich bleibt, auch Sie einen anderen Artikel hinzufügen, zum Beispiel hier, und Sie gehen zu wieder in den Garten. Sie werden hier den Artikel sehen. Zum Beispiel werde ich diesen Artikel hinzufügen. Wieder, das wird sieben sein. Also müssen wir gehen und es finden. Das ist das, was ich hinzugefügt habe. Geh zu ihrem Warenkorb. Wir werden sehen, dass es sieben hat. Auf diese Weise sind wir sicher, dass unsere Daten fixiert sind, unser Warenkorb ist fixiert. Wir haben hier kein Problem. Und wir sind bereit, zur Kasse zu gehen. 165. Checkout-Seite: Okay, Nachdem wir unsere Warenkorb-Seite haben, werden wir zur Kasse gehen. Also dafür müssen wir auch eine neue Komponente erstellen , die wir nennen es eine Kasse Seite, wie wir mit ihren Autos Seite gemacht haben. Also gehen wir zur nächsten Konsole, generieren. Und dann werden wir Komponente haben. Und diese Komponente wird einen Namen haben, der unter Komponente oder Seiten ist. Es wird unter Seiten sein. Und dann wird es Auscheck-Seite haben. Der Name des Projekts wird Aufträge sein, weil wir in die Aufträge setzen. Und dann machen wir dasselbe, was wir für jede Komponente getan haben. Und wir behalten die Tests. Und auch müssen wir einen Selektor hinzufügen, der Bestellungen auschecken Seite sein wird. Also hier drin, dass wir jetzt bereit für uns die Komponente. Wir drücken Run. Wir gehen zu den Seiten in unserer Auftragsbibliothek. Also müssen wir hier haben und Sie überprüfen Seite. Also überprüfen wir das. Wir sehen, dass wir Checkout Seite hier haben und wir haben die Komponente als auch. Also, was wir brauchen, müssen wir eine Route in Ordnung Bibliothek hinzufügen, genau wie wir mit der Wache gemacht haben. Ich werde hier Kasse haben. Und wir werden später sehen, wie wir diese Seite autorisieren werden. So werden wir Benutzer zwingen, zu suchen und dann kann er seine Adresse setzen und dann kann er eine ältere platzieren. Aber jetzt werden wir eine Formulierung zum Auschecken machen. Aber als Gast, wie wir es nicht haben. Beispielsweise meldet sich der Leserbenutzer an. Sie werden das im nächsten Abschnitt tun. Aber jetzt machen wir nur normale Bestellung mit einem bestehenden Benutzerkonto, das Gäste genannt wird. Und dann müssen wir auschecken oder auf die Check-out-Seite gehen , wenn wir auf diese Schaltfläche in ihrem Warenkorb klicken. Also, wie können wir das tun? Es ist sehr einfach. Wir machen das Gleiche, wie wir mit normaler Navigation machen. Also werden wir sagen, wie Router Punkt navigieren und dann gehen wir zu einer bestimmten Seite. Oder Sie können einen Router-Link auf der Checkout-Seite sagen und Sie geben so in der Bestellübersicht. Also müssen wir gehen, um eine Komponente zu bestellen, weil die Checkout-Schaltfläche in der Bestellzusammenfassungskomponente vorhanden ist. Also hier werden wir onclick geben. Und diese onclick, wir geben es wie navigieren, um zu überprüfen. Und dann müssen wir diese Methode erstellen. Also gehen wir wieder zur Bestellübersicht, und dann erstellen wir diese Methode. Wir sagen, navigieren Sie zum Auschecken, wir müssen auch den Router-Dienst importieren. Also sagen wir hier privaten Router, und dann wird es Router sein. Und dieser Router wird aus Winkelkern kommen, wie wir immer wissen. Also werden wir diesen Router-Dienst verwenden. Wir sagen, dieser Punkt-Router, Punkt navigieren. Und dann haben wir Array geöffnet. Wir sagen, in diesem Array, die für mich navigieren Seite zu überprüfen. Das war's also. Also lassen Sie uns alles speichern und versuchen, wenn wir wirklich zu unserer Checkout-Seite navigieren, die wir zuvor erstellt haben. Aber ich bin immer noch auf der Kasse Seite, weil ich einen Fehler gemacht. Hier gehen wir zu den Bestellungen Modul und wir müssen sagen, dass diese Komponente Checkout-Komponente sein wird, nicht Guard Page Komponente. Auf diese Weise garantieren Sie, dass Sie zur Kasse gehen. Also gehen wir wieder zurück. Gehen Sie zu unserer Wache, klicken Sie auf Auschecken. Okay, perfekt. Wir haben Kasse Seite funktioniert. Also die Kasse Seite, es wird genau wie die Guard Seite sein. So wird es auf der Oberseite etwas wie zurück in ihren Warenkorb haben, wie Knopf. Wie haben wir wie zurück zu ihrem Warenkorb hier und alle, zum Beispiel, zurück zum Einkaufen. Und auch, es wird eine Form haben. Und das Formular wird genau so sein, wie wir das Admin-Panel eingebaut haben. Wenn Sie sich erinnern, ich werde nachsehen und wie Sie hier in den Benutzern sehen, haben wir ein Formular erstellt, das uns Namen, E-Mail, Passwort und alle anderen Informationen über den Benutzer gibt . Wir werden das gleiche Formular verwenden, damit wir es genau das gleiche kopieren können. Und wir müssen entfernen ist admin und das Passwort und die anderen Informationen können wir sie verwenden. Also habe ich schon über dieses Formular erklärt, wie wir die Länder bekommen haben, wie wir immer die Validierung bekommen haben. Also, wenn Sie einen Benutzer ohne Validierung erstellen möchten, der einzige Unterschied, den wir brauchen, um diese Felder zu validieren wenn wir das in ihrer Checkout-Seite tun. In diesem Fall werden wir das gleiche exakt fremde verwenden, das wir im Backend-Panel verwendet haben. Wir werden genau die gleichen Komponenten wie diese Eingabe verwenden. Also zuerst machen wir diese Vorlage für die Checkout-Seite. Also, was ich brauche, um wie eine Kasse Seite hier zu haben, wie genau, wie wir mit ihrer Wache haben. Also haben wir es. Kasse Seite und wir werden Button wir rufen es zurück in ihren Warenkorb, nicht zurück zum Shop. Und wir machen hier einen Knopf, der zurück zu ihrem Warenkorb ist. Also müssen wir auch diese Methode hinzufügen. Also haben wir wieder in ihren Warenkorb. Wir würden auch das Router-Modul verwenden. Wir sagen, privat und der Router. Und der Router. Und dieser Router wird von Angular kommen. Und wir sagen, dieser Router Punkt navigieren. Und ich möchte zu ihrer Warenkorbseite navigieren. So ist es genau, wie wir immer navigieren. Also sparen wir das, wir retten das. Und wir gehen auf unsere Warenkorbseite im Frontend. Also haben wir hier Check out. Okay, wir haben jetzt den Knopf zurück zu ihrem Warenkorb. Also, wenn der Benutzer vor dem Auschecken etwas in seinen Autos ändern will, kann er wieder in seinen Warenkorb gehen. Jetzt werden wir das Formular hinzufügen. So wird das Formular auch in einem Gitter sein. Also werde ich es wie ein Ziel großes Gitter geben. Und es wird einen Namen haben, der wie Auscheck-Formular genannt wird. Also genau das Gleiche. So haben wir Form ausgegeben. Und dann müssen wir das Formular verwenden, das wir in den Benutzern für das Formular auf der Rückseite und alle im Admin-Panel verwendet haben. Also werden wir genau das gleiche verwenden. Also habe ich diesen Code bereits vorbereitet, weil wir alles wiederholt haben , wie wir darüber gesprochen haben, wie wir Formular-Steuerelementnamen erstellen, wie jede Komponente verwendet wird, wie wir den Schalter verwenden, wie wir das Dropdown verwenden, wie wir die Länder bekommen haben. Wenn Sie nicht wissen, wie das geht, gehen Sie einfach zu der Vorlesung, in der wir den Benutzer im Admin-Panel erstellt haben. Hier können Sie also das gleiche Konzept verwenden. Wir werden das gleiche verwenden, wir werden auch verwenden. Gleiche Initialisierung für das Formular wie hier. Wir werden das gleiche Submit verwenden. Wir werden auch haben, dass die gleichen Validatoren, die wir zuvor so verwenden, erforderlich ist, dies ist nicht erforderlich. Und danach werden wir die gleichen genau Bestellungen Template-Modell verwenden und dann werden wir die Bestellung aufgeben. Also lassen Sie mich jetzt diesen Code importieren. Also haben wir den ganzen Code hier im Raster. Also habe ich das schon vorbereitet. Ich klicke hier und wir haben jetzt die Dinge importiert. Also müssen wir einige Kontrollen importieren. Wie zum Beispiel müssen wir das Eingabetextmodellmodul importieren und wir müssen eine Eingabemaske und auch die anderen Eingaben wie das Dropdown-Menü verwenden. So können wir das auch in Bestellungen Modul tun. Also importieren wir alle von ihnen Eingabetextmodul, Eingabemaskenmodul, alle von ihnen in unsere Module, die sich hier befinden. Also haben wir eine Eingabemaske und wir haben auch die Eingabe-Drop-down-Liste. Daher werden wir keine Probleme in der Vorlage haben. Also sollte die Vorlage danach gut funktionieren. Also speichern wir und wir sollten diese Fehler nicht sehen, nur weil wir immer noch diesen Fehler sehen weil dieser Formular-Steuerelementname nicht definiert ist, weil wir auch etwas importieren müssen, das reaktives Modul genannt wird. So reaktive Formulare Modul, das wir als auch im Admin-Panel verwendet haben und wir darüber zuvor gesprochen. Also hier, jetzt haben wir keine Fehler. Also, wenn Sie sich erinnern, in der Benutzer ist Form, wir müssen ein Formular initialisieren und auch die Länder erhalten. Also müssen wir auch den gleichen Code verwenden, den wir hier haben. Also habe ich das auch vorbereitet, um nicht so viel Zeit von dir in der Vorlesung zu bekommen. muss ich also nicht noch einmal erklären, weil wir das bereits in den Vorlesungen der Nutzer erklärt haben. Also hier ist das Formular, das ich auf einem NG gesagt habe, ich habe jedes Checkout-Formular und jeder Check-out warm wir haben diese Checkout-Formular, Gruppe, Formular Builder und Gruppe. Und ich habe die Felder aufgelistet, die ich verwenden möchte. Und auch, ich habe Länder bekommen, Länder bekommen. Wir haben es vom Benutzerdienst bekommen, wenn Sie sich erinnern, wie wir es benutzt haben. Und das Checkout-Formular, das für mich auch die Steuerelemente zurückgibt. Und dann haben wir eingereicht Checkout Formulargruppe oder ihre Artikel, weil wir Bestellungen Artikel lesen müssen, um die Bestellung zu platzieren, wie wir später sehen werden, die Benutzer-ID, die verwendet wird müssen wir auch die Benutzer-ID verwenden. Also, und wir haben die Liste des Landes, die in der Dropdown-Liste aufgeführt wird. Es ist also genau dieser Code jetzt, derzeit ist genau so, wie wir ihn in der Form des Benutzers haben. Du musst es also nicht schreiben. Wieder. Ich werde es mit dieser Vorlesung anhängen. Sie verwenden diese Codes einfach für Ihre Komponenten. Ich werde Auscheckseitenkomponente, das HTML und das TypeScript anhängen . Und auch. Sie müssen nicht vergessen, diese Module zu importieren, über die ich zuvor im Bestellmodul gesprochen habe. Also, jetzt müssen wir es nur stylen. Aber zuerst speichern wir, um zu überprüfen. Wir haben jetzt alles in Ordnung ist, weil wir auch brauchen, um die Kasse Seite zu stylen. Also gehe ich zur Kasse. Okay, wir haben jetzt alles. Aber wir haben immer noch diesen Button auschecken, weil es in Ordnung ist jemand Komponenten. Also müssen wir überprüfen, ob wir auf der Kasse Seite sind, diese Schaltfläche ausblenden. Und wir haben jetzt hier alles, aber auch die Knöpfe sind blau. Lassen Sie uns zuerst eine Stylingdatei erstellen. Wir müssen hier hinzufügen. Und nicht nur Bestellungen, wir müssen einen neuen Ordner oder eine neue Datei hinzufügen, wir nennen es auschecken. Wie können wir einfach sagen, check out, SCSS und injizieren oder in den Bestellungen, die wir brauchen, um es zu importieren. Auf diese Weise wäre dieser auch wichtig. Also müssen wir hier abstellen, schauen Sie sich an. Nachdem wir sie importiert haben, setzen wir den Stil dafür ein. Also, was ich im Styling getan habe, ist genau wie wir mit der Warenkorbseite gemacht haben, wenn Sie sich erinnern. Also hier habe ich die Kasse Seite. Ich gebe es min-height, um es wie eine minimale Höhe zu geben, um nicht wie sehr, sehr dünn zu sein. Und auch die Tasten gab ich ihnen primäre Farbe Grenze 0, wie wir es vorher gemacht haben. Und schauen Sie sich das Formular an. Ich gebe es wie ein wenig Rand oben von hier, um weit von der Schaltfläche zu sein. Und auch der Bot, der Ordnung aufgibt. Es wird in voller Breite sein, da wir hier auch die Schaltfläche Order platzieren haben. Wir werden es mit den Flüssigkeiten setzen. Es wird auch von diesen Klassen gefärbt, die wir hier mit Orange definiert haben. Und dann sehen wir, dass wir alles haben wie sie wieder in den Warenkorb und die Platzierung bestellen. Aber wie ich Ihnen sagte, wir müssen diese Kasse verstecken. Also kann ich nicht sagen, um jemand Komponente, wenn ich in der Kasse Seite bin, verstecken Sie für mich diesen Button, wie können wir das tun? können wir einfach machen. Wir gehen zur Bestellübersicht. Wir nennen es bereits, dass Router-Komponente, wenn Sie sich erinnern, oder Router-Dienst, wir müssen diesen Router überprüfen, wenn enthalten Auscheck-Seite oder nicht. Also in der Konstruktormethode sagen wir diesen Router, diese URL, wie die aktuelle URL des Routers. Das schließt ein. Sie können also keine Includes für jede Zeichenfolge sagen , um nach einer bestimmten Zeichenfolge in der Zeichenfolge zu suchen. Also hier wird die URL für mich diese URL zurückgeben. Also werde ich überprüfen, ob diese URL ein Wort enthält, das als checkout bezeichnet wird, dann verstecken Sie für mich das wie das Küken oder den Checkout Button , der in der Bestellübersicht ist. Also können wir nicht sagen, ob es enthalten ist, schauen Sie sich an. Wir können die Endlinie benutzen. Wenn ja, wir haben hier, können wir wie eine Variable oder ein Klassenmitglied geben, das wir nennen es ist Checkout. So zu wissen, dass wir die Kasse Seite haben und wir geben es am Anfang als falsch. Also zunächst wird es eine falsche sein. Wenn wir eine Checkout-Seite haben, dann sagen wir, dies ist Check-out ist durch. Andernfalls wird es wie sonst falsch sein. Diese Check out, es wird falsch sein. Also jetzt mit dieser Variablen, die wir erstellt haben, gehen wir durch die Bestellung jemand Vorlage und wir sagen, dass diese eine, diese Schaltfläche wird völlig ausgeblendet. So können wir sagen, ng-wenn der Ausdruck auschecken ist. Also, wenn es nicht auschecken, dann zeigen Sie die Schaltfläche. Aber wenn es ausgecheckt ist, dann verstecken Sie die Schaltfläche. Also sparen wir, wir speichern das auch. Wir gehen zur Vorlage. Wie Sie hier sehen, ist die Schaltfläche in der Checkout-Seite ausgeblendet weil ich die Schaltfläche hier oder Takeout-Zeichenfolge ausgecheckt habe. Aber wenn ich zu ihrem Warenkorb gehe, werde ich Check out ist hier erschienen. Wie Sie sehen, habe ich den Router überprüft. Ich habe es im Konstruktor getan, natürlich können Sie das in NGOs darin tun, kein Problem. Aber ich habe es im Konstruktor gemacht, was wie vor NGO vor der Initialisierung der Komponente ist. Wenn wir diese Klasse konstruieren, dann wird es Router aufrufen, URL beinhaltet Checkout, dann ist es Checkout durch oder check out false. Also dann verwenden wir das in der ng-if, um diese Schaltfläche ein- oder auszublenden. Also, was wir tun müssen, der einzige Unterschied, dass wir wollen, dass dieses Formular validiert wird. Wir müssen also alle diese Felder validieren , denn wenn wir sie aus dem Benutzerformular kopiert haben, sind diese nicht erforderlich. Also müssen wir diese so gut wie erforderlich machen. Also lasst uns das schnell machen. Ich werde hier wie Stadt haben, ist es erforderlich Land Postleitzahl? Alle von ihnen sind erforderlich. In dieser Vorlage müssen wir zum Beispiel E-Mail haben, okay, wir haben Validierung. Für ausländische, wir haben Validierung, aber Straße, die wir nicht haben. Also müssen wir alle von denen ändern, die nicht gebildet werden, aber es wird Street sein. Also ist eine Straße erforderlich. Es gibt also dasselbe. Ich muss diesen Teil kopieren und für die Wohnung stellen. Ich glaube, es ist nicht erforderlich. Lassen Sie uns das in unserer Form überprüfen. Ok. Es ist auch erforderlich, es ist wichtig, wenn Sie eine Sendung liefern, der Versender muss die Wohnung kennen. Also sagen wir auch, hier ist Wohnung und Wohnung erforderlich. Das Gleiche tun wir für die Postleitzahl. Also müssen wir auch diese Postleitzahl hier hinzufügen. Also haben wir einen Reißverschluss. Und dann die Stadt. Siehst du, es ist genau das Gleiche, wie wir es mit dem Benutzerformular gemacht haben. Also müssen Sie nicht mögen, sagen Sie mir, wenn Sie, wenn Sie diese Vorlesung nicht verstehen, gehen Sie einfach zurück zum Benutzerformular. Sie werden all diesen Punkt verstehen. Deshalb bevorzuge ich Sie zu Beginn dieses Kurses, keinen Teil dieses Kurses zu überspringen, weil alle von ihnen sind, können Sie sie betrachten, sind verpflichtet, in dem Fall, dass Sie mir folgen wollen, teilnehmen. Aber ich erwähne in jedem Vortrag, in dem ich das erkläre, also musst du dir keine Sorgen machen. Also jetzt habe ich alles validiert. Also müssen wir hinzufügen, nun, fügen Sie eine Schaltfläche für die Platzierung der Bestellung. Wir sagen, wie spielen onclick. Wir haben hier den Button onclick von Prime NG. Also werde ich sagen, Order platzieren. Also diese Place-Order-Methode, ich muss es implementieren. Also zuerst muss ich die Bestellung aufgeben. Also werde ich hier sagen, wenn dies, wie, wenn Sie sich erinnern, wir haben dieses Punktformular, wie das Checkout-Formular ist ungültig, dann zurückkehren und nichts tun, weil wir diese Validierungsbedingungen nicht erreicht haben. Also in diesem Fall gehen wir zurück. Also, wenn wir das Formular absenden, müssen wir die Variable setzen, die wir erstellt haben, die aufgerufen wird, wird auf true gesendet, wie die Validierung zu aktivieren. Wenn der Benutzer also auf Platzieren, Bestellen klickt, bedeutet dies, wie er eingereicht hat, aber er hat ein Problem bei der Validierung. Und dann nächste Vorlesung werden wir sehen, wie wir die Bestellung aufgeben können , die wir benötigen, um die Daten zu sammeln und das Bestellmodell zu machen. Auf diese Weise haben wir diesen Vortrag beendet. So sehen Sie hier haben wir die Vorlage, wir haben die Schaltfläche „Bestellung platzieren“ definiert, und wir haben das Formular bereit für die Verstrebung oder Platzierung der Bestellung. Und wie Sie hier sehen, wenn ich auf Bestellung geklickt habe, sind alle diese Felder erforderlich. 166. Ordnung platzieren: Okay, was wir jetzt tun werden, müssen wir die Bestellung aufgeben. Wenn wir zur Kasse gehen und auf Bestellung aufgeben klicken, wird die Bestellung nach Validierung der Formulardaten des Benutzers aufgegeben. Wie ich Ihnen gesagt habe, werden wir eine Bestellung als Gast aufgeben, wir werden den Login jetzt nicht implementieren. werden wir im nächsten Abschnitt tun. Also zuerst müssen wir die Bestellung Schritt für Schritt versuchen. Und dann gehen wir zum Login und greifen Daten des Benutzers aus der Datenbank. Aber jetzt müssen wir die Bestellung normal aufgeben. Also lasst uns die Daten aus dem Formular sammeln. Wie Sie sich erinnern, haben wir in der Auftragsbibliothek und Modell, das bestellt genannt wird. Also in der Ordnungsbibliothek gehen wir hier und wir sehen hier Ordnung. Und in der Bestellung haben wir wie ID, Bestellartikel, Versand, Adresse, eine Lieferung an dieser auch, und alle Informationen, die wir brauchten, um eine Bestellung aufzugeben. Also müssen wir diese Daten sammeln und sie genau gleich auf den Rücken legen. Und wenn Sie sich mit dem Postboten erinnern, haben wir die Bestellung gepostet, wie ich Ihnen zuvor im Backend-Teil gezeigt habe. Wenn Sie das Video nicht sehen, müssen Sie das Video zum Erstellen einer Bestellung in der Datenbank sehen. Also lassen Sie uns diese Daten kopieren und gehen Sie zu unserer Kasse Seite. der Methode „Bestellung platzieren Wenn ich beider Methode „Bestellung platzieren“ auf diese Schaltfläche klicke, die hier für die Bestellung ist, habe ich eingereicht und überprüft dann, ob das Formular gültig ist. Hier müssen wir das Bestellmodell erstellen. Also müssen wir const Ordnung erstellen, und es wird Art der Bestellung sein. So wird die Bestellung von den Modellen kommen. Und dann wird das meinen Feldern gleich sein, die ich hier fühlen muss. Aber zuerst müssen wir diese Strings durch den Wert ersetzen, die ID. Wir brauchen es nicht, denn wenn wir die Bestellung aufgegeben haben, wird es automatisch mit der ID aus der Datenbank geliefert. Mongodb wird das für mich tun. Und dann bestellen Sie Artikel. Wir müssen die Bestellartikel abholen. Für jetzt, lassen Sie uns ein Klassenmitglied definieren. Wir nennen es diese Bestellartikel. Und diese Auftragspositionen, können wir es hier als Klassenmitglied definieren, wie Sie hier sehen, die Array von Auftragsposition sein wird. Also haben wir einen Bestellartikel und es wird ein Array sein. Am Anfang wird es anfängliches Array sein. Also müssen wir diese Frage auch entfernen, während wir hier noch ein Problem haben, weil wir ein Komma setzen müssen. Wir haben hier Fehler, weil es sagt, dass der Typ des Bestellelements Array ist, aber es ist im Modell, es ist nur eine oder das Recht. Lassen Sie uns die Bestellung überprüfen. Wenn Sie sich erinnern, wir haben gemacht, ich glaube, ich habe vergessen, hier ein Array zu setzen, also müssen wir das beheben. Ich denke, die vom Administrator gebündelte Anwendung wird dafür nicht betroffen sein. Lassen Sie uns das Admin-Panel überprüfen, um sicherzustellen, dass wir hier kein Problem haben. Ok. Alles ist noch in Ordnung. Wir haben kein Problem. Ok. Gehen Sie zurück zur Front-End-Anwendung. Bis zum Ende kaufst du ein. Jetzt haben wir die Bestellartikel, um jetzt die Adresse zu tun, also sind sie Lieferadresse eins. Wir können sagen, dass dieser Punkt Check-out Formular. Sie erinnern sich, dass wir so auf die Steuerelemente der Formulargruppe zugegriffen haben. Punkt. Wir können jetzt die Straße zum Beispiel, diesen Wert setzen. Also mit diesem haben wir Zugriff auf das Straßenfeld und wir sagen, dass wir den Wert davon in der Lieferadresse eins haben, müssen wir genau das Modell übereinstimmen. Also müssen Sie nicht vergessen, dass die Lieferadresse zwei vielleicht auch wie die nicht die Straße sein kann, aber wir können die Wohnung benutzen. So haben wir hier Wohnung Punktwert und auch die Stadt wird die gleiche sein. Also müssen wir das kopieren, setzen Sie es hier, entfernen Sie dieses Fragezeichen und wir sagen die Stadt, die Postleitzahl gleich. Wir müssen auch hier die Postleitzahl hinzufügen. Also müssen wir hier Komma, Komma und hier Land setzen . Wieder müssen wir das Gleiche tun. Ich werde es schnell machen. Also müssen wir sie alle so hinzufügen. Und wir werden Probleme mit einem Benutzer haben. Ich werde es später erklären. Also zuerst müssen wir wie alle Werte haben, um richtig zu sein. Wir haben ein Land, das dieses Fragezeichen entfernt. Wir gehen hierher, Land-Telefon, wir müssen auch setzen. Das Telefon hier Staat 2s, Gesamtpreis, Gesamtpreis. Wir brauchen auch. Auch, um es irgendwie zu berechnen. Benutzer und sie bestellt. Also haben wir auch hier. Sie bestellt oder es kann Datum Punkt sein. Lassen Sie uns diese Fragezeichen entfernen und wir werden prüfen, ob alles in Ordnung ist. Wir haben also die Stadt, Länderstatus, den Gesamtpreis und den Benutzer. Also der Benutzer haben wir nicht in der Form etwas namens Benutzer. Also werden wir etwas namens Benutzer-ID verwenden. Und diese Benutzer-ID wird wie eine statische ID oder statische Benutzer kommen, die ich als Gast verwenden werde. Also gehen wir zur Admin gebündelten Anwendung. Wir können einen Benutzer wie zufällige Benutzer erstellen. Wir geben ihm einen Namen wie Gast, und wir können die E-Mail füllen. Zum Beispiel, wenn Ihre Organisation können wir sagen, und wir können es ein Passwort wie und alle anderen Informationen geben . Vielleicht können wir sie so geben. Wir können hier eine beliebige Nummer setzen. Und wir klicken auf Erstellen, erstellt, dieser Gast. Also, was müssen wir tun? Wir gehen in die Datenbank und die greifen die ID des Benutzers. Also ging ich in die Datenbank, cloud mongodb.com und ich melde mich mit meinem Konto und dann sehe ich alle Benutzer, die ich hier habe. Ich habe diesen Gast erschaffen. Also nehmen wir das, damit wir auf Bearbeiten klicken können. Vielleicht können wir diesen Teil hier kopieren und zu unserer Bewerbung gehen. Wir müssen auch ersetzen. Sie auschecken Seite, wir müssen das zu diesem Benutzer hinzufügen, aber Sie können, als Standard, dieser Benutzer wird der Gast sein. Natürlich werden wir das anzeigen oder ersetzen, wenn der Benutzer gesperrt wird. Also müssen wir diese Zeichenfolge hier hinzufügen. Also brauchten wir nicht die Zeit, um keinen Fehler zu bekommen. Die Benutzer-ID für mich wird also diese Zeichenfolge sein. Also retten wir das. Und dann müssen wir zum Benutzer wechseln. Und wir sehen, dass wir hier immer noch ein Problem haben. Warum? Weil ich diesen Fehler durch Purples gemacht habe, nur um dir zu zeigen, wie wenn du eine andere Anfrage bekommst. Zum Beispiel haben wir im Admin-Panel den Benutzer als Objekt erhalten, das den Benutzertyp enthält, der Benutzer, der einen ID-Namen hat, das Passwort für das Back-End wurde für mich dieses Objekt zurückgegeben, nicht alles davon. Es war nur Name, vielleicht eine E-Mail, und einige andere Informationen. In diesem Fall, wenn Sie einen Konflikt zwischen der Postanforderung und der GET-Anfrage haben, ist es besser im Frontend, dies als beliebiges zu definieren. Da dort GET-Anfrage, erhalten wir dies als Benutzerobjekt. Aber wenn wir eine Anfrage stellen, müssen wir nur die ID senden. Also ist es besser, dieses Problem zu lösen, diesen Konflikt zwischen der Anwendung. Sie sagen nur, dass dieses Feld n. Also in diesem Fall können Sie das Formular, das wir hier erstellt haben, auch als String verwenden , um eine Bestellung in der Datenbank oder im Back-End zu posten. Denn wenn Sie sich an das Backend mit Drähten erinnern, die den Benutzer als eine Zeichenfolge seiner ID für das bestellte Datum erhalten , müssen wir nur Datum setzen. Also ist es jetzt Großbuchstabe Punkt. Also, wenn der Benutzer diese Bestellung erfolgreich posten, dann setzen wir den Punkt jetzt. Also, wenn wir zur Datumsreihenfolge gehen, so müssen wir dieses Datum jetzt haben und Sie können das als String einkapseln. So können Sie eine Fledermausschweine verwenden und dies als eine Schnur nehmen, weil es es es als eine Schnur fragt. Also, wie Sie hier sehen, so gehen wir auf die Reihenfolge es sagen, dass ich das als eine Zeichenfolge will. Also können wir uns das zwischen uns schnappen, Zecken denken. Und jetzt müssen wir die Bestellartikel bekommen. Also wollen wir eine Bestellung zu posten. Wir müssen die Bestellartikel senden. So enthielt jeder Bestellartikel, wie wir uns erinnern, Produkt und die Menge. Also müssen wir ihren Warenkorb wieder abonnieren. Also, wenn Sie sich erinnern, haben wir einen Wachdienst und Entsorgungsdienst erstellt. Ich kann alle Artikel des Einkaufswagens abrufen. Also gehen wir hierher und sagen „privat“. Und dann müssen wir wie Einkaufswagen Service bekommen. Und es wird Warenkorb-Service-Typ sein. Und wir nutzen diesen Wachdienst, um die Gartengegenstände zu bekommen. Ich habe hier erschaffen. Klassenmitglied, das als Auftragspositionen bezeichnet wird. Also ein MD auf in ihm nach Intializer Form, können wir dies sagen und dann Carte Artikel bekommen. Also in diesem Fall müssen wir eine Methode nach der Initialisierung des Formulars definieren, können wir private Git-Warenkorb-Artikel sagen. Und diese Get Wache Items wird diesen Karten-Service verwenden. Also müssen wir diesen Punktkarten-Service sagen und dann unsere Wache beobachten. Oder Sie können auch Wache verwenden, weil wir nicht direkt verwenden müssen. Die Warenkorb-Artikel, die wir haben, wie alle beobachten diese Wache, weil wir keine Kette tun. Jedes Mal, wenn wir die Komponente besucht haben, bekommen wir diese Karte aus unserem lokalen Speicher und dann lesen wir die Daten. So können Sie sagen, wie ein konstanter Wagen. Und natürlich können Sie die Karte verwenden, die wir das Observable erstellt haben. So wird dieser Wagen einen Typ haben, der Karte genannt wird, und diese Karte wird aus den Modellen importiert werden. Jetzt müssen wir Carte Artikel bekommen. Also muss ich sagen, diese Punkt-Reihenfolge Artikel, die wir zuvor definiert haben, würden wir sagen, Karte Punkt-Elemente. Aber hier werden wir auch ein Problem haben. Denn wenn wir zum Warenkorb Artikel gehen, haben sie Warenkorb-Produkt-ID. Aber in der Bestellposition von gehen wir zum Modell, wir haben nur Produkt. Also haben wir eine von zwei Möglichkeiten. Vielleicht müssen wir dies auch in Produkt-ID ändern. Oder wir können einen neuen Artikel zuordnen, der auf diese Bestellartikel passt. So kann ich hier sagen, dass diese Wache Artikel Punkt Karte bestellen. Und dann in dieser Karte kann ich Artikel sagen. Und jeder Gegenstand wird wie Rückkehr für mich ein Objekt sein. Und es wird Produkt, und dieses Produkt wird item.name, Produkt-ID, und dann Menge wird die gleiche Artikel Punkt Menge sein. Auf diese Weise ordne ich all diese Artikel einer Produkt-ID zu, aber einem Produkt zu. So wird es über alle Elemente im Inneren, Wache Artikel, Artikel für Artikel, und ändern Sie es, um Produkt nicht Produkt-ID zu haben, indem Sie die Artikelpunkt-Produkt-ID lesen. Und das wurde für mich Array zurückgegeben, wie Sie hier sehen, der Bestellposition. In diesem Fall haben wir also unsere Bestellartikel gefüllt. Also, um sicherzustellen, dass wir alles in Ordnung ist, können wir einfach in der Konsolenprotokoll diese Bestellelemente schauen , um sicherzustellen, dass es uns wirklich gut geht. Also können wir nicht sagen, Konsolenprotokoll dieser dritten Bestellung Artikel, nachdem wir diese Zuordnung hier gemacht haben. Also werde ich aktualisieren und dann werde ich die Konsole öffnen. Und wir werden sehen, dass wir Array, Produkt und Menge haben. Und es wird ein Produkt sein, nicht die Produkt-ID, die genau zu den Bestellartikeln passt. Und dann, wenn ich eine neue Bestellung einreiche, sage ich, dass diese oder andere Artikel ältere Artikel sein werden, die wir hier ausgefüllt haben. Müssen wir den Gesamtpreis berechnen? Nein, denn wir sind, wenn wir den Gesamtpreis nach hinten schicken und dann kann jeder Benutzer den Gesamtpreis bei buchen. In diesem Fall wird es für mich ein Problem machen, das ich platzieren werde. Zum Beispiel, hacken Sie ihre Website und senden Sie eine Bestellung mit einem gefälschten Gesamtpreis. Wie ich 41, $1000 setzen kann, kann ich $2 setzen und ich kann es an die API senden. Das Backend erhält also nicht den Gesamtpreis, aber wir berechnen ihn intern und fügen die Datenbank ein, so dass wir nicht diesen Gesamtpreis senden müssen, den Gesamtpreis in dem Modell, das wir es verwendet weil wir wollte es in der Admin-Panel-Anwendung verwenden. Wenn Sie sich erinnern, gingen wir zu Bestellungen und wir, wir bekommen den Gesamtpreis hier. In diesem Fall garantieren wir, dass alles im Backend passiert. Wir schicken nichts an das Frontend. Also immer, wenn wir diese Berechnung machen, wenn wir bestellen, sollte alles aus dem Backend werden. Andernfalls, wenn Sie von Front-End so hier als String senden, zum Beispiel, senden Sie es an das Back-End, dann ist es keine gute Übung, weil jeder diesen Preis fälschen und an das Back-End senden und ein Problem für Sie in im E-Shop. Danach haben wir die Kasse gemacht. Wir haben das Bestellmodell erstellt. Wenn Sie sich erinnern, haben wir einen Service erstellt, der als Auftrag erstellen bezeichnet wird. Und diese erstellende Bestellung wird eine Bestellung für mich in die Datenbank schreiben. Also rufen wir den Bestellservice an. Wir gehen hier wieder zu unserer Kasse Seite. Wir bitten um den Bestellservice. Also haben wir hier Warenkorb-Service. Wir brauchen Privatbestellungen. Und es wäre Art von Bestellungen Service. Dann dieser Bestellservice, müssen wir es verwenden, um eine Bestellung zu erstellen. Also werde ich wieder hierher gehen. Und dann würde ich sagen, dieser Punkt Order Service, Punkt erstellen Ordnung. Und ich werde diese Bestellung senden, das Back-End machen. Aber wie Sie sich erinnern, wird dies nicht ausgeführt, bis ich abonniert habe. Also, wenn wir das Abonnement machen können, und dann können wir hier bestellen oder wir können es einfach behalten und leer, wie leer. Und dann können wir den Benutzer auf eine Dankes-Seite umleiten, wie wir in der nächsten Vorlesung sehen werden. Damit wir Hörensagen können. Auch direkt. Dankeschön Seite. Und wie wir später sehen werden, werde ich es bald zu ihrem Kurs hinzufügen. Nach dir, okay, du schaust dir diesen Kurs an, du hast dich eingeschrieben, aber du siehst diese Zahlung nicht. Ich werde diese Zahlung maximal nach zwei Wochen nach der Erstellung dieses Kurses hinzufügen. Also wir hier, wir tun vielleicht nicht zu, danke, aber vielleicht auch zur Zahlung. Also Zahlungsseite. So werden wir in der Zahlung sehen, dass wir keine Bestellung oder eine Bestellung in die Datenbank einfügen , bis die Zahlung Zugriff hat. Und das werden wir mit Sprite Payment Gateway tun. Aber was ist mit dem Status, wenn Sie sich erinnern, wir hatten einen Status auch für die Bestellung und Sie wissen, dass die Bestellung kommt immer als Biegung zunächst. Also der Status der Bestellung, wir haben es nicht gefühlt, weil wir kein vier Mitglied haben, das hier Status genannt wird. Wenn Sie sich erinnern, haben wir im Admin-Panel eine Konstante erstellt, die Status genannt wird. Der Status für die Bestellung muss also zunächst wie Biegen sein, wie der Anfangszustand der Bestellung. Also, wenn wir zur Admin-Anwendung und dann zur Bestellung gehen, haben wir Bestellkonstant und wir haben Bestellstatus. Also ist es hier besser, diesen Bestellstatus gleich zu verwenden , den wir im Back-End verwendet haben. In diesem Fall können wir im Backend die gleichen Daten lesen , die oder beide durch ihr Frontend eingefügt werden. Also hier würde ich sagen, vielleicht können wir diese Reihenfolge konstant verschieben, wie von hier, wir schneiden sie und verschieben sie in die Ordnungsbibliothek. So gehen wir hier und wir können in der Nähe der Komponenten Modelldienste eingefügt hören. Wir können nicht direkt auf der Bibliothek basieren, also wird es in der Nähe des Moduls sein. Und dann in der Admin-Anwendung erhalten wir einen Fehler, weil diese Datei fehlt. Also vor allem, wenn ich das Bestelldetail und auch die Bestellliste führe. Wie Sie sehen, wird der Bestellstatus nicht mehr existieren und es wird mir Fehler geben. Also zuerst müssen wir es von diesem importieren, von Blue Bits Bestellungen. Also haben wir das hier geklebt, okay, und entfernen Sie diesen Teil und speichern Sie diesen. Und auch in den Bestelldetails haben wir das hier bekommen und in der Reihenfolge einfügen, wie ich es aus der Bestellbibliothek bekommen werde, aber wir bekommen immer noch den Fehler. So wird der Bestellstatus hier nicht aus der Auftragsbibliothek exportiert. Also müssen wir zum Index gehen und sagen Export für mich, beginne von. Und dann sagen wir Lippe. Und diese Lippe wird, Ich werde die Bestellkonstante importieren oder exportieren. Also in diesem Fall die Bestelldetails in der Admin-Panel-Anwendung und auch die Bestellliste. Wir werden dies wie die Bestellstatuskonstante sehen. Auf diese Weise können wir es auch im Frontend oder in jeder Shop-Anwendung oder in der Bibliothek selbst verwenden , in der wir die Bestellung erstellt oder die Bestellung gebucht haben. So der Anfangsstatus für jede Bestellung, wird es nicht wie verarbeitet oder versandt sein. Es wird sich verbiegen. Also, wenn ich zur Admin-Panel-Anwendung gehe, gehe ich zu den Bestelldetails hier der Benutzer wird die Bestellung erhalten, der Administrator erhält immer den Anfangsstatus der Bestellung für neue Bestellungen als Anhang. Auf diese Weise werden wir sicher sein, dass wir immer diese Biegung initialisiert werden. Und dann kann der Administrator den Status hier ändern, wie wir hier sehen. Gehen wir nun zurück zu unserer Kasse Seite. Also lassen Sie uns hier die Statuskonstante importieren, die wir hier verwendet haben. So können wir es auch auf unsere Kasse Seite importieren. Also werde ich hierher gehen. Und dann würde ich sagen, importieren Sie für mich den Bestellstatus Konstante aus. Und dann wählen wir den aktuellen Pfad oder das Patent aus, weil wir in der gleichen Bibliothek sind, also müssen wir uns nicht darum kümmern. Danach sagen wir, dass der Bestellstatus zunächst Bestellstatus sein wird. Und dann, wenn wir gehen und den Bestellstatus überprüfen müssen. So der Bestellstatus in der im Back-End gespeicherten wie folgt, wie Sie sich erinnern oder in der Datenbank. Wenn wir zu Bestellungen gehen und wir werden sehen, dann wird der Status als Nummer gespeichert. Also müssen wir auch den Schlüssel bekommen, damit wir nicht das Etikett oder ihre Farbe verwenden müssen. Wir müssen den Schlüssel so weit bekommen, dass ich sagen würde, vielleicht können wir zurück zu unserer Kasse gehen . So haben wir hier die Konstante haben wir Kasse Seite. Ich werde hier sagen Objekt Punkt-Tasten. Ihr wisst also, dass dies für mich die Schlüssel dieses Objekts zurückgeben wird, das ich hier vorbeikomme. Also müssen wir die Schlüssel des ersten Objekts bekommen. Also, wenn ich die Schlüssel bekomme, dann würden wir Array der Schlüssel bekommen, die 0, 1, 2, 3. Also, was ich brauche, ist das erste. So haben wir wie diese 0, alles kann man direkt ohne alles, was nur sagen, ich will den Status 0, die in der Datenbank gespeichert werden, genau wie wir eine definierte unsere Statuszuordnung, die auch in der Konstante wie Sie hier sehen, haben wir die 0 für ausstehend. Also möchte ich den 0-Zustand und er wird in der Datenbank als Status 0 gespeichert. Und im Admin-Panel wird es zunächst als Biegung angezeigt, was der Status 0 0 ist. Also werde ich zuerst gehen. Wir können wie hier ein Konsolenprotokoll machen. Vielleicht können wir bestätigen, dass es Erfolg ist. Also werde ich console.log sagen, wie erfolgreich hinzugefügt. Natürlich, wie ich Ihnen gesagt habe, werden wir ersetzen, um Ihnen Seite oder Richtung zu danken oder mit der Zahlung, wie wir später sehen werden. Also lasst uns sparen. Ich werde diese Daten schnell füllen. Also ich fühle diese Daten, ich werde die Bestellung aufgeben, aber lassen Sie uns die Konsole öffnen, damit wir unsere Nachricht sehen können , wenn sie nach der Bestellung erscheint. Also, wenn ich auf Bestellung platzieren klicke, okay, erfolgreich hinzugefügt. Also lassen Sie uns ihre Datenbank überprüfen, wenn wir wirklich diese Bestellung erfolgreich hinzufügen. Also lassen Sie uns diese wieder schließen und dann aktualisieren wir unsere Datenbank. Und wir werden sehen, dass, wenn wir die Bestellung bekommen, nett, wir haben die Bestellung hier. Also haben wir Bestellstatus und hören alles, was mit mir zu tun hat. Und wie Sie sehen, dass wir den Benutzer haben, ist dieser Gast. Wir haben also nicht, wie wir hören, den Namen und die E-Mail, weil wir den Benutzer nicht einloggen lassen. Denn wie gesagt, werden wir den Benutzer zwingen, sich auf der Checkout-Seite anzumelden, damit wir seine Informationen erhalten können, ohne zum Beispiel alle diese Informationen in die Datenbank zu bringen. Eigentlich können wir den Namen und die E-Mail hier loswerden, weil wir es nicht brauchen, weil wir den Benutzer fragen werden, wenn er sich in der Zukunft registrieren, wann wir die Authentifizierung machen, um seinen Namen und seine E-Mail bei der Registrierung einzugeben. Also machen wir dann einfach, zum Beispiel, dies sind schreibgeschützte Variablen oder schreibgeschützte Felder. Und all diese Informationen sind editierbar, so dass er bestellen kann mit seiner E-Mail und dem Namen, bei dem er sich registriert. Also gehen wir zum Admin-Panel, wir sehen, ob wir wirklich diese Reihenfolge haben. Okay, Nett. Ich habe hier die Bestellung biegen damit ich die Bestellung sehen kann und es kommt vom Gast. Natürlich, wie ich Ihnen sagte, werden wir das durch einen Benutzer ersetzen, wie wir im nächsten Abschnitt sehen werden. Aber jetzt veröffentlichen wir die Bestellung als Gast. Und später werden wir die Login und Authentifizierung im Frontend verwenden , um die richtige Idee mit der Shared Library zu bekommen. Wie Sie hier sehen, werden wir sehen, wie wir die Login-Komponente verwenden können, die wir auch in der Admin-Panel-Anwendung verwendet haben. Also die gleiche Sperre in, wir werden es als auch im Frontend verwenden, um sich in diesem Kunden einloggen und ihn Bestellungen aufgeben zu lassen. In der nächsten Vorlesung werden wir sehen, wie wir den Benutzer nach erfolgreicher Bestellung wirklich auf eine Dankesseite verweisen können . Und eine letzte Sache, die ich Ihnen zeigen möchte, wenn wir zum Detail dieser Bestellung gehen, werden wir sehen, dass wir die gleiche Menge bekommen, genau die Dinge, die wir in ihrem Warenkorb hatten. 167. Danksagung: Nach erfolgreicher Platzierung der Bestellung an unseren E-Shop werden wir den Benutzer auf eine Dankes-Seite umleiten, wie wir es ihm nicht sagen können. Ok. Vielen Dank für Ihre Bestellung. Wir werden Ihr Paket beispielsweise in den nächsten drei Tagen versenden. So können wir dieses Konsolenprotokoll entfernen, das wir hier erstellt haben. Und dann werden wir lesen, leiten Sie den Benutzer zu einer neuen Komponente. Ich habe bereits diese Komponente erstellt, die Danke heißt und Dankeschön Seite wird wie eine Checkout-Seite sein. Es wird das gleiche auf der Kasse Seite sein. Und im Inneren gibt es ein div, das Thank You Seite genannt wird. Ich habe H2 wie den ersten Titel, wie vielen Dank, dass Sie bei uns sind. Und noch ein h3 wir hier erhalten haben, habe ich Fehler. So Ihre Bestellung und dann wird es in den nächsten drei Tagen als auch geliefert. Ich habe einen Knopf, der wieder einkaufen wird. Aber hier habe ich nicht navigieren und onClick verwendet. Ich habe Router-Link verwendet, wie es mich auf die Homepage der Anwendung bringen wird. Also versuchen wir es jetzt. Also habe ich natürlich, nachdem ich all das hinzugefügt habe, die Route für die Erfolgsseite hinzugefügt. Ich nannte es Erfolg. Und die Komponente wird Dankeschön Komponente sein. Und natürlich wird dies auch authentifiziert, wie wir später sehen werden. Also in meiner Check Out Seitenkomponente werde ich einfach den Router wieder verwenden. Also müssen wir sagen, dieses Router-Buch navigieren zu unserem navigieren. Und dann wird es ein Array sein. Und es wird das gerichtete wie zum Erfolg sein. Also in diesem Fall werden wir wie die Umleitung ihres Erfolgs haben nachdem wir sicherstellen, dass abonnieren wie Erfolgreich. Wenn nicht, können Sie dem Benutzer jedoch auch eine Fehlermeldung anzeigen. Sie können es als Hausaufgaben für Sie haben. So können Sie einfach sagen, dass es Fehler gibt. Zum Beispiel können Sie eine Nachricht an den Benutzer anzeigen, wie ich Ihnen gesagt habe. Also können wir einfach so sagen. Also nach dem Abonnieren, haben wir hier, das Abonnement, diese Klammern. Nach diesen Klammern setzen Sie ein Komma, dann wird es für Sie mit dem Fehler antworten. Wenn also ein Fehler in diesem Abonnement vorhanden ist, wird es hier ausgeführt, so dass es nicht navigiert. Also vielleicht können wir sagen, zeigen Sie eine Nachricht, zum Beispiel, an den Benutzer. So können Sie das als Hausaufgaben für Sie tun. Also versuchen wir es jetzt. Wir gehen zu wie navigieren, um zu sehen, ob wir navigieren. Nach dem Auschecken gehe ich zur Kasse Seite, ich fühle, dass Daten. Und dann werden wir die Bestellung aufgeben und wenn ihr Erfolg ist, wird es mich auf die Dankeschöse-Seite umleiten. Also geben wir die Bestellung auf. Perfekt. Wir bedanken uns für Ihren Einkauf bei uns. Wir haben Ihre Bestellung erhalten und sie wird in drei Tagen geliefert. Und dann kannst du auf „Zurück“ klicken, um einkaufen zu können und wieder auf die Homepage zu gehen. Das ist also großartig. Also haben wir die Bestellung erfolgreich aufgegeben und wir haben jetzt voll e-Sharp, wie wir sagen können, funktional, wir müssen nur diese Punkte hinzufügen, ich Ihnen über die Authentifizierung erzählt habe, die wir den Benutzer zwingen müssen, sich anzumelden, bevor er auschecken kann . Ein weiterer Punkt, ich muss erwähnen, Sie sehen, dass unsere Wache es immer noch fallen ist. Also haben wir hier, wie es immer noch zwei Elemente sind, nachdem wir die Bestellung aufgeben, so dass wir auch den lokalen Speicher mit leeren Autos initialisieren können , weil nach erfolgreichem Check-out, möchte ich diese Wache als leer haben, wenn ich nach hinten zum Website oder in den Shop, ich habe keine Karten, weil ich das bereits bestellt. das zu tun, können wir auch zu unserem wie hier gehen, wo wir erfolgreich die Bestellung erstellen. Wir würden den Kartendienst anrufen. So standen sie Wachdienst. Wir müssen nicht init Karte lokalen Speicher anrufen , weil in jedem aktuellen lokalen Speicher, wie Sie sich erinnern, wir überprüfen, dass, wenn wir neue Karte, initialisiert und neue Karte, dann okay, machen Sie eine neue Karte. Wenn nicht, dann verwenden Sie ihre Karte in unserem lokalen Speicher. Also brauchen wir etwas, das leer diesen Wagen genannt wird. So können wir auch leere Karren machen. So können wir diese Methode auch haben. Und hier können wir das gleiche kopieren. So können wir Anfangskarte erstellen, können wir ihm eine Konstante geben. Und dann können wir sagen, überprüfen Sie wie lokale Speicherpunkt-Set Artikel und dann mit dem ersten Warenkorb. Danach können wir diese Methode aufrufen. Ich gehe hierher. Und dann sollte ich diese Methode auf unserer Seite platzieren. Wir haben immer noch Fehler hier, weil wir es auch in JSON ändern müssen , weil es sonst nicht funktioniert. Also haben wir hier Anfangskarte und ich werde jedes Hemd Karte JSON passieren. Auf diese Weise haben wir wieder leeren Wagen. Also lass uns hier gehen und sagen, dass der Wagen leer ist. Also nach der Navigation, so ist es besser, es vor der Navigation zu tun. Also leeren wir ihren Warenkorb und wir navigieren zur Erfolgsseite. Also lasst uns das versuchen. Also fühle ich die Form. Ich werde die Bestellung aufgeben. Ok. Wir gehen zurück zum Laden. Und wie wir sehen, dass wir noch diese beiden hier haben, weil diese beobachtet, wie Sie sich erinnern, den Wagen beobachtet. Also irgendwie müssen wir dem Beobachter sagen, um Anfangskarte zu bekommen, wir müssen nicht wie die Wache beobachtbar haben, die wir bereits behalten. Also für das, Ich gehe zu ihrem Warenkorb Service und ich sage, dass dieser Punkt Guard beobachtbaren Punkt als nächstes und dann geben wir den ersten Wagen. Also, nachdem wir die Karte hier geleert haben, können wir nicht sagen, dass diese zwei Karte Punkt neben und dann anfänglich Darm. Also in diesem Fall, die Person, die sich nach der Anwendung anmeldet, wenn er zum Beispiel auf der Seite blieb , dann würde er wieder auf die Homepage gehen und er wird sehen, dass das Guard-Verzeichnis leer ist. Versuchen wir das nochmal. Ich werde zwei Artikel zu dieser Wache hinzufügen und dann gehen Sie zu meinem Warenkorb, überprüfen Sie, füllen Sie das Formular erneut. Also werde ich Ihnen später sagen, das Formular nicht wieder auszufüllen, wieder für die Entwicklung werde ich Ihnen sagen, wie Sie diese Felder mit Anfangswerten initialisieren können. So müssen Sie diese Form nicht jedes Mal spüren, wenn Sie etwas testen. Also habe ich hier, wieder das Formularfeld, also ersetze ich eine Bestellung. Wie du siehst, okay, zurück in den Laden. Wir haben hier, dass Garth leer ist. Wir gehen wieder und wir sehen, dass wir haben, unser Wagen ist schon leer. Also, wenn ich zum Produkt gehe, füge ich einige Artikel hinzu. Sie sehen, dass wir den Artikel wieder haben. Auf diese Weise garantieren wir, dass wir leeren Warenkorb für den Benutzer haben. Er wird keine Probleme haben, wenn er wieder zum Einkaufen in meinem E-Shop gehen wollte. Ich möchte für Sie nur etwas erwähnen, für den Fall, dass Sie sich für Entwicklungszwecke entwickeln wollen. Sie müssen nicht jedes Mal dieses Formular fühlen, wenn Sie zum Beispiel den Checkout testen möchten, ich bin sicher, Sie werden versuchen, immer die Kasse zu testen, wenn Sie sich entwickeln. Und dann müssen Sie immer diese Form fühlen, um eine einfache Lösung für Sie zu machen. Wenn Sie sich erinnern, haben wir hier eine Zeichenfolge, die leer ist, wenn wir die Formulargruppe erstellen. So können Sie hier einen Standardwert angeben. So können Sie hier Namen eins sagen, zum Beispiel E-Mail. Sie können einige E-Mail geben, email.com. Und wenn Sie die Anwendung neu laden, werden Sie sehen, dass alle diese Daten automatisch gefüllt werden, so dass sie standardmäßig mit diesen Werten sind. Wie Sie hier sehen, habe ich neu geladen und ich sehe diese Werte Standard. In diesem Fall müssen Sie sich also nicht darum kümmern, diese Anwendung oder dieses Formular jedes Mal auszufüllen diese Anwendung oder dieses Formular jedes , wenn Sie Ihren Code aktualisieren und dann zurück gehen, wird es sehr hart für Sie sein. Sie richten also nur einige Standardwerte ein. Und dann, nachdem Sie die Entwicklung beendet haben, sind Sie sicher, dass alles in Ordnung ist. Dann können Sie alle diese Standardwerte ersetzen und entfernen. Es wird also standardmäßig für den Benutzer in der Öffentlichkeit oder in der Produktion leer sein. 168. Aktiviere die Anmeldung in der Kasse: Im vorherigen Abschnitt haben wir gesehen, wie wir eine Bestellung als Gastbenutzer aufgeben konnten. Aber jetzt werden wir die Platzierung der Bestellung auf der Grundlage der Benutzerdaten machen. Auf diese Weise, wie jeder Shop werden wir den Benutzer bitten sich einzuloggen, wenn er auf die Schaltfläche „Kasse“ drückt. Also, wie können wir das leicht machen? Also vor allem, wenn Sie sich erinnern, haben wir Wachen erstellt, und diese Wachen, sie sind besonders geschaffen, um Seiten zu schützen. Und wir verwenden unsere Login-Komponente, die wir zuvor in der Admin-Anwendung erstellt haben. Also gehen zu den Lippen, wenn Sie sich erinnern, wir haben Bestellungen und diese Aufträge, wenn Sie sich erinnern, wir haben Bestellmodul. Und im Bestellmodul habe ich meine Hypothese definiert. Aber wie können wir erstellen oder schützen Sie die Checkout-Seite, Checkout-Seite, wir werden so etwas wie, zum Beispiel, die Wache, die wir für die Admin-Seite erstellt. Gehen Sie zurück zu der Admin-Anwendung, wenn Sie sich erinnern, Going to seine Routen, wir werden sehen, dass wir in der App-Routing-Modul hier, die wir erstellt haben, können aus Guard aktivieren. Und der Out-Guard, der aus der Bibliothek des Benutzers kommt, die wir zuvor erstellt haben, der die Links und das Token überprüft. Und dann, basierend darauf, wird es Sie auf die Login-Seite weiterleiten oder es wird Ihnen sagen, okay, Sie sind willkommen. Sie können eingeben und zurückkehren, true. Wir erklären das alles vorher. Auf diese Weise können wir auch den Mundschutz verwenden, um die Kasse Seite zu schützen. Also die Kasse Seite, wenn Sie sich erinnern, wir haben die Luft aus ihm definiert, die Bestellungen Modul. Auf diese Weise kann ich nicht sagen, nachdem das Bad aktiviert werden kann. Und dann sagen wir, benutze unseren Mundschutz. Und die Asgard kommen von woher? Aus der Benutzerbibliothek. Also, wenn Sie sehen, wird es automatisch hier importiert. Und vergiss das Komma nicht. Aber hier haben wir ein Problem, weil wir sagen müssen, dass dies ein Array ist. Sie müssen es also in ein Array einfügen. Also Array out guard, um zu vermeiden, dass einige Fehler. Also, wenn wir jetzt wieder zu unserer Anwendung gehen, zum Beispiel in den Warenkorb gehen, und ich gehe zur Kasse Seite und dann sage hier, check out, ich bin nicht in der Lage, etwas zu tun. Lassen Sie uns also die Konsole öffnen und sehen, was das Problem ist. Wir werden sehen, dass es keine Routen URL-Segment Login übereinstimmen, okay, Also bin ich wirklich gelesen, um ihre Anmeldung gerichtet, aber ich kann nicht dorthin gehen, weil ein Blick in Route nicht definiert ist. Wenn Sie sich erinnern, ist die Route, die in der Bibliothek des Benutzers oder im Benutzer definiert ist, Modul. Wenn ich zum Modul des Benutzers gehe, würde ich sehen, dass der Pfad Login hier definiert ist. Auf diese Weise muss ich das Benutzermodul in meine Anwendung aufnehmen. Wenn Sie sich erinnern, haben wir auch das Modul des Benutzers, in das App-Routing-Modul oder in das App-Modul der Admin-Anwendung integriert, um für alle Routen definiert zu werden, die in dieser Bibliothek enthalten sind, wie Sie hier sehen. Also müssen wir das gleiche auch für die Motorenwerkstatt tun. Also werde ich zum Ende gehen Sie Shop-Anwendung und dann sagen Sie im App-Modul, importieren Sie für mich das Modul des Benutzers. Auf diese Weise werde ich es hier benutzen. Und dann würde ich die Möglichkeit nutzen, Auto Import All Sie können es verwenden oder selbst manuell importiert. Drücken Sie also Steuerpunkt oder Steuerraum, dann werden Sie in der Lage sein, die Auto-Import-Methode zu sehen. Auf diese Weise werden wir sehen, dass das Modul importiert wurde. Okay, Lassen Sie uns jetzt speichern und unsere Anwendung wird neu geladen und ich werde versuchen, auf Kasse Seite erneut oder auf Kasse Schaltfläche klicken. Ich klicke auf. Wie Sie hier sehen, sind wir auf die Login-Seite des I-N-G Shops umgestiegen. Das Logo darin ist also genau das gleiche Styling, wie wir zuvor mit dem grauen Hintergrund und auch zum Beispiel dem Bild und auch dem Text erstellt haben . Es verwendet also die gleiche Komponente, die wir zuvor auf der Admin-Seite verwendet haben. Aber wie Sie sehen, wird alles hier aufbewahrt. Zum Beispiel die Kopfzeile und auch die Fußzeile, also nur im Container. Also, wenn ich jetzt als Benutzer, als mein Benutzer, der in ihrer Datenbank registriert ist, dann werde ich in der Lage sein, die Checkout-Seite zu sehen. Andernfalls kann ich nicht sehen oder ich kann nicht auschecken nur, wenn ich kann oder wenn ich in ihren Laden schaue. Also werde ich versuchen, mich anzumelden. Also werde ich hier meine E-Mail, die ich habe, setzen. Also werde ich hier die E-Mail setzen und dann habe ich das Passwort. Wie Sie hier sehen, werde ich auf die Homepage weitergeleitet. Jetzt gehe ich wieder auf die Checkout-Seite und ich werde sehen, dass ich auf die Kasse Seite zugreifen kann. In den nächsten Vorlesungen werde ich meine Daten automatisch ausfüllen. Sie wissen, dass ich, mein Benutzer hat bereits Daten in der Datenbank. Also, wenn ich das am Anfang nicht habe, kann ich das Formular platzieren oder ausfüllen, die Bestellung aufgeben und meine Daten werden in der Datenbank gespeichert. Aber wie ich Benutzerdaten laden werde, so wie wir in der nächsten Vorlesung sehen werden, werden wir NGINX verwenden, um alle Benutzerdaten in einem Geschäft zu speichern, wo wir überall in der Anwendung verwendet werden können. Zum Beispiel, hier in den Produkten, wie Sie sehen, kann ich kein Produkt sehen, aber ich kann keine Bewertung nur durchführen, wenn ich eingesperrt bin. Also, weil wir hier einige Rezension Abschnitt hinzufügen , die nicht nur angezeigt wird, wenn der Benutzer eingeloggt ist. Wie ich wissen kann, dass der Benutzer in der Anwendung eingeloggt ist , die wir für diese MDR x mit dem aktuellen verwenden würden, verwenden wir die Observables, wie Sie vorher sehen. Aber jetzt werden wir die MDR verwenden, um eine Zustandsverwaltung des Benutzerstatus oder der Benutzersitzung in ihrem Shop durchzuführen. 169. Was ist NGRX.: Okay, in diesem Vortrag werden wir wissen, was MGR x, y ist wir brauchen NGINX. So NDR x im Allgemeinen ist ein Bühnenmanagement. Okay, du hast mich nicht verstanden, aber ich werde es auf eine Weise erklären, die für dich praktisch ist. Viele Kurse sind abdecken und DRX wie eine Bibliothek und es kann für die Bühnenverwaltung verwendet werden. Aber was ist staatliches Management? Wenn Sie sich erinnern, bevor wir erstellt In den Einkaufswagen. Wenn ich also etwas zu ihrem Warenkorb hinzufüge, sehe ich, dass die Zahl hier steigt. Es ist also, als hätte ich eine öffentliche Variable, dass die gesamte Anwendung Zugriff auf diese Variable hat. Es kann von überall oder von einer beliebigen Komponente erhöht werden. Also, wenn ich hier gehe oder wenn ich zum Beispiel auf Produktseite gehe, klicke ich auf In den Warenkorb. Ich werde sehen, dass diese Zahl steigt direkt von jeder Komponente, die diese verwendet wird, zum Beispiel, dass der Staat. Auf diese Weise haben wir das getan, wir verwenden Observables, aber jetzt werden wir das mit NGINX verwenden. NGINX ist also tatsächlich ein Speicher, der die öffentlichen Variablen enthält, die in der Anwendung verwendet werden. Also für mich habe ich eine Variable, die öffentlich ist. Ich kann von jeder Komponente darauf zugreifen. Und das ist genau das Ziel von x. Natürlich hat es auch mehr Fähigkeiten, wie wir später sehen werden, wie Effekte haben oder Daten aus der Datenbank abrufen usw. So ist die Verwendung für öffentliche Variablen, die r haben können von einer beliebigen Komponente aus zugegriffen werden kann. Also als strukturierte hier habe ich einen Speicher von Variablen. So Speicher oder Variable hat, zum Beispiel, Zugriff auf etwas namens Reduziereffekte und den Rest Service und intelligente Komponente. So haben wir zum Beispiel unsere intelligente Komponente, die in unserem Fall so sein wird. Also habe ich hier unsere intelligente Komponente, die das Produkt selbst sein wird. Ich klicke auf eine Schaltfläche und mache dann eine Aktion. Diese Aktion gibt mir also die Möglichkeit, auf diese Variable im Warenkorb zuzugreifen. Also die intelligente Komponente auf diese Weise oder eine Komponente in Angular, beobachtet oder abonniert diesen Speicher der Variablen und liest Daten davon. Natürlich, dass auch dort, zum Beispiel, die intelligente Komponente kann eine Aktion erstellen. Es braucht also eine Aktion, um eine Variable in ihrem Speicher zu ändern. So habe ich zum Beispiel eine Aktion, die wie In den Einkaufswagen ist. Und diese In den Warenkorb wird eine Aktion zu holen heißt In den Warenkorb, um den Wert der Variable der Kartennummer oder Warenkorb zählen, wie viele Produkte in den Warenkorb, um in den Laden erhöht werden zu ändern . So erhöht, dass im Laden etwas ein Reduzierstück verwendet wird. Der Reduzierer wird also zum Filtern der Daten oder zum Aktualisieren des Zustands dieser Variablen verwendet. Es bewegt sich zum Beispiel, wie wir hier gesehen haben, von drei auf vier, wenn ich auf In den Warenkorb klicke. Auf diese Weise kann die Anwendung oder jede Variable von allen Komponenten aus gesehen werden. Also habe ich zum Beispiel nicht, wie ich sagen soll, dass wir keine privaten Variablen für jede Komponente haben können. Auf diese Weise fragen sich viele Leute, wie ich eine öffentliche Variable definieren kann , auf die unsere Übertragungsdaten von Komponente zu Komponente zugegriffen werden kann. Dies ist die Art und Weise, wie wir NDR x oder mit Epsilon Observables, wie wir zuvor gesehen. Nun, wie Sie hier in der NGINX-Dokumentation sehen, heißt es, dass es ein Framework für die Verwaltung des globalen und lokalen Zustands ist. Ich werde Ihnen auch ein Beispiel für die Verwendung von MDR x in so etwas wie eine Echtzeit-Daten zeigen . Also möchte ich, zum Beispiel, ich habe eine Trading-Anwendung. Und in dieser Trading-Anwendung habe ich mehrere Komponenten und die Preise ändern sich sehr schnell basierend auf WebSocket. So zum Beispiel, diese Website, es heißt hetero. Ich weiß nicht, ob du es weißt. Und es beobachtet die Preise jeder ähnlichen Aktien, zum Beispiel das Öl oder zum Beispiel, dass Bitcoin hier, wie Sie die Bitcoin sehen, zum Beispiel, diese Komponente wird erhöht oder verringert basierend auf einer WebSocket-Verbindung. Und der Zustand dieser Komponente wird aktualisiert, immer wie die Zahlen hier aktualisiert werden. Wie das passiert, wie so wird das aktualisiert, die Zeit. Dies wird als Zustand bezeichnet. Also der Zustand dieser Komponente, die Bitcoin genannt wird, und diese Zahl wird immer aktualisiert basierend auf den WebSocket-Daten, die in Echtzeit aus der Datenbank oder von einem bestimmten Server kommen. Aber die anderen Komponenten werden nicht aktualisiert, da keine Statusaktion erwähnt wird oder zu dieser Komponente gehen. Also nur diese Komponente. Also muss ich davon ausgehen, dass ich zum Beispiel eine Variable habe , die im State Store Bitcoin genannt wird. Und diese Variable wird nur aktualisiert, aber die anderen wie Gold oder Euro-USD werden nicht aktualisiert. Also das Gleiche wie wir hier tun. Wir haben nur eine Variable in unserem State Store verwendet, daher haben wir nur den Warenkorb verwendet. So, wie Sie sehen, gibt es mehrere. Hier haben wir also nur die Guard-Variable, die von allen Komponenten in der Anwendung zugegriffen werden kann. Das ist also die Grundidee von MGR x im Allgemeinen, wir werden im Detail sehen, wie wir implementieren und die r x, um die Benutzersitzung zu beobachten. Auf diese Weise habe ich, wenn ich auschecken werde, eine Variable, öffentliche Variable gespeichert , die als benutzerauthentifiziert bezeichnet wird. Also dieser Benutzer, wenn er Daten hat, dann wird er diese Daten hier füllen. Und auch, zum Beispiel, werde ich es verwenden, wie Sie später sehen, dass wir hier eine Bewertung und Kommentar haben werden. Also der Benutzer, wenn er gesperrt ist oder wenn diese Variable im State Store definiert ist, dann werden wir hier etwas wie ein Review- und Kommentarfeld haben. So kann der Benutzer sehen, dass, wenn er nicht eingeloggt ist, Sie nur diese Seite sehen werden. Wenn er nicht eingesperrt ist. 170. Lass uns den NGRX State Store in Users erstellen.: Gehen Sie durch die Dokumentation von NDR-Eiern, wenn Sie direkt zu etwas namens Architektur oder Erste Schritte in NDR x dot au Website gehen . Dann sehen Sie dieses Diagramm. Und in diesem Diagramm erklärt es Ihnen mehr, was ich vorher gesprochen habe. So, wie Sie hier sehen, haben wir eine Komponente ist immer eine Aktion. Und dann kann diese Aktion sein, es wird Daten verwenden, um einige Daten aus der Datenbank zu erhalten oder nicht. Deshalb ist es punktiert. Diese Aktion wird also den Reduzierer verwenden, um einen Zustand oder eine Variable im State Store oder im Store selbst zu ändern . Also hier haben wir etwas namens Selektor. Es ist wie zum Beispiel, ich habe hier 20 Variablen und ich möchte, dass meine Komponente nur eine Variable auswählt oder abonniert, um immer den Zustand dieses wertvollen in der Staatstür zu beobachten. Auf diese Weise werden alle anderen Komponenten, wie wenn ich hier eine andere Komponente habe, wie wenn ich hier eine andere Komponente habe, die Änderungen auch dieser Variablen in diesem Zustandpunkt sehen. So ist die Verwendung von Selektor auch etwas, das wir jetzt in Aktion sehen werden. Also, wenn Sie sich vorstellen, dass in der Architektur von MDR x gibt es etwas namens Aktionen Reduzierer, Selektoren, Was sind sie? Sie sind Dateien und all diese Dateien, sie sind Klassen. Und sie enthalten einige Funktionen, um dieses Diagramm zu erreichen. Um zu sehen, wie man diese Dateien erstellt, unpraktisch, werde ich Ihnen einen Weg mit NX hier in der NX-Konsole zeigen. Wenn Sie sich erinnern, haben wir Komponenten erstellt. Wir haben mehrere Mitarbeiter mit dieser Konsole erstellt. Und es hat uns geholfen, auch einige Boilerplate von n DRX zu erzeugen. Wenn ich also auf Generieren hier klicke, werde ich eine Liste haben. Und in dieser Liste werde ich sehen, dass ich neuartige eckige und DRX haben werde. Auf diese Weise werden wir die Dateien generieren, die für Angie RX oder den State Store mit dieser Konsole benötigt werden. Wenn ich darauf klicke, bittet es mich, einen Namen für diese Funktion zu definieren. Also, wenn Sie sich erinnern, unsere Anwendung ist zwei Funktionen oder Bibliotheken unterteilt. Wir haben Bestellungen, Produkte, UI und auch Benutzer. Daher müssen wir den Benutzerstatus oder die Benutzersitzung in unserer Anwendung haben. So können alle Komponenten in der Anwendung oder im Shop auf diese Variable zugreifen, um Benutzerdaten überall in der Anwendung abzurufen und die Änderungen zu beobachten, wenn der Benutzer authentifiziert, gesperrt ist oder nicht. Auf diese Weise zeige ich einige Informationen über die Anwendung an oder nicht in diesen Komponenten. Also zuerst, es bittet um einen Namen. So wird dieser Name immer der gleiche Name des Features sein. So zum Beispiel, hier habe ich Benutzer. Alles, was Sie können einen beliebigen Namen definieren, aber hier werde ich in diesem Fall auch Benutzer und auch das Modul aufrufen. Das Modul hier müssen Sie den Pfad genau angeben, wie es hier ist. Also zuerst müssen Sie Lippen sagen. Und dann nach dem Leben haben wir SRC Slash SRC. Und dann werden wir lib setzen, und dann werden wir das Modul angeben. Was ist ein Modul, wie wir hier gesehen haben, seine Benutzer Modul. Hier wird diese Datei basierend auf der wie Generierung des State Stores geändert , weil sie einige Bibliotheken und einige Importe hinzufügen wird , wo sie den State Store verwendet. Also hier müssen wir die Datei definieren, ich werde users.js Modul sagen, das genau den gleichen Namen der Datei hier hat. Okay, was ist das Wörterbuch oder Verzeichnis, das definiert wird? Normalerweise benennen sie es so. Es heißt „Staat“. Aber zum Beispiel können wir für uns dieses Plus entfernen und es auf diese Weise definieren. Wie Sie sehen, wird der Kommentar ausgeführt und sagt Ihnen, welche Fehler auftreten können. So zum Beispiel, hier ist es eine Vergangenheit gibt es nicht. Ich habe hier Fehler gemacht, vor allem, um Ihnen zu zeigen, wenn Sie eine Art von Fehler erhalten, müssen Sie sehen, was das Problem ist. Also, wie Sie hier sehen, habe ich hier vermisst S. Also wird es nach dem Hinzufügen der S sollte in Ordnung sein. Okay, wir haben immer noch den Fehler. Pass existiert nicht y. Lassen Sie uns überprüfen, warum. So zum Beispiel haben wir hier die Lippen, wie Sie sehen, haben wir von den oberen Lippen definiert und dann haben wir den Namen der Bibliothek vergessen. Also muss ich Lippen, Benutzer und dann SRC und dann lib und dann Benutzer setzen. Danach sollte es gut gehen. Wie Sie sehen, zeigt es Ihnen, was es passieren wird. Es ist noch nicht passiert. Es wurde eine Datei erstellt, die sich in diesem Pfad befindet. Es heißt Effekt, genau wie ich Ihnen gesagt habe, Modell und auch Benutzerreduzierer und dann Selektor und auch einige das Update auf dem Benutzermodul und index.js. Auf diese Weise habe ich auch mehrere Optionen, in denen ich auch ein bestimmtes Verhalten dieses Zustandsspeichers definieren kann . So kann ich zum Beispiel FSH generieren. Das ist für Sayed. Es wird verwendet, um einige Funktionen zu verwenden, bei denen ich auf den State Store zugreifen und meinen Code organisierter und schöner machen kann , wenn ich etwas aus dem State Store möchte, wie wir später sehen werden. Also überprüfe das auch. Es wird uns helfen, wie wir hier sehen, dass es einige Modelle erzeugt. Und wenn Sie sich erinnern, haben wir Modelle bereits in unserer Anwendung definiert. Also keine Notwendigkeit, als Modell zu erstellen. Also werden wir diese entfernen, nachdem der Zustand Stall erstellt wurde. Also jetzt sind wir bereit, diesen Befehl auszuführen. Auf diese Weise werden wir in der Lage sein, den staatlichen Speicher zu nutzen. Also Name Modul, das durch das Modul, das rechte, der Name des Verzeichnisses. Und hier sind einige Optionen. Sie können sie verwenden oder Sie können darüber graben. Zum Beispiel, hier werden Sie sehen, dass diese Barrels wird für Sie den Import oder Export der Komponenten erstellen , so dass Sie sie auf einmal importieren können. Aber ich möchte Ihnen den reinen Zustand nur zeigen, was wirklich benötigt wird, zum Beispiel hier für assayed und auch die minimale Summe repliziert. Weitere Kommentare sind hier. Sie brauchen sie also nicht zu benutzen. Routen-Setup, Route für Feature-Statusverwaltung mit MDR x. Sie müssen das nicht tun, da wir das manuell tun werden. Es ist sicherer, unsere Anwendung in der richtigen Weise zu halten. Also hier gibt es viele Informationen, wie zum Beispiel, überspringen Sie einen JSON. Es ist unser gehen, die NDR x Abhängigkeiten zu installieren und DRX-Bibliothek zu unseren Knotenmodulen hinzuzufügen . Auf diese Weise können Sie es überspringen, wenn Sie es bereits installiert haben. Aber wenn Sie es nicht installiert haben, überprüfen Sie nicht diese. Und auch die Wissenschaft TX und RX können Sie definieren, wie Sie in der Dokumentation sehen können oder wie wir später sehen werden, zwei Arten der Erstellung des NDR nebenan. Brillen und Schöpfer. Zum Beispiel, hier werde ich Ihnen die Aktion zeigen. Ich werde eine Aktion erstellen. Und diese Aktion kann auf diese Weise erstellt werden. So etwas wie konstante Anmeldung erstellen Aktion, und diese Aktion hat einige Eigenschaften. Es gibt auch einen anderen Weg, indem Sie eine Klasse erstellen, aber ich bevorzuge den Weg der Schöpfer. Es ist besser und es wird Ihnen eine dynamischere Eingabe für das TypeScript geben. Also, bevor Sie dieses Video beenden, überprüfen Sie bitte, was Sie hier haben, um genau so zu haben, wie ich. Und dann klicken Sie auf Ausführen, und dann sehen Sie den Dateistatus oder den weiteren Zustand Sie hier mit den Testdateien erstellt haben. Auf diese Weise werden wir in den nächsten Vorträgen sehen, was sind Aktionen FX für Saids, et cetera, die uns helfen, unseren Zustand Speicher der Sitzung des Benutzers in unserem Shop zu erstellen. 171. Diagramm, User zu erstellen: Ordnung, am Anfang möchte ich wie ein Diagramm erklären, wie der Prozess sein wird wenn wir den Benutzer bekommen oder die Benutzersitzung erstellen. Also zur Erinnerung, das Hauptziel, das ich möchte, jede Komponente meiner Anwendung wie Produktdetail, Pumpenkomponente und auch Auschecken Seitenkomponente. Holen Sie sich einige Daten aus dem Store, die von der gesamten Anwendung gemeinsam genutzt werden. So habe ich zum Beispiel hier zwei Variablen definiert. Einer ist Benutzer. Es enthält die Benutzerdaten des aktuell angemeldeten Benutzers. Und es wird auch halten, ist authentifiziert, ist wie zum Beispiel, es ist eine boolesche Variable. Es kann wahr oder falsch sein, was sagt, dass, okay, Jetzt ist der Shop oder die Website hat Benutzer authentifiziert oder nicht. Und basierend darauf, Wie ich Ihnen sagte, können wir zeigen, zum Beispiel, einige Teile der Anwendung wie die Produktbewertung und sowie die Benutzerdaten. Es wird mir helfen, eine Checkout-Seiten-Komponente zu tun und auch ein greifen die Daten des aktuellen angemeldeten Benutzers zu meinem Auschecken für. Also, wie es der Prozess sein wird, der Prozess tatsächlich, den wir tun müssen, um eine Aktion zu tun, wie Sie sich erinnern. Also eine Komponente löst eine Aktion aus und dann wird es ausgelöst um Daten aus der Datenbank des Benutzers zu holen , basierend auf dem Token und wie wir vorher gesprochen haben. Also werde ich zuerst mit dem einfachen Prozess gehen. Zum Beispiel haben wir hier eine Login-Seite, und wenn ich auf Login klicke, erstelle ich ein Token, das von der Datenbank oder vom Server kommt. Und dann werde ich den State Store bitten, für mich und Aktion zu starten, die als Build User Session bezeichnet wird. Natürlich ist dies nach erfolgreichem Login. Also, nachdem ich die Benutzersitzung erstellt habe, würde ich dem Laden sagen, okay, der Benutzer sind Benutzerdaten, die ich aus der Datenbank bekomme und auch authentifiziert ist, ist wahr, weil ich erfolgreiche Anmeldung habe . Also löste der Login selbst die Daten aus oder löste diese Aktion aus und änderte die Daten in ihren Zuständen. Dog die beiden Variablen, die ich habe, die Benutzer sind und auch es authentifiziert. Auch eine andere Aktion kann zum Beispiel, oder eine andere Komponente oder ein anderes Ereignis kann für mich ändern, der Zustand Speicher, okay, der Benutzer ist bereits angemeldet. Er kam zurück, zum Beispiel, nach zwei Stunden öffnete er die Anwendung wieder. Nun, wie Sie sich erinnern, lesen wir dieses Token aus dem lokalen Speicher um zu sehen, ob dieser Benutzer authentifiziert ist oder nicht. Auf diese Weise werde ich beurteilen, ob es wie ein gültiges Token ist, dann bauen wir eine neue Benutzersitzung auf, okay, sagen Sie zu dem Effekt und auch dem Reduzierer, wie wir später im Detail sehen werden, um das zu setzen authentifiziert und auch die Daten des Benutzers aus der Datenbank abrufen und an die Benutzervariable im Statusdokument übergeben. Wenn nicht, was möglich ist, wie dann haben wir zum Beispiel, das Token ist nicht gültig, dann werde ich sagen, okay, in ihm Benutzersitzung zu Sitzung, oder zum Beispiel, setzen Sie die Sitzung des Benutzers. Zurücksetzen einer Benutzersitzung ist also zu setzen, wird auf Stürze authentifiziert und die Benutzerdaten werden im Speicher null sein. Und wer zusieht, war, was im Laden passiert. Diese Komponenten. Also nicht nur Checkout Seite oder Produktdetail, vielleicht eine andere Komponente als auch in meiner Anwendung. Das ist also die Grundidee von NGINX oder dem Staatsmanagement. Natürlich gibt es viele Verwendungen. Sie können auch den gesamten Datenstatusspeicher speichern. Aber ich spezifiziere hier einen Fall, in dem es wirklich die MDR x benötigt wird. Auf diese Weise lernen Sie, wie Sie eine Aktion erstellen, wie Sie sie auslösen und dann Effekt und Reducer erstellen , um den Zustand der -Variable im Statusspeicher. Und dann werden wir sehen, wie wir alle diese Variablen in den Komponenten lesen können , die ich brauche, um meine Anwendung zu erstellen, um Dinge ein- oder auszublenden. Ich lade Sie ein, einen Blick auf dieses Diagramm zu werfen. Wieder. Wir retten es in deinem Gehirn. Es wird uns in den nächsten Vorträgen helfen, unseren State Store in Bezug auf den Benutzer und die Authentifizierung zu bauen . 172. Init Init: Lassen Sie uns nun weiter erstellen unsere Logik, Logik für die Initialisierung der Benutzersitzung. Wir werden diese Logik hier tun. Also, vom Laden der App, werde ich eine Token-Geste lesen, wenn sie gültig ist. Und dann werde ich mit einer richtigen Aktion tun, um einige Variablen im State Store zu setzen. Zunächst einmal brauchen wir einen Dienst, der init user service genannt wird. Also, wie können wir diesen Service anrufen? Wir können den Dienst nicht tatsächlich bei unserer Initialisierung der Anwendung aufrufen. So gehen Sie zurück zum Ende, Sie kaufen den Einstiegspunkt der Anwendung in ist in der App-Komponente. So können wir hören, haben bei der Initialisierung der App, wir können einen Dienst in IT-Anwendungssitzung aufrufen. Also, dafür werde ich den Benutzerdienst anrufen. Also haben wir hier im Konstruktor wie immer, wie wir Dienste in den Komponenten aufrufen. Also werde ich hier eine private sagen und dann werde ich sagen, Benutzer Service. Der Benutzerdienst wird vom Benutzerdienst kommen , den wir in der Bibliothek des Benutzers definiert haben. Dann werden wir in diesem Konstruktor die, zum Beispiel, die Anwendungssitzung initialisieren . Aber du kannst es genauso gut machen, darin. So können Sie hier wie bei der Initialisierung der App-Komponente haben, wie unsere Anwendung den Dienst aufrufen wird, der init App-Sitzung genannt wird. Also lasst uns hier drin haben, implementiert auf darin. Auf diese Weise müssen wir etwas namens NG auf der Init-Funktion aufrufen. Und diese Funktion wird ausgeführt, wenn wir die Anwendung aufrufen oder wenn wir unser Ende Sie Shop starten. Auf diese Weise werde ich diesen Punkt-Benutzerdienst sagen, und dann werde ich den Dienst anrufen, den ich will. Also lassen Sie uns zum Benutzerdienst gehen, indem Sie auf Steuerelement und den Mausklick klicken, wird es Sie direkt zum Benutzerdienst bringen. Und im Benutzerdienst, wenn Sie sich erinnern, hatten wir viele Dienste, die wir für unsere Benutzer erstellt haben, erstellen, bearbeiten und hinzufügen. Also am Ende hier können wir wie ein Dienst haben, wir nennen es jede App-Sitzung. Und in dieser Init-App-Sitzung rufen wir etwas oder eine Aktion auf, die aus dem State Store kommen wird. Auf diese Weise werden wir hier mit unserer Initialisierung der Sitzung im Staatsbestand beginnen . Mal sehen, ob alles gut funktioniert. Also werde ich das hier retten. Also müssen wir es auch hier nennen. Also, nachdem wir es drin haben, Besessenheit, okay, wir haben es genannt. Und dann sparen wir, und wir speichern diesen. Und unsere Anwendung läuft fehlerfrei. Also lassen Sie uns den Browser überprüfen. Okay, wir haben ein Problem, dass wir App-Modul haben, Store-Feature-Modul, aber reduzieren ihren Manager, Reduzier-Manager, reduzieren und Manager. Dies geschieht, weil wir einen Zustandsspeicher in einer Bibliothek erstellen. Also hier ist Benutzer eine Bibliothek, aber die Anwendung weiß nichts über diesen Statusspeicher. Um den State Store im Allgemeinen zu initialisieren, müssen wir einige Methoden im Anwendungsmodul erstellen oder aufrufen. Also in der Anwendung und Sie kaufen oder in der Anwendung, die Sie erstellen möchten, müssen Sie den State Store irgendwie init, wie Initialisierung sein kann. Wir müssen zwei Module anrufen. Diese beiden Module werden also zuerst ein Speichermodul sein. So ist diese Tür, wo sie meinen Laden initialisieren wird. Also speichern Modul, müssen Sie sicher sein, dass es aus MDR x Bibliothek importiert wird. Und dann drücken Sie Punkt und dann haben Sie vier Wurzel. Und diese vier Wurzel, es wird ein leeres Objekt nennen. Also hier initialisieren wir unseren Shop auch mit leerem Objekt. Wir werden Effekte, Effekte verwenden. Wir werden wissen, wofür sie später verwendet werden. Also haben wir hier betrifft Modul. Also, und dann können wir wieder für root aufrufen und wir initialisieren es mit leerem Objekt oder nein, wir initialisieren es mit leerem Array. Auf diese Weise können wir in der Lage sein, unseren Shop zu initialisieren. Und lassen Sie uns speichern und sehen, ob der Fehler verschwunden ist. Okay, jetzt weiß unsere Anwendung, dass es einen State Store gibt. Auf diese Weise kann ich anfangen, mit meinem State Store in der Bibliothek des Benutzers zu arbeiten. 173. Erstellen von Build: Okay, unser Zustandsspeicher hat initialisiertes Speichermodul beeinflusst Modul in der Anwendungsebene. Mal sehen, was im Modul des Benutzers passiert ist, denn wenn Sie sich erinnern, haben wir gesagt, dass es aktualisiert wurde. Hier steht also, dass es auch das Modul selbst aufruft. Die Bibliothek, wie das Bibliotheksmodul des Benutzers, ruft den Statusspeicher auf. Aber für Feature, weil Benutzer in der Anwendung angezeigt wird. Auf diese Weise rufe ich nicht nach Route, aber ich nehme ein Feature auf. Also dies von Benutzer, Benutzer verfügen D. So benötigen Sie für Feature zwei Parameter, einen, diesen Feature-Namen und dann auch den Reduzierer. Reducer, der im State Store verwendet wird, um die Zustände zu ändern und die Variablen innerhalb des gespeicherten Status zu ändern. Also hier brauchen wir einen Namen und auch den Reduzierer. Reduzierstück kommen aus Reduzierstücken Datei. Wenn Sie also hier zu den Verkehrsteilnehmern gehen, werden Sie sehen, dass wir etwas mit den Reduzierstücken initialisiert haben. Okay, wir werden damit arbeiten. Wir werden einen Code löschen, der automatisch durch das Plug-in einer ECS-Konsole initialisiert wird. Aber zuerst, lassen Sie uns eine Aktion erstellen. Ok? Die Aktion wird die Benutzersitzung basierend auf einem Token überprüfen oder erstellen. Und dieses Token wird behandelt, wenn es gültig oder nicht innerhalb der Effekte ist. Und im Reduzierer werde ich die Variablen basierend darauf ändern. Also lassen Sie uns sehen, wie dieses Beispiel oder diese Initialisierung von Zuständen Tür Darm die Aktion aufgerufen. Also, wenn Sie zu den Benutzern gehen, um es hier zu sagen, wie es ist, ist es natürlich ein Service. So, wie Sie hier sehen, seine Benutzer für assayed. Und dieser Benutzer assayed enthält einige Variablen, Lassen Sie uns später sehen. Und auch Konstruktor, der einen Speicher hat und dann darin, und in diesem Init sagt er, dass dieser Punkt die Aktion dieses Badge-Benutzers darin speichert. So gibt es Aktion in den Aktionen des Benutzers, die Ende es genannt wird. Gehen wir zur Aktion des Benutzers, okay? In den Aktionen des Benutzers gibt es Aktionen, die mit unserer Erstellung dieses Zustandsspeichers initialisiert werden. So können wir jetzt unsere eigenen Handlungen erschaffen. Also lasst uns hier etwas Platz schaffen. Natürlich werden wir diese Dinge später löschen, aber wir werden unsere Aktion erstellen. Also zuerst muss ich die Aktion erstellen, die Benutzersitzung erstellen heißt. Sie würden also Konstante initialisieren und dies wird Build-Benutzersitzung genannt. Und auf diese Weise werde ich eine Create-Action-Methode haben, die vom State Store aufgerufen wird. Also hier, wie Sie hier sehen, wird die Aktion erstellen aus der gespeicherten Bibliothek und GR x importiert. Auf diese Weise müssen Sie einen Namen für diese Aktion angeben. So wird der Name normalerweise auf diese Weise aufgerufen, Sie definieren den Feature-Namen, Sie können Benutzer sagen, und dann können Sie definieren, was diese Aktion tut. In unserem Fall heißt es Build User Session. Auf diese Weise haben wir unsere erste Aktion geschaffen. Natürlich gibt es mehr Aktionen, die später kommen werden, wie bei Erfolg oder Misserfolg, wie das Deaktivieren des Token, abgestoßen oder nein. Also das, was wir später tun werden. Also, okay, ich gehe zurück zu meinem FSA-Ausweis. Lass uns hier etwas aufräumen. Also lasst uns all dieses Zeug entfernen. Wir brauchen sie nicht initialisiert. Und auch können wir diesen Kommentar hier entfernen, und wir können sagen, Build-Benutzer-Sitzungsmethode. Also hier haben wir auch Build-Benutzer-Sitzung. Und es wird für mich eine Aktion aus der Aktion aussenden, die wir zuvor erstellt haben, die Benutzersitzung erstellen heißt. Auf diese Weise schicke ich die Aktion ab. Also müssen wir das irgendwie nennen, wo wir es nennen werden. Wir werden es in dem Dienst nennen, den wir zuvor geschaffen haben. Auf diese Weise werde ich zum Benutzerdienst gehen. Und dann muss ich im Konstruktor die FSA-ID aufrufen, wenn Sie sich erinnern. Also hier werde ich sagen, private Benutzer für Sayed. Und dann werden wir den Benutzer Erste Hilfe aus dem staatlichen Laden anrufen. Also werde ich hier sagen Benutzer Facette. Auf diese Weise wurde es automatisch importiert und ich kann es verwenden und die darin enthaltenen Methoden verwenden. Es ist ein Service. Es ist, als würden wir einen Service innerhalb Service anrufen. Also würde ich hier sagen, diese Punkte Benutzer für assayed. Und dann werde ich auf diese Weise Benutzersitzung bauen gehen, diese Rechnung, also Benutzersitzung, wird es eine Aktion für mich aussenden, die Benutzersitzung erstellen heißt. Und darauf basiert, wird die Aktion eine Benachrichtigung senden, um etwas zu tun, wie wir in der nächsten Vorlesung sehen werden. Lassen Sie uns jetzt alles sparen, um zu sehen, ob alles noch gut funktioniert. Wir haben keine Fehler. Also gehen wir zurück zu unserem Browser. Okay, wir haben keinen Fehler. Die Anwendung funktioniert immer noch einwandfrei. 174. Erstellen des the: Okay, machen wir jetzt den Laden, den Laden der Benutzer. Also im Laden werde ich zwei Felder haben. Einer ist ein Benutzer, der für mich die Benutzerdaten wie Name, Adresse, E-Mail, et cetera, und auch wenn authentifiziert, wenn der Benutzer authentifiziert ist oder nicht. Also jetzt werden wir diesen Zustand schaffen. Dass Zustände in den Reduzierstücken erzeugt werden. Also, dass es Benutzer, werden wir eine Klasse oder Schnittstelle haben, die die Felder oder die Variablen haben wird , die ich in meinem Shop verwenden muss, wie der Benutzer, und wird auf diese Weise hier authentifiziert, wie Sie sehen, gibt es einige Initialisierung bereits abgeschlossen. Wir werden es nicht benutzen. Ich werde es erklären und vor Ihnen Schritt für Schritt erstellt , um kein Problem oder Missverständnis zu haben. Zunächst einmal können wir all diese Importe behalten. Wir werden das entfernen, was wir in den nächsten Vorträgen oder in diesem Refactoring nicht brauchen werden. Also zuerst muss ich einen Staat erstellen. Um einen Zustand zu erstellen, müssen wir Export haben und dann definieren wir Schnittstelle. Wie Sie hier sehen, hat er bereits Immobilien erstellt, aber ich werde es einen Namen geben, Benutzerstatus, die besser Name und klarer ist , keine duplizierten Namen Daten zwischen der Bibliothek haben. Wenn Sie einen anderen Statusspeicher in einer anderen Bibliothek haben möchten. Sie müssen also nicht so gut hier Entity, State oder User-Entität haben . Wir werden darüber später in fortgeschritteneren Themen sprechen. Also muss ich eine reine Schnittstelle erstellen, die Benutzerstatus genannt wird. Und dieser Benutzerstatus wird zwei Felder haben. Einer wird Benutzer genannt. Es wird einen Typ haben, es heißt Benutzer. Das Benutzermodell, das wir von Benutzer im Modell erstellt haben , die E-Mail, Passwort, etc. enthalten wird. Also alle diese Informationen, sie werden in diesem Feld sein. Und auch werden wir eine Variable erstellen, die aufgerufen wird, ist unsere authentifizierte. Auf diese Weise können wir wissen, ob der Benutzer authentifiziert ist oder nicht. Es wird also einen Typ boolean haben. Okay, dafür können wir dieses Original entfernen, das von der NX-Konsole erstellt wird. Und jetzt gibt es Schnittstelle, die Benutzer Teilzustand genannt wird. Also müssen wir nur den Teilzustand des Benutzers ersetzen. Normalerweise brauchen wir es vorerst nicht, aber wir werden es auch in fortgeschritteneren Fächern brauchen. Aber lassen Sie uns den Typ dieses Benutzers Feature-Taste haben , der Benutzer genannt wird. Und dann wird es einen Benutzerstatus-Typ haben. Okay, diesen Adapter brauchen wir nicht. Jetzt danach müssen wir den Anfangszustand haben. Also der Zustand oder der Anfangszustand meiner Anwendung, normalerweise ist der Benutzer am Anfang null und auch authentifiziert ist falsch. Also müssen wir auch einen Anfangszustand haben. Also werde ich hier auch Exportkonstante nennen. Es wird als Anfangszustand bezeichnet. Also werde ich hier den anfänglichen Benutzerstatus haben, um bequemere Namen zu haben. Und dann wird es in diesem anfänglichen Benutzerstatus einen Typ von Benutzerstatus haben, und es wird gleich einem Objekt sein. Dieses Objekt hat also einen Benutzer leer wie null am Anfang, wie wir gesagt haben, und wird authentifiziert wird, wird am Anfang falsch sein. Also haben wir einen Anfangszustand wie diesen. Auf diese Weise haben wir unseren Staat geschaffen. Also jetzt werden wir das Reduzierstück zu schaffen, wie es die Aktion fühlen wird. Also werde ich sagen, wenn eine Aktion wie Build-Sitzungsstatus passiert ist, werde ich etwas aufrufen. Wenn es nichts gibt, dann wird es nichts oder irgendwelche Änderungen an ihrem Staatsspeicher tun. Also werde ich zuerst all das entfernen, wie wir den Anfangszustand bereits haben. Also, jetzt erstellen wir einen Reduzierer. Es würde auch Benutzer Reducer genannt werden. Es wird der gleiche Name des Staatsspeichers sein, wie immer Benutzer, Benutzer, es ist Plural. So, jetzt erstellen wir eine Reducer Methode erzeugt von DRX Zustände Tür kommen. Also hier haben wir Reduzierstück schaffen und es wird nach uns Ausgangszustand fragen. Was ist unser Ausgangszustand? Ist das hier? Ursprünglicher Benutzerstatus? Und was ist der andere oder was sind die anderen Parameter? Andere Parameter werden zum Beispiel die Reduziertypen sein. Also lasst uns mehr organisierten Code haben. Wir können dies niederlegen und dies auch hier setzen und wir werden Komma setzen, unser erster oder zweiter Parameter wird eingeschaltet sein. Diese auf wird auch aus den Reduzierstücken oder von MDR x importiert. So wie Sie hier sehen, haben wir hier auf importiert. So weiter. Dann werde ich sagen, welche Aktion auf Aktion, die von den Aktionen des Benutzers stammt. Wie Sie hier sehen, ist es Stern als Benutzer Aktion importiert, wie importieren Sie alles aus Benutzeraktion und dann können Sie sie verwenden. So haben wir hier auch laden Benutzer Zugriff, oder wir haben hier bauen Benutzersitzung. Und das auf Methode, wird es zwei Parameter haben. Die erste ist zum Beispiel die Handlung selbst, wie die Aktion, die passieren wird. Also werde ich hier Benutzeraktion Punkt-Build, Benutzersitzung haben. Okay, was wird passieren? Also hier der zweite Parameter, werden wir den Zustand ändern. Also werde ich auch eine Callback-Funktion haben, die als Parameterzustand haben wird. Und es wird etwas für mich tun oder den Staat selbst ändern. Für den Moment. Wir können nur wie eine Änderung auf den Zustand tun, gerne kopieren, wie es ist. Wir werden den Staat nicht aktualisieren. Also habe ich hier auch noch eine Klammer. Also werde ich hier sagen, kopieren Sie einfach den Staat, also tun Sie nichts damit, klonen Sie ihn einfach. So hat sich unser Staat nicht geändert, nichts ist damit geschehen. Okay, Auf diese Weise wissen wir, dass unser Reduzierer etwas ausführen wird , basierend auf dieser Aktion und ändern diesen Zustand. Wir werden in der nächsten Vorlesung weitere Änderungen vornehmen, wenn wir mit dem Effekt arbeiten werden. Aber zuerst entfernen wir diesen Code, der nicht benötigt wird, weil wir ihn bereits erstellt haben. Also jetzt haben wir hier den Funktionsreduzierer, der exportiert und im Modul des Benutzers verwendet wird, wenn Sie sich erinnern. Also haben wir hier den Zustand, es wird vom Typ Benutzerstatus und, oder undefiniert und die Aktion sein. Und hier wurde der Reduzierer des Benutzers erstellt und er wird hier importiert und verwendet. Auf diese Weise ist unser Staatsspeicher vom Staat ein Standpunkt aus bereit. Auf diese Weise kann ich alle Aktionen nennen, die ich brauche, und den Zustand entsprechend ändern. Wir haben immer noch einige Fehler in der Konsole. Sie können sie vorerst ignorieren, weil sie in den Selektoren sind und wir werden sie in den nächsten Vorlesungen beheben. 175. Erstelle Effektive Aktionen, wenn Token gültig oder nicht: Nachdem ich das Verständnis von Aktionen und auch Reducer und den State Store habe, werde ich ein Update zu unserem Diagramm machen. Also, wenn Sie sich erinnern, haben wir Aktion erstellt, die Riemenbenutzersitzung genannt wird. Auf diese Weise werden wir zwei Optionen haben, die auf dem Token basieren. Also das Token, wenn es gültig ist, wird es sagen, dass, okay, das Erstellen der Benutzeraktionssitzung Erfolg ist. Und auch, wenn nicht, wird es gescheitert und es wird sich dort ändern. Oder es wird den Reduzierer anordnen, etwas mit dem State Store zu tun, wie die Einstellung wird auf false und der Benutzer auf null authentifiziert. Und im Gegenteil, es wird passieren, wenn das Token gültig ist. So wird die Action-Build-Benutzersitzung Effekt ausgelöst. Dieser Effekt validiert das Token, das in unserem lokalen Speicher gespeichert ist, um die Daten des Benutzers aus der Datenbank zu erhalten, wenn es gültig ist, mit den Benutzerdaten zu setzen. Wenn nicht, werden wir es auf null setzen, falls es einen Fehler in der API gibt oder wenn ein Token nicht gültig ist. Auf diese Weise werden wir zwei Aktionen erstellen, die entscheiden, dass die Benutzersitzung erfolgreich erstellt wird oder nicht. Und der Effekt wird diese Aktionen basierend auf der Validierung des Tokens aufrufen. Okay, zuerst, lassen Sie uns diese beiden Aktionen erstellen. Und ich werde zwei Handlungen haben, die bereits im Juli sind. So können wir dieses löschen, das init genannt wird, weil wir eine Benutzersitzung erstellen haben. Und auf die gleiche Art und Weise haben wir eine großartige Aktion. Und auch wird es einen Namen haben. Also kann ich diesen ganzen Text hier ersetzen. Wir können sagen, dass Benutzer Benutzersitzung Erfolg erstellen, wie wir hier haben. Und auch können wir dieses umbenennen, so dass wir anstelle von Build-oder erlaubten Benutzern sagen können, können wir den Erfolg der Benutzersitzung erstellen und auch die Benutzersitzung fehlgeschlagen erstellen. Also können wir hier statt Scheitern haben. Auf diese Weise können wir die Aktion haben, okay, was sind die Eigenschaften dieser Aktion? Die Eigenschaften werden also die Daten sein, die geladen werden. So werden wir die Daten durch authentifiziert und die Benutzerdaten zum Beispiel der Benutzer selbst, das Benutzerobjekt. Auf diese Weise werde ich ausreichen, nur die Benutzerdaten zu laden. Auf diese Weise können wir hier Requisiten oder die Eigenschaft haben, die Benutzer genannt wird. Und der Typ davon wird Benutzermodell sein, das wir zuvor erstellt haben. Also keine Notwendigkeit, alle diese Benutzer-Entität hier zu verwenden. Und auch beim Scheitern wird es dasselbe haben, als ob es die gleiche Zeichenfolge hat. Und auch es wird für mich eine Aktion machen, die darauf basiert. Es wird einen Fehler laden oder es kann zum Beispiel wie eine Nachricht laden, dass das Token nicht gültig ist oder so etwas, wir werden ausreichen, um die Aktion nur ohne Requisiten zu erstellen. Also, jetzt werde ich 2, drei Aktionen haben. Eine, erstellen Sie Benutzersitzung, die diese ist, wird es aufgerufen werden und den Effekt auslösen. Und der Effekt wird entscheiden, was die richtige Aktion ist, wenn sein Erfolg, wenn das Token gültig ist und die Benutzerdaten bereit sind, oder ob es fehlgeschlagen ist und der Reduzierer sich auf bestimmte Weise verhalten wird, Junge, basierend auf diesen Aktionen. Also hier müssen wir einfach nicht vergessen, dass wir hier den gescheiterten Satz haben, um keine Verwirrungen des Namens oder der Benennung ihrer Handlungen zu haben. So können wir jetzt mehr Reduzierstücke hinzufügen. Auf diese Weise können wir hier gehen und sagen, dass, okay, auf der Aktion des Benutzers Sitzungsstatus erstellen, etwas tun. Sie können auch einen anderen machen. Wir haben hier ein weiteres Komma und wir sagen auf wie Benutzer Aktion als auch. Und wir können auf Erfolg wählen. So wird der Staat sein, oder wird aktualisiert werden, basierend auf dem, was wir aus dieser Aktion oder aus diesem Effekt erhalten. Auf diese Weise werden wir dieses Datum haben. Es wird mit einem Klon dieses Datums aktualisiert. Es ist sehr wichtig, diese hier, und diese Linie ist sehr wichtig. Als würden wir den Zustand aktualisieren, nicht den ganzen Zustand ändern. Dies wird als unveränderlich bezeichnet. Sie müssen alle Aktionen oder Bestelländerungen in Ihrem State Store verfolgen. Wie ich Ihnen später in den Dev-Tools zeigen werde, werden wir sehen, wenn wir ein Entwicklerwerkzeug erstellen , wie sich der Zustand bei jedem Aufruf der Aktionen Schritt für Schritt ändert. Also jetzt haben wir den Staat und ich werde jetzt meine Daten in diesem staatlichen Speicher aktualisieren. Wenn Sie also ein Objekt auf diese Weise definieren und hier Komma setzen, und Sie die Felder hinzufügen, die auf diese Weise aktualisiert werden, sagen Sie, okay, nehmen Sie den gleichen Zustand, aber aktualisieren Sie nur zwei Felder, die wirklich können Sie nur ein Feld aktualisieren, zum Beispiel Benutzer, und dann den Benutzer aktualisieren, der mit den Benutzerdaten gefüllt ist. Wie kann ich die Benutzerdaten erhalten, die an diese Build-Benutzersitzung übergeben werden. Ich meine, diese Eigenschaft, die von der Wirkung kommen wird, wie ich Ihnen sagte. Auf diese Weise können Sie hier auch einen Parameter hinzufügen, der Aktion genannt wird. Und diese Aktion wird die Bereiche dieser Aktion haben. Also haben wir hier in diesem Fall Benutzer, so dass der Benutzer Aktion Punkt-Benutzer sein. Und weil die Sitzung Erfolge hat, können wir aktualisieren auch authentifiziert, um wahr zu sein. Auf diese Weise werden wir zwei Felder in diesem Zustand Speicher aktualisiert haben. Aber wenn die Aktion fehlgeschlagen ist oder erstellen Benutzersitzung fehlgeschlagen ist, dann werden wir machen Benutzer null und ethos angegeben ist falsch. Also können wir das Gleiche tun. Oder lassen Sie uns diesen Teil hier kopieren. Wir können das sagen, wir setzen Komma und wir ändern einfach die Aktion. Also hier haben wir die erstellte Benutzersitzung fehlgeschlagen. Und ebenso die Staatshandlung gleich viel. Wir müssen nur den Benutzer aktualisieren, um null zu sein , weil er fehlgeschlagen ist und das authentifiziert ist falsch ist. Auf diese Weise haben wir die Aktionen basierend auf der Validierung des Tokens und den Auswirkungen auf die Reduzierungen erstellt . Aber wir haben diesen Teil noch nicht behandelt, wie dieser Teil, der beeinflusst und gültig Token ist. Wir haben noch nicht damit gearbeitet. Jetzt wird unser State Store basierend auf dem Verhalten dieser Aktionen aktualisiert. In der nächsten Vorlesung werden wir mit dem Effekt umgehen, wo entschieden wird , diese Aktion oder diese Aktion zu ergreifen. 176. Erstellen von Build: Erstellen eines Effekts. Es ist ein ruhiges, einfaches. Es kommt immer mit der Action. Die Aktion wird also den Effekt auslösen. Und der Effekt wird entscheiden, basierend auf dem, was aufgrund des Erfolgs oder der Tatsache, dass erstellt Struktur von MDR X erlaubt uns, Aktionen zu haben, sind auch erlaubt uns, Effekte zu haben. Auch die FES Hilfsmittel und auch Reduzier- und Selektoren. Wir sprachen über die Reduzierstücke, auch Aktionen und auch wir sprachen über die Passage, lassen Sie uns zu den Benutzern bewegen wirkt Punkt ds. Also in der Wirkung hier, es verwendet auch etwas namens Create Effekt. Create effect ist eine Funktion, die von MDR x Bibliothek kommt. Aufgrund der Änderungen, die wir in den Aktionen hier vorgenommen haben, haben wir die init und die Standardfunktionen verloren, die zuvor von der NX-Konsole erstellt wurden. Also lasst uns hier aufräumen. Also, wie wir es vorher getan haben, werde ich von vorne anfangen. Wir haben hier Benutzer Effekt , der auch im Modul der Benutzer verwendet wird. Also werden wir all das löschen. Jetzt werden wir einen Effekt erzeugen. Die beste Quelle für das Erstellen von Effekten ist also eine Dokumentation von n DRX. Wie Sie hier sehen, haben wir die innere Dokumentation, etwas namens NDR x Effekte. Und es zeigt Ihnen hier ein Beispiel für die Erstellung der Effekte. Es gibt einige Erläuterungen zu Angular Vorlage und auch, wie ein Dienst zu verwenden, für den die Filme. Und dann hier holt er die Filme und dann schreibt Effekte in ihren Schreibeffekte-Abschnitt, können Sie ein Beispiel für die Schaffung dieses Effekts sehen. Genau wie die Dokumentation werde ich einen Namen für meinen Effekt haben. Der Name unseres Effekts ist also Build-Benutzersitzung. Und immer sind die Effekte Suffix mit dem Dollarzeichen, wie Sie hier sehen. So können wir jetzt unseren Effekt mit der Create-Effekt-Methode erzeugen. Der Parameter des Create-Effekts wird eine Funktion sein, die immer die Aktionen in der Anwendung beobachtet. Zum Beispiel werde ich hier zuerst eine Callback-Funktion haben, und diese Callback-Funktion wird für mich diese Aktionen, die Pipe, zurückgeben. Also beobachte ich hier die Aktionen, die in der Anwendung ausgeführt werden. Dies ist Service, der von n DRX zur Verfügung gestellt wird , um die Aktionen zu beobachten, die in der Anwendung gehen. Also hier in der Pipe, wenn ich die Aktion habe, die Benutzersitzung erstellen genannt wird , werde ich etwas tun, das Sie vom Typ sagen müssen, wie wenn diese Funktion oder wenn die Aktion einen Typ hat, zum Beispiel die Build-Benutzersitzung, dann werden wir nur verdunkeln und die Daten abrufen. Also, wenn Sie sich erinnern, haben wir die Aktion des Benutzers hier importiert. Also werde ich es verwenden, und ich werde sagen, Benutzeraktion Punkt Sitzung erstellen oder Benutzersitzung auf diese Weise erstellen, wenn dies der Typ ist, dann werde ich etwas damit tun. Also setzen Sie hier ein Komma ein, um eine weitere Pipe hinzuzufügen, die Concat-Map oder Merge-Map ist. Dies ist eine RTX für uns, um in der Lage zu sein, zuordnen zu können, das heißt Bindungen von all diesem beobachtbaren an einen neuen Typ zu einer neuen Aktion. Auf diese Weise können Sie eine Concat-Karte haben. Und diese Concat-Map als auch mit haben auch als Parameter, eine Callback-Funktion. Und diese Rückruffunktion können wir darin tun, was wir für das Token tun werden. Als Zeichnung werde ich überprüfen, ob das Token gültig ist oder nicht. Wenn Sie sich erinnern, haben wir einen lokalen Speicherdienst erstellt, und dieser lokale Speicherdienst enthielt für mich alles in Bezug auf das Authentifizierungstoken. Also füge ich hier auch eine andere Methode mit dem lokalen Speicherdienst hinzu, der sein wird , ist ein gültiges Token. Also hier können wir haben ist gültig reden UND Funktion. Und diese Funktion wird für mich das Token validieren, das sich jetzt im lokalen Speicher befindet. Und dann wird es basierend auf der Validierung und Ablaufzeit des Tokens false oder true zurückgeben . Also die Implementierung dieser Methode im lokalen Speicher, dieser Dienst werden wir hier zuerst Token verursacht haben, und ich werde das Token von diesem Punkt greifen, Token erhalten. Es ist, als würde ich diese Methode aufrufen, um das Token aus dem lokalen Speicher zu erhalten. Und dann werde ich überprüfen, ob es Token gibt oder ob es wirklich Token gibt, wie es definiert ist, wie wir Token im State Store oder im lokalen Speicher haben, dann werden wir es überprüfen. Also müssen wir es entschlüsseln. Wenn Sie sich erinnern, haben wir eine Dekodierung für diesen Token in der Wache gemacht. Also hier werde ich Token-Dekodierung haben und dann werde ich das die Wache haben oder ich werde die Methode kopieren, die hier in der Wache war. Wenn Sie sich erinnern, dass wir dieses Token zu einigen Teilen analysiert haben und dann erhalten wir die Erkundung oder auch einige Felder wie admin und auch die Benutzer-ID, wenn Sie sich erinnern. Also, jetzt werde ich diesen Teil kopieren und dann zur lokalen Speicherfunktion zurückkehren. Und dann werden wir hier haben, und dann schließen wir die Klammer. Jetzt haben wir das Token. Also, jetzt müssen wir das x rechtzeitig arrangieren und dieses Token validieren. Wenn Sie sich auch erinnern, haben wir in der alten Wache eine Möglichkeit für die Validierung, die Token abgelaufen war und wir haben einige Berechnungen durchgeführt. Es wird für mich durch alle falsch zurückkehren, wenn dies, wie zum Beispiel, das Token abgelaufen ist. Also werde ich die gleiche Methode kopieren, die wir später tun werden, einige Refactoring. Also werde ich es auch hier haben. Es wird eine private Methode sein. Und auch, ich werde sagen, dass hier, wenn das Token nicht abgelaufen ist, dann für mich durch zurückgegeben, denn hier sage ich, ist gültiges Token. Also, wenn es gültig ist, dann wurde es für mich durch zurückgegeben. Also hier werde ich haben, wenn es nicht abgelaufen ist, weil hier Token abgelaufen ist, wird es für mich wahr oder falsch zurückgeben. True, wenn es abgelaufen ist. False, wenn es nicht abgelaufen ist. Und hier möchte ich nicht abgelaufen ist wie gültig Token, so dass es nicht abgelaufen ist. Also auch, um alle Lücken dieser Funktion zu schließen, so müssen wir auch andere hinzufügen. Also, wenn es kein Token vollständig gibt, dann gib für mich falsch zurück, als hättest du kein gültiges Token. So können wir hier falsch zurückgeben, okay, ist ein gültiges Token kann jetzt im Effekt verwendet werden, wie wir es verwenden können. Wir können diesen Service auch importieren. So können wir hier sagen lokalen Speicherdienst. Und dann dieser lokale Speicherdienst, wir können es genau so nennen, wie wir es haben. Hier. Wir haben einen lokalen Speicherdienst, und unser lokaler Speicherdienst prüft, ob das Token abgelaufen ist oder nicht. Also werde ich hier haben, wenn dieser Punkt-lokale Speicherdienst, der ein gültiges Token ist, dann werde ich etwas tun, das Aktion für den Erfolg ist. Sonst werde ich tun oder greifen die Aktion von Scheitern, wie wir in unserem Diagramm gesehen. Also hier habe ich genau den Punkt, an dem ich hergekommen bin. Also haben wir hier, ja, wir werden die Aktion des Erfolgs ergreifen und die Benutzersitzung erstellen. Andernfalls müssen wir auch die Aktion ergreifen , die fehlschlägt oder es gibt kein Token oder abgelaufenes Token, und den leeren Zustand erstellen , der widerspiegelt, dass wir eine leere Menge haben oder kein Benutzer bereits angemeldet ist zu unserem Shop. In der nächsten Vorlesung werden wir bauen oder sehen, wie wir diese Schritte machen können. Wie ich bereits erwähnt habe. 177. Anfordern von Aktionen auf ungültigen Token: Also das Verhalten hier, dass, wenn es ungültig Token ist, wir diese Aktion aufrufen werden. Auf diese Weise werde ich das einfache hier machen. Es ist ein wenig schwieriger, weil wir brauchen, einige Daten aus der Datenbank mit unseren APIs zu holen. Also werde ich zuerst den leichten Teil machen. Also jetzt in der sonst, wenn das Token nicht gültig ist, Rufen wir eine Aktion auf. Aufrufen einer Aktion im Effekt Es wird in der Art wie Return off sein, wie off wird von RX JS importiert. Es wird für mich zurückkehren und beobachtbar von etwas Aktion. Auf diese Weise kann ich sagen, dass die Aktionen des Benutzers dot und dann die Benutzersitzung erstellen fehlschlagen, aber Sie müssen es als Funktion aufrufen. Das ist also das Wichtigste, um das nicht zu verpassen. Also hier haben wir es nicht als Funktion genannt, weil es ein Typ ist. Also fragen wir nach der Art dieser Aktion, aber hier werden wir diese Aktion ausführen. Und diese Aktion wird nicht ausgeführt, wie wenn das Token ungültig ist, dann werden wir in unserem Reducer etwas Verhalten haben. Und dieses Verhalten setzt den Benutzer auf null und wird auf false authentifiziert. Weise werden die Komponenten bemerken, dass, wer diese Variablen oder diese Felder beobachtet, dann wissen sie, dass der Benutzer null ist und authentifiziert ist falsch ist. Zeigen Sie also nichts an oder verbergen Sie etwas vor dem globalen Benutzer. Also jetzt der Teil, wenn wir hier haben, wie wenn es ein gültiges Token gibt, dann müssen wir die Daten des Benutzers überprüfen oder greifen und sie dann zu einem anderen Reduzierer hinzufügen und die Aktion aufrufen, die Sessionserfolge, die die Daten der Aktion haben, die Benutzer sein wird und die Variable des Zustands hinzufügen, speichern Sie den Benutzer und das Benutzerobjekt und authentifiziert wird wahr sein. Von wo aus ich diese Benutzerdaten bekomme, kommen die Benutzerdaten aus dem Dienst, dem Dienst, den wir zuvor erstellt haben , der Git-Benutzer genannt wird. Und dafür brauchen wir die Benutzer-ID. Deshalb haben wir im Back-End auch im Token gespeichert, die Benutzer-ID. So haben wir abgelaufene Ration, wir haben admin oder nicht, und wir haben auch die Benutzer-ID. Wie ich vorschlage, können wir auch eine Funktion erstellen, die aus dem Token User ID abrufen heißt. Warum brauchen wir das? Weil ich in der Wirkung den Benutzerdienst aufrufen werde. Also auch hier sind wir in der Notwendigkeit, den Benutzerdienst zu bekommen. Ich werde hier private und dann Benutzer Service haben. Und das hier Benutzer Service-Typ. Also haben wir hier den Benutzerdienst, so können wir ihn jetzt nutzen. Aber zuerst, danach. Also dieser Punkt-Benutzerdienst, dot get user ist in der Notwendigkeit für Benutzer-ID. Also hier muss ich eine Benutzer-ID definieren, die konstant ist, und wir können es Benutzer-ID so nennen. Und wir werden diesen Punkt lokalen Speicherdienst nennen. Und dann werde ich eine Funktion haben, die gut ist zum Beispiel Benutzer-ID vom Token abrufen sagt. Auf diese Weise haben wir die Benutzer-ID aus dem Token. Lassen Sie uns diese Funktion machen. Also werde ich diesen Teil kopieren, um die gleiche Benennung zu haben, und dann werde ich dieses Dopamin hier oder die Funktion hier haben. Es wird genau das Gleiche sein. Wir werden das Gleiche entschlüsseln und tun. Und wir werden das Ablaufdatum nicht erhalten, aber wir erhalten die Benutzer-ID, die mit dem Token gespeichert wurde. Also genau das Gleiche. Ich werde hier Token GetToken haben und dann werde ich dieses Token überprüfen. Ich werde es entschlüsseln. Zuallererst muss ich die Token-Punkt-Benutzer-ID zurückgeben. Auf diese Weise können wir diesen Teil löschen. Und ich werde Token-Dekodierung und dann Benutzer-ID sagen, weil ich weiß und ich bin sicher, dass es Benutzer-ID in diesem Token gibt, nachdem es dekodiert wurde, sonst kehre für mich null zurück. Also, wenn es kein Token gibt, dann für mich null zurückgegeben. Auf diese Weise werden wir die Benutzer-ID vom Token erhalten, um sicherer zu sein, gerne keine Fehler oder Probleme zu haben, falls es keine Benutzer-ID gibt, dann können wir auch hier haben. Also kann ich hier hinzufügen, wenn Token dekodieren, wie ich hier ein Token habe, aber zum Beispiel ist es nicht möglich, es zu teilen. Auf diese Weise, Token-Dekodierung, werden wir undefiniert. Auf diese Weise kann ich, wenn, OK, und den Code haben, wie wenn ich wirklich eine Token-Dekodierung bekomme, dann für mich zurückgegeben, dieses Token dekodiert diese Benutzer-ID. Sonst, kehre auch für mich zurück, null. Auf diese Weise decken wir alle Möglichkeiten ab, die in Bezug auf die Benutzer-ID aus dem Token passieren können. Also hier bekomme ich die Benutzer-ID vom Docker. Jetzt sind wir in der Lage, diese Benutzer-ID innerhalb dieses Dienstes zu verwenden. Aber auch hier ist es besser, weil wir die Möglichkeit haben, dass Benutzer-ID null sein kann, also ist es besser, wenn auch hier zu haben. Also, wenn es Benutzer-ID gibt, dann werden wir auch die Service-Daten zurückgeben und Aktion. Das wird also so sein. Also werde ich zurückkommen. Ich möchte von dieser Aktion oder von Erfolgsaktion zurückkehren, aber ich muss den Dienst anrufen. den Service also im Wenn ichden Service also imDienst aufrufe, kann ich auch eine Pipe hinzufügen und sie einem anderen Typ zuordnen, was ein Build User Session Erfolg sein wird. Um das zu erklären, kann ich hier diesen Punkt-Benutzerdienst haben, GetUser und dann gebe ich die Benutzer-ID, die ich hier möchte. Also geben wir immer noch Fehler, bekommen Fehler, weil die Typen nicht miteinander übereinstimmen. Also müssen wir diesen Typ verwalten, um genau die gleichen Arten von Aktionen zu sein. Weil Create Effekt, erwarten Sie für mich. Aktionen nicht, zum Beispiel, wie beobachtbar von Daten. Auf diese Weise werden wir auch hier Rohr haben. Also müssen wir diese Daten einem neuen Typ zuordnen. Also sollte die Karte von unserem x js kommen, wie Sie hier sehen. Also hier werden wir eine Karte haben. Und dann diese Karte, würden wir die Benutzerdaten daraus bekommen. Und diese Zuordnung, oder wir werden wie nicht zum Beispiel, die Benutzerdaten selbst, sondern Aktion,Aktion des Erfolgs zurückkehren die Benutzerdaten selbst, sondern Aktion, . So können wir hier nach der Aktion des Mapping-Benutzers zurückkehren und dann Benutzersitzung Succes erstellen. Aber diese Benutzersitzung Erfolg benötigen eine Eingabeaufforderungen und diese Prüfpunkte sind Benutzer. Auf diese Weise werde ich hier haben, diese Eingabeaufforderungen werden der Benutzer sein. Der Benutzer wird also die Benutzerdaten sein, die ich hier bekam. Auf diese Weise sage ich, wenn es ein gültiges Token gibt, dann finde für mich die Benutzer-ID von diesem Token. Und dann, wenn ihre Benutzer-ID gültig ist, dann greifen Sie für mich die Benutzerdaten aus dem Backend, und ändern Sie dann die Rückgabedaten, um als Aktion des Build-Benutzerabschnitts oder Sitzungserfolgs mit den Benutzerdaten zu sein . Auf diese Weise sage ich, dass Feuer für mich diese Aktion. Und wenn wir zum Reduzierer dieser Aktion gehen, werden wir feststellen, dass ich in die Aktion von der Aktion, den Benutzerdaten komme und sie in das Benutzerfeld, im Staatsspeicher und auch authentifiziert ist. Ich mache es als wahr. Auf diese Weise habe ich den Effekt erzeugt. Aber jetzt fehlen uns einige Punkte. Ich sagte dir immer, wenn wir Affen haben, decken Sie immer alle Möglichkeiten ab, okay? Wenn ich nicht höre, dass ein gültiges Token vorhanden ist, dann wurde die Aktion für mich zurückgegeben, okay, die Sitzung ist fehlgeschlagen. Hier zum Beispiel, wenn ein Fehler mit der API vorliegt. Also, wenn ich die Benutzerdaten vom Benutzerdienst hole und es einen Fehler gibt. Wie wir senden können, zum Beispiel, die Build-Benutzersitzung fehlgeschlagen. Hier können Sie das Komma nach der Zuordnung innerhalb der Pipe-Methode hinzufügen. Auf diese Weise können Sie sagen, catch-Fehler. Und dieser Catch-Fehler wird für Sie einen Fehler oder eine Callback-Funktion haben , bei der Sie hier genau das Gleiche tragen. So können Sie auch die Rückkehr der Benutzer Aktion Gürtel Sitzung fehlgeschlagen. Dies wird also aufgerufen, wenn es einen Fehler in der API gibt und dann wird es die Entscheidung initialisieren und authentifiziert wird falsch sein. Aber auch ein Jahr haben wir ein wenn, wenn es keine Benutzer-ID gibt, müssen wir es auch fangen. Also müssen wir auch hier für die Benutzer-ID hinzufügen. Also, wenn es kein Token gültig ist und wenn es keine Benutzer-ID gibt und sonst fehlgeschlagen ist, wenn es Benutzer-ID gibt, dann machen Sie Ihre Arbeit, greifen Sie diese Daten und Feld für mich den State Store, wie wir hier in der Reduzierer und wie wir es zuvor diskutiert. So haben wir jetzt auch diesen Teil fertig gestellt. Also haben wir jetzt Maßnahmen, wenn es gescheitert ist, und auch Aktionen, wenn es Erfolg ist. Wir haben die Zustände geladen, die mit dem Reduzierer mit den Daten und die Daten sind nicht aus dem Speicher, wird immer aktualisiert basierend auf all diesem Datum. Jetzt müssen wir irgendwie alle diese Variablen in Komponenten lesen. Zum Beispiel werde ich es auf der Auscheckseite lesen und das Formular der Auscheckdaten ausfüllen und sagen, dass das Formular automatisch ausgefüllt wird , wenn ich mich auf der Checkout-Seite einlogge. Also muss ich meine Daten nicht wie meinen Namen, meine E-Mail-Adresse, Adresse usw. fühlen. 178. Beobachten von StateStore mit Selectoren: Also jetzt werden wir eine Daten zu unseren Komponenten zu greifen. Also möchte ich, dass meine Komponenten die Daten des Zustandsspeichers sehen. Aber zuerst müssen wir Selektoren erstellen. Selektoren dienen tatsächlich dazu, die Daten aus dem Statusspeicher zu erfassen. Also, wenn Sie sich daran erinnern, dass unsere Struktur für uns erstellt wird, ein Benutzer-Selektor. Und in diesen Benutzerselektoren erhalten wir hier einen Fehler, weil es ist, wir die Typen geändert haben, wir die Aktionen geändert haben. Also werde ich alles von hier entfernen, was automatisch erstellt wird, und auch alle diese Fehler entfernen, die im Import definiert sind und von Grund auf neu beginnen. Aber ich werde halten, dass dieser Teil den von NGINX verwalteten Benutzer-Feature-Status nachschlagen wird. Also hier ist es, als ob ich den Benutzerstatus bekomme. Ich bekomme den ganzen Laden hier. Also mit diesem Laden kann ich ein paar Sachen machen. So kann ich die Benutzerdaten auswählen und auch der Benutzer authentifiziert oder authentifiziert ist oder nein. Also hier haben wir nur ein Fehler ist ein Zustand, wir müssen es durch Benutzerstatus ersetzen. Wenn Sie sich erinnern, haben wir Benutzerzustände im Reduzierstück erstellt. Also haben wir hier Import Benutzerstatus von dort aus Sie Reducer tun. Diese Konstante erhält also den Benutzerstatus mit Create-Feature-Selektor. Wählen Sie also für mich den gesamten Benutzerstatus mit dem Featureschlüssel des Benutzers aus , der Benutzer genannt wird. Denn hier, unsere Anwendung, wenn wir eine andere Bibliothek oder in einem anderen staatlichen Speicher erstellen, zum Beispiel, Ihre Produkte, müssen wir zwischen den all diesen Zuständen Türen unterscheiden , die ich hier habe. Also der Benutzer Featureschlüssel oder der Zustandsname, der im Benutzermodul verwendet wird, das ist diese für die Funktion aufgerufen wird, die ich nenne Benutzer Feature Qj heißt Benutzer sollten sich von Bibliothek zu Bibliothek, oder von Bibliothek oder von -KE zu Feature. Also hier werde ich auch einen Selektor erstellen. Ich weiß, dass Sie nicht verstehen, was ein Selektor, aber bald werden Sie die Verwendung davon sehen und Sie werden es verstehen. Also würde ich hier eine Konstante erstellen, ich werde es Get User nennen. Also aus dem State Store, gib mir einfach das Benutzerfeld. Also hier werde ich etwas nennen, das heißt, erzeugt einen Lector, und dies erzeugt einen Vektor ist von MDR x und dann werde ich den GetUser-Status hier verwenden. Und dann werde ich von diesem Zustand sagen , den ich hier habe, dann kann ich es verwenden, um einige spezifische Felder daraus zurückzugeben. Also werde ich hier von diesem Zustand sagen, dann für mich zurückgekehrt, State dot user. Also der Benutzer oder der Benutzer, der innen gefüllt , die Tür angibt, wo es mit Daten sein wird, oder es wird auf der Grundlage der Entscheidung hier null sein, dann kann ich die Benutzerdaten genau das gleiche bekommen, was wir auch für authentifizierte tun können. So können wir eine andere Konstante erstellen, die auch Selektor sein wird. So können wir sagen, get user ist authentifiziert. Zum Beispiel ist alles unsere, um kürzer zu sein. So schafft ein Kurfürst ist unser wird auch vom Benutzerzustand bekommen. Und dann werde ich genau das gleiche hier verwenden. Aber anstelle des Benutzerfelds werde ich das authentifizierte Feld verwenden. Also hier bekomme ich wird authentifiziert. Okay, ich habe dieses Elektron erschaffen, alles in Ordnung. Nun, was ich damit machen kann, wie wir diese Selektoren verwenden können. Wenn Sie sich erinnern, Ich sagte Ihnen, dass wir die Fassade ist für die Herstellung und Verschönerung unseres Codes mehr. Wir werden keine großen Anrufe in den Komponenten haben. Wir können nur kurze Anrufe haben, wenn ich den Get-Benutzer anrufen möchte oder wenn ich die Benutzerdaten aus dem State Store haben möchte. Also lasst uns zu den USAid gehen. Und hier können wir etwas schaffen, das wie beobachtbar genannt wird, können wir sagen. Und das beobachtbare wird eine Variable vom Benutzer für assayed sein. Und es wird aktuelle haben, zum Beispiel können wir ihm einen aktuellen Benutzer geben. Das ist also ein Name und es wäre beobachtbar, wie ich, sie werden das tun. Observables Variablen sind immer Suffixe mit Dollarzeichen. Und hier haben wir diese Dots Tür. Und dann nahm Rohr hier, wie wir einen Selektor nennen können. Also, wenn Sie sich erinnern, hier rufen wir eine Aktion auf. Jetzt können wir hier einen Selektor nennen. Also werde ich sagen, dass dieser Punkt die Pipe gespeichert hat, und dann werde ich sagen, wählen Sie Benutzer, Selektoren, Benutzer ausgewählt, was ist das? Es ist hier. Es importiert alles für mich von Benutzerselektoren. So wichtig für mich, alles, was hier exportiert wird. Also exportiert für mich das, das und das. Also, jetzt haben wir in der Facette, Export oder wählt für mich Benutzerauswahl, die zum Beispiel GetUser sein wird. Und auch werden wir eine andere Variable erstellen , die aufgerufen wird, wird authentifiziert. Und das ist authentifiziert, es wird auch beobachtbar sein, weil diese Pipe für mich beobachtbar zurückkehrt und für mich eine bestimmte Daten aus dem Speicher auswählt. Also würde ich sagen, hier speichern Sie auch dot py pz, und wählen Sie dann, und dann Benutzerselektoren. Und dann werde ich Git auswählen, der Benutzer ist raus. Auf diese Weise habe ich hier zwei Variablen in der usaid des Benutzers. Ich kann sie verwenden und Daten aus dem Speicher pippen und jene Daten beobachten, die im State Store gespeichert sind. Wir brauchen diesen Import nicht, damit wir ihn entfernen können. In der nächsten Vorlesung werde ich Ihnen zeigen, wie wir auch all diese Observables nennen können. So werden wir auf die Komponentenebene bewegen, zum Beispiel im Produkt, und wir werden den Benutzerdienst aufrufen und rufen, zum Beispiel, diese bekommen aktuellen Benutzer. aktuelle Benutzer ruft die Daten des Benutzers aus dem Statusspeicher ab, wenn er authentifiziert ist oder nicht. 179. Auto auf der Seite auf Fill Benutzer: Okay, jetzt haben wir diese zwei Variablen oder zwei Felder aus dem Zustand gespeichert, die für mich den aktuellen Benutzer beobachten und ob der Benutzer authentifiziert ist oder nicht. Ich möchte nur noch einmal erwähnen, dass wir diesen Teil gemacht haben. also die App von Anfang an laden, gehen wir davon aus, dass wir bereits ein lokales Speicher-Token haben. Also haben wir uns irgendwie eingeschlossen und wir haben das Token bereits in ihrem State Store und wir überprüfen, ob es gültig ist oder nicht. Wir haben diesen Teil nicht gemacht. Und dieser Teil wird später nach dieser Vorlesung oder dieser Summe von Vorträgen kommen, nachdem wir diesen Teil vollständig abgeschlossen haben und die Checkout-Seite basierend auf dem angemeldeten und angemeldeten Benutzer beobachten oder füllen . Also jetzt haben wir diese Variablen. Wir können dann Benutzer für Sayed direkt in jeder Komponente in unserer Bibliothek verwenden, zum Beispiel in Bestellungen. Oder wir können sie auch anrufen oder das über die Dienste anrufen. Weil wir gesagt haben, dass die Bibliotheken untereinander über die Dienste dieser Bibliotheken kommunizieren . So können wir hier auch einen Service haben, den wir beobachten genannt werden können, in den Benutzer bekommen. Also kann ich hier auch einen Dienst hinzufügen, der beobachtet werden würde, oder es kann seinen kleinen Buchstaben den aktuellen Benutzer beobachten lassen. Also hier haben wir einen aktuellen Benutzer. Wir gehen davon aus, dass wir eingesperrt sind und wir den aktuellen Benutzer haben. Auf diese Weise werde ich das schnelle Sayed nennen, das Benutzer für Sayed ist. Also mit den Benutzern für Sayed, wird es zwei Felder haben. Einer von ihnen ist der aktuelle Benutzer. Auf diese Weise können wir das zurückgeben. Also wird dieser für mich zurückkehren und beobachtbar. Und diese beobachtbaren werden den aktuellen Benutzer enthalten. Und wir können auch erstellen oder ist der aktuelle Benutzer authentifiziert? Ist der aktuelle Benutzer authentifiziert? Und auf diese Weise können wir auch das beobachtbare aufrufen oder zurückgeben, was diese wären, die Erste Hilfe des Benutzers ist jedoch authentifiziert. Auf diese Weise können wir wieder zu unserer Auftragsbibliothek oder zur Auscheckseite oder zur Kasse Komponentenseite gehen. Und wir haben hier auf der Kasse Seite, können wir User Service anrufen. Wir haben es schon angerufen. So jetzt, basierend darauf, können wir die Daten ihres aktuellen Benutzers zu bekommen und fühlen, dass Auscheck-Formular. Wir können hier eine Methode hinzufügen, die dieser Punkt Auto Feel Benutzer sein kann. Das. Auf diese Weise können wir die Benutzerdaten bereits im Formular ausgefüllt haben, wenn wir eine Kasse machen. Also ich meine, hier auf dieser Seite, wenn ich hier zur Wache gehe und dann auf Kasse klicke, werde ich hier meine Daten haben, die auf meinem Token basieren, nachdem ich mich einloggen habe. Denn wenn Sie sich erinnern, haben wir die hier eingeloggte aktiviert. Also müssen wir uns einloggen und dann werden wir hier diese Seite oder Zugriff auf diese Seite haben. Also gehen wir noch mal hierher und sagen privat. Wir definieren eine Methode und wir nennen es autofill Benutzerdaten. Und diese Autofill Benutzerdaten mit Gold für mich, dieser Punkt beobachten aktuellen Benutzer. Also müssen wir den aktuellen Benutzerstatus beobachten. Wir können sehen, ob er eingeloggt ist oder nicht. Und dann können wir auch die Benutzerdaten bekommen. Wir müssen hier nicht überprüfen, ob der Benutzer eingeloggt ist oder nicht, weil diese Seite bereits durch die Route geschützt ist, falls Sie sich erinnern. Aber wir werden darüber sprechen, dass der Benutzer eingeloggt ist , wenn wir die Produktbewertung hören. Aber hier ist es schon geschützt. Sie müssen also nicht überprüfen, ob der Benutzer authentifiziert ist oder nicht. Sie müssen nur den Benutzer oder die aktuellen Benutzerdaten abrufen. So beobachten Sie aktuelle Benutzerdaten. Ich werde es abonnieren. Wir können stattdessen gleich diese Pfeife und nehmen bis und all das Zeug. Sie können auch eine Pfeife nicht hinzufügen, die nehmen genannt wird, und es wird ein nehmen. Und Sie können nur einen Wert aus dem State Store nehmen. Als ob Sie den Wert nicht immer, immer, immer, und beobachten müssen. Nein, Sie nehmen nur eine und automatisch ihr Abonnement, wie wir zuvor gesprochen haben, wird es fertig sein. Auf diese Weise haben Sie kein Speicherleck. Also hier habe ich eine Pfeife, nehmen Sie eine, okay, abonnieren, und dann werde ich Benutzer haben. Also hier wird dieser Benutzer für mich die Benutzerdaten zurückgeben. Also, wenn wir hier diesen Typ überprüfen, wie Sie sehen, wird es Typ Benutzer sein. Also müssen wir auch zurückkehren, Es ist eine Callback-Funktion. Und wir werden feststellen, dass dieser Parameter Benutzer, Benutzertyp hat. Ich speichere seine automatisch formatierte. Ich öffne diese Klammern wieder, und dann füllen wir das Formular aus. Also, wie wir das Forum vorher versagten, gingen wir nur Feld für Feld. Also werde ich hier sagen, dies, die Kasse Form dot seti dot gesetzt Wert. Also auf diese Weise werde ich hier aber haben, Checkout Form Punkt, zum Beispiel, Name. Es wird Punkt gesetzt Wert sein, wenn Sie sich erinnern. Und dann werde ich den Wert vom Benutzerpunktnamen festlegen. In diesem Fall haben wir den Benutzernamen automatisch in der Kasse. Also lasst uns nochmal gehen und das versuchen. Also werde ich wieder hierher gehen, schauen Sie sich an. Und wir werden bemerken, dass wir nichts bekommen haben. Okay, lassen Sie uns die Konsole überprüfen, warum wir keine Daten haben und ich bin sicher, dass wir einen Fehler haben. Okay, nett. Hier ist bereits ein Fehler aufgetreten. Wir müssen es überprüfen. Also dieser Fehler, der besagt, dass eine Ressource nicht geladen werden konnte, die serverlose Bindung mit dem Status für 01, nicht autorisiert für den API-Benutzer. Also bekommen wir wirklich den Benutzer, aber wir sind nicht autorisiert. Warum? Denn wenn Sie sich erinnern, haben wir kein Abfangen, keine HTTP-Abfangen für unsere Anwendung in einem Süßwarenladen durchgeführt. Wir haben es nur für den Admin getan. Wenn Sie sich erinnern, haben wir hier in der Anwendung Modul, wir mit etwas namens bieten http Interceptor zur Verfügung gestellt, und dann haben wir JWT Interceptor und Multi ist wahr. Auf diese Weise können wir jede HTTP-Anfrage mit unserem Token laden. Auf diese Weise autorisiert uns der Server, diese API zu verwenden. Also, jetzt haben wir hier im Admin, aber wir haben es nicht am Ende, den Sie einkaufen. Also werde ich hier zur Anwendung, zum Modul und dann zu ihren Anbietern gehen. Und dann würde ich hier verwenden, die HTTP-Interceptor-Steuerpunkt für Auto Import zur Verfügung stellen. Und auch ich habe hier JWT Abfangjäger von Blue Bits Benutzer, und dann werden wir es bereits hier haben. Okay, gehen wir jetzt wieder auf unsere Homepage. Und dann lassen Sie uns wieder sparen. Lassen Sie uns diesen Haltepunkt entfernen. Und dann werden wir gehen und überprüfen. Wir werden feststellen, dass wir jetzt den Namen bereits in diesem Feld ausgefüllt haben. Um hier fortzufahren, können Sie auch alle diese Daten auf der Grundlage von Benutzerdaten oder gesperrt in Benutzer fühlen. Also, jetzt werde ich wieder gehen und ich werde all diesen Satz von Wert Benutzernamen füllen. Also ist es besser, hier zu überprüfen, ob wir Benutzer haben, um Fehler zu vermeiden. Manchmal werden wir keinen Benutzer haben, wenn Sie sich erinnern, und es wird für mich null zurückkehren, weil der Zustand Speicher sagte, dass der Benutzer null sein kann. So können wir auf diese Weise haben, wenn hier besser ist. So können wir hier sagen, dieses DO Auscheck-Formular. Und dann, und wir werden über all diese Felder gehen. Also werde ich schnell auf sie gehen. Selbstverständlich können Sie sie auch selbst spüren und diese Vorlesung mit dem Ausfüllen der Formulardaten abschließen. Also hier fühle ich alle Daten, die der Benutzer in seiner Checkout-Seite erworben hat. Also, wenn ich wieder hierher gehe, wie Sie sehen, dass wir alle Informationen haben. Also, jetzt haben wir hier zu Hause und ich gehe zur Kasse. Also lassen Sie uns diesen Teil entfernen und dann werde ich auf Kasse klicken. Und ich werde sehen, dass meine Daten automatisch ausgefüllt, dass jedes Feld, das ich hier habe. Und auch ich kann eine Bestellung aufgeben. Aber noch jetzt, wenn Sie sich daran erinnern, dass die Bestellung auf der Benutzer-Gast-ID Mao basiert , werden wir die Benutzer-ID haben, die gesperrt ist. So werden Sie das tun und viele Refactoring in den nächsten Vorträgen durchführen. 180. Refactoring + Platzordnung mit derem Benutzer: Okay, in dieser Vorlesung, lassen Sie uns einige Fehler beheben und auch eine Bestellung basierend auf dem angemeldeten Benutzer suchen. Also zuerst, ich werde hier einen Bug haben, das heißt, ich, wie ich dir sagte, es ist eine. Also hier haben wir das Q1 und wenn Sie die Seite speichern und die Anwendung in dieser Auscheckseite neu geladen wird, dann werden Sie sehen, dass es keine Daten gibt. Dies liegt daran, dass, wenn Sie nur einen nehmen, dieser Benutzer vielleicht null ist. Und wir haben hier, wenn der Benutzer null ist, dann sind wir nicht in der Lage, die Werte des Benutzers auf das Formular zu setzen. Also der bessere Weg, wenn Sie vom State Store abonnieren, immer zu nehmen, bis sie bis zum Abschluss des Abonnements oder wenn die Komponente zerstört wurde. Also genau, wie wir zuvor im Kurs getan haben, erstellen wir eine, eine Variable, die End-Abonnements genannt wird, oder wir können es abbestellen nennen. Also hier werde ich eine Abmeldung haben und dies wird ein Thema von jedem haben, und es wird ein neues Thema haben. So können wir den Typ haben, sorry, hier haben wir einen Typ und auch wird es ein neues Thema sein. Auf diese Weise kann ich mein neues Thema definieren und es initialisieren und dann beenden, wenn diese Komponente zerstört wurde. Also hier auf zerstören, kann ich das Abmelden nennen. Es wird wie als nächstes und dann abgeschlossen sein. Wenn also die Komponente zerstört wurde, wird dieses Abonnement abgeschlossen. Also hier werden wir das haben und dann Konflikt. Und vergessen Sie nicht immer, wenn Sie NDI auf Destroy verwenden , um auch die Komponente mit Destroy zu implementieren. Also werden wir hier drauf haben und auch onDestroy, wie wir vorher gesehen haben. Also, jetzt müssen wir diese Tasse Abo beenden, nehmen Sie, bis diese abonnieren. Auf diese Weise wird unser Abonnement funktionieren. Und wenn ich die Seite aktualisiere, werde ich sehen, dass meine Daten immer noch vorhanden sind. Also hier habe ich ein Problem. Ich muss dies durch E-Mail ersetzen. Und wir werden alle Daten sind in Ordnung und kommen aus der Datenbank. Okay, jetzt lassen Sie uns ein weiteres Refactoring durchführen, nämlich genau, um die Bestellung basierend auf der Benutzer-ID zu platzieren, die eingeloggt ist. Anstelle dieser Benutzer-ID kann ich es ohne irgendetwas schaffen. Wie wir sagen können, es ist nur eine Schnur. Und dann können wir sagen, nachdem wir den Benutzer erhalten haben, ist diese Benutzer-ID die Benutzer-Punkt-ID, die aus der Datenbank kommt. Auf diese Weise werden wir die ID in der richtigen Weise haben. Und wenn ich die Bestellung aufgebe, sehe ich die Bestellung im Backend basierend auf dem angemeldeten Benutzer. Lassen Sie uns die Admin-Anwendung ausführen, um zu sehen, ob unsere Bestellungen wirklich zum Back-End gehen, um das zu testen. Also öffne ich einen neuen Port, um die Anwendung zur gleichen Zeit zu öffnen. So werden wir das Front-End und das Admin-Panel oder den Shop und das Admin-Panel zur gleichen Zeit öffnen . Okay, es läuft erfolgreich. Wir können zum Beispiel gehen, zu diesem und wir sagen lokalen Host. Und wir stellen den Port, den ich in der NX oder im Kommentar angegeben habe. So werden Sie hier die Admin-Anwendung laufen lassen. Aber wie Sie hier sehen, erhalten wir den gleichen Fehler, den wir bei der Erstellung des State Store bekommen haben. Also müssen wir auch die Admin-Anwendung für ihren State Store initialisieren. Also müssen wir beide Zeilen speichern Modul kopieren und auch das Modul beeinflussen , um die Admin-Anwendung erfolgreich ohne Probleme auszuführen. Also, jetzt werde ich hier gehen und dann werde ich die Importe bekommen. Und in den Import nach dem HTTP-Client, sagen wir, okay, gespeichertes Modul, Auto Import und wirkt sich auch auf Modul wird Auto Import und speichern und unsere Anwendung sollte normal laufen. Also jetzt haben wir die Login-Seite ohne Probleme, ich werde mich anmelden und dann auf Senden klicken. Und wir werden unsere Verpflichtung haben oder unser Backend laufen. Ich werde zu den Befehlen gehen. Ich habe hier, die Befehle. Versuchen wir also, eine Bestellung im Front-End oder im Shop aufzugeben. Also ein Jahr habe ich bereits eine Bestellung aufgegeben. Ich werde auf Bestellung aufgeben klicken. Ok. Meine Bestellung, die erfolgreich hinzugefügt und ich habe hier Button, um zurück zum Shop. Gehen wir zum Admin-Panel und gehen Sie erneut zu Bestellungen. Und wir werden sehen, dass die Befehle oder die Reihenfolge, die ich aufgegeben habe, hier sind. Also und es geht auch mit meinem Namen, weil ich mit meinem Namen als Benutzer gesperrt. Und es ist erfolgreich hierher gekommen. Und ich kann es auch sehen und sehen Sie alle Details über die Bestellung. Also möchte ich Ihnen raten, dass Sie immer dieses Diagramm oder dieses Diagramm überprüfen, wie wir den gesamten State Store-Prozess erstellt haben, um Daten aus dem State Store zu holen und sie auch in unseren Komponenten zu verwenden. 181. Stripe: In diesem Abschnitt werden wir die Zahlungsmethode für den Benutzer hinzufügen , nachdem er ausgecheckt hat. Also, nachdem ich einen Check-out gemacht habe, werde ich nach E-Mail und Passwort gefragt, um mich anzumelden. Und danach, wenn ich auschecke oder eine Bestellung aufgebe, muss ich ein Zahlungsgateway haben, damit ich bezahlen kann, und dann kann ich meine Bestellung aufgeben und dann wird der Shop damit umgehen und mein Produkt an mich liefern. Also auf dieser Seite, wenn ich auf Bestellung aufgeben klicke, werde ich die Bestellung nicht direkt aufgeben. Ich werde zu einer Zahlungsseite weitergeleitet werden. Diese Zahlungsseite entscheidet, ob ich die Bestellung aufgebe oder nicht. Aber wie können wir diese Seite hinzufügen. Wir werden keine Komponente erstellen, die von Angular gemacht wird. Also, wenn Sie sich erinnern, haben wir eine Komponente für die Seite erstellt und dann fügen wir einige Felder für die Kartenzahlung hinzu und dann werden wir die Bestellung aufgeben. Nein, nein. Nun, auf diese Weise werden wir ein anderes Gateway hinzufügen, das auch mit dem Formular und allem, was die Eingabe der Warenkorbdaten betrifft, kommen wird . Dafür brauchen wir ein Payment Gateway. Und dieses Zahlungs-Gateway, würde ich Ihnen vorschlagen, etwas namens Stripe zu verwenden. Stripe.com hat die Möglichkeit, Ihnen eine API zur Verfügung zu stellen, mit der Sie eine Bestellung aufgeben und für sich selbst oder an Ihren Shop bezahlenkönnen eine Bestellung aufgeben und für sich selbst oder an Ihren Shop bezahlen , für Personen, die sie platzieren können, oder diejenigen in Ihrem Shop. Und es wird auch die Fähigkeit haben, dass Sie die Zahlungen nicht nur in Ihrem Shop verfolgen, sondern auch in einigen Dashboards, die durch Streifen erstellt wird. Also zuerst müssen Sie sich registrieren. Also habe ich hier wie einloggen, aber Sie müssen sich zuerst registrieren. So Registrierung ist, indem Sie hier auf Anmelden klicken, wie Sie hier sehen. Und dann, wenn Sie darauf klicken, werden Sie einige Informationen haben. Sie müssen also Ihre E-Mail, Ihren vollständigen Namen und Ihr Land und Ihr Passwort eingeben. Und natürlich gibt es weitere Informationen darüber, was Ihr Unternehmen ist und wie Sie sich als Ihre Adresse bewusst sind und wie Sie lokalisieren oder was sind die Produkte Ihres Shops , die Sie das Stripe Gateway mit Ihrem Shop ausrichten möchten. Natürlich alles, Es ist eine einfache Information. Sie brauchen nicht so viel Zeit bei der Registrierung zu bekommen. Es ist genau wie E-Mail, vollständiger Name und einige Informationen über Ihr Unternehmen, dass Sie sie einfach füllen können. Danach können Sie sich einloggen und Sie werden wie ein Dashboard haben. Natürlich gibt es auch eine gewisse Authentifizierung. Sie müssen Ihre Telefonnummer angeben, damit sie Ihnen Code senden können. Es ist für mehr Sicherheit. Also habe ich den Code auf meinem Handy bekommen, also werde ich ihn ausdrücken. Und dann werde ich in meinem Konto eingeloggt. Danach haben wir gerne den Weg zum Dashboard. Und im Dashboard können Sie wissen, wie Sie mit den Zahlungen Ihres Shops umgehen. So habe ich zum Beispiel einige Zahlungen getan, und ich habe einige, zum Beispiel, Zahlungen, die sein können , zum Beispiel, Live und Zahlungen, die mit Test sein können , mit dem Sie arbeiten werden. In diesem Fall müssen Sie nur den Testmodus einschalten. Test-Modus, wie Sie sehen, Ich habe hier einige Zahlungen, so dass ich platzieren kann, Es gibt so viel wie möglich, um meine Anwendung zu implementieren oder meine Anwendung zu entwickeln und mit dem Streifen zu arbeiten. Stellen Sie also sicher, dass der Testmodus eingeschaltet ist. Und wir werden in der nächsten Vorlesung fortfahren, wie wir uns über die API verbinden. Und auch werden wir wie zum Beispiel die Entwickler-Tools erstellen , die wie zum Erstellen der API-Schlüssel ist, wie wir später sehen werden. Vergessen Sie auch nicht, zur Dokumentation des Streifens zu gehen. Sie können also keine Stripe-Entwicklerdokumente schreiben. Und in der Dokumentation sehen Sie die Informationen, über die ich in den nächsten Vorträgen sprechen werde. Ich werde all diese Links in dieser Vorlesung anhängen. 182. Erforderliche Bibliotheken installieren: Die Dokumentation von Stripes unterstützt alle Programmiersprachen, die wir für unser Payment Gateway benötigen. Um mit der Dokumentation zu beginnen, können wir auf „Erste Schritte“ klicken. Und hier haben wir mehrere Operationen für Zahlungen. Einer von ihnen, die wir tun werden, ist die Annahme von Online-Zahlungen, weil es auch einige Abonnementrechnungen und Steuerabwicklung gibt , die wir in diesem Kurs nicht behandeln werden. Wir müssen nur Online-Zahlung oder eine Zahlung akzeptieren. Wenn Sie also auf Online-Zahlung akzeptieren klicken, haben Sie ein vollständiges Beispiel, wie Sie die Zahlung oder Anwendung implementieren können. Denn hier haben wir HTML reagieren, und Next JS als Front-End und auch Back-End. Alle Programmiersprachen enthalten Knoten. Also das Problem hier, dass wir kein Beispiel für Angular haben. Wenn also die Programmiersprache des Frontends hier nicht aufgeführt ist, können Sie hier klicken, nicht programmieren, Hilfe von unseren Partnern erhalten. Wenn Sie also darauf klicken, haben Sie eine Empfehlung von Stripe, der SGX Stripe genannt wird. Und Sie extrahieren ist eine Bibliothek. Wir können es mit Angular verwenden, um das Payment Gateway im Frontend zu bauen. Also, wie Sie hier sehen, wenn Sie Angular eingeben und dann werden Sie diesen NC-Streifen sehen. Es ist irgendwie von Stripe Website gelobt. So können wir mit diesem NC-Streifen beginnen, indem wir hier loslegen. Und dann würde es uns zum Git-Repository von MDX Stripe bringen. Aber für eine bessere Dokumentationsansicht, können Sie auch docs Website sehen. Es gibt also Dokumentation für MDX Stripe, die ich auch hinzufügen werde, dass der Link zu dieser Vorlesung. Also, wenn wir auf docs klicken und dann werden Sie diese Einführung sehen. Wir werden sehen, wie man die Bibliothek installiert, und dann werden wir die Dienste dieser Bibliothek nutzen. Lassen Sie uns zuerst anfangen, die Bibliothek und den gx Stamm und auch den Streifen zu installieren, ursprünglich aus Stripe stammt. Also werde ich diesen Code kopieren und dann werde ich zu unserem Projekt gehen. Wir werden ein neues Terminal eröffnen, das ich bereits habe. Also können wir hier haben, beachten Sie, dass alles zurück ist und wir können ein neues öffnen. Wir wählen eine bash, und dann wird es für uns ein neues Terminal öffnen. Natürlich können Sie jedes Terminal verwenden, das Sie wollen. Aber für mich benutze ich zum Beispiel Zed als H oder Bash. Wir haben den Kommentar hier basiert. Und wenn Sie bemerken, dass es am Anfang Dollarzeichen gibt, müssen Sie es nur entfernen. Und dann werden wir zur Bibliothek NC Stripe und dem Stripe JS installieren. Wenn Sie also die Eingabetaste drücken, wird es zu den Bibliotheken oder dem Backend JSON hinzugefügt, wo wir unsere Bibliotheken für die Entwicklung installieren oder hinzufügen. Also, wenn wir hier unsere Abhängigkeiten überprüfen, werden wir sehen, dass wir zwei Bibliotheken haben. Einer von ihnen ist Streifen und der andere ist SGX-Streifen. Es gibt also auch eine Dokumentation für diese Bibliothek, die wir verwenden können, um unsere Zahlung zu erstellen. Ich gehe mit dem einfachsten Kurs in diesen Kurs. Natürlich, dass es mehrere Option Wochenende tun. Aber ich werde diejenige wählen, die genau für unseren Shop ist. 183. Zahlungsplan: Es ist besser, immer den Fluss zu erklären, wie wir die Zahlung umsetzen werden. Also, wenn ich jetzt programmieren werde, können Sie verstehen, was ich tue. Zunächst einmal, wie Sie in diesem Diagramm sehen, dass der Benutzer auf die Schaltfläche klicken wird, die Order genannt wird, haben wir es im Frontend. Und dann werden wir etwas namens Create Checkout Session erstellen erstellen. Und diese Anfrage wird im Backend bearbeitet werden , nachdem wir die Bestellartikel an das Backend gesendet haben. Und darauf basiert, wird dies den Gesamtpreis der Bestellung berechnen. Und dann wird es etwas namens Session-ID erstellen. Und diese Session-ID stammt von der Sprite-API, die wir im Back-End verwenden werden. Und nachdem wir die Sitzungs-ID erstellt haben, werden wir den Benutzer auf eine erfolgreiche Seite umleiten, wie zum Beispiel eine Dankesseite oder eine fehlgeschlagene Seite. Wie konnten wir die Sitzungs-ID nicht erstellen, weil zum Beispiel Internetverbindung oder er ein Netzwerkproblem hat. Aber jetzt gehen wir davon aus, dass wir eine Session-ID Erfolg erstellen werden. Also werden wir senden, dass sie Informationen an den Benutzer im Front-End leiten. Und die Front-End-Anwendung wird direkt auf die Zahlungsseite lesen. Die Zahlungsseite würde per Stripe zur Verfügung gestellt werden. Es wird eine bestimmte Form haben, so dass Sie Ihre Kartennummer und dann einige, ein weiteres Detail, das wir sehen werden. Und wir werden einige Testkartendaten verwenden, so dass wir keine echte Zahlung verwenden. Wir werden einige Schreibtischwächter benutzen, wie wir später sehen werden. Und dann nach der Bearbeitung der Zahlung über die Front und nach der Umleitung zur API oder zur Zahlungsseite von Stripe, werden wir Umleitung haben, um Q-Seite zuzuweisen , die wir vor oder zu einer Fehlerseite erstellt haben. Wenn wir also auf die Seite „Danke“ lesen, erstellen wir eine Erfolgsmeldung und erstellen die Bestellung mit dem Status „Ausstehend“ neu. Aber wenn es erstellt wird, als oder wenn es ein Fehler in der Zahlung, dann werden wir den Benutzer auf eine fehlgeschlagene Seite umleiten und wir erstellen die Bestellung als fehlgeschlagener Status. Also müssen wir den Überblick über jede Bestellung behalten, die erstellt wird, ob es Zugriff ist oder ob es fehlgeschlagen ist. So kann der Kunde oder der Benutzer oder der Besitzer des E-Shops wissen, was die Probleme in seinem Ego passieren können. 184. Erstellen von Checkout: Lassen Sie uns jetzt dieses Diagramm mit Codierung implementieren. Also zuerst klicken wir auf Platzhalter, die wir bereits im Frontend implementiert haben. Und dann werden wir eine Check-out-Sitzung erstellen. Aber die Tick-Out-Sitzung erforderte eine API, die als Create Checkout Session API bezeichnet wird. Und wir werden die Bestellelemente an diese API senden. Also gehe ich zurück zu der Back-End-Anwendung, die wir zuvor mit NodeJS erstellt haben, gehe ich zur Bestellseite. Und dann in den Bestellungen Router, wenn Sie sich erinnern, haben wir mehrere APIs erstellt und eine davon, diese, die Prahlerei und Ordnung ist. Aber jetzt müssen wir vor der Buchung und Bestellung, wir müssen für eine Check-out Sitzung fragen. Dafür müssen wir auch einen Router haben. Und dieser Router wird eine Post-Anfrage haben. Und wir würden diese API als Checkout-Sitzung nennen oder Checkout-Sitzung erstellen. Auf diese Weise werden wir die API mit einer Anfrage und der Antwort bereit haben , wie wir es immer mit unseren APIs getan haben. Also werde ich hier Anfrage und dann eine Antwort haben. Und darauf basiert, haben wir den Callback zurückgegeben, den wir verwenden werden. Also die Create Session Checkout, wie Sie sehen, haben wir gesagt, dass wir die Bestellartikel senden werden. Also werde ich hier eine konstante nennen es Artikel bestellen. Und diese Bestellung Artikel, wir werden sie von der Anfrage Punkt Körper erhalten. Auf diese Weise werden wir in der Lage sein, die Bestellartikel zu behandeln und die Produkt-ID zu erhalten und unsere Sitzung zu erstellen. Es gibt ein Beispiel in der Dokumentation, wie wir wachsen, um eine Zahlung dafür zu erstellen, müssen wir zuerst eine Bibliothek installieren, die Stripe genannt wird. Und wir werden dieses Streben verwenden, um unser Session-Token zu erstellen. Also werde ich hier ein neues Terminal öffnen. Ich werde Stripe installieren. Also werde ich NPM Stripe installieren lassen. Das war's. Das ist also trocken. Wir werden es in unserer API hier verwenden, um die Sitzung zu generieren. Also werde ich hier eine Konstante definieren, die Stripe genannt wird. Und dieses Laufwerk, es wird den Streifen benötigen, den wir vorher installiert haben. Sie müssen also sicherstellen, dass Sie Stripe-Installation in Ihren Bibliotheken haben, wie Sie hier sehen, haben wir es bereits. Und dafür müssen wir den Schlüssel zur Verfügung stellen , den Testschlüssel, den wir zuvor erstellt haben. Ich habe dir gezeigt, wie wir den Schlüssel bekommen. Aber ich kann es dir zeigen. Also gehen wir wieder zu unserem Dashboard, wie wir unsere Zahlungen erstellt haben und wie wir ein Stripe-Konto erstellt haben. Wenn Sie zu Entwicklern gehen, erhalten Sie hier etwas namens API-Schlüssel. Und dies hier haben Sie veröffentlichbaren Schlüssel, wo Sie zum Beispiel verwenden oder eine Zahlung in Ihrer Anwendung erstellen können. In unserem Fall benötigen wir beim Erstellen der API nicht den veröffentlichbaren Schlüssel, aber wir brauchen diesen geheimen Schlüssel. Sie müssen also einen geheimen Schlüssel verraten und dann kopieren Sie ihn. Und Sie müssen sicherstellen, dass Sie sich im Testmodus befinden. Und wieder gehen Sie zum Code und nachdem Sie Streifen benötigen, platzieren Sie einen weiteren Anruf, der den Schlüssel selbst hält. Also haben wir hier unseren Testschlüssel. Bitte versuchen Sie, Ihren eigenen Schlüssel zu verwenden, um nicht den gleichen zu verwenden. So können Sie Ergebnisse in Ihrem Konto haben. Also habe ich hier diesen Stripe-Account, ich habe hier den Schlüssel. Und dann werde ich die Sitzung erstellen. Wie können wir die Sitzung erstellen. Also, wenn Sie sich erinnern, haben wir die Bestellung erstellt. So können wir jetzt eine gestreifte Bibliothek verwenden, um unsere Sitzung zu erstellen. Also werde ich hier eine Konstante in unserer API definieren. Ich werde es als Sitzung nennen. Und diese Sitzung wird eine Gewichtsfunktion haben, wie wir warten werden bis wir eine Antwort von Stripe dot check out bekommen. Genau so. Es heißt „Streben nach Auschecken“. Und dann musst du Sessions mit S. sagen und dann musst du Create sagen. Und mit diesem Create ist es eine Methode, bei der Sie ein Objekt übergeben können und dieses Objekt hat einige spezifische Parameter. Also müssen wir zuerst definieren, dass wir etwas namens Zahlungsmethoden Typen haben. Und dann müssen wir sagen, dass Arten von Zahlungen. Jetzt werden wir die Wache wie MasterCard oder Visa-Karte verwenden. Auch hier müssen wir die Einzelposten haben, aber Einzelposten müssen in einer bestimmten Weise formatiert werden. Wir können sagen, wie wir unsere eigenen Einzelposten definieren können. So können wir hier definieren, können wir Kostenpositionen sagen. Und wie wir später sehen werden, werde ich Ihnen zeigen, wie wir es definieren werden. Also würde ich hier Zeilenelemente, Array verwenden. Wir müssen hinzufügen schweißen eine Option übergeben, die Modus genannt wird. Und der Modus ist die Zahlung. So können wir sagen, um eine Sitzung der Zahlung zu erstellen. Und dann haben wir etwas namens Erfolgs-URL. Warum haben wir diese Erfolgs-URL? Das werde ich später erklären. Aber für jetzt können wir die URL localhost und dann 4200 setzen. Der 4200 Port wird in unserer Winkelapplikation im Frontend verwendet. Also, wenn Sie einen anderen Port haben, dann müssen Sie ihn verwenden. Aber für mich werde ich die 4200 für meine Front-End-Anwendung verwenden, wie Sie hier sehen. Also nach der Zahlung, werde ich wieder auf die Anwendung gerichtet lesen, die zum Beispiel, übergeben, sage ich Erfolg, das ist unsere Dankeschöse-Seite, wenn Sie sich erinnern. Und dann haben wir etwas namens Abbrechen URL. Und mit dieser Stornierungs-URL können Sie den Benutzer auf eine Fehlerseite umleiten, wenn er nicht bezahlen kann. So können wir statt dieser haben, können wir wie eine Seite haben, wir können es nennen, zum Beispiel Fehler. So können wir diese Seite im Frontend erstellen. Und danach haben wir die Sitzung hier. Wir werden an den Benutzer zurücksenden, an das Front-End, wie wir in unserem Diagramm gesehen haben, dass ich die Session-ID senden und direkt NFO lesen werde. Auf diese Weise muss ich an die Front-End-Session-ID zurücksenden, damit ich auf die Sitzungs- oder Zahlungsseite oder die Seite umleiten kann , auf die ich meine Kartendaten setzen werde. Also würde ich hier sagen, Lassen Sie uns Anleihen, die JSON und dann werden wir als ID setzen. Wir können Sitzung, die wir hier haben, Dot ID. Auf diese Weise, weil diese Sitzung oder diese Check-out Sitzung für mich als asiatisch zurückkehren würde und es ein Mitglied hat, das ID genannt wird. Ich kann dann die Sitzungs-ID bekommen. Jetzt haben wir noch ein Problem, das die Einzelposten sind. Nun müssen die Einzelposten auf eine bestimmte Weise zugeordnet werden. Also, wenn wir auf die Dokumentation von Stripe gehen und sehen, zum Beispiel, akzeptieren Sie ein Zahlungsbeispiel, das gestreifte Dokumentation ist. Wir werden in der Node.JS sehen, es gibt wie ein Beispiel, das wir verwenden können. Und dieses Beispiel, wie Sie sich erinnern, haben wir Zahlungsmethoden Typen und es gibt Einzelposten. Zeilenelemente ist Array, die ein bestimmtes Array von Objekten haben. Und dieses Objekt hat Bryce Daten, Währung und Produktdaten, et cetera. Also haben wir all diese Informationen geschrieben, aber wir haben diese nicht erstellt. Dafür müssen wir dieses Array dieses Objekts erstellen, in dem es Preisdaten, Währung, Produktdaten und dann Einheitenbetrag enthält . Wenn Sie sich erinnern, haben wir einen Einzelposten oder Bestellartikel, der nur Produkt-ID hat, und dann haben wir auch die Menge. Auf diese Weise müssen wir auch dieses Objekt auf diese Weise erstellen, es ist so etwas wie Mapping. Wieder werden wir Karte lesen, das andere Element, um diese Form zu haben. Also genau, wie wir vorher mit dem Posting und älter gemacht haben, wenn Sie sich erinnern, lesen wir die Bestellartikel, wir haben sie durchgeschliffen. Dann bekamen wir das Produktdetail danach , um den Preis jedes Produkts und den Namen davon und dann den Gesamtpreis zu berechnen. Aber hier werden wir es wieder tun, aber vorne, wie zum Beispiel, auf andere Weise. Also zuerst werde ich überprüfen, ob ich wirklich eine Bestellung Artikel vom Frontend bekomme. Also, wenn es keine Bestellartikel von vorne und dann direkt und Fehler gesendet, werde ich sagen, hier eine Antwort und dann Status, den wir sagen können, und es wird 400 sein. Und dann senden wir wie einen Fehler zum Beispiel an den Benutzer. Auscheck-Sitzung kann nicht erstellt werden, überprüfen Sie die Auftragspositionen. So können wir auf diese Weise eine Fehlermeldung in der Konsole für uns haben. Danach werden wir überprüfen, ob es wirklich Bestellartikel gibt. Wir werden sie durchlaufen und Linienelemente basierend auf dem, was wir in der Dokumentation gesehen haben. So genau wie wir zuvor mit den Bestellartikeln, die wir erstellt haben, wie oder schleifen über sie, um das Produktdetail zu erhalten , weil wir das Produktdetail wie den Namen benötigen. Und auch wir haben den Stückbetrag, der der Preis ist. Auf diese Weise müssen wir ein Detail des Produkts haben. Und dafür, wenn Sie sich erinnern, wir waren Schleifen, aber ein Versprechen zu schaffen, alles, was wir eine Reihe von Produkten oder Einzelposten erhalten , die durch die Bestellnummer oder die Auftragspositionen übergeben werden. Also werde ich hier und dann wieder Schleife gehen, um Artikel zu bestellen. So werden wir sagen, u, dass die Einzelposten haben, versprechen, dass alle wieder, wenn Sie sich erinnern, Ich erklärte alle diese Schritte. Also versprechen, dass alle für mich die Bestellartikel behandelt, wo ich mehrere Bestellartikel oder mehrere Produkte durch Schleifen auf Bestellartikel zurückgeben kann. So sagt er immer, oder ihre Artikel Punktkarte. Und dann werden wir dieses Array zurückkehren oder wirklich formen. Das hat nur Produkt-ID und die Menge zu einer anderen Form, die die Form haben wird , die in unserem Array oder in der Dokumentation von Stripe definiert ist. Also am Ende werden wir dieses Objekt als Array zurückgeben. Also zuerst müssen wir eine Karte haben. Und wenn Sie sich erinnern, weil wir die Daten unserer Produkte aus der Datenbank erhalten, müssen wir asynchron setzen, also müssen wir manchmal warten, bis jedes Produkt kommt und dann können wir unsere Schleife oder unsere Zuordnung fortsetzen, wenn ich mehrere Artikel bestellen. Also danach haben wir das Bestellartikelblatt hier sollte Artikel wie eins bestellt werden, weil ich jetzt eins nach dem anderen schleife. Und ich werde hier ein Produkt definieren. Und dieses Produkt wird haben, werden die Daten des Produktdetails, wo wir die Bestellartikel zu erhalten. So verursachte Produkt weg. Und dann werden wir das Produktmodell verwenden, wenn Sie es haben, wie wenn Sie es importieren. So muss das Produktmodell verwendet werden. Wie Sie hier sehen, haben wir kein Produktmodell, wir müssen es importieren. Also nach Bestellung Artikel, werde ich hier wie Kosten, Import für mich, Produktmodell haben. Und dann werden wir sagen, erfordern von den Modellen, in denen wir unser Produktmodell definiert haben, wenn Sie sich vorher in der Backend-Sitzung erinnern. So können wir jetzt das Produktmodell verwenden. Also werde ich hier sagen Produkt Punkt, und dann werden wir sagen, finden Sie nach ID weil wir gehen, um die Bestellung oder das Produkt nach ID zu erhalten. Und dann kommt hier die ID, die übergeben wird vom Frontend oder anderen Artikeln, Punkt-ID oder dot-product. Wenn Sie sich erinnern, haben wir das Front-End abgebildet, um zu sagen, dass die anderen Artikel das Produkt enthalten und auch die Menge, die das Produkt halten wird, die Produkt-ID. Okay, Das Ziel der Zuordnung jetzt, das Order Items Array in eine andere Form umzuformen , die wir Zeilenelemente nennen werden. Also hier werde ich eine Rückkehr haben. Also werde ich zurückkehren und U-Form, die genau dieses sein wird. So können wir es kopieren und wieder zu unserem Code gehen. Und wir sagen zurück für mich Objekt, das Preisdaten genannt wird. Währung ist Dollar und Produktdaten. Der Name ist nicht das Hemd, sondern die Produkt-ID oder der Produktname. Wenn Sie sich erinnern, haben wir das Produkt aufgerufen und es hat Feld namens Name. Und auch, der Einheitsbetrag hier beträgt zweitausend oder er wird nach Sinn berechnet. Also musst du auch diesen Sinn haben, Überraschung. So können wir hier Produkt Punkt Preis und multipliziert mit 100, weil jeder $1 $0.100 ist. Und die Menge in diesem Fall ist die Menge, die von der Bestellposition kommt. Also werde ich hier Artikel, Artikel, nicht Artikel und hier auch Artikel oder Artikel bestellen , um das Problem zu vermeiden. Also hier werden wir etwas haben, das eine Menge genannt wird. Danach können wir Gesetzeszeilen auch an diese Einzelposten übergeben , da wir jetzt eine neue Form dieses Arrays haben. Aber hier muss man sich immer erinnern, Ich habe es durch gekaufte Bögen nicht zu vergessen, warten, denn hier warten wir ein Versprechen zurück. Also müssen wir warten, bis all dieses Finish und wir werden die Einzelposten bekommen weil wir hier ein Produkt haben, das aus der Datenbank kommt und es auch ein Gewicht hat. Gehen wir zurück zu unserem Terminal, um zu sehen, ob wir Probleme haben. Wie Sie hier sehen, haben wir ein Problem. Es sagt ungültig, Kurzkopf-Eigenschaft intializer. Also haben wir hier ein Problem mit dem Namen. Also müssen wir hier nicht gleich, aber Doppelpunkt haben, also auf diese Weise, okay, Wir haben kein Problem und die Datenbankverbindung ist fertig. Und wir können nun diese API aufrufen, die aufgerufen wird, erstellt eine Check-out-Sitzung, um die Check-out-Sitzung aus dem Back-End zu erhalten. 185. Erstellen von Frontend: Gehen wir zurück zur Front und zum Frontend, wo wir unsere Aufträge bearbeiten. So werden wir eine Bestellung aufgeben und auf eine bezahlte Zahlung umgeleitet werden, wie wir im Diagramm zuvor erklärt haben. Zunächst müssen wir einen Dienst erstellen, der das Check-out Session-Token anfordert. Deshalb werden wir keine Bestellung aufgeben, wenn ich auf Bestellung platzieren klicke. Aber ich werde einen Dienst anrufen, wo er mir die Sitzungs-ID zurückgibt , damit ich den Benutzer wirklich zuerst zur Zahlung leiten kann. Und dann basierend auf der Zahlung, wenn es erfolgreich ist oder nicht, habe ich die Bestellung basierend auf dem Status erstellt, wenn sie sich biegt oder fehlgeschlagen ist. Also zunächst einmal, wenn wir wieder zu unseren Bibliotheken gehen, hatten wir eine Bestellung erstellt ist Bibliothek. Und in der Auftragsbibliothek haben wir einen Service und wir haben spezielle Service für Karten und wir haben auch für die Bestellungen. Also im Bestellservice werde ich einen Dienst erstellen, wo er mich auch auf die Zahlungsseite lesen wird , nachdem ich die Session-ID erhalten habe. Tun Sie das, wir können ein Erstellen. Zum Beispiel können wir einen neuen Methodennamen geben. Wir können es eine Check-out erstellen Sitzung nennen. Und auf diese Weise wird die Check-out-Sitzung nach Bestellartikeln fragen. Bestellen Sie Artikel, weil wir sie an das Backend senden müssen, wie wir zuvor gesehen haben, um zu berechnen, dass der gesamte Preis und auch das Detail des Bürgersteigs. Also haben wir hier oder das Elemente-Array, es würde an den Dienst gesendet werden, und dann wird es eine HTTP-Anfrage zurückgeben, genau wie wir vorher mit den anderen Diensten gemacht haben, wie Sie hier oben sehen. Und die Anfrage wird Post-Anfrage sein. So werden wir eine Anfrage Daten zu veröffentlichen. Und wo haben wir die gleiche URL, die wir sie vor den Bestellungen basiert haben. Und dann ein Pfad, den wir zuvor angegeben haben, wie erstellen Sie Check-out Sitzung der API. Also haben wir hier Check Out Sitzung erstellen. Dies ist unsere API, wie wir in der Rückseite und vor definiert. Und die Sendedaten mit der Post-Anfrage sind die Bestellpositionen, die wir in der Funktion übergeben haben. So können wir hier oder die Elemente haben, die wir sie hier analysieren. Also lassen Sie uns speichern und sehen, ob dieser Pfeil wirklich für mich Session-ID erstellt und wir haben kein Problem im Back-End. Versuchen wir, das zu testen. Ich werde zuerst gehen, um zu sehen, ob wir einige Fehler haben. Manchmal haben Sie, wie das Order Item Modell als relativer Pfad importiert wird. Aber, oder zum Beispiel, der früheste Pfad, wie wir mit jedem x gesehen haben. Aber es ist besser, wenn wir in der gleichen Bibliothek sind, um einen relativen Pfad zu verwenden, ist. Also benutze ich hier, ich werde es ändern, um wie diese Modelle und Bestellartikel zu sein. Als ob ich die Dateireihenfolge erreiche, die den relativen Bus verwendet hat. Jetzt möchte ich, wenn ich auf „Bestellung platzieren“ klicke, erhalte ich eine Sitzungs-ID. Wir können es gerne verwenden, um es im Konsolenprotokoll für jetzt zu setzen. Es wird also die Arbeit in der Checkout-Seite sein, Checkout-Seite Komponente, wo ich die Bestellung erstelle oder aufstelle. So platzieren Order Funktion, die ausgeführt wird, wenn ich auf diese Schaltfläche klicke, wie wir zuvor gesehen haben, welche, wie wir erstellt haben. Also, jetzt werde ich die Bestellung aufgegeben haben. Und dann wird die Bestellung keine Bestellung erstellen, aber es wird den Dienst aufrufen, der Check-Out-Sitzung erstellen ist. Statt dessen können wir das vorerst auskommentieren. Nur für den Moment, und dann gehen wir zurück, wenn wir es brauchen. Also würde ich sagen, Jahr dieser Bestellservice und dann würde ich erstellt Sitzung und wir werden die Bestellartikel übergeben. So können wir hier sagen, dies die Bestellartikel, weil wir sie aus dem lokalen Lager gesammelt haben , wie Sie hier vor sehen. Also, danach erstelle ich den lokalen Speicher oder die, sorry, die Witz-Out-Sitzung oder rufe diesen Dienst an. Ich bekomme eine Sitzung und wir können sie im Protokoll ausdrucken. Also werde ich hier sagen, Konsolenprotokoll direkt und wir würden diese Sitzung auschecken oder drucken. Also lasst uns das speichern und wieder zu unserer Anwendung gehen. Und dann werden wir die Konsole öffnen. Jetzt werde ich versuchen, eine Bestellung aufzugeben. Also sagen wir OK, Bestellung aufgeben. Ich bekomme nichts in der Konsole. Lassen Sie uns also die Registerkarte Netzwerk überprüfen, wo wir Anfragen von unserer Anwendung senden. Wie Sie hier sehen, gibt es eine Anfrage senden, aber es hat keinen Inhalt. So kam es ohne Inhalt zurück. Das ist also sicher. Wir haben zum Beispiel, dass im Backend, einige Fehler. Lassen Sie uns noch einmal unseren Back-End-Code überprüfen. Also werde ich hier gehen und das Backend überprüfen. Wir werden diese Konsole des Backends sehen, dass wir einen Fehler haben, wie ich Ihnen sagte, es sagt ein Jahr, das unbekannte Parameter Abbrechen URL erhalten. Also habe ich hier einen Tippfehler. Deshalb möchte ich, dass du immer sicher bist, dass du die Tippfehler hast, oder? So wird es nicht, haben keine Tippfehler in ihrem Code. Also hier muss ich setzen, nicht so absagen. Ich muss es so ausdrücken. Wir sparen wieder. Wir prüfen, ob unsere Anwendung läuft. Es wird also aufgrund von Änderungen neu gestartet. Okay, die Datenbankverbindung ist fertig. Jetzt werde ich versuchen, wieder eine Bestellung aufzugeben. Lassen Sie uns also aktualisieren und dann die gesamte Konsole entfernen. Und wieder legen Sie die Registerkarte Konsole und dann platzieren wir sie. Okay, wir haben eine Anfrage und wenn wir die Vorschau überprüfen, nett, ich habe die Session-ID. Wie Sie hier sehen, bekomme ich eine ID, die eine Sitzungs-ID ist, die ich vom Backend gesendet habe. Und wir haben jetzt die Session-ID. Jetzt müssen wir den Benutzer auf die Zahlungsseite umleiten. Um dies zu tun, haben wir mehrere Möglichkeiten, dies zu tun. Zuerst müssen wir einen Stripe-Dienst verwenden, etwas namens Stripe-Dienst. Also zuerst müssen wir hier zum Konstruktor gehen und Stripe Service von Stripe importieren. Also werde ich hier sagen Privatstreifen-Service. Und dann wird es Stripe-Dienst genannt. Und dieser Streifen-Service wird von nx dry importiert. Denn wenn Sie sich erinnern, haben wir nx Stripe Bibliothek installiert. Also werde ich es hier benutzen. Also werde ich sagen Import und dann Stripe Service, genau wie ich es hier getippt habe. Und dann würden wir es die Bibliothek nennen, die SGX Stripe genannt wird, die wir vorher installiert haben. Okay, jetzt sind wir in der Lage, den Stripes-Dienst zu verwenden, okay, Also, nachdem ich die Sitzung oder die Session-ID erhalten habe, kann ich dieses Token oder diese Session-ID verwenden, um den Benutzer auf die Zahlungsseite umzuleiten. Also einfach, ich muss hier diesen Streifen-Service machen und dann direkt lesen, um zu überprüfen. Dann muss ich eine Objektsitzungs-ID verwenden, wie dies Session-ID ist. Es ist bereits definiert, wie Sie hier gesehen haben. Und diese Sitzungs-ID wird von dieser Sitzung kommen, die ich erstellt habe. Und ich bekam einen Ausweis, denn wenn Sie sich erinnern, haben wir ein Objekt und in ihm ID. Also habe ich es genau auf die gleiche Weise. Sitzungspunkt-ID. Wenn Sie hier einen Fehler erhalten, liegt dies an den Taipings. also besser, Ihre Tippungen immer zu verfeinern oder zu definieren , basierend auf dem, was der Dienst verwendet wird? Zum Beispiel, erstellen Checkout Seite, wenn Sie sich erinnern, wir haben es verwendet, um einige Daten zurückzugeben. Und diese Daten können wir sagen, dass es für mich zurückgeben wird, geben Sie jede. Also kann ich hier sagen, die Post-Anfrage wird eine Sitzung haben und diese Sitzung wird Typ jeder haben. Also können wir es auch sagen, wie beobachtbar hier, weil es für mich beobachtbar vom Typ irgendwelcher zurückkehren wird. Auf diese Weise werde ich diesen Fehler nicht haben, wo er nicht zurückkehrt, weil diese Sitzung für mich unbekannt ist. Oder Sie können es eingeben. Sie können also sagen, ich muss wie der Typ Rückgabetyp ID sein wird , der Typ String haben wird. Auf diese Weise, wenn Sie wieder hier gehen, werden Sie sehen, dass der Fehler ist dies erschienen und Sie haben eine definiert, weil Sie die ID bereits definiert haben. Und auch hier müssen Sie ein Problem beheben, das der erwartete Typ ist, der von der Anfrage zurückgegeben wird. Also werde ich Jahr sagen, der Rückgabetyp wird Objekt sein, das ID und die Zeichenfolge hat, denn hier habe ich ID und eine Zeichenfolge. Also diese Schreibskripte, sie sind in oder mögen, zum Beispiel Tricks, Sie müssen sie mit TypeScript tun. Sie müssen also immer sicherstellen, dass Sie eine gültige Eingabe haben. Sie haben keine Fehler oder Fehler zwischen den Funktionen und Diensten. Danach müssen wir diese Weiterleitung abonnieren, um zu überprüfen. Also muss ich hier sagen, abonnieren Sie auch, und dann muss ich UC finden, wie Sie es sehen. Es kehrt für mich Streifenfehler zurück, dieser Fehler. Ich werde es abonnieren und überprüfen, ob ich einen Fehler erhalte, wenn der Benutzer nicht in der Lage ist, zu bezahlen oder wenn er die Zahlungsseite aufgrund von beispielsweise Netzwerk- oder Verbindungsfehlern nicht erreichen kann . Aber wie Sie hier sehen, ist es sehr schlecht, Abonnieren innerhalb abonnieren, wie Verschachtelung abonnieren im Allgemeinen. Unser x js und auch in Angular ist sehr schlechtes Verhalten, so dass wir einen anderen Weg tun können, dass wir diese Dienste aufrufen können nachdem wir einen bestimmten Typ dieser Create-Check-out-Sitzung zurückgegeben haben, wie wir die Ausgabe dieser Sitzung ändern und dann können wir es wieder auf eine andere Art und Weise verwenden. Also gehe ich hier zum Bestellservice. Ich werde gut gehen, um all diese Rückkehr zu haben. Ich habe HTTP-Post-Anfrage. Lassen Sie uns diese Typings für jetzt entfernen, dass es die Spitzen gedreht. Wir brauchen sie nicht. Wie ich Ihnen erklärt habe, müssen wir direkt gehen und den Rückgabetyp von diesem Beitrag ändern. Weißt du, es kehrt für mich die Sitzung zurück und in ihr ID. Aber jetzt möchte ich etwas tun, bevor ich es abonniere, wie wir das tun können. Wenn Sie also wissen, dass es etwas namens Pipe gibt, und diese Pipe ist wie eine Pipe, in der Sie die Rückgabedaten von einem beobachtbaren oder von einem Service ändern . So zum Beispiel haben wir hier eine Sitzung und Session.Get IID zurückgegeben. Aber nein, ich möchte etwas anderes tun, bevor ich diese Sitzungs-ID natürlich mit dieser Sitzungs-ID zurückgebe . Also werde ich hierher gehen und pfeifen. Ich würde sagen, okay, ändern Sie für mich den Rückgabewert irgendwie oder vor einer Bearbeitung es an den Benutzer oder an den Teilnehmer, ändern Sie es und senden Sie es dann an den Abonnenten. Also würde ich hier etwas sagen, das eine Schalterkarte genannt wird. Und diese Schalterkarte, es bedeutet, als würde ich das ändern, dass, wie es aussah, die in eine andere Form zurückkehren. Es ist genau wie die Karte. Wir machen mit dem Array, wie wir ein Array haben. Wir mappen darüber, um dieses Array irgendwie auf andere Dateneinträge zu ändern, die Form davon zu ändern. Diese Schalterkarte wird also aus unserem x js importiert. Sie müssen also sicherstellen, dass Sie diese Schalterkarte aus unserem x j als Operatoren importiert haben , wie Sie hier sehen. Also werde ich das jetzt ändern. Wie die Ausgabe des Abonnements, wie ich die Session-ID bekommen habe. Also erwarte ich, die Session-ID hier zu bekommen. Also werde ich hier Sitzung haben. Und die Art dieser Sitzung. Es ist genau der gleiche Typ, den wir zuvor definiert haben. Also nicht beobachtbar, aber es wird die Typ-ID und eine Zeichenfolge haben. Also müssen wir das entfernen. Und dann sagen Sie hier, dass ich diese Sitzung habe. Es wird ID enthalten, die Typ String hat. Dies wird also eine Callback-Funktion sein, die die Emission von diesem beobachtbaren oder von diesem Abonnement ändert . Also dafür werden wir wieder eine Rückkehr haben, wie Rückkehr für diese Funktion, eine andere Form der Sitzung. Also werden wir hier diesen Punktstreifen-Service zurückgeben. Also hier werden wir Streifendienst nicht in der Komponente aufrufen. Also werde ich all das entfernen und wir werden es nennen oder es hier benutzen. Also im Dienst, so werden wir es nicht in der Komponente selbst verwenden. Also lassen Sie uns diesen Teil kopieren oder GOT und gehen Sie zum Konstruktor des Dienstes. Und ich werde hier sagen, dass ich den Streifendienst anrufen muss. Und auch Sie können den automatischen Import direkt verwenden, indem Control dot drücken und Sie werden nx Stripe wichtig haben. Und jetzt werden wir sagen, dass dieser Punkt-Streifen-Dienst und dann direkt lesen , um mit der Sitzungs-ID, die von der Pipe zurückgegeben wird, auschecken. Also werde ich hier sagen, direkt zum Auschecken, und dann werde ich ein Objekt öffnen und mir sagen, dass Sitzungs-ID Sitzung ist, die Punkt-ID zurückgegeben wird. Warum bekomme ich hier Punkt-ID, weil ich den erwarteten Typ definiere , der von diesem Dienst zurückgegeben wird , der aus der Sitzung erstellt wird. Also habe ich hier den erwarteten Typ hier. Wenn Sie diese Methode überprüfen, gibt sie beobachtbare Fehler zurück. Auf diese Weise gebe ich nicht die Sitzungs-ID zurück, ich kehre zurück und ändere das Verhalten dieser Post-Anfrage zu einem anderen beobachtbaren. Also hier werde ich beobachtbar von Fehler haben. Wie Sie sehen, wird es automatisch geändert. Es hat den Rückgabetyp beobachtbaren Fehler, Streifenfehler. Also jetzt bin ich in der Lage, diese Methode zu verwenden. Und hier wird es mich automatisch zu einer Checkout-Seite mit der Session-ID umleiten, die vom Back-End zurückgegeben wird. Also, jetzt werde ich hier gehen und ich werde sagen, direkt zu diesem Dienst abonnieren Checkout Seite erstellen. Und dieses Abonnement wird für mich nur Fehler zurückkehren. Also werde ich das nur verwenden, um zu wissen, ob der Benutzer ein Problem mit der Verbindung hat oder nicht. Also werde ich hier sagen, wenn. Es gibt einen Fehler. Dann können wir wie Konsolenprotokoll Fehler in der Umleitung zur Zahlung sagen. So können wir es auf diese Weise haben. Und hier haben wir einige Probleme, also müssen wir nur all diese entfernen. Also haben wir es jetzt, oder? So Service erstellen Check-out-Sitzung. Ich habe mich abonniert und dann werde ich auf diese Seite weitergeleitet. Und hier im Service ist es bereits auf diese Weise gemacht. Okay, jetzt versuchen wir das und sehen, ob unser Service gut funktioniert und wir eine Umleitung haben. Also werde ich wieder in den Warenkorb gehen und dann werde ich gehen, um zu sehen, dass ich einen Fehler habe. Dies besagt, dass Service Drive Service Service, kein Anbieter für Stripe Service. Also müssen wir den Streifenservice anbieten. Aber vorher müssen wir etwas in der Konfiguration für diesen Dienst sagen. Denn wenn wir auf die Dokumentation von MDX Stripe gehen und sehen einen Schritt, der Installation genannt wird. Es gibt etwas als nächstes, das Setup-Anwendung genannt wird. Und sit-up-Anwendung erfordert, dass Sie NGINX Stripe Modul 4 root importieren und Sie den veröffentlichbaren Schlüssel setzen, also nicht den geheimen Schlüssel von Stripe, aber Sie müssen den veröffentlichbaren Schlüssel setzen. Also müssen wir diesen Teil importieren. Also müssen wir NX Stripe Modul importieren. Also, wo in der Anwendungsebene. Also habe ich hier und Sie einkaufen, werde ich zum App-Modul gehen. Und dann werde ich hier in den Importen des Moduls mein Modul importieren, das MDX Stripe Modul aus NC Stripe genannt wird. Und dann werde ich das MDX-Stripe-Modul verwenden und für root sagen. Und in der vier Route werden Sie gebeten, veröffentlichbaren Schlüssel zu haben. Auf diese Weise müssen Sie den veröffentlichbaren Schlüssel aus Ihren Daten verwenden. Wie Sie hier sehen, haben wir veröffentlichbaren Schlüssel und geheimen Schlüssel. Also werde ich darauf klicken, um kopiert zu werden, und dann werde ich meinen veröffentlichbaren Schlüssel als Zeichenfolge hier setzen. Also lassen Sie uns speichern und dann unsere Anwendung sehen, wenn sie immer noch den Fehler hat. Also gehe ich wieder zur Wache. Wie Sie sehen, haben wir den Fehler nicht mehr, da MDX Stripe Modul bereits den Dienst für uns bereitgestellt hat, so dass wir ihn nicht manuell bereitstellen müssen. Das bedeutet, dass wir in der Lage sein können, diesen einen oder jenen Dienst , der Stripe-Dienst genannt wird, und direkt in jedem Modul in unserer Anwendung zu verwenden. Also, jetzt werde ich auf Auschecken klicken und dann Bestellung aufgeben. Und Sie werden sehen, dass wir drei auf eine andere Seite geleitet haben, die die Zahlung haben wird. Und wie Sie hier sehen, habe ich die Preise, die von den Artikeln zurückgegeben werden, die ich vorher gebaut habe, wenn Sie sich im Backend erinnern, weil ich die Bestellartikel an das Backend schicke. Und so werde ich in der Lage sein, meine Kartendaten zu setzen und eine Zahlung zu tätigen. Lassen Sie uns das versuchen. also eine Zahlung akzeptieren, müssen Sie einige Testdaten verwenden. Also in der Dokumentation von Stripe, das ist eine Zahlung und es gibt ein Beispiel, das ich gezeigt habe, dass Sie genannt eine Zahlung akzeptiert. Und hier gibt es eine Wachen, wo unsere gefälschte wie Sie können sie einfach verwenden und dann können Sie eine Zahlung platzieren. Also zum Beispiel, ich werde dieses verwenden. Also gehen wir wieder in den Laden. Ich würde meine E-Mail hier platzieren und auch werde ich wie die Nummer der Karte setzen oder Sie können ein beliebiges Datum hier setzen. Also werde ich hier fünf, einundzwanzig, einundzwanzig , sagen 25, und einige Zahl und auch Namen setzen. Wir können einfach einen beliebigen Namen setzen und dann ziehen Land der Zahlung und dann können Sie bezahlen. Und danach, wenn Sie bemerken, dass Sie nach erfolgreicher Zahlung zu einer erfolgreichen Seite weitergeleitet werden. Aber wenn wir zu unserer Admin-Anwendung gehen, haben wir keine aufgegebene Bestellung. Daher können wir die Bestellungen, bei denen wir sie platziert haben, nicht vom Backend verfolgen , denn wenn Sie sich erinnern, haben wir den Bestellservice hier storniert. In der nächsten Vorlesung werden wir sehen, wie wir bestellen werden. Wir haben eine erfolgreiche Zahlung und senden es an das Back-End und speichern es in der Datenbank. Aber danach, vorher, sorry, ich muss Ihnen zeigen, wie Sie die Zahlungen direkt in Ihrem Dashboard in Stripe sehen können. Wie Sie hier sehen, habe ich hier eine Zahlung, die ich mit diesem Beschreibungsschlüssel und auch diese E-Mail gemacht . Und Sie können auch darauf klicken und mehr Details darüber sehen, von welchem Ort und auch was sind die Artikel dieses Produkts und alles, was an das Back-End übergeben wird, wie wir es erfolgreich erstellt haben. 186. Bestelle die Bestellung nach einer erfolgreichen Zahlung: In der vorherigen Vorlesung sahen wir, dass wir in der Lage waren, die Zahlung zu handhaben und auch unsere Kartendaten und drücken Bay. Und dann haben wir drei auf eine Dankeschöse-Seite gerichtet, die wir in unserer Anwendung erstellt haben. Aber wir vermissen das Teil, das die Bestellung erstellt. Also erstellen wir die Bestellung nicht tatsächlich in der Datenbank. Wenn ich also zur Admin-Anwendung gehe und zu den Bestellungen gehe, möchte ich Sie natürlich daran erinnern, dass Sie auch das App-Modul des Admins hinzufügen müssen , um das MDX-Stripe-Modul hinzuzufügen. Denn vielleicht müssen Sie auch einige Zahlungen im Admin-Panel behandeln. Und auch die Anwendung wird nicht funktionieren, weil wir den Stripe-Dienst für den Bestellservice verwendet haben und die Anwendung ohne sie nicht funktioniert. Ich meine, die Admin-Anwendung. Also jetzt haben wir all diese Informationen. Wie Sie sehen, gebe ich keine Bestellung auf. Ich lasse meine Bestellung nicht aufgeben, nachdem ich die Zahlung geleistet habe. Dafür müssen wir die Bestellung auch in der Datenbank platzieren. Wo in der Dankeschön Seite. Ich meine, nach wirklich erfolgreicher Zahlung, nicht, wenn ich hier auf Bestellung aufgeben klicke. Wenn ich die Bestellung aufgebe, bezahle ich und gehe zurück zur Dankesseite auf der Dankeschöse-Seite Ich werde die Bestellung erstellen lassen. Sie sich erinnern, haben WennSie sich erinnern, habenwir ein Auftragsobjekt erstellt. Und diese bestellten Objekt, wir enthalten die Informationen über den Benutzer oder über die Eingabe oder den Benutzer, oder über genau die gleichen Informationen, die von dem Benutzer, der die Informationen in das Formular eingeben kommt. Dafür müssen wir den Bestellservice nutzen, aber wir sind nicht hier, sondern auf der Dankeschöse-Seite. Also werde ich hier zur Dankeschön Seite gehen. Ich würde die Bestellung nochmals erstellen und hier platzieren. Auf der Dankeschön Seite haben wir diese Informationen nicht. Wir haben nicht, nachdem wir auf die Zahlungsseite weitergeleitet werden, die sich direkt außerhalb unserer Anwendung befindet und zurück zur Dankeschöse-Seite. Wir würden die bestellten Daten verwenden. Ich meine, diese Informationen werden wir sie verlieren. Also müssen wir sie irgendwie einlösen. Zum Beispiel können wir in unserer Anwendung sagen, der einfachste Weg ist der lokale Speicher. Ich kann all diese Informationen im lokalen Speicher meiner Anwendung zwischenspeichern und dann kann ich sie erneut auf der Dankes-Seite verwenden, um die Bestellung aufzugeben. Dafür werde ich zwei Dienste erstellen. Der erste Service wird Bargeldauftrag genannt. Zum Beispiel in unserer Anwendung, die in ihren Diensten und Bestellservice befindet. Also werde ich hier sagen, nach dem Erstellen des Checkout-Token würde ich einen Service erstellen, der Bargeldbestellung oder zum Beispiel Zahlungsauftragsdaten genannt wird. Auf diese Weise werde ich Ordnung geben, die gestorben ist oder auch dort. Und diese Diode verwendet den lokalen Speicher, oder dieser Dienst verwendet den lokalen Speicher, um die Auftragsdaten zwischenzuspeichern. Also werde ich hier sagen, einfach lokale Speicher Punkt Set Artikel. Und wir werden diesem Artikel einen Namen geben, wie bestellte Daten. Und diese Bestelldaten werden die Bestellung selbst oder das Objekt übergeben , das vom Frontend oder von der Komponente der Kasse Seite übergeben wird. Aber hier brauchen wir wie eine Schnur. Also können wir nicht sagen, JSON dot stringify, würden wir es als eine Zeichenfolge hinzufügen und wir werden sagen, okay, diese Reihenfolge stringify. Okay, also nach dem Zwischenspeichern der bestellten Daten, so können wir sie dann auf der Dankes-Seite aus dem lokalen Speicher abrufen und sie verwenden, um die Bestellung zu erstellen. Also, hier gehe ich. Nach der Bestellung, wenn der Benutzer auf die Schaltfläche „ Bestellung aufgeben“ klickt, sammle ich alle Bestellinformationen. Und dann werde ich diesen Punkt Order Service Tresor Bargeld oder die Daten verwenden, und ich werde die Bestellung übergeben. Auf diese Weise zwischenspeichere ich es im lokalen Speicher. Also brauchen wir diesen Service jetzt nicht. Wir brauchen es auf der Dankeschön Seite. Ich meine, die Erstellung der Bestellung, tatsächliche Bestellung wird erledigt werden. Das Dankeschön. Seite. Also lassen Sie uns wieder gehen und diesen Teil bekommen oder entfernen Sie ihn komplett und gehen Sie wieder zu unserer Dankeschön Seite. So ist alles in Ordnung bis jetzt, aber die Erstellung der Check-Out Sitzung sollte getan werden nachdem ich die Informationen gesammelt und die Bestelldaten einzahlen. Andernfalls werde ich auf die Zahlungsseite weitergeleitet und ich werde die Bestelldaten verlieren. Es ist also besser, diesen Teil so zu verschieben, dass er am Ende ist, nachdem wir die Bestelldaten zwischengespeichert haben. Lassen Sie uns also sicherstellen, dass wir wirklich die Informationen zwischengespeichert sind. Also brauche ich auch, um den Service zu retten. Also funktioniert alles gut. Schön. Lassen Sie uns also die Bestellung aufgeben und unsere Anwendung und den lokalen Speicher überprüfen. Sitzungsspeicher, würde ich den lokalen Speicher nehmen. Also im lokalen Speicher haben wir den Warenkorb und auch wir haben das Token. Also, wenn ich platzieren oder wenn ich auf Bestellung drücken, muss ich auch die wir die bestellten Daten sagen können. Okay, ich werde darauf klicken. Ich habe das bestellt, wie Sie sehen, aber jetzt habe ich es völlig verloren, weil ich wirklich auf eine andere Domain geleitet wurde, die Checkout strive.com genannt wird. Also jetzt hier werde ich meine Informationen und die Wache setzen und dann werde ich die Bestellung aufgeben. Also jetzt werde ich auf eine Dankeschöse-Seite weitergeleitet werden. So gibt es Danke. Page wird mich zu der Anwendung umleiten, wo ich localhost 4200 Port habe. Wenn ich also auf OK klicke, drücken Sie die Taste. Also hier in diesem Moment muss ich die Bestellung aufgeben, also localhost 4200, und dann werde ich genau die Bestelldaten haben, die ich brauche, damit ich sie auf der Dankes-Seite abrufen und meine Bestellung aufgeben kann. Das werden wir in der nächsten Vorlesung sehen. 187. Reihenfolge der Bestellung in Dankeschön Seite: So gehen wir zurück zu der Dankeschöse-Seite Komponente, werden wir sehen, dass wir eine leere Komponente haben. Es hat nur wie Vielen Dank für den Einkauf bei uns. Wir haben Ihre Bestellung erhalten, aber bevor wir diese Informationen anzeigen, müssen wir die Bestellung aufgeben. Also zuerst haben wir, wenn Sie sich erinnern, entfernen wir die Platzierung des Bestelldienstes von hier. Also speichern wir nur die Bestelldaten. Also müssen wir einen anderen Dienst durchführen, der nicht Caching oder die Daten ist, sondern die Bestelldaten erhält. So können wir einen anderen Dienst haben, den wir nennen können, wie zum Beispiel, abrufen oder abrufen oder die, oder erhalten zwischengespeicherte Bestelldaten. Werden Sie verkümmert. Möchte keine Verwirrung zwischen guter Ordnung haben und wie Ordnung bekommen, die im lokalen Speicher ist. Also werde ich hier sagen, nur Artikel bekommen und diesen Artikel erhalten, ich werde es nicht nur so verwenden, so dass wir nur den Schlüssel erhalten Element benötigen uns nur den Schlüssel, der Daten bestellt ist. Und dieser Service sollte für mich eine Bestellung zurückgeben. Also würde ich hier sagen, der Rückgabetyp ist Ordnung. Auf diese Weise müssen wir auch einen Rückgabetyp haben, der bestellt ist. Also müssen wir hier zurückkehren. Aber diese get item kehrt für uns als String zurück. Auf diese Weise müssen wir JSON.parse machen. Also analysieren wir von String zum benachbarten oder zwei Objekt, das unsere Reihenfolge haben wird. Danach erhalten wir die JSON.parse als Reihenfolge und wir erhalten diese Reihenfolge. Natürlich benötigt diese Methode keinen Parameter, daher verwenden wir nur GetCacheDir Reihenfolge, Rückgabereihenfolge aus dem lokalen Speicher nach dem Parsen. Also zurück auf unsere Dankeschön Seite, Komponenten. Also lasst uns all diese schließen. Wir brauchen sie nicht. Okay, wir retten das hier. Gehen Sie noch einmal auf unsere Dankeschön Seite. Wir müssen wieder auf G auf in es umsetzen. So implementieren Sie es. Und dann müssen wir darauf und g auf jede Methode aufrufen. Und in Indien auf der Init-Methode werde ich die Bestelldaten über den Dienst abrufen, also privat oder den Dienst. Und dann rufen wir Bestellungen Service oder sorry, nicht bestellen Modul oder der Service und Bestellservice wird von dem Service kommen, den wir hier erstellt haben. Also müssen wir diesen wie Aliaspfad entfernen. Auch hier weiß ich nicht, warum ich es so habe, aber Sie können es immer manuell reparieren. Ich hätte E-Services und bestelle dann Service. Also in NGOs darin, werde ich diesen Dienst nutzen oder anrufen. Also würde ich sagen, hier, konstant, können wir sagen, um das zu bestellen. Und diese Reihenfolge, die diesem Punkt oder ihrem Dienstpunkt gleich ist, erhält geradezu geordnete Daten. Also haben wir GetCacheDir Daten hier bestellt. Lassen Sie uns also ein Konsolenprotokoll mit bestellten Daten machen, um sicherzustellen, dass wir wirklich die richtigen Daten aus der Bestellung und der zwischengespeicherten Bestellung erhalten und unsere Zahlungsmethode erneut wiederholen. Also werde ich wieder zu unserer Anwendung gehen, wieder zur Karte gehen, überprüfen. Dann werde ich die Bestellung aufgeben und ich werde auf die Zahlung weitergeleitet. Ich werde meine Zahlungsdaten eingeben. Und lassen Sie uns überprüfen, ob wir wirklich die Bestelldaten haben. Also haben wir sie, weil wir sie nicht sehen können, wir es geht jetzt fügen wir eine weitere Seite hinzu. Also werde ich jetzt bezahlen und ich werde jetzt auf eine Dankeschöse-Seite weitergeleitet. So in Ordnung. Wir haben drei Regie. Wir haben die Bestelldaten im lokalen Lager, und wir haben auch die Bestellposition. Auf diese Weise habe ich die bestellten Daten auf der Dankeschöse-Seite. Ich habe alle meine Informationen, meine Adresse und alle diese Informationen, die zwischengespeichert und von der Komponente zur Auscheckseite gesendet werden. So sind wir jetzt in der Lage, die Bestellung aufzugeben. So können wir hier direkt sagen, dieser Bestellservice obwohl, um zu erstellen. Und diese erstellende Bestellung wird nach Bestelldaten fragen, weil wir eine Bestellung an diese Daten übergeben und dann abonnieren. Und dann kann ich die Ergebnisse wie Benachrichtigung oder etwas, das für den Benutzer angezeigt wird, erhalten. Wir brauchen nicht. In diesem Fall müssen wir es hinter der Szene tun, weil er bereits diese Benachrichtigung, dass er bestellt hat, erfolgreich Schlamm auf Erfolg setzen. Wir müssen eine Sache haben, die das Entfernen der Artikel des Warenkorbs ist, wie es erneut initialisieren, wenn Sie sich erinnern , wir haben das vorher gemacht und wir können zum Beispiel eine Weiterleitung auf die Homepage nach fünf Sekunden durchführen. Aber wir können haben, geben Sie dies zurück auf die Show-Schaltfläche, wo der Benutzer wieder in den Shop gehen kann. Also nach dem Abonnieren, werde ich eine Erfolgsmethode wie einen Rückruf haben, und dann werde ich hier wieder einen Kartendienst verwenden, wenn Sie sich erinnern, müssen wir den Kartendienst nutzen. So Wachdienst. Und dann wieder Wachdienst hier. Also müssen wir es wie Wochenende direkt als Dienst anrufen, aber nicht von Aliasing, sondern von einem relativen Pfad, um das Problem nicht wieder zu haben. Also hier habe ich den Karten-Service, und ich würde sagen, hier, nach dieser Achse, diese Dot Guard Service Dot leeren ihren Wagen. Wir brauchen das Auto nicht mehr voll zu sein. Also lassen Sie uns wieder gehen, versuchen Sie unsere Anwendung. Okay, jetzt haben wir leere Karten, weil ich die Dankeschön Seite aktualisiert habe. Also lasst uns jetzt den Autor platzieren. Also werde ich entfernen, Ich werde die Konsole schließen, um es klarer zu sehen. Ich werde diesen Artikel und auch diesen Artikel in den Warenkorb legen oder in den Warenkorb legen. Also, jetzt werden wir zum Auto 2 gehen. Wir haben zwei Dinge und ich werde jetzt einen Check-out machen. Also mein Gesamtpreis ist $2200. Und ich habe diese Informationen in meiner Bestellung. Und jetzt werde ich auf die Bestellung klicken. Ich werde auf die Zahlungsseite weitergeleitet. Ich werde wieder in der Bildung der Zahlung stellen. Wie ich Ihnen gesagt habe, können Sie auch einige andere Arten von Karten verwenden. Wie Sie hier in der Dokumentation sehen, gibt es Wachen, die immer erfolgreich Zahlung ist, wie ein Test. Das ist 3D sicher. Die Authentifizierung muss für eine erfolgreiche Zahlung abgeschlossen werden. Und auch gibt es das immer scheitern. Es sagt also unzureichende Mittel. Und auf diese Weise können Sie diesen Wächter verwenden, um Ihren Shop mehr oder ineffizient zu testen. So haben wir diese jetzt diejenige, die Test genannt wird, die immer erfolgreich ist. Und es wird als Visa-Karte erkannt, dass ich meine Bestellung 2200€ aufgeben werde. Ich habe zwei Dinge, wie Sie hier sehen. All diese Korruption kommt genau so, wie wir zuvor umgesetzt haben. Also ersetze ich PE. Jetzt werde ich zum Shop weitergeleitet. Ok. Das Auto, das aktualisiert wird, weil es mt wieder zurück zum Admin-Panel, um zu sehen, ob meine Bestellung aufgegeben wurde. Also müssen wir tun, um wieder zu aktualisieren. Wie Sie hier sehen, haben wir meinen Befehl. Ich habe meine Bestellung aufgegeben. Ich kann es sehen und alle Daten dieser Bestellung sehen, wie Sie hier sehen. So werden wir erfolgreich die Bestellung in der richtigen Weise platziert, so dass ich es dann ändern kann geliefert oder fehlgeschlagen oder Biegen hängt vom Zustand meines Shops und der Verwaltung meines E-Shops ab. Auch nach erfolgreicher Bestellung ist es besser, die zwischengespeicherte Reihenfolge, die sich im lokalen Speicher befindet, aus dem lokalen Speicher zu entfernen . Soweit wir diese Bestelldaten auch entfernen können, weil wir sie nicht mehr benötigen. Es ist also nicht schön, die bestellten Daten immer in meinem lokalen Speicher zu haben. Also zunächst können wir einen anderen Dienst erstellen, der heißt Erstellen oder entfernen Sie die gecachten bestellten Daten. Also würde ich zum Bestellservice gehen. Es wird so etwas wie entfernen, zwischengespeichert oder die Daten sein. Und auf diese Weise wird es nichts zurückgeben, weil es nichtig ist. Wir werden nur sagen, lokalen Speicher, Punkt entfernen Element, und wir müssen den Elementnamen angeben. Der Artikelname in unserem Fall war, dass. So kann ich jetzt diese Methode aufrufen, die entfernt zwischengespeicherte Reihenfolge in der erfolgreichen Platzierung der Bestellung aufgerufen wird , und den Bestellartikel aus den bestellten Daten entfernen. So können wir hier diesen Punkt haben, wie zum Beispiel, Auto Order Service Punkt, entfernen Sie die zwischengespeicherten oder die Daten als auch. Auf diese Weise entferne ich den Wächter und entferne auch die zwischengespeicherten Bestelldaten. Aber jetzt haben wir einen sehr, sehr gefährlichen Bug. Was ist, wenn eine Person wie in der Lage war, zur Geschlechterseite zu gehen? So kann ich zum Beispiel in der URL so machen. Ich kann zum Erfolgsköder gehen, okay. Aber ich habe keine Bestellung und ich leere Aufträge an meine, er legt leere Aufträge an meine Datenbank. Auf diese Weise ist das ein sehr gefährliches Problem. Auf diese Weise müssen wir es reparieren. So kann eine Sicherheitssache gelöst werden indem die Sitzungs-ID abgerufen wird, die wir für die Zahlung erstellt haben. Und stellen Sie sicher, dass wirklich der Benutzer eine Zahlung geleistet als er auf diese Seite kam und ihre Zahlung validieren und sagen, okay, Sie sind jetzt in der Lage, die Bestellung in die Datenbank zu platzieren. Wir erlauben also keine Platzierung des Bestellanrufs, bis wir die erfolgreichen Informationen vom Benutzer erhalten haben, dass er wirklich bezahlt hat und er wirklich eine Session-ID hat, um die Bestellung aufzugeben. Das werden wir in der nächsten Vorlesung sehen. 188. Linting mit NX: In diesem Vortrag werden wir das Fusseln für unser Projekt machen. Wenn Sie sich erinnern, habe ich immer einige Fehler in meinem Code, die ich habe, wie sie manchmal in Rot erwähnt werden, und manchmal haben wir einige Warnungen, wie wenn sie in Gelb erwähnt werden. Also habe ich diese Fehler behalten, weil ich Ihnen zeigen möchte , wie wir sie für das ganze Projekt beheben können. Also haben wir einige Kommentare, die von NX bereitgestellt werden, die uns helfen, Fusseln für unser Projekt oder für unseren eigenen Arbeitsbereich hier zu machen. Deshalb ignoriere ich während des Kurses manchmal diese Fehler, weil ich Ihnen zeigen möchte, wie Sie all diese Fehler herausfinden und beheben können, wenn wir das Fusseln machen. Deshalb haben wir in jedem Projekt etwas namens ES fusselt. Also die ES fussel-Konfiguration, die hier erwähnt werden, sind sie Regeln, die wir für das gesamte Projekt oder das Repository haben , um für uns die Probleme zu beheben, die in TypeScript oder in HTML, oder in JavaScript oder in die JSON-Dateien. Auf diese Weise haben wir versichert, dass wir das richtige Projekt ohne Probleme oder Fehler in die Produktion geliefert werden. Wenn wir auf das Paket JSON-Datei gehen, die hier ist, sehen wir, dass wir bereits Skripte haben und diese Skripte können wir sie ausführen, um einige Funktionen zu tun. Ich fange mit der Linde an. Linde ist das, was wir jetzt brauchen, wir müssen herausfinden, was die Fehler und Fehler, die wir in unserem Code gemacht haben , basierend auf ES gelehnt Regeln und Korrekturen. Um das zu tun, können wir einfach zur Konsole gehen. Wir können zu einem neuen Terminal gehen, wie zum Beispiel, wir können all dies schließen. Wir haben zum Beispiel, ja, dieses Terminal zum Beispiel. So haben wir jetzt können wir sagen, sauber oder klar. So wird es die Schnittstelle für mich löschen. Also habe ich hier, dass dann Manila. Ich werde den Befehl ausführen, der MPM läuft lint in meinem Projekt genannt wird. Wie Sie sehen, habe ich NPM-Ausführungslänge, also werde ich diesen Befehl ausführen, so dass er in x Workspace-Länge zurückgegeben wird. Dieser Kommentar ist also tatsächlich ein Anhangbefehl, der neben dem NG Lint ausgeführt wird, was auch zum Verlängern des Codes dient. Lassen Sie uns also diesen Befehl ausführen und sehen, welche Fehler wir hier haben werden. Also läuft es jetzt. Jetzt Kreditvergabe in Shop, wird es in Projekt für Projekt wie zum Beispiel enden, wir haben zwei Anwendung, admin und jede scharfe, und es hat auch Bibliotheken. Also alle von ihnen, Sie sind Projekte. Ok? Also haben wir hier zum Beispiel den ersten Fehler, der besagt, dass Homepage, unerwartete leere Konstruktor-Lebenszyklusmethode sollte nicht leer sein. Unerwartete leere Methode im Juni darin. Um direkt dorthin zu gehen, können Sie einfach cmd sagen und mit einer Maus klicken. Oder Sie können steuern und klicken Sie auf die Maus folgen diese. Also gehen wir dorthin. Okay, es hat uns direkt zu dieser Komponente gebracht. Wie Sie sehen, ist das in Eastland Regel, dass ich keine leeren Funktionen haben kann, also ist es besser, sie zu löschen. Ich brauche den Konstruktor nicht so gut. So können wir auch die Umsetzung von Energie in es löschen. Und auch wir löschen diese Bibliothek. So haben wir jetzt eine saubere Komponente ohne Probleme hier. Also lassen Sie uns auch die anderen Fehler überprüfen. Also haben wir diese eine Homepage fertig gestellt. Wir haben auch hier Fehler. Also, was es sagt, dieser Elektrode sollte ein Präfixe, blaue Bits, vorangestellt werden. Also, wenn Sie sich erinnern, in der Anwendung, haben wir dies mit jedem Geschäft erstellt. Der Selektor sollte also blaue Bits sein. Jetzt wollen wir es mit NDI Shop halten, weil wir in MD Shop-Anwendung sind. Also müssen wir zur ETS gestützten Konfiguration gehen, nicht die globale, sondern die, die sich innerhalb des Projekts befindet. Also haben wir eine globale, die für den gesamten Arbeitsbereich oder ihre Repositories oder die Bibliotheken und Anwendungen angewendet wird. Und wir haben auch in jeder Anwendung, wir haben etwas Spezifisches für ES Fusseln, die zuerst die globale überschreiben, die wir verlängert haben, und dann tun wir und passen Stunden. Also hier haben wir in der ersten Anwendung haben wir dieses Netto-Attribut sollte mit einem blauen Bits vorangestellt werden. Jetzt wollen wir es mit Energie-Shop vorfixieren. In diesem Fall werden wir diesen Fehler nicht mehr haben. Wenn wir also in die Fußzeile gehen, müssen wir das überprüfen. Okay, wir haben immer noch einen Fehler mit einem Konstruktor und g auf jedem 20, um sie zu entfernen. So ist es auch besser, unsere Komponenten ohne Probleme sauber zu halten. Wie Sie hier sehen, haben wir auch Fehler auf der Homepage. Wir müssen das ersetzen. Mit NG Shop. Also sagen wir NG Shop als Präfix. Also lassen Sie uns auch andere Fehler überprüfen. Also werde ich hier zur Fußzeile gehen. Ok, wir reparieren die Fußzeilenkopfzeile. Wir müssen auch den Header reparieren. Also gehen wir wieder hier, wir werden sehen, dass wir Warenkorb-Service verwendet, aber wir werden Kartelle genannt, aber wir haben es nicht verwendet. Wir müssen sie löschen. Wir müssen auch aufräumen und in ihm und dem Konstruktor herumziehen. So hat ES Fusseln eine Menge Regeln. Sie können sie Ihrem Code hinzufügen. Zum Beispiel möchten Sie keine leeren Funktionen haben. Sie können zur Dokumentation von ES fusselt gehen. Wie Sie hier sehen. Ich bin auf der offiziellen Website von ES lane.org. So hat Eastland viele Eigenschaften und Regeln, die Sie für Ihre Anwendung konfigurieren können. Zum Beispiel sollten die Codes doppelt sein, nicht einzeln. Zum Beispiel haben wir hier manchmal einfache Anführungszeichen verwenden, aber Sie können es konfigurieren, um Ihnen doppelte Anführungszeichen zu geben. Es gibt also immer Regeln, die mit diesem Eastland kommen. Und dann denke ich, dass NX bereits, wenn Sie dieses Projekt erstellt haben, es kommt immer mit einigen spezifischen und ähnlichen Regeln , die bereits in einem X vordefiniert sind es kommt immer mit einigen spezifischen und ähnlichen Regeln , die bereits in einem X vordefiniert sind. Also tun Sie es einfach. Das nächste, was ich Ihnen über das Präfixieren der Komponente und der Direktiven gezeigt habe. Wenn Sie also zum Benutzerhandbuch gehen und dann zu einer Regel gehen, werden Sie sehen, dass es viele Regeln gibt, und sie werden hier beschrieben, alle von ihnen. zum Beispiel hier Dies erlaubtzum Beispiel hierunnötige Semikolons. Es zeigt Ihnen also immer, dass, wenn Semikolon nicht notwendig ist, es Ihnen einen Fehler gibt, wenn Sie dieses aktivieren und Sie kein Semikolon haben. Also natürlich gibt es viele Rollen. Sie können sehen, wie sie eins nach dem anderen zu ihnen gehen. Und dann werden Sie feststellen, dass sie wirklich vorteilhaft für Sie sind, wenn Sie Ihr Projekt erstellen. Und Sie erlauben es Entwicklern nicht, Code zu posten oder Code zu übergeben , ohne all diese Probleme oder die Regeln zu beheben, die Sie für Ihr Projekt setzen. Wenn wir also wieder in unser Eastland , wollen wir andere Probleme beheben. Also haben wir hier Header, wir haben es behoben. Wir haben hier bei Nachrichten, und wir haben einige Probleme hier. Also eines der Probleme in den Messengern, sollte dem Selektor eines dieser Präfixe vorangestellt werden. Also müssen wir auch das beheben, das hier ist, wir müssen jede scharfe haben, also haben wir das bereits behoben. Wir haben das NG Shop Präfix zum ES Fusseln hinzugefügt, fein, so dass wir keine Fehler haben werden. Also lassen Sie uns erneut den Befehl ausführen, den wir sagen können, klar und dann laufen Lint. Und wir sehen, ob wir wieder neue Fehler bekommen, also um sicher zu sein, dass wir die richtigen Pfeile reparieren. Okay, der letzte Fehler, den wir hier haben, ist auch, dass App-Komponente mit wie Süßigkeiten-Shop vorangestellt werden muss. Also haben wir hier sollte immer sein und Sie kaufen für Komponente. Also, jetzt haben wir alles ist begrenzt, aber nur für ND-Shop-Anwendung, weil es die primäre Anwendung ist , die wir erstellt haben, wenn wir Endungen erstellt haben. Lassen Sie uns also auch die Admin-Anwendung verknüpfen. Also werde ich hier einen Kommentar ausführen, auch MPM laufen lint aber für Admin-Anwendung. So können Sie den Admin angeben. So wird es für Sie auch die Linting für das Admin-Projekt laufen. Auf diese Weise werden wir auch einige Fehler bekommen. Wir müssen es in Ordnung bringen. So haben wir zum Beispiel einige Warnungen, die wir hier verwendet haben. Wie Sie sehen, haben wir wie eine Warnung, dass wir die alle verwenden. Sie können diese Regel auch deaktivieren, da Sie manchmal wie jede angeben müssen, wie wir zuvor gesehen haben. So können wir nach der Deaktivierung dieses Fehlers suchen. So können wir unerwartet gehen jede andere Art angeben. Also kannst du hier nicht in ihren Rollen aufsteigen. Und wenn Sie nichts finden, können Sie hier auch das Suchwerkzeug verwenden. Wenn Sie also nichts finden können, ist der beste Weg, Google zu verwenden. Also, wenn wir hier gehen, unerwartete jede angeben und Sie können sagen Deaktivieren. Also gehen wir zu Google, überprüfen Sie, dass TypeScript, Eastland Plug-in-Rolle deaktiviert. Wie Sie im Stapelüberlauf sehen, haben wir Google den Fehler und es gibt eine Lösung. Er sagte, füge einfach diese Regel hinzu, damit wir diese kopieren und in unsere Eastland-Akte gehen können. Es ist besser, es auf das globale zu setzen, weil es für das gesamte Projekt angewendet wird. Also haben wir auch diese Regeln. So können wir diese Regel zum Beispiel hier setzen. So wird es auf alle Dateien angewendet werden, meist T, SDS, x und JavaScript. So können wir diese Regel auch hier hinzufügen. So können wir es. Gehen Sie, wie Sie hier sehen, haben wir keine leere Funktion und auch keine explizite. Also speichern wir das und gehen wieder und führen unseren Befehl aus. Wir können hier nochmal klar sagen. Und dann in npm laufen lint admin. Wie Sie sehen, erhalten wir immer noch diesen Fehler. Dass alle Warnung, können wir sagen, unerwartete jeder. Dies liegt daran, wenn wir zu den gehen, wieder zu den Regeln, wir setzen diese Regel hier. Es sollte also nicht hier sein. Es muss darin wie die Erweiterung der TypeScript-Bibliothek sein. So können Sie diese Regel hier hinzufügen, die auf TypeScript-Rollen angewendet wird. Also müssen wir dieses und auch dieses verschieben und es in die Regeln setzen, die wir für das TypeScript haben. Wie Sie TypeScript sehen, dann wäre es hier Präfix TypeScript. Also all diese Informationen, müssen Sie vorsichtig damit sein und Sie können Ihre Schreibregeln hinzufügen, damit sie funktioniert. Also lassen Sie uns erneut speichern und versuchen, unseren Befehl auszuführen. Also werde ich hier wieder zu meiner Kommandozeile gehen. Und wir können nicht klar sagen. Und dann können wir npm gehen, Lint Admin laufen. Wieder. Ich zeige Ihnen langsam Schritt für Schritt, um zu wissen, wie Sie diese Probleme und Warnungen beheben können. Wie Sie sehen, haben wir diesen Fehler nicht mehr. Also haben wir nicht die Warnung oder die besagt, dass irgendwelcher ist wie nicht lieber verwendet zu werden. So haben wir nur diese Fehler in der Admin-Anwendung. Also lasst uns sie reparieren. Hier steht also, dass die NG, oder zum Beispiel hier in dieser Anwendung, NG OnDestroy implementiert werden muss, weil ich hier keine Implementierungen auf dieser Zeichnung habe. Wir müssen auch auf zerstören rufen. Das ist also einer der Fehler. Wir haben auch hier einen weiteren Fehler. Wir müssen die OnDestroy implementieren. Also haben wir das nicht umgesetzt. Also müssen Sie es importieren und implementieren, sowie welche Fehler wir haben, wir haben in der Produktliste, wir haben behoben, wir haben auch in der Benutzerliste. Also müssen wir das auch beheben. Ich werde hier auf einen anderen Fehler zerstören, das ist das gleiche, was wir zuvor getan haben. Ngos darin dürfen nicht leer sein. So können wir einfach den Lead gelöscht, die Umsetzung auf NGOs darin. Wir brauchen nicht mehr und auch die Eingabe von Energie darauf. Das Gleiche geht in die Seitenleiste. Wir beheben auch diesen Fehler. Auf diese Weise tun Sie für alle Bibliotheken das Gleiche. Und so habe ich jetzt mit dem Admin fertig. Dann möchten Sie für die Bibliothek tun, die aufgerufen wird, zum Beispiel UI. Du gehst einfach hierher, MPM Linde und sagst UI. Auf diese Weise wird es die Bibliothek Sie verknüpfen, so dass Sie immer den Namen der Bibliothek angeben müssen. Wie Sie sehen, haben wir Fehler im Banner und auf und es darf nicht leer sein. Also haben wir auch hier, wir müssen die Implementierung davon entfernen. Also retten wir alles. Und wir gehen zur Anwendung, um zu überprüfen, ob alles gut funktioniert. Dann werden wir sicher sein, dass wir keine Fehler in unserer Anwendung haben. Und wie Sie hier sehen, habe ich einen Fehler bekommen und Sie zeigen, dass keiner der Elemente übereinstimmte. So können wir hier zum Selektor gehen. Wir können überprüfen, warum wir dieses Problem haben. Also in der Anwendung und Sie kaufen, wenn wir gehen, um Index mögen, Es fragt blaue Bits root, weil dieses App-Modul, das wir erstellt oder App-Komponente, wir ändern diese NG Show bewiesen, dass es blaue Bits Wurzel war. Also im Index HTML der Anwendung und Sie einkaufen, müssen Sie dies nur umbenennen, weil dies der Einstiegspunkt für unsere Anwendung ist. Also gehen wir hier, antworten und laden die Anwendung neu. Alles funktioniert gut. Also, das ist es, um die Fusselprobleme zu beheben. Wie ich Ihnen sagte, führen Sie einfach NPM oder mpm run lint aus und Sie geben den Projektnamen an und es wird für Sie lösen oder zeigen Ihnen die Fehler nach dem, was Sie in der ES Lint basierend auf den ALS Lean Roots oder Regeln angegeben haben, die wir dort angegeben haben. Dafür werde ich all diese Objektivfehler für alle Bibliotheken beheben, die gleich sein werden. Ich werde es nicht wie vor dir tun, um nicht so viel Zeit in Anspruch zu nehmen. Und ich werde hinzufügen, dass der Code des Projekts am Ende dieses Abschnitts. Und ich möchte Sie nur daran erinnern, dass, wenn Sie all diese Probleme beheben, zum Beispiel, habe ich die Aufträge am Ende behoben, Sie alle Dateien nach Fusseln bekommen. Auf diese Weise haben Sie also keine Fehler. 189. NX Migrieren das Projekt auf die neueste Version: In diesem Abschnitt werden wir über Updates der Angular-Version und der NX-Bibliothek sprechen . So wissen Sie, dass immer Angular die neuen Versionen alle vier Monate oder alle sechs Monate. Und auch in X folgt, dass immer die Interaktion mit Angular zu halten. So habe ich zum Beispiel in diesem Kurs mit Angular 11 gearbeitet. Und dann kam ein Update auf, das eckig 12 ist. Also werden wir unser Projekt auf Angular 12 aktualisieren. Nun, die große Sache mit Angular oder NX Roman, Es bietet Ihnen ein Werkzeug für die Aktualisierung. Du musst gar nichts tun. Sie müssen das nicht manuell tun und im Hintergrund einen JSON herausfinden, was sind Bibliotheken, die Sie verwendet haben, und sie dann aktualisieren. Mann, der schon weiß, dass NX Ihnen all diese Dinge zur Verfügung stellt. Aber zuerst müssen wir unsere Änderungen überprüfen. Also zunächst möchte ich ein Programm installieren, das GitHub Desktop heißt. Es ist Anwendung. Sie können es von desktop.gov dot com herunterladen. Sie können es für Mac OS und Windows installieren. Nach der Installation, wie der GitHub-Desktop, können Sie Ihr Projekt mit ihm verbinden und die Änderungen sehen , die im Projekt durchgeführt werden, wenn Sie dot Git-Repository haben. Also, wenn wir hier zu unserer Anwendung oder zur Konsole oder zwei gehen, sind sie wie der Datei-Explorer. Wir werden sehen, dass wir immer eine Datei haben, die das Tor genannt wird. Sie können es hier nicht sehen. Aber wenn Sie zum Finder oder zum Windows Explorer gehen, sehen Sie einen Ordner, der Kind genannt wird. Das bedeutet, dass dieses Projekt standardmäßig mit einem guten Projekt verbunden ist oder mit einem Git-Repository verbunden ist. Und x stellt dieses Kind zur Verfügung und es ist irgendwie verbunden, mach ein Git-Repository. Also, was Sie tun müssen, ist nur vielleicht können Sie diesen Teil entfernen oder Sie können es behalten, um Ihre Änderungen zu verfolgen. Für mich werde ich es jetzt behalten. Aber wenn Sie diese doppelte Datei nicht haben, werde ich Ihnen zeigen, wie Sie eine neue erstellen. Also zuerst gehe ich zu GitHub Desktop, den ich installiert habe. Wie Sie hier sehen. Ich habe alle meine Projekte, die ich vorher gemacht habe. Und jetzt können wir anfangen, folgendes zu tun. Zuerst müssen wir ein neues Repository von der Festplatte erstellen. Sie können also, wenn Sie diese Punkt-Git-Datei nicht haben, können Sie darauf klicken und dann den Ordner angeben , den Sie Ihr Projekt implementieren möchten. Zum Beispiel habe ich, mein Projekt ist hier, ich werde auf Öffnen klicken, aber es sagt, dass dieses Verzeichnis ein Git-Repository zu haben scheint , weil ich dot get file habe, wie ich Ihnen hier gezeigt habe. Dafür müssen wir diese Option nicht verwenden. Andernfalls können Sie es verwenden, indem Sie einen Repository-Namen erstellen und es wird auch für Sie neue Datei initialisiert. Also in diesem Fall gehen wir, um ein vorhandenes Repository von einer Festplatte hinzuzufügen, weil wir das bereits haben. Wir haben diesen Dot Git-Ordner. Also werde ich zu meinem Projekt navigieren, zu dem Arbeitsbereich, den ich erstellt habe. Und wie öffnen Sie dieses Projekt, dass der Arbeitsbereich, in dem dieser Punkt Get-Ordner vorhanden ist. Also öffnen wir es und wir sagen Repository hinzufügen. Und wie Sie hier sehen, werde ich alle Änderungen sehen, die ich von der Zeit, die ich in x installiert habe , und bis jetzt so weit, dass ich möchte, dass Sie auf das Commit klicken. Sie können eine Commit-Nachricht schreiben, damit wir all dies wie begangen und bestätigt bekommen können. Du darfst also nicht sagen, wie du fertig bist. Wir können, weil wir können sagen, dass wir den Kurs oder den Laden beendet haben. So können wir sagen, Fertigstellung des E-Shop. Das war's also. Also dann können Sie sagen, Commit to master. Jetzt haben wir keine Änderungen. Also, aber wenn ich zu meiner Datei oder im Datei-Explorer im Editor gehe, werde ich das sehen, wenn ich mich ändere. Also lassen Sie uns hier ändern, zum Beispiel, speichern Sie es, gehen Sie wieder, und wir werden sehen, dass wir haben, und diese Änderung ist hier. Es waren 11, jetzt sind es 12. Dafür möchte ich das tun, weil wir unser Projekt aufrüsten werden. In diesem Fall werden wir in der Lage sein zu sehen, welche Änderungen vorgenommen werden. Erstens, was hat für mich getan, um mein Projekt zu aktualisieren? Um das Projekt zu aktualisieren, können wir zum Browser gehen. Ich werde Ihnen einen Link schicken, oder Sie haben einen Link, der dieser Vorlesung beigefügt ist. Es zeigt ihre Dokumentation zum Aktualisieren eines X auf der normalen NX-Website. Also müssen wir das Terminal dafür benutzen. Es ist also sehr einfach und sehr einfach, was sehr gut mit n-x zu tun ist. Deshalb ermutige ich Leute, die Projekte der Winkelbreite NX zu machen, weil es Ihnen die Tools zur Verfügung stellt, die wirklich großartig sind, um Ihr Projekt zu aktualisieren und zu migrieren. Natürlich können Sie auch NG, Update verwenden. Aber es wird teilweise aktualisiert werden. Es wird nicht die anderen Bibliotheken wie zum Beispiel NDR x aktualisieren , oder zum Beispiel, wenn Sie TypeScript verwenden, usw. Also dafür werden wir das Terminal öffnen und diesen Kommentar verwenden. Also gehen wir hier, öffnen das Terminal wieder unseres Projekts, wie wir vorher sehen. So können wir zu diesem Knoten gehen, hier sind wir. Sie können das Projekt zu stoppen ist besser. Also ist es besser, das aufzuhalten. Und ich werde auch die Admin-Panel-Anwendung stoppen. Also hier werden wir den Kommentar der Terminals einfügen NX migrieren neuesten. Wenn wir diesen Befehl ausführen, werden wir sehen, dass NX anfangen, etwas zu tun, das das Paket JSON aktualisiert, also ist es besser, es zu schließen und auch eine Datei zu erstellen, die Migration genannt wird. Das wird eine Weile dauern. Es ist ungefähr fünf bis zehn Minuten. Ich werde unsere Beschleunigung dieses Video überspringen. Und du wirst, ich werde zu dir zurückkommen, nachdem das fertig ist. So wie Sie jetzt sehen, dass die Migration bereit ist. Also das Paket JSON, sagte er, stellen Sie sicher, dass Pakete und Änderungen sinnvoll sind und führen Sie dann npm install aus. Schauen wir uns unser Paket Jason an. Wir werden sehen, dass alles auf Version 12 aktualisiert wurde, wie Sie hier sehen. Also haben wir auch eckig und alles wurde auf die neueste Version von Angular aktualisiert. Auf diese Weise werden wir unsere Pakete und Bibliotheken und alle Abhängigkeiten leicht aktualisiert. Jetzt werden wir das Update überprüfen oder wie wir diese Updates installieren können. Er sagte, stellen Sie sicher, dass das Paket JSON ändert, macht Sinn, und führen Sie dann npm install. Aber auch Sie können die Änderungen überprüfen, indem Sie den GitHub überprüfen und Sie sehen alle diese Änderungen, die hier durchgeführt werden. Und es hat auch eine Migrationsdatei erstellt, die für die Migration verwendet wird. Lassen Sie uns also die npm-Installation erneut ausführen. So können wir sagen, npm install in unserem Projekt. Und es wird alle aktualisierten Bibliotheken installieren. Wieder. Außerdem wird es einige Zeit dauern. Und ich werde dieses Video schnell machen. Okay, Nun, nach MPM Installation, wie wir hier sehen, dass es installiert und kompiliert die ganze Bibliothek und alles wurde erfolgreich. Also, wenn wir wieder gehen, um unsere Änderungen zu überprüfen, ist nur die package.json, die eine temporäre Datei ist, um alle Bibliotheken und ihre Abhängigkeiten und ihre Links und Token zu bestätigen . Also für jetzt werden wir den neuesten Befehl nach diesem Update ausführen. Also, wenn wir zu den Anweisungen scrollen, wieder, sehen wir, dass hier npm installiert und danach müssen wir ONNX um Migrationen migrieren. Also hier werden wir diesen Befehl ausführen und dann wird es unser Projekt aktualisieren. Und wir können es wieder ausführen und sehen, ob es aktualisiert wurde. Also hier gehen wir wieder zur gemeinsamen Linie. Ich kopiere das. Ich sehe hier wie basierend auf ihrem Kommando. Und dann führe ich auch diese Migration durch. Es wird eine Weile dauern, aber ich werde das Video beschleunigen. Schön, wie Sie hier sehen, der große Farbverlauf beendet. Es hat eine Menge Dinge wie Entfernen einige veraltete Dinge und auch Update waren schlechte Arbeiter, Migration aktivierte Routen, Snapshots oder Updates, die gemacht werden oder auf Angular in dieser neuen Version. Also hat die NX das für mich getan. Also lassen Sie uns jetzt das Projekt laufen und sehen, ob wir es wirklich tun. Alles ist in Ordnung. Also werde ich sagen, in x dienen und Sie einkaufen, und im anderen Terminal möchte ich auch die Admin-Anwendung ausführen. Also gehen wir hier, wir laufen diese beiden Anwendungen, um zu sehen, ob alles gut funktioniert. Dabei können wir auch unser Gut überprüfen. Wie Sie sehen, passiert eine Menge Änderungen. Also mein Rat an Sie, Sie müssen überprüfen, dass immer Arbeitsänderungen durchgeführt werden, vor allem, wenn Sie einige Regeln auf ES Lean zum Beispiel aktualisiert haben, besonders wenn Sie einige Anwendungen mögen, in denen Sie einige haben, haben einen Kern Anpassungen. Sie müssen also immer alle diese Änderungen überprüfen. Und dann können Sie Ihre Anwendung migrieren und starten oder zusammenführen oder den Code, der für Ihr Projekt aktualisiert wurde. Also werde ich nicht ausführlich über jedes Update sprechen, das hier passiert ist, aber es passiert meistens. Ich mag bei der Konfiguration von Konfigurationsdateien des Projekts wie ES Lint, wie Testen, Tools, wie einfach, und auch die Umgebungsvariablen, die wir zuvor erstellt haben, und auch die Poly-Felder usw. alle diese Dateien werden aktualisiert, auch der NX JSON. So viele Dinge können NX für Sie tun, ohne die Mühe zu haben, dies manuell zu tun, was so großartig ist. Sie müssen sich nicht um all das kümmern können Mythen sein, Bibliothek, Sie, vielleicht haben Sie ein wichtiges Update verpasst. Also NX all das für Sie tun, was danke ist, groß, danke für dieses Team, das all diese Bibliothek entwickelt und auf dem richtigen Weg für die neuesten Updates von Angular. So wie wir hier sehen, dass wir erfolgreich das Projekt eines jeden Shops und auch des Admins zusammengestellt haben . Also lassen Sie uns zu unserem Browser gehen und überprüfen, ob wir alles in Ordnung haben. Also gehe ich zuerst in die Motorenwerkstatt. Also hier muss ich mich erfrischen. Also haben wir hier die Refresh. Okay, es scheint, dass alles gut funktioniert. Wie Sie sehen, die Produktseite, Addict Produkt, In den Warenkorb. Schön. Alles funktioniert einwandfrei. Die Auscheckseite. Perfekt. Wir haben also keine Probleme mit der Admin- oder Front-End-Anwendung. Gehen wir zur Admin-Panel-Anwendung. Also gehe ich auch zum Admin. Lassen Sie uns auch nochmal auffrischen. Ok. Wir haben Produkte, wir haben Kategorien, alle funktionieren gut. Wir haben einige Bestellungen und auch Benutzer aufgegeben. Alles ist perfekt. Wir hatten kein Problem. Danach. Sie können eine Nachricht erstellen. Sie können es wie Core, Update oder Upgrade nennen , können Sie sagen. Und dann können Sie sich verpflichten, zu meistern. Und all diese Änderungen werden in Ihr Repository übertragen und übertragen. Alles, was Sie tun müssen, ist, das in ein Repository zu schieben, mit dem Sie verbunden sind. Siehst du, es ist sehr einfach. Es dauerte etwa 15 Minuten, nur um ein Upgrade auf die neuesten Bibliotheken unseres Projekts zu tun . 190. Heroku installieren und Git vorbereiten: Okay, in diesem Abschnitt werden wir unser Backend oder unsere Web-API für Heroku bereitstellen. Heroku ist eines der Tools, das verwendet wird, um das Projekt oder Web-APIs bereitzustellen. Und sie können öffentlich sein und wir können sie in Ihren Projekten verwenden. Sie haben also nicht Ihre API, die nur auf localhost 3000 basiert, wie wir gesehen haben, aber wir werden es auf eine URL setzen und wir können unsere Front-End-Anwendungen damit verbinden. Der erste Schritt, den wir tun müssen, müssen wir auf eine Website namens Heroku.com gehen und dann werden wir aufgefordert, eingesperrt zu werden. Natürlich, wenn Sie ein paar sind, haben kein Konto hier, können Sie sich auch registrieren. Die Anmeldung ist sehr einfach. Sie geben nur Vorname, Nachname, E-Mail-Adresse an. Und was ist Ihre Rolle? Land? Und auch, Sie müssen eine Brian-Geld-Entwicklungssprache setzen. Wir müssen NodeJS in unserem Fall setzen und Sie müssen überprüfen , dass Sie kein Spam sind und dann können Sie ein Konto bekommen. Nachdem Sie sich angemeldet haben, sehen Sie ein Dashboard wie dieses. Also dieses Dashboard, müssen wir eine Anwendung erstellen , die wir machen es öffentlich für unsere API. Zunächst einmal müssen Sie eine neue App erstellen. Und diese Erstellung einer neuen App, können Sie einen beliebigen Namen für Ihre Anwendung geben. In meinem Fall würde ich ihm einen Namen wie e-shop geben, zum Beispiel Backend. Und vielleicht kann dieser Name nicht verfügbar sein, also müssen Sie einen bestimmten Namen angeben. Vielleicht können Sie wie jedes zufällige Suffix geben. Zum Beispiel können Sie Ihren Nachnamen eingeben. Zum Beispiel werde ich meinen Nachnamen oder meinen Firmennamen angeben. Ich werde sehen, ich würde sagen, wie ein blauer Bits. Also in diesem Fall werde ich e-shop zurück und blaue Bits haben. Und dann wählen Sie Ihre Region ist besser, die nächste Region zu verwenden , wo es näher für Ihre Zielkunden ist. Also ist es besser für mich in diesem Fall, ich lebe in Europa. Also werde ich Europa setzen und dann müssen Sie auf eine App erstellen klicken. So haben wir jetzt eine Verpflichtung geschaffen. Es gibt einige Anweisungen, die wir zuerst tun müssen. Zuerst müssen wir Heroku CLI herunterladen und installieren. Gehen wir zu diesem Link und überprüfen Sie ihn. In diesem Link können Sie mehrere Optionen für die Installation von Heroku sehen. So zum Beispiel, Sie haben macOS Weg, Sie können Kommentar verwenden, wenn Sie Homebrew haben und auch, wenn Sie Windows haben, können Sie ein Installationsprogramm installieren. Und auch für Open TO auf diese Weise, die ich gerne immer benutze, ist NPM, NPM global installiert. So können Sie npm installieren dash global, Heroku. Also gehen wir nach Paris und machen das. Also werde ich hierher gehen und mein Terminal öffnen. Ich werde Control J-Taste verwenden, wie wir zuvor gesehen haben. Und dann werde ich sagen, npm installiert minus g Also auf diese Weise werde ich Heroku Domain Gerät öffentlich installieren, so dass ich Heroku Befehle in meinem Computer verwenden kann. Aber das erste, was ich tun muss, ist vielleicht brauchen wir eine Erlaubnis. Also die Berechtigungen, vielleicht wird es Ihnen nicht erlauben, öffentlich oder global zu installieren. Sie müssen diesem Kommentar sudo vorfixieren. Wie Sie hier sehen, bin ich nicht r. Ich habe keine Berechtigungen, dies zu tun, also muss ich diesem Befehl sudo vorstellen. So können wir sagen, sudo nmap, aber in Windows, ich denke, Sie werden kein Problem haben. Und dann wird es mich nach meinem Passwort fragen. Und dann werde ich das Passwort setzen und es wird erfolgreich installiert. Nun, wie Sie sehen, wurde es installiert, wir haben jetzt Heroku Befehl. So können Sie zum Beispiel Heroku so setzen und Sie würden einen Befehl wie Optionen erhalten, die Sie haben, einige Optionen, die Sie für Ihre Heroku Kommentare verwenden können. Gehen Sie also zurück zu unserem Browser. Nach der Installation gehen wir wieder zu unserer Anwendung zurück und wir müssen gut bearbeiten. Außerdem müssen wir unser Heroku-Projekt oder unser Back-End-Projekt mit Heroku git verbinden. Aber vor allem, das Wichtigste, denn bevor wir diesen Schritt tun, haben Sie natürlich, eine gitignore Datei zu erstellen. So werde ich zum Beispiel in Heroku diese Enddatei nicht bereitstellen. Diese m-Datei enthält meine Verbindungszeichenfolge zur Datenbank ist mein Geheimnis und auch API-URL. Ich werde das nicht zum Heroku Git-Repository schieben. Auf diese Weise müssen wir eine Datei hinzufügen, die git ignore genannt wird. Also, wenn ich einen guten Kommentar von Heroku verwende, dann wird es nicht die Dateien schieben, die ich spezifiziere. Sie müssen also auch keine Knotenmodule schieben. Monod-Module kommen normalerweise eine sehr riesige Datei, fast 200 Megabyte, weil wir Bibliotheken und deren Abhängigkeiten installieren. Sie müssen nicht auch Node-Module verwenden. So Erstellen erhalten ignorierte Datei, Es ist sehr einfach. Sie müssen nur eine Datei im Stammverzeichnis des Projekts erstellen. Sie müssen also sagen, git ignorieren, bevor Sie einen Schritt machen, der dort erwähnt wird. Also zuerst müssen Sie den Ordner „Knotenmodule“ ignorieren. Also sagen wir Schrägstrich Knoten Unterstriche Module. Und auch wir müssen die m-file und auch andere Entwicklungsdateien wie hübscher RC ignorieren , wie Sie hier sehen, haben wir diese Datei, damit wir sie auch ignorieren können. Also in diesem Fall haben wir, wir sind bereit, unser Projekt mit Heroku Repository zu verbinden. Also gehen wir wieder zu den Anweisungen zurück und wir müssen sagen, dass wir hineinkommen. Denn wenn wir nicht unser Projekt zuvor initialisiert haben , wie wir sahen, dass wir nicht eine gute haben, Wir haben es nicht zu irgendeinem guten verbinden. Also in diesem Fall müssen wir sagen, get any, okay, Nachdem Sie in es bekommen, werden Sie sehen, dass es eine Datei in diesem Repository erstellt, die geht oder wie dot kid genannt wird. Und wenn Sie es sehen möchten, können Sie hier zum Backend-Ordner gehen und Sie werden sehen, dass dieser Ordner und wurde erstellt. Also die nächste Anweisung, die wir brauchen, um Heroku git remote zu verbinden. Aber zuerst müssen wir Heroku Login verwenden. Also schauen wir uns zuerst Heroku an. Also werde ich Heroku Login verwenden und dann wird es mich fragen, wollen Sie den Browser öffnen und Sie können sich dann anmelden. So können wir nicht sagen, ja, wir können jede Taste drücken und dann wird es automatisch den Browser öffnen. Also, wie Sie hier sehen, habe ich eine andere Seite. Es sagt, Blick in Heroku CLI. Ich werde sagen, schauen Sie in und dann angemeldet , weil ich zuvor auf dem gleichen Browser angemeldet bin. Wenn Sie also zurück zum Terminal gehen, wird es wissen, dass Sie bereits verbunden sind, und dann können Sie Heroku-Befehle verwenden, wie in der Dokumentation erwähnt. Danach müssen wir unser Heroku oder unser Projekt mit Heroku Git-Repository verbinden. Also müssen wir diesen Befehl verwenden, alle diese Befehle, Sie können sie verwenden, wie Sie sehen, sagen Heroku, git remote, und fügen Sie dann E scharfe zurück und blaue Bits. Es ist also genau der gleiche Name der Anwendung. Also lasst uns das machen. Und dann haben wir diesen Kommentar hier basiert. Und dann, wie wir sehen werden, ist das Git-Repository auf diesen Pfad gesetzt. Wenn wir also jetzt unser Projekt bereitstellen oder unseren Code hochladen, um cool zu handhaben, dann wird Heroku alle ihre Dateien und den Code, den wir von diesem Pfad hochgeladen haben, erhalten oder lesen . In der nächsten Vorlesung werden wir sehen, wie wir auch eine Produktionsdatenbank erstellen können. Wir müssen nicht die gleiche Datenbank verwenden, wie wir sehen, weil wir diese Datenbank vielleicht zwischen Entwicklung und Produktion unterscheiden können. Wie wir in der nächsten Vorlesung sehen werden. 191. Optionale Erstellung von Produktionsdatenbank: Okay, in diesem Vortrag werden wir über die Erstellung einer Produktionsdatenbank sprechen. Wenn Sie also eine Entwicklung machen oder wenn Sie eine Anwendung ausführen, haben Sie normalerweise eine räumliche Datenbank für Sie, Dinge nur zu entwickeln und zu testen und einen Fortschritt für Ihre Anwendung zu machen. Aber nachdem Sie das Projekt am Leben bereitgestellt haben, müssen Sie eine Produktionsdatenbank erstellen. In diesem Kurs ist dies optional, damit Sie eine Live-Datenbank oder eine Produktionsdatenbank erstellen können oder nicht. In diesem Abschnitt oder in diesem Vortrag werden wir das tun. Wenn Sie sich erinnern, haben wir MongoDB Compass und diese MongoDB Compass Anwendung installiert, können wir in der Lage sein, Datenbanken zu erstellen und auch wir können Daten importieren und exportieren. Also in unserem Kurs haben wir diese Datenbank verwendet, die E-Shop-Datenbank genannt wird. Jetzt werden wir ein neues erstellen. Wir können es auch E scharf nennen, Datenbank. Und es wäre eine Produktion breit. So können wir das haben und wir können die erste Sammlung erstellen, die zum Beispiel Kategorien genannt wird. Und dann machen wir, erstellen für die Datenbank, und die Datenbank wird erstellt. Also, wie Sie hier sehen, aber wir haben nur einen Tisch. Also, wenn Sie sich erinnern, Ich fügte für Sie zu Beginn des Kurses, einige Dateien, können Sie sie wie als Standarddaten verwenden. Es ist wie die Daten, die wir einfügen, tun die Datenbank. Es ist wie Aussaat. So können wir auch die Aussaat verwenden, die auch hier. Also werde ich das schnell machen. Wie importiere ich Daten mit einem Kompass? Sie müssen nur hier gehen, klicken Sie auf Kategorien, zum Beispiel auf den Sammlungsnamen. Und dann können Sie sagen, Daten importieren. Und dann navigieren Sie zu der Akte, in der ich Ihnen gegeben habe. So gab ich Ihnen zum Beispiel Kategorien oder die Elemente und andere Tabellen. Dafür können Sie für diese Kategorien verwenden und Sie müssen hier angeben, dass Sie JSON haben. Und jetzt machen wir den Import. Und dieser Import wurde abgeschlossen. Und wir werden sehen, unsere Daten befindet sich hier. Also werden wir das Gleiche für alle Tische tun. Das werde ich schnell vor dir machen. Also habe ich hier einen neuen Tisch erstellt. Ich nenne es Benutzer, oder Benutzer. Und diese Benutzer, ich werde diese Daten auch importieren. Also müssen wir das Gleiche für alle anderen Tabellen tun. Also, jetzt ist meine Datenbank-Produktion voll. Also werden wir diese Datenbank verwenden, aber wir sind nur für ihre Produktanwendung oder die entwickelte Anwendung auf Heroku lokale Entwicklung, wir verwenden immer noch das Problem der Datenbank. Also, wie wir das dynamisch machen können, wie wenn ich ISA für die Anwendung bereitstelle, verwendet Datenbank. Aber wenn ich entwickle, möchte ich der Anwendung sagen, okay, benutze diese Datenbank. Es ist also ziemlich einfach. Wir werden diese Umgebungsvariablen konfigurieren, die für Heroku bevorzugt werden , weil wir diese Variablen verwenden und wir sie innerhalb der Anwendung verwenden. Und bei der Entwicklung können wir zum Beispiel diese Verbindungszeichenfolge beibehalten . Aber bei der Produktion werden wir eine weitere Verbindungszeichenfolge haben. Aber hier, wie Sie sehen, dass die Umgebungsdatei nicht bereitgestellt wird, weil wir zu git ignorieren hinzugefügt haben. Dies wird also nicht in der Bereitstellung auf Heroku sein weil Heroku nicht wissen wird, dass wir hier Umgebungsdatei haben. 192. Entwicklung und Produktumfeld.: Okay, jetzt, wie wir der Anwendung sagen können, diese Datenbank der Produktion zu verwenden, nicht die Datenbank der Entwicklung. Zunächst einmal, wenn Sie sich erinnern, haben wir die m-Datei hinzugefügt und in der Enddatei haben wir sie für die Verbindung mit der Datenbank verwendet, die wir in MongoDB Atlas erstellt haben. So wird die Verbindungszeichenfolge in der m-Datei gespeichert, wie Sie hier sehen, und wir haben vorher darüber gesprochen. Also jetzt werden wir eine Verbindungszeichenfolge haben, die für die Produktion anders ist. Also in diesem Fall, okay, wir verwenden diese Verbindungszeichenfolge hier in Prozessverbindungen zu machen. Aber wie ich Ihnen gesagt habe, dass, wenn wir diese Anwendung bereitstellen, diese M-Datei, hübscher, IC und Node-Modul, sie nicht auf den Server hochgeladen werden. Von wo aus die bereitgestellte Anwendung weiß, welche Verbindungszeichenfolge verwendet werden soll. Denn in diesem Fall, wenn ich bereitstelle, wird es nicht wissen, welche Verbindungszeichenfolge verwendet werden soll, da sie hier nicht definiert ist. Und dann werden wir einen Verbindungsfehler haben. Also, lassen Sie uns zuerst alles ändern, was wir haben, wie zwei oder in unserer app.js, alles, was wir ändern müssen, um in der Produktion zu sein. Zum Beispiel, dieser Name, werde ich eine Datenbank verwenden, aber im Ausland, nicht diese. Also müssen wir das auch ändern. Wir müssen auch einige verwenden, eine andere Variable, die wir es nennen können dB-Namen, zum Beispiel. Und wir können diesen DB-Namen in der Datei geben. So können wir, nachdem das eine Zeile war, können wir DP-Name sagen. Und dann für lokale, werde ich diese E-Shop-Datenbank verwenden müssen. Aber in der Produktion werden wir eine andere verwenden. Ok, was sonst? Die Anwendung verwendet also auch einen bestimmten Port. Also, wenn Sie die Anwendung in der Produktion starten, wie Sie hier sehen, wenn wir zum Browser zu unserer Anwendung gehen und wir verwenden, sagen wir, zum Beispiel, öffnen Sie die App hier oben. Dann werden wir eine neue App haben. Wie Sie hier sehen, haben wir den Link, aber er enthält keinen Port oder wie zum Beispiel 3000 oder so. Denn vorher hatten wir wie lokale Gastgeber wie diese und 3000. Also haben wir hier nicht die Tafel. So, wie wir das Board auch dynamisch machen können. Also müssen wir das auch tun, weil es in der Produktion einen anderen Port verwenden wird. Also auch hier müssen wir eine Variable definieren. Wir können es wie eine Konstante geben und wir sagen Port. Und dieser Port wird auch von Umgebungsvariablen kommen. Und es wird Port genannt werden. Wenn kein Port vorhanden ist, verwenden Sie 3000. Also nur für den Fall, wenn dieser Teil nicht kommt oder es mit undefiniert kommt. Also, dann benutzen wir dieses Board hier. Und in meiner Datei kann ich diesen Port definieren. Also können wir auch hier sagen, verwenden Sie den Hafen, wir können sagen, Port wird 3000 sein. Aber denken Sie daran, dies ist nur für die lokale Entwicklung. haben wir nicht für die Produktion. Die Produktion wird es durch einen anderen Port ersetzen. Aber das Schlüsselwort dafür wird es so gekauft werden. So wird Heroku selbst einen Port finden oder erstellen. Normalerweise ist es Port 80, der der Standardport für das HTTP ist. Okay, jetzt haben wir ein Problem. Also, wie die Produktion ohne Verbindungszeichenfolgenvariable. So, wie wir das schaffen können. Also gehen wir wieder zum Browser, in dem wir unsere Anwendung erstellt haben. Und dann werden wir oben etwas finden, das Aktivität oder Einstellungen genannt wird. Und in ihren Einstellungen finden Sie eine offenbaren config vars finden. Das sind also die Konfliktvarianten, die in der Produktion verwendet werden. Also in diesem Fall muss ich zu meiner Anwendung hier sagen, verwenden Sie die Verbindungszeichenfolge, aber wir sind Produktion eins. Also werde ich wieder zum Browser gehen und dann eine neue Schlüsselverbindungszeichenfolge erstellen , die sein wird, was es sein wird. Die Verbindung bleibt gleich, aber mit einer anderen Datenbank. Also werde ich das gleiche benutzen. Und dann werde ich sagen, dass nicht E-Shop-Datenbank verwenden, aber jeder davon gehorcht im Ausland. Und auch, wir müssen auch eine andere Sache schaffen, die DP-Name genannt wird. Wir werden diesen Namen scharf verwenden, dass die Basis, also auch hier, E-scharf, das gehorcht auch breit. In diesem Fall wird die Anwendung wissen, dass es eine Verbindungszeichenfolge gibt und er würde sie von hier lesen. Darum müssen wir uns keine Sorgen machen. Es ist also besser, alle Umgebungsvariablen zur Verbindunghinzuzufügen alle Umgebungsvariablen zur Verbindung da sonst unsere Anwendung fehlschlägt. Was wir hier verwenden müssen, API URL, die die gleiche Sache sein wird, die wir dort hatten. Es wird api Schrägstrich v1 sein und wir fügen es Geheimnis hinzu. Das Gleiche. Es sollte auch die gleichen Großbuchstaben oder Kleinbuchstaben sein, da die Groß- und Kleinschreibung beachtet wird. Und wir werden hier das Geheimnis haben, oder Sie können ein anderes Geheimnis verwenden. Wenn ich also meine Anwendung bereitstelle, wird sie nach Prozess suchen. Aber unser lokaler Fehler wird nicht bereitgestellt, weil wir es im guten Ignorieren haben. So wird es nicht auf dem Server sein, so dass Heroku nicht von der Arbeit weiß, um es zu bekommen. Er wird zu den Konfliktvars gehen und dann diese Werte lesen. In diesem Fall haben wir eine andere Datenbank als Produktion und eine Datenbank für die lokale Entwicklung. In der nächsten Vorlesung werden wir sehen, wie wir das nutzen können und wie wir die Anwendung auf dem Server bereitstellen können. 193. Stellen der App und Testversion: Gehen wir nun zurück zur Anweisung zum Bereitstellen der Anwendung. Also, hier, wenn wir wieder zur Anwendung gehen und wir auf Deploy klicken, und wir werden wieder unsere Anweisung sehen. Also haben wir bereits diese Verbindung gemacht und wir haben die Verbindung zwischen der Anwendung und dem Git-Repository von Heroku bereitgestellt oder hergestellt. Jetzt werden wir diese Kommentare ausführen. Zuallererst müssen wir den Code zum Guten hinzufügen, also müssen wir ihn verpflichten. Wenn Sie also nicht wissen, was es ist, ist es so, als würden Sie Informationen darüber geben, wie zum Beispiel welchen Code Sie in Ihr Repository übertragen. Also, wenn ich mich ändere, dann sage ich, okay, ich habe das geändert, ich entferne das. Also würde ich in der Commit-Nachricht sagen, dass der Fehler-Handler entfernt wird. Auf diese Weise behalten Sie den Überblick über Ihre Änderungen am Projekt. Also hier können wir das auch mit Heroku machen. Also müssen wir git add dot und dann git commit dash am machen, es besser machen oder eine Nachricht. Also zuerst, lasst uns das Gute tun. Dies bedeutet, dass wir alle Dateien des Projekts zum Git-Repository hinzufügen , um sie für das Hochladen auf den Server vorzubereiten. Und danach müssen wir das Git-Commit machen und dann Bindestrich m und dann eine Nachricht angeben. Also zum Beispiel, zuerst bereitstellen, sterben. So können wir auch diese Commit-Nachricht hinzufügen. Danach müssen wir den Code auf die cetera schieben. Wir sind, wie wir das mit diesem gemeinsamen Git Push Heroku Master machen. Also werde ich zum Terminal gehen und dann diesen Befehl hier einfügen. Und dann wird es alle Informationen oder den ganzen Code hochladen, den ich angegeben habe, außer den Dateien oder den Dateien und Ordnern, die ich in git angegeben habe, ignorieren. Also in diesem Fall haben wir alle unsere Dateien der Entwicklung sind da. Wie Sie hier sehen, ist es Dart, stellen Sie die Anwendung bereit, die Dateien fertig, es, beginnen Sie mit dem Erstellen. Und jetzt zeigt es alle Fortschritte bei der Installation von Bibliotheken. Es installiert auch npm für die Installation der Pakete, die wir für unsere Anwendung verwendet haben. Und dann wird es Knotenmodule haben, aber auf dem Server, nicht dieses. Danach wird es die Anwendung für eine schnellere Nutzung komprimiert. Und Sie müssen auch daran denken, die Bilder hochzuladen, die im Upload-Ordner sind , damit wir die Bilder als auch in der, auf dem Server sehen können. Wenn Sie also nicht die Bilder haben, die ich auch für Sie angehängt habe, weil sie auch in der Datenbank sind, die Links zu diesen Nachrichten oder Bildern. Sie müssen sie auch auf Ihren Server hochladen. Damit die Bereitstellung abgeschlossen ist, die Bereitstellung verifiziert, erledigt. Okay, Gehen wir zurück zum Browser und gehen Sie zur Anwendung und aktualisieren Sie hier. Schön. Wir haben eine Nachricht, der Benutzer ist nicht autorisiert. Das ist großartig, denn wenn Sie sich erinnern, haben wir unsere API autorisiert. Also, wenn Sie sich in den Routen oder in den Helfern erinnern, sagten wir JWT, dass wir einige Routen von der Authentifizierung ausschließen werden, zum Beispiel, um ein Produkt zu bekommen oder eine Kategorie zu bekommen. Lassen Sie uns also versuchen, ein Produkt im Browser zu bekommen. Also werde ich hier genau sagen, wenn Sie sich erinnern, wie wir mit lokalen Host und 3000 gemacht haben und dann habe ich API v1, und dann setze ich Produkte zum Beispiel. Das ist also wie eine Get-Anfrage, wenn Sie es versuchen, Okay, wir haben alle Daten aus unserer Datenbank. Sie können das nicht so gut wie Postman ausprobieren, wenn Sie sich erinnern, wir haben viel mit dem Postboten gearbeitet und wir haben unsere API in Postman ausprobiert. Also hier werde ich eine neue Registerkarte für eine neue GET-Anfrage öffnen, und dann werde ich diesen Link setzen. Also der Link meiner Anwendungs-API, v1-Produkt. So wird es genau sein, wie ich es vom lokalen Host mache. So sehen Sie, dass alle diese Informationen gespeichert sind und wir verwenden die Produktionsdatenbank. Wir verwenden nicht die Datenbank, die wir für lokale hatten. Also, um das zu beweisen, Lassen Sie uns eine Änderung in der Datenbank mit Kompass machen. Also werde ich zu meiner Bewerbung gehen, ich werde zur Produktionsdatenbank gehen. Ich werde darauf klicken und die Produkte öffnen. Und ich werde zu dem gehen, wo es anfängt, ich erinnere mich als mol, so etwas. Also hier die kleinen, sehen Sie hier das kleine und das ist. Also lasst uns das ändern. Wir können sagen, ändern Sie diesen Satz. Wir gehen auf die, so klicken wir auf die kleine hier und wir können sagen, zum Beispiel, im Ausland. So können wir das größer machen und sagen Produktion. Also können wir diese Wortproduktion hier nicht hinzufügen. Also, nachdem wir aktualisieren, und dann gehen wir zum Postboten, und dann klicken wir auf Senden. Okay, wir haben hier Produktion. Dies ist also der Beweis, dass ich die breite Datenbank verwende, aber auf meinem lokalen Host, Lassen Sie uns versuchen, Anwendung auf lokalen auszuführen. So können wir sagen, npm starten, wie wir die Anwendung lokal ausgeführt wurden, okay, Der localhost 3000, alles ist in Ordnung. Jetzt gehen wir zu GET-Anfrage, aber auf dem lokalen Host. So haben wir hier zum Beispiel localhost 3000 API-Produkte. Und wenn wir es nennen, werden wir sehen, dass wir die Datenbank aufrufen, die sich im lokalen Host befindet. Und wenn wir es überprüfen, diese Datenbank, werde ich hierher gehen. Und ich werde dieses Problem der Datenbank überprüfen. Gehen Sie zu den Produkten. Ich werde viele Dummy-Produkte haben, die wir während der Entwicklung verwendet haben. Also in diesem Fall unterscheiden wir jedes Mal, wenn ich auf meine Anwendung Thumb Sache bereitgestellt, können Sie dann eine Datenbank ihrer Produktion verwenden. Zum Beispiel werde ich hier etwas ändern. Ich werde ein Konsolenprotokoll hinzufügen. Welches Beispiel Konsolenprotokoll. Wie mit, wir verwenden. Zum Beispiel können Sie zusätzliche hinzufügen und dann können Sie den DB-Namen hier verwenden. Wenn ich also speichere, okay, auf meinem lokalen, werde ich sagen, dass wir E-Shop-Datenbank verwenden, aber wir müssen das bereitstellen. Also hier, unser lokaler, lokaler Host, wir haben e-shop-Datenbank, wie wir für die Entwicklung wissen. Aber wenn wir diese bereitstellen, würden wir bekommen, wir verwenden das Problem der Datenbank gebracht Tee oder Produkt. Auf diese Weise, wie wir Änderungen schieben können, müssen wir wieder git add setzen und dann eine Nachricht hinzufügen. So zum Beispiel, Kommentare, können wir sagen, ändern, und dann drücken wir die Eingabetaste, und dann verwenden wir wieder gemeinsam Push. Also git, push heroku master, es wird wieder bereitgestellt. Wie Sie hier sehen, wird es wieder bereitgestellt. Der gleiche Prozess, den wir im ersten Schritt gesehen haben. Jetzt ist die Bereitstellung abgeschlossen. Wie wir sehen können, dass, zum Beispiel, diese Nachricht, die wir verwenden, wie die Datenbank, Sie, Ich meine, wie wir das Konsolenprotokoll oder die Fehler, die wir in der Entwicklung sehen sehen sehen. Um zu sehen, dass Sie einfach gehen zwei mehr hier, und Sie können hier eine Ansicht Protokolle überprüfen. Wenn Sie also darauf klicken, werden Sie alle Protokolle sehen, wie Sie lokal entwickeln. Also sagen wir hier, wir verwenden e-shop-Datenbank im Ausland. Also, diese sehr großartige Sache und genau wie wir die Anwendung auf lokaler und auch hatten, wird es wie die Überwachung für unsere API machen. Wenn ich diese API aufrufe, gehe ich zu den Protokollen. Ich werde sehen, dass, okay, wir haben Informationen Get API v1-Produkte und einige andere Informationen über die Anfrage und Rückkehr und wie lange es dauerte. Aber wenn wir in die Datenbank gehen, müssen wir zum Beispiel ein Bild überprüfen. Also werde ich hier gehen und ich werde in die Datenbank gehen und ich habe Produkte. Wir werden ein Problem mit den Bildern haben. Also, wenn Sie sich erinnern, haben wir einige Bilder mit unserem E-Sharp hochgeladen. Also, wenn ich hier gehe, werde ich sehen, dass im Produkt sie immer noch diesen localhost 3000 haben. Leider ist dies nicht möglich, es zu ersetzen. Sie müssen also alle diese Strings ersetzen, die mit dem lokalen Host verbunden sind. Sie müssen sie jährlich durch den Link ersetzen, der für Ihre Bewerbung zur Verfügung gestellt wird. Also in diesem Fall gehe ich hier zu meiner Bewerbung und kopiere dann diesen Teil, der von hier zu.com ist. Also werde ich all das kopieren. Und dann werde ich wieder auf den Campus gehen und von HTTP zu localhost ersetzen. Auch der Port ist nicht notwendig und dann werde ich diesen Teil hier aktualisieren oder aktualisieren. Also klicken wir auf Update und dann wird es aktualisiert. Also, wenn ich jetzt zur Anwendung gehe und die URL des Bildes einfüge, kann ich das Bild erfolgreich sehen. Ansonsten sind alle Bilder leider immer noch auf localhost 3000. basierend auf Ihrem Namen Ihrer Anwendung Dafür müssen Siebasierend auf Ihrem Namen Ihrer Anwendungall dies für die Datenbank ersetzen. Natürlich, nachdem wir diese Datenbank verwenden, zum Beispiel in einem Front-End oder wenn wir es sind, werden Sie Postman verwenden, zum Beispiel, wenn ich ein Produkt mit dieser API-URL posten werde, wird es das Bild basierend für diese URL, so dass es in der Datenbank so gespeichert wird. Aber weil wir diese Datenbank in der Entwicklung verwendet haben, müssen Sie das manuell tun. Weil wir auch verwendet haben, wenn wir ein Produkt posten. Wenn Sie sich erinnern, wenn wir gehen, um das Produkt und in der Post Produkt wir wie das Bild mit dem Host zu posten. Ich bekomme den Host aktuellen Host und lege dann den Rest hier, um den Bildpfad zu speichern. Der Host wird also von dem Host genommen, den Sie verwenden, und von dem aus die API aufgerufen wird. In diesem Fall müssen Sie sich also keine Gedanken über die Links , die wir für die hochgeladenen Dateien hochladen möchten. So haben wir jetzt eine voll funktionsfähige API auf dem Server. Die Anwendung wurde bereitgestellt. Natürlich, wenn Sie diese Heroku.com entfernen und Ihre eigene Domain erstellen möchten, ist es nicht kostenlos. Dafür musst du bezahlen. Und natürlich können Sie es unter Ihrer eigenen Domain haben. Also in der Front-End-Anwendung oder jeder Front-End-Anwendung, wenn Sie ihre Front-End-Anwendung bereitstellen, nicht ihre Web-API. Sie können sagen, dass für meine Anwendung im Frontend in der Produktion diese API-URL für alle wie die Anwendung verwendet wird. Und wenn Ihre Anwendung bereitgestellt wurde, sie eine Verbindung zu dieser API her und ruft die Daten von dort ab. 194. Git und Github vorbereiten: Wenn wir das Backend bereitstellen, habe ich Ihnen gesagt, Anwendung zu installieren, die GitHub Desktop genannt wird. Ich werde wieder den Link mit dieser Vorlesung setzen, um zu sehen, wo die Installation dieser Anwendung. Github bietet ein sehr großes Tool für die Bereitstellung von Anwendungen, die sie JavaScript, CSS und HTML enthalten. Und Sie können Ihre Anwendungen dort bereitstellen und Sie können sie im Browser sehen. So können Sie eine Domain haben und dann können Sie Ihre Anwendung im Browser veröffentlicht sehen. Also gehen wir in diesem Kurs zu zeigen, wie wir die Anwendung auf GitHub Pages bereitstellen können. Und wenn Sie andere Wege sehen möchten, zum Beispiel wenn Sie sehen möchten, wie wir das über FTP in unserer eigenen Domain bereitstellen können. Außerdem kann ich ein Video auf dem Kurs machen. Nimm mir einfach eine Nachricht, wenn du willst, dass ich das tue. Zunächst einmal werden wir diese GitHub Pages Publikation haben. Dafür müssen wir unser aktuelles Repository, unser aktuelles Projekt, das wir mit Git, GitHub Desktop-Anwendung für die Verbindung mit Ihrem Repository erstellt haben , verbinden. Weil wir Repository auf unserem GitHub-Konto erstellen werden. Also zuerst müssen Sie ein Repository aus dem Internet klonen. Dieser wird Sie darum bitten, in Ihrem Konto auf Ihrem GitHub zuzuordnen. Um dies zu tun, müssen Sie nur auf Anmelden klicken. Und dann werden Sie aufgefordert, den Browser zu öffnen, in dem Sie sich bereits auf GitHub im Browser angemeldet haben . Also, wenn Sie auf Weiter als Browser klicken, und dann wird es für mich geöffnet GitHub Desktop-App. Und wenn Sie dann auf Open GitHub Desktop App klicken, werde ich mit meinen Repositories verbunden sein, die ich im Browser anmelde. Und dann werde ich sie hier haben, damit ich sie klonen oder etwas mit ihnen machen kann. Wenn Sie jedoch ein Projekt von Angular mit NX erstellen, kommt das Projekt standardmäßig. Wie Sie hier sehen, sind die Projektdateien, die wir wie hier gearbeitet haben, Apps, Lippen oder all dies. Und wir haben hier die Anwendungen. Wie Sie sehen, haben wir eine Punkt-Git-Datei und dieser Dot get Ordner, sorry, wir müssen es entfernen, weil es mit einem anderen Repository verbunden ist , das von einem X erstellt so weit, dass es besser ist, diesen Ordner zu verschieben. Und auch das für ich erwähnen möchte, dass dieser Ordner standardmäßig auf Mac-System ausgeblendet werden kann. Also, was Sie tun müssen, ist, drücken Sie einfach Befehl und Shift und Punkt, und dann gibt es Ihnen die Möglichkeit, sie zu sehen. Also werde ich Command Shift und Punkt sehen, und wie Sie hier sehen, zeige und verstecke ich sie. Unter Windows. Sie sehen den Ordner klar und Sie werden ihn sehen, und Sie können ihn direkt löschen. Aber für die Sicherheit ist aktiviert, Mac versteckt jene Dateien, die mit einem Punkt beginnen. Also lassen Sie uns den Punkt get Ordner löschen, der bereits von einem x erstellt wird und ich werde auf Verschieben klicken, um zu gewinnen. Wenn Sie verbunden sind, ist Ihr Projekt natürlich mit einem Repository verbunden. Sie müssen diesen Schritt nicht ausführen und müssen ihn nicht aus Dateien entfernen. Jetzt gehen wir zurück zu GitHub Desktop-Anwendung, um ein neues Repository zu erstellen, aber von der Festplatte. Also, was ich hier tun muss, ist nur ein neues Repository zu erstellen. Und dann werde ich ihm einen Namen mit dem gleichen Namen des Ordners geben, in dem sich diese Codequelle befindet. Also, wenn ich hier eine Ebene nach oben gehe, sehe ich, dass ich hier blaue Bits habe. Und in blauen Bits habe ich die Quelldateien, die ich mit n-x gearbeitet und erstellt habe, um meine Angular-Anwendung zu erstellen. So weit, dass wir eine Ebene nach oben gehen, wie in der Art und Weise, dass wir den Ordner ihrer Quelle sehen. Und dann klicken wir auf Öffnen. Und dann müssen wir hier den gleichen Namen des Ordners setzen, der den Quellcode enthält. Also in meinem Fall hier werde ich eine blaue Bits sagen und dann werde ich auf ein Repository erstellen klicken. Also in diesem Fall werde ich das vorhandene Repository haben, das ich bereits habe. Und es wird mit einem GitHub oder GitHub Ordner initialisiert werden. Wie Sie hier sehen, haben wir den Git-Ordner wieder zurück, aber lokal initialisiert. Wir haben es noch nicht mit unserem Repository auf GitHub verbunden. Wie können wir das mit unserem GitHub-Repository verbinden? Zuallererst müssen Sie auf diese Schaltfläche klicken. Sie sagen Repository veröffentlichen. Natürlich sind Sie bereits in Ihrem Konto auf GitHub, auf GitHub Desktop eingeloggt. Und auch, wir werden ein Repository dafür erstellen. Also zuerst müssen Sie ihm einen Namen geben. Es ist also nicht notwendig, hier haben Sie die Freiheit, den Namen zu geben, den Sie wollen. Zum Beispiel würde ich E-Shop dort so erstellen. Und dann ist es immer, wenn Sie GitHub-Seiten verwenden möchten, müssen Sie diesen Code nicht privat halten. Du musst es als Öffentlichkeit schaffen. Um es zu machen, ist es privat. Und mit GitHub-Seiten müssen Sie bezahlen. Aber dafür ist es umsonst. Sie können es einfach als öffentlich machen und dann klicken Sie auf Repository veröffentlichen. Also in diesem Fall, nachdem Sie sicher sind, dass der Dot Get-Ordner zurückgegangen ist, ist es wie X hier erstellt, nicht hier. Sie müssen also wissen, dass es sich wirklich im Quellcode Ihrer Anwendung befindet. Sie müssen also diesen Dot Get-Ordner haben, bevor Sie ein Repository erstellen. Okay, ich gehe zu meinem GitHub-Konto, um sicherzustellen, dass, wenn es wirklich ist, das Repository erstellt wird. Wie Sie hier sehen, habe ich, wenn ich zu Repositories gehe, mein Repository, das hier erstellt wird, initialisiert mit den Dingen, die ich standardmäßig von einer x-Dokumentation erstellt habe. Wie Sie hier sehen, haben wir alle Dateien und die Quelldateien hier. Okay, was wir als nächstes tun müssen, ist die Anwendung zu erstellen und sie dann auf GitHub Pages zu veröffentlichen. Und das, was wir in der nächsten Vorlesung sehen werden. Für den Moment sind wir bereit. Wir müssen nur den Build der Anwendungen wie der Engine Shop und der Admin auf unseren GitHub Pages veröffentlichen . 195. Frontend erstellen: Okay, jetzt haben wir unser Repository auf GitHub veröffentlicht. Jetzt müssen wir die Anwendung erstellen und es wird sein, oder wir werden in der Lage sein, die Änderungen zu sehen und wir können auf die Website unserer Ausgabe zugreifen. Auf diese Weise müssen wir zu diesem Code gehen. Und wenn Sie sich erinnern, haben wir das Projekt eröffnet, das Front-End-Projekt ist. Und wie Sie sehen, gehen wir hier zur Wurzel. Wir müssen gar nichts tun. Schließen wir alle Befehle oder die Terminals, die nicht benötigt werden. Jetzt öffnen wir ein neues Terminal. Auch hier bedeutet der Build, dass ich meine Anwendung erstellen möchte. Ich muss nicht alle diese Dateien hochladen. Ich möchte, dass die Dateien, die mir eckig geben veröffentlichbar sind und sie in der Produktion verwendet werden können. Also muss ich nicht alle diese Quelldateien und Dateien hochladen und sehen, wie meine Anwendung dort funktioniert. Denn ansonsten lade ich die Quelldateien hoch. Nein, angular hat eine Eigenschaft, die Ihnen die Möglichkeit gibt , die Anwendung zu erstellen, die alle Dateien komprimiert. In einigen wenigen Dateien, Ihrem Projekt, wird alles in diesen Dateien sein, wie wir später sehen werden. Also, wenn wir auf das Paket JSON gehen, werden wir im Skript mehrere Skripte sehen. So wie Sie sehen, dass wir Build-Skript haben, das sagt mg gebaut. Aber wenn Sie sich erinnern, haben wir gesagt, dass Angular oder NX irgendwie über eckig gebaut ist. So können Sie die gleichen Kommentare mit einem x machen, wie das gleiche, wie Sie mit Energie oder eckigen Kommentaren machen. Bisher, dass Sie eine Anwendung erstellen, wenn Sie eine installiert haben, sagen Sie einfach NX-Build und dann geben Sie die Anwendung an, die Sie verwenden möchten. Beispiel, ich will admin oder ich will und Sie kaufen für jetzt. Ich will n G-scharf. Also können wir nicht sagen, Angie bauen, diese Weise einkaufen. Also, wenn Sie die Eingabetaste drücken, wird die Anwendung in Rechnung gestellt und es wird in einem Ordner angegeben wird, wird der Osten genannt. Also in diesem Ordner, in den Apps, werden Sie Ihre Anwendung hier sehen. So wie Sie sehen, dass Build fertig ist und wir haben nur wenige Dateien im Ordner dist. Wir haben also nicht die gesamte Projektquelle und diesen Ordner, die wir auf unseren GitHub hochladen werden. Oder Sie können es auf Ihren Server hochladen. Dann kann es gesehen werden. Oder Sie können die Anwendung sehen, die wir bereits erstellt haben und Sie können es auf der Website durchsuchen, auf der Öffentlichkeit. Aber wenn wir dieses Projekt auf GitHub Pages bereitstellen möchten, hat GitHub Pages einige Bedingungen, die wir beachten müssen. Zuallererst machen wir das Gleiche. Wir machen NX bauen jeden Shop, aber wir müssen einen Ordner angeben, der Ausgabe-Bad genannt wird. Und hier geben wir in diesem Ausgabepfad einen bestimmten Pfad an, den GitHub mag, der als docs bezeichnet wird. Und dann gibt es ein Schlüsselwort, das Bayes HRF genannt wird. Und hier geben wir HRF oder den Link , der in der Indexdatei generiert wird, wie Sie hier sehen. Denn hier wird es sagen, Basis H ref ist Schrägstrich. Aber wir brauchen unsere Basis HRF, um den gleichen Namen des Projekts, das wir auf GitHub erstellt haben, den gleichen Namen des Projektarchivs. Wenn Sie sich erinnern, habe ich diesen Repository-Namen, der E-Shop genannt wird. Also müssen wir den gleichen Namen setzen, weil GitHub keinen anderen Namen sieht, nur den Namen des Projektarchivs. Also müssen wir hier sagen, Schrägstrich, es ist sehr wichtig, Schrägstrich zu setzen. Vergiss es nicht. Sie müssen E-Shop sagen, der gleiche Name genau des Projektarchivs und dann ein weiterer Schrägstrich. In diesem Fall werden wir unsere Anwendung unter diesen Bedingungen erstellen. Also lassen Sie uns die Eingabetaste drücken und sehen, was es bauen wird. Schön, der Bau ist fertig. Aber natürlich nicht auf dem Ordner dist, es wird auf diesem docs Ordner sein, wie Sie hier sehen, Tooele ist genau der gleiche Build, den wir im Ordner dist haben, aber es wird auch in einem anderen Ordner sein. Und die Basis H ref wird e-Sharp sein, wie wir in dem Kommentar angegeben. Dies sind also die grundlegenden Bedingungen, die Sie tun müssen, um Ihre Anwendung zu erstellen. Natürlich sind wir noch nicht fertig. Wir bauen jetzt die Entwicklungsumgebung auf. Wir bauen ihre Produktion nicht auf. Aber ich möchte Ihnen nur Schritt für Schritt zeigen, um für Sie mehr und mehr klar zu sein. In der nächsten Vorlesung werden wir sehen, wie zu bauen oder alle dieses Projekt oder jene Dateien bereitzustellen, um in der Lage zu sein, dass wir die Website, die wir für N D scharf erstellt haben, durchsuchen können. 196. Frontend auf Github einsetzen: Okay, jetzt danach haben wir die Bereitstellung in Dogs Ordner erstellt und wir werden das auf dem Server bereitstellen, oft GitHub-Seiten. Also, wie können wir das tun? Zuallererst werde ich zu GitHub Desktop gehen. Wie Sie hier sehen, haben wir vor kurzem mehrere Dateien erstellt. Es ist besser, immer einen neuen Zweig auf GitHub zu erstellen, der dem Namen des Zweigs entspricht, in dem Sie Ihre Anwendung immer auf GitHub Pages bereitstellen werden . Also können wir das sagen. Brian kann GH sein und dann können wir Seiten wie diese sagen. Und dann erstellen wir einen neuen Zweig. Und dann klicken wir auf Erstellen Sie einen Zweig. Also tauschen wir diese Marke aus. Aber hier müssen wir sagen, bringen Sie meine Änderungen auf GitHub Pages, weil wir diesen Build erstellt haben. Also müssen wir auch diese Dateien verschieben, die neuen Dateien, wie Sie hier sehen, alle in Ihnen. Wir müssen sie auch bewegen. Dann verzweigen Sie. Also sage ich blinzeln meine Änderungen an Seiten. Wenn wir also gehen und auf Zweig wechseln klicken können, werden sie alle hierher verschoben. Danach besteht der Schritt darin, den Zweig zu veröffentlichen. Wir müssen diesen Zweig auf GitHub-Seite und auch in unser GitHub-Repository setzen. So, jetzt ist alles veröffentlicht. Aber zuerst müssen wir diese Nachricht begehen. Also müssen wir diese Dateien auch kommentieren. Wir müssen sagen, dass diese Akten neu sind. Wir müssen sie verpflichten und sie auf den Server schieben. Also müssen wir GitHub sagen. Dafür können wir eine Nachricht erstellen. Wir können GitHub Pages sagen, vorhersagen Bär, zum Beispiel. Und dann setzen wir alle, die wir sagen können, Commit aufgrund der Zweig GH Pages. Es ist engagiert. Und dann müssen wir noch einmal drängen. So drücken wir wieder unsere Veränderungen, die wir hier geschaffen haben. Jetzt haben wir keine Änderungen an der Datei. Gehen wir wieder zu unserer GitHub-Seite. Und ich gehe zu dem Repository, das ich erstellt habe, das E scharf genannt wird. Denken Sie also daran, dass Sie zum selben Repository gehen und danach gehen wir zu Einstellungen, die sich hier im Repository befindet. Und dann klicken wir auf Einstellungen und beantworten Dinge. Sie werden wie mehrere Optionen sehen. Einer von ihnen ist Seiten. Und standardmäßig wird die Anwendung Schlamm auf dem Stammordner veröffentlicht, wir müssen den spezifischen Ordner geben. Wir müssen die Dateien geben, die wir durch den Build erstellt haben, die sich innerhalb von docs befinden. Wir müssen das nicht alles bauen. Das ist falsch, weil nicht funktioniert. Aber dafür müssen wir einen Ordner angeben. Ich werde ihm nur einen Dreck geben. Es wird hier erscheinen. Also werde ich sagen, geben Sie mir den Ordner docs und dann speichern. Und wie Sie sehen, steht Ihre Seite unter diesem Link veröffentlicht. Wenn Sie auf diesen Link klicken, werden wir sehen, dass wir eine Standardseite haben, die die ReadMe war. Es dauert einige Zeit, weil wir irgendwann warten müssen , wenn Sie zwischen den Ordnern wechseln. Sie müssen also ein wenig warten, bis es eingesetzt wurde. Also nach einiger Zeit wird es bereitgestellt. Und auch, Sie können diese Domain überprüfen. Wie Sie hier sehen, wurde es eingesetzt. So nett. Also haben wir all diesen Link und wir haben unser Ende. Du shoppst hier ein. Aber es gibt ein Problem, das keine Daten ist. Es besteht keine Verbindung zur Datenbank. Und wenn Sie hier überprüfen, die Konsole innen, würden wir eine Menge Fehler bekommen. Was sind diese Fehler? Das heißt, dass localhost 3000. Also sind wir immer noch auf dem lokalen Host. Das Backend, es ist immer noch eine Verbindung mit dem lokalen Host, fragt nach Kategorien und fragt nach Produkten. Also müssen wir diesen Link ändern, localhost 3000 zu unserer Heroku-Anwendung, die wir erstellt haben. Und diese Anwendung wird e-Sharp zurück und blaue Bits Heroku App sein. Und hier können wir auf die APIs zugreifen, wie wir im Build des Back-Ends gesehen haben. Also, wie wir das beheben können. So wie Sie hier sehen, dass es sagt, dass Ihre Website veröffentlicht wird. Wenn Sie also immer einige Änderungen vornehmen, müssen Sie ein wenig warten, bis die Änderungen, die hier veröffentlicht werden, zu sehen sind. Es braucht also ein bisschen Zeit. Jetzt, nachdem wir veröffentlicht haben, müssen wir diesen Link ändern. Also, wenn Sie sich erinnern, in der Anwendung, als wir die Anwendung zu erstellen, hatten wir Umgebungen Ordner. Und ich sagte Ihnen, dass wir zwei Arten von Umgebungen haben, in denen wir nutzen werden. Einer ist für die Produktion, und hier haben wir unsere API-URL und eine für die lokale Entwicklung platziert. Und wir setzen vier in dieser Zeit für beide, das gleiche, nur für den Fall, dass wir die Produktion bauen werden. Aber jetzt kamen wir zu diesem Moment. Wir müssen ersetzen. Der Link, der hier für den lokalen Host erstellt wird. Aber auf Umwelt prod Datei, müssen wir es auf unseren Heroku Link ändern. Also hier werde ich http localhost 3000 durch den Link ersetzen , den ich von der Heroku-Anwendung hatte. Also werden wir diesen haben und das wird meine Produktion sein. Wenn wir das speichern, wird es für alle unsere Anwendungen gespeichert. Wir müssen das Projekt wieder aufbauen. Aber hier, nachdem wir das Projekt wieder aufgebaut haben, müssen wir eine Flagge verwenden, die breit genannt wird. Wie bauen, breite Aktion. Ich brauche die Produktion darüber hinaus. Ich will nicht den normalen Aufbau, die Entwicklung darüber hinaus, weil wir hier Stahl haben, die Entwicklung gebaut. Wir haben nicht die Produktion. Wie Sie sehen, haben wir hier rückgängig gemacht. Und der gesamte Quellcode ist hier verfügbar, weil dies Entwicklung ist, Build ist keine Produktion. Und die Bündelgröße davon ist sehr groß, weil es nicht komprimiert ist. So dass die Produktion gewachsen Knochen Pressen für mich alle Akten. Und es wird verkleinert und es wird schneller sein, besonders für schwache Internetverbindungen. Dafür müssen wir unseren Befehl hier mit einem breiten Flag kennzeichnen, wir müssen keinen ausgewiesen in einem Job verwenden. Nur das, was wir brauchen, um es auch mit dem Ausland zu markieren. Es ist genau der gleiche Kommentar. Danach führen wir den Befehl aus. Und wie Sie sehen, dass NX beginnen, jede Shop-Build-Produktion laufen. Siehst du, der Gorman ist verändert. Wir haben jetzt die Produktion und es wird die Umgebung, die Dateien verwenden. Also, jetzt ist unser Build fertig. Und wie Sie hier sehen, wenn wir zu docs gehen, haben wir eine neue Dateien und sie sind immer etwas Hashing, um ihr Geld zu verhindern. Und auch, wir haben den Index HTML aktualisiert und wie auch die vorherigen Dateien, wo es gelöscht wurde. Dafür müssen wir diese Dateien schieben. Gehen wir also wieder zu unserem GitHub Desktop, nachdem wir all diese Änderungen vorgenommen haben. Und dann, wie Sie sehen, werden mehrere Änderungen vorgenommen. Einige Dateien wurden gelöscht, die aus dem alten Build stammen, und wir haben eine neue Datei erstellt. Also müssen wir eine neue Nachricht erstellen. Wir können ihm einen Namen wie Änderung in Produktion Build geben. Also in diesem Fall werden wir die Änderung in der Produktion Build haben und wir schieben es auf GH Pages, und dann schieben wir diesen Code hier. Manchmal erhalten Sie diese Nachricht, die Sie abrufen müssen. Die Fernbedienung ändert sich. Also sagen Sie einfach wieder ziehen und dann können Sie einfach wieder drücken. Also, weil GitHub manchmal einige Variablen oder einige Dateien basierend auf dem Build mit GitHub Pages hinzufügt . Danach haben wir alles eingesetzt. Wir gehen wieder zu unseren GitHub Pages und wir aktualisieren. Wir müssen eine Weile warten, weil hier sagt, dass Ihre Website bereit ist, veröffentlicht zu werden. Wir müssen eine Weile warten, bis es hier in der Domain veröffentlicht wird. Okay, hier steht, dass meine Website veröffentlicht wurde. Also gehe ich wieder in unseren Süßigkeitenladen, erfrischen. Okay, wir haben immer noch dieses Problem. Wir sehen immer noch nicht einmal die Dateien veröffentlicht wurden, wie Sie hier in der Quelle sehen, wir haben immer noch dieses Problem. Also müssen wir dieses Problem irgendwie lösen. Wie Sie sehen, wenn Sie sich erinnern, dass wir in Angular anständige Datei für jedes Projekt verwendet haben, zum Beispiel, habe ich Admin-Anwendung. Ich habe gesehen, wenn Sie die Anwendung erstellen möchten, nur um die Dateien zu ersetzen , die Umgebung Ts mit Umgebung breiten Punkt ds, UC genannt werden. Wir ersetzen diese Dateien. Und diese Akten, wenn Sie sich erinnern, haben wir sie bearbeitet. Eine ist für die Produktion und eine für die Entwicklung. Aber der Fall passierte nur für die Admin-Anwendung. müssen wir auch für die NG Shop-Anwendung tun. Also muss ich zu gehen und Sie Shop-Anwendung. Ich werde hier nach oben scrollen. Wir haben N D scharfe Anwendung. Und dann verwendet es immer noch die alte Konfiguration, weil wir sie nicht aktualisiert haben. Also habe ich diesen Fehler gemacht, mit Absicht, nur um Ihnen zu zeigen, dass, wenn Sie nicht haben, weil ich vorher eine Menge Fragen dazu hatte. Also seien Sie nur sicher, dass Sie das ersetzen, den alten. Wenn Sie zur Vorlesung der Umgebungsvariablen zurückkehren, müssen Sie sicher sein, dass Sie auch nicht die anwendungsspezifische Umgebung verwenden, aber Sie verwenden diejenige, die öffentlich und freigegeben ist. Also haben wir diesen hier. Und dann müssen wir den Build-Kommentar erneut ausführen. Also müssen wir vorsichtig sein, dass wir dies als im Ausland haben und dann den Kommentar der Produktion ausführen müssen. Also hier sind sie fertig gebaut. Auch hier müssen wir die Änderungen übernehmen, die wir nicht wieder haben. So gewährt, dass wir, wieder, müssen wir eine Commit-Nachricht machen. Wir können sagen, Dateien ändern, so können wir hier sagen. Und dann verpflichten wir uns zu GitHub Pages. Wir drücken, und wir müssen wieder auf die Bereitstellung unserer Anwendung warten. Also, wenn ich zu GitHub Pages gehe, aktualisieren Sie und ich werde sehen, dass es gebaut wird. Es wird dies in grün ändern, wenn der Build fertig ist. Okay, wie Sie hier sehen, wurde die Anwendung bereitgestellt. Gehen wir wieder zum Link unseres ND-Shops online auf GitHub-Seiten. Wir aktualisieren, wir sehen, dass wir keinen Fehler bekommen. Schließlich, so gehen wir hier, schließen wir die Konsole, und hier ist unsere Anwendung. Also, wenn wir wieder zum Back-End oder zu ihrem Netzwerk gehen und aktualisieren, werden wir sehen, dass unser Netzwerk von hier oder Kühlung fragt. Also haben wir hier das Heroku Ding oben. Von dieser API verbrauchen wir unsere Daten. So ist es also sehr schön. Jetzt haben wir die ganze Anwendung funktioniert. Ich habe In den Warenkorb, In den Warenkorb. Ich gehe zu meinem Einkaufswagen. Und wie Sie sehen, ist die Geschwindigkeit sehr groß. Es ist, als würde ich das Projekt lokal ausführen. Es ist sehr schnell und verbraucht sehr gut und bildet sich sehr gut. Auf diese Weise erstellen wir die Anwendung auf GitHub-Seiten, so dass Sie diesen Link an jeden senden können , den Sie für Ihre Anwendung besuchen möchten. Die Frage ist also, ich möchte auch die Admin-Anwendung erstellen, wie ich sie erstellen kann. Also müssen wir die Anwendung des NDI-Shops und auch die Anwendung des Admin-Panels, das wir zuvor erstellt haben, erstellen NDI-Shops und auch die Anwendung des Admin-Panels, . Leider ist diese GitHub Pages nur mit einem Repository verlinkt. So können wir, wir können hier nicht mehrere Seiten unter einem Repository erstellen. Dazu müssen Sie ein anderes Repository erstellen, das Sie es E-Sharp Admin nennen können. Und in diesem Fall können Sie Ihre Änderungen dort bereitstellen. Oder Sie können Ihre Bereitstellung so verwalten, dass der GitHub die Puffer verwendet, die aus Ihrer Umgebung bereitgestellt werden. Sie müssen nicht den gesamten Code, den gesamten Quellcode, bereitstellen . Sie können einfach den Code drücken, der von Hunden generiert wird. Und das, was wir in der nächsten Vorlesung sehen können, werde ich es schnell vor Ihnen tun. 197. Mehrere APPs, Scripts erstellen: Okay, in diesem Vortrag werden wir eine Rechnung für mehrere Anwendungen machen. Wenn Sie also zuerst möchten, müssen Sie Ihren Quellcode nicht auf GitHub hochladen. Sie können nur den Build hochladen, Produktion Ihres Projektordners, dass, wie ich Ihnen sagte, wir werden zwei Repositories für eine ist ND-Shop und eine für die Admin-Panel-Anwendung erstellen . Also, aber zuerst müssen wir einen Pfad angeben, der nicht innerhalb des Projektarchivs ist , das ich in unserem erstellt habe, wie unser Quellcode, machen wir es außerhalb unseres Quellcodes. So können wir den Pfad in dem Kommentar wie folgt angeben. Wir können so einen Schritt nach oben gehen. So können wir sagen, gehen Sie aus dem aktuellen Ordner, die jetzt blaue Bits, diese Organisation die Quelldatei und erstellen Sie eine Anwendung, die NG Shop zum Beispiel genannt wird. So können wir diese als N G scharf erstellen. Und wir können Basis Bad, die auch NG Shop sein kann. In diesem Fall müssen wir also sicher sein, ein Repository genau mit diesem Namen zu erstellen. Erinnerst du dich daran? Also drücken wir Enter und unsere Anwendung wird sich bis zum Build fertig bauen. Sie sehen hier, dass ich mich in meinem Organisationsordner befinde. Also muss ich einen Schritt nach oben gehen. Wie außerhalb unseres Projektarchivs müssen Sie es nicht in dasselbe Repository einfügen. Also, nachdem die Rechnung fertig ist, müssen wir auch in unsere Ordner gehen, wie wir sehen, und einen Schritt nach oben gehen. Und wir werden sehen, dass wir N D scharf hier haben. Also habe ich jetzt meine Dateiproduktionen sind hier. Also brauche ich nicht unseren Quellcode hochladen zu lassen. Also wird dieser sein, werden ein Repository dafür erstellen. So können wir GitHub Pages für die Bereitstellung dieser verwenden. Also, wie können wir das tun? Auch hier werden wir die gleichen Schritte machen, die wir zuvor getan haben. Wir werden dieses Repository nicht verwenden, aber wir werden ein neues verwenden. Wir werden sagen, erstellen Sie ein neues Repository. Also klicken wir auf ein neues Repository erstellen. Und dieser Repository-Name wird genau der gleiche Name unseres Ordners sein. Also haben wir hier N D scharf, wie ich Ihnen bereits gesagt habe, und wo wir den Weg wählen müssen, wird es genau auf der gleichen Route hier sein. Also in einem Schritt nach oben unserer Quelldatei, wo sie bereitgestellt wird, damit ich den Ordner nicht sehen kann. Ich gehe nicht hinein. Nein, ich kann den Ordner selbst hier nicht sehen. Also klicke ich auf Öffnen, gleicher Name hier, ich klicke auf Repository erstellen. Und in diesem Fall werden wir unser Repository erstellen lassen. Und dann müssen wir nur sagen Publish Repository. Wir behalten den gleichen Namen. Und auch, wir sagen Publish Repository, aber wir müssen es öffentlich machen. In diesem Fall zeige ich Ihnen, dass ich, wenn ich jetzt zu meinem GitHub-Konto gehe, den Quellcode in dieser Kategorie nicht haben werde. So kann ich meinen vorherigen Code der Quelle wie diesen, den wir für den E-Shop erstellt haben, behalten. Wir können das hier als Privat behalten. Sie müssen es nicht öffentlich machen, sondern ein neues Repository, das erstellt wird, wie Sie hier sehen, gehen wir zu Repositories. Und dann werde ich hier N D scharf haben. Wie Sie sehen, habe ich nur diese Quelldateien hier. Tut mir nicht leid, die Produktionsakten. Wir werden den Quellcode hier nicht haben und es ist öffentlich. Also ist es mir egal, weil sie gehasht sind und sie minimiert werden, wie Sie hier sehen, was für normale oder die Benutzer nicht einfach ist, meinen Quellcode wieder herauszuholen. Auf diese Weise gehe ich in die Sitzung und dann gehe ich zu Seiten. Und dann werden wir sagen, die Quelle wird wie Verzeichnis sein, Sie können sagen main, und dann die Wurzel selbst. Sie müssen also keinen docs-Ordner verwenden, können Sie route sagen, weil wir direkt auf dem Stammverzeichnis dieses Projekts aufbauen. Sie müssen also nur den Pfad und auch den Zweig angeben. Also halte ich es auf der Hauptzweig, weil wir nur eine Marke haben, natürlich können Sie eine andere Anlage erstellen, aber in diesem Fall brauchen wir nicht, weil wir nur die Produktionsdateien haben. Und danach warten wir, bis ihre Website veröffentlicht wird. Wir sagen, okay, Ihre Website ist veröffentlicht. Ich gehe wieder hier auf die Website und ich werde sehen, dass es vorher produziert. Und hier der Weg, der ND-Shop ist. Also kann ich zurück zu unserem Repository gehen, das ich für das Ende hatte Sie einkaufen und ich kann es schließen, ich kann es privat machen. Also haben wir Natrium für den vorherigen Test, den wir vorher gemacht haben. Also die E scharf, ich werde es als Privat machen, so dass Sie nicht wieder zu Einstellungen gehen können. Sie können sagen, dass hier Sicherheit oder verwalten Zugriff. Und dann setzen Sie Ihr Passwort wieder ein. Ich habe hier Passwort bestätigen. Und dann werde ich das Zugriffs-Repository ändern, um nicht öffentlich zu sein, aber ich möchte es als privat setzen. Ich werde hierher gehen, um die Sichtbarkeit des Projektarchivs Ich werde es als Privat sagen. Und dann verstehe ich diese Veränderung. Wir kopieren nur diesen Teil. Also in diesem Fall wird niemand meinen Zum Beispiel den Quellcode sehen , weil ich bereits Repository für die Öffentlichkeit oder den Produktionscode, der für veröffentlichte Seite oder GitHub-Seiten veröffentlicht wird. Also lassen Sie uns das gleiche erneut für die Admin-Anwendung tun. Also zuerst müssen wir wieder den gleichen Kommentar verwenden, aber nicht mit NDI Shop. Wir werden es mit der Admin-Anwendung schaffen. Aber lassen Sie mich Ihnen einen Trick zeigen. Es ist nicht unbedingt immer, diesen Befehl auszuführen. Immer, immer. Wir können ein Gewicht machen, wie wir diesen Kommentar im Paket JSON in meinem Projekt speichern können. Wie wir einen neuen Build für hier erstellen können. So können wir sagen, zum Beispiel, ich erstelle ein neues Skript im Paket JSON. Ich sage zum Beispiel, bauen breit, zum Beispiel, auf diese Weise, wie admin. So können wir Admin-Panel sagen, Admin-Panel-Anwendung. Und der Kommentar dafür wird genau der Kommentar sein, den wir hier verwendet haben. Aber wir müssen das durch admin und auch hier durch admin ersetzen. Und ich sage, NX erstelle die Admin-Anwendung, nicht das Produkt oder die Anwendung. Das Gleiche können wir auch für unser M tun, das aus einem N D Shop selbst aufgebaut wurde. Sie müssen diesen Kommentar also nicht irgendwie speichern. Sie können einfach sagen,, brachte bauen einen stolzen Admin alle Bart im Ausland. Die Anwendung, die zum Beispiel N G scharf ist. In diesem Fall müssen Sie nicht alle diese Zeilen schreiben, sind kein Kommentar. Also reparieren wir das. Wir haben hier noch ein Komma ausgesucht. Wir retten alles. Und jetzt werde ich den Befehl ausführen, den ich für die Produktion habe , die für den Admin gebaut wurde. Also, wie können wir das tun? Ich sage nur npm run und ich gebe den Befehl an, den ich ausführen möchte. Ich werde sagen, bauen, aber seltsam. Und dann Admin. Und dann werden wir sehen, dass es diesen Kommentar ausführen wird, der für mich so großartig ist. Danach wurde die Anwendung gebaut, aber die Admin-eins. Gehen wir also wieder zu unserem GitHub Desktop und erstellen Sie ein neues Repository. Die gleichen Schritte, die wir mit dem NDI Shop gemacht haben. Also werde ich hierher gehen. Ich werde alle meine Repositories sehen. Dieser enthält meinen Quellcode, dieser enthält den NG-Shop, aber die Produktionsrechnung. Und ich werde ein weiteres für den Admin-Produktions-Build hinzufügen. Also hier müssen wir einen anderen Namen erstellen, admin, genau die gleichen Namen, wie wir sie vorher bauen. Überprüfen Sie den Pfad. Ich glaube, es ist schon gebaut. Wir haben hier den Admin-Build. Und wieder gehen wir, um das Repository zu erstellen. Und wir sehen, dass unser Repository erstellt wurde. Wir veröffentlichen das Repository und dann müssen wir es als öffentlich machen. Wir müssen es nicht als Privat behalten. Also dann erstellen oder veröffentlichen wir das Repository, das wir wollen. Und dann gehen wir zu unserem GitHub-Konto und gehen zu unseren Repositories. Wir werden das Admin-Repository hier wieder sehen. Also werde ich darauf klicken. Ich werde sehen, dass dafür gebaut. Ich werde für die Einstellungen gehen, ich werde zu den Seiten gehen. Und dann werde ich auf den Seiten den Hauptzweig und dann den Stammordner auswählen. Und dann klicke ich auf Speichern. Danach bereitet sich die Website vor, um gebaut zu werden. Und dann werden wir es in der Admin-Anwendung überprüfen, wenn es fertig ist. So wird die Website unter diesem Link veröffentlicht, wir klicken darauf. Okay, wir haben den Admin und alles ist in Ordnung. Versuchen wir uns anzumelden. Ich werde hier meine Referenzen haben. Also haben wir hier mein Passwort, ich klicke auf Senden. Schön, ich habe hier den Admin, genau wie wir es in unserer Anwendung haben, als wir es entwickelt haben. Und alles funktioniert perfekt und reibungslos. Hier geht es also um den Produktionsaufbau. Wenn Sie möchten, dass ich für Sie die Anwendung mache, die auf einem benutzerdefinierten Server mit FTP ausgeführt wird. Ich denke, das wird leicht für Sie sein. Wenn Sie möchten, dass ich ein Video mache, können Sie mir eine Nachricht senden oder Sie können eine Frage in QA hinzufügen. Und ich werde ein Video für den FTP-Upload hinzufügen, damit Sie sehen können, wie wir unsere Anwendung auf einem benutzerdefinierten Server erstellen können, nicht auf GitHub Pages. Ich werde auch dieses Dateipaket JSON anhängen, wie es mit diesen Kommentaren aktualisiert wurde. So können Sie diese Kommentare auch verwenden, um Ihre Anwendung zu erstellen.