Jetzt werden wir zu
unserer nächsten Übung übergehen, wo wir
eine neue Komponente erstellen und sie zu unserer Angular-Anwendung hinzufügen werden.
Dann werden wir diese Komponente verwenden, um einen Teil
des Bildschirms zu steuern, den wir für unsere Angular-Anwendung entwickelt haben.
Der Bildschirm für unsere Angular Anwendung ist im Moment ziemlich langweilig.
Alles, was wir haben, ist eine Symbolleiste oben und dann ein leerer,
weißer Bildschirm hier, aber das gibt uns auch Ideen.
Wir können jetzt zusätzliche Inhalte aufnehmen und diese
dann in diesen Teil des Bildschirms einfügen. Wie machen wir das?
Wir können eine neue Komponente erstellen und dann
diesen Teil des Bildschirms an diese Komponente übergeben und sagen:
„Sie kümmern sich um das Rendern, was Sie wollen, in diesen Teil des Bildschirms.“
Diese Ansicht wird also von der neuen Komponente gesteuert.
Wie machen wir das? Lasst uns jetzt die Übung durchmachen.
Um mit der Übung zu beginnen,
gehen Sie zu den Übungsanweisungen, die diesem Video folgen.
Dann
werden Sie in den Übungsanweisungen einige Übungsressourcen sehen,
bei denen es sich um eine ZIP-Datei handelt.
Laden Sie diese ZIP-Datei auf Ihren Computer herunter,
und dies erhalten Sie eine images.zip Dateien.
Also, speichern Sie es einfach als images.zip Datei in Ihrem Download-Ordner
, entpacken Sie es, und dann gibt Ihnen dies
einen Bilderordner mit einer Reihe von Bildern, die wir in unserer Anwendung verwenden werden.
Entpacken Sie die Datei images.zip, die Sie gerade heruntergeladen haben,
und verschieben Sie die Datei images.zip in Ihr Projekt
und innerhalb Ihres Projekts
in den Ordner Quellen und Assets hier.
Also, wieder, verschieben Sie den Ordner Bilder, die Sie erhalten, indem Sie
die Datei images.zip entpacken und dann verschieben Sie den Ordner Bilder in Ihre Anwendung,
also, in Ihrer Anwendung,
unter Quellen und Assets Unterordner.
Diese Bilder, die hier bereitgestellt werden,
stehen für die Verwendung in Ihrer Angular-Anwendung zur Verfügung.
Jetzt werden wir die Angular CLI verwenden, um
automatisch eine Komponente für uns zu generieren und sie unserer Angular-Anwendung hinzuzufügen.
Gehen Sie also im Terminal zu dem Ordner, der Ihre Angular-Anwendung enthält, und geben Sie
ng generate component menu ein.
Also, wir werden diese Komponente als MenuComponent benennen.
Dieses MenuComponent enthält das Menü für
das Restaurant, für das wir unsere Angular-Anwendung vorbereiten.
Wenn Sie dies eingeben,
generiert dies automatisch
die MenuComponent und fügt sie dann Ihrer Angular-Anwendung hinzu.
Diese MenuComponent wird erstellt und in
den Quell/app/menü-Ordner Ihrer Anwendung hinzugefügt.
So wird es eine Reihe von Dateien im Menüordner erstellen.
So können Sie sehen, dass es eine SCSS-Datei,
eine HTML-Datei und die ts Datei erstellt,
und dann etwas, das die spektrale ts-Datei genannt wird.
Darauf kommen wir später zurück.
Dann wird auch Ihre App module.ts Datei aktualisiert.
Lassen Sie uns also einen Blick darauf werfen, was gerade passiert ist, als Sie
diese MenuComponent erstellt und zu Ihrer Angular-Anwendung hinzugefügt haben.
Gehen wir zum Redakteur. Wenn Sie
zu unserem Editor kommen,
werden Sie jetzt feststellen, dass
es im App-Ordner einen neuen Ordner namens Menü gibt,
und dieser Menüordner enthält alle MenuComponent verwandten Dateien hier.
Die Angular CLI folgt dem Angular Standard Style Guide.
Der Styleguide schlägt vor, dass jede Komponente
in ihren eigenen Ordner platziert werden sollte, wie hier zu sehen ist,
und ich mag das ziemlich, weil ich sehr besessen bin,
es sauber Hierarchie für meine Anwendungsordner hier zu halten.
Also, das funktioniert sehr gut für mich.
Manche Leute mögen eine flache Hierarchie,
aber ich werde einfach mit diesem Teil verwechselt.
Also, ich bevorzuge es, jede Komponente in einem eigenen Ordner zu speichern.
Also, es funktioniert gut für mich.
Wenn Sie nun die Datei app module.ts öffnen,
werden Sie feststellen, dass die Datei app module.ts aktualisiert wurde,
indem Sie einen weiteren Import in die Datei app module.ts aufgenommen haben.
Sie sehen also, dass zusammen mit der AppComponent
die MenuComponent automatisch als Import zu Ihrem App-Modul hinzugefügt wurde.
Das bedeutet also, dass die MenuComponent jetzt
für Ihre Angular-Anwendung verfügbar ist.
Wenn Sie die Deklarationseigenschaft im NgModule Dekorator überprüfen,
werden Sie auch sehen, dass in der Eigenschaft deklarations
neben der AppComponent
auch die MenuComponent enthalten ist.
Dies ist der Grund, warum ich Angular CLI liebe,
weil es all das für mich funktioniert vereinfacht.
Wenn ich es von Hand machen
würde, muss ich manuell in die App module.ts gehen und dann all diesen Code eingeben,
und es besteht eine hohe Wahrscheinlichkeit, dass ich dort Fehler machen werde.
Wir ersparen uns also eine Menge Ärger, indem wir die Angular CLI verwenden.
Deshalb habe ich mich in
Angular CLI verliebt, um meine Angular-Anwendungen zu erstellen.
Damit haben wir
unsere MenuComponent so eingerichtet, dass sie für unsere Angular-Anwendung verfügbar ist.
Nun, wo werde ich die MenuComponent nutzen?
Ich werde die MenuComponent in meiner AppComponents Vorlage verwenden.
Also gehe ich zur AppComponents Vorlage und
füge dann die MenuComponent hier in meine AppComponent ein.
Also, das wird im Wesentlichen diesen Teil des Bildschirms an meine MenuComponent übergeben.
Wie machen wir das?
Um dies zu tun, werfen wir zunächst einen kurzen Blick auf die Datei MenuComponent.ts.
Wenn Sie also die Datei MenuComponent.ts öffnen,
sehen Sie, dass der Selektor für die MenuComponent als app-Menü definiert wurde.
Dies ist also der Standard-Selektorname, den die Angular CLI für Ihre Komponenten gibt.
Sie können dies ändern, wenn Sie möchten,
aber was auch immer Selektor Sie hier angeben,
würde die Tags bilden, die Sie verwenden, um es in Ihre Vorlagendatei aufzunehmen.
Also, zurück zu AppComponent.html,
jetzt, wenn ich die Menüdatei hier einfügen möchte,
also werde ich einfach sagen,
app menu tag und voila,
dass ein Teil des Bildschirms jetzt an meine MenuComponent übergeben wird,
und es liegt an der MenuComponent zu entscheiden, was es dort platzieren will.
Also, was auch immer definiert ist,
die MenuComponents Vorlage wird hier platziert.
Also, jetzt, alles, was wir übrig sind, ist zu gehen und
unsere MenuComponent vorzubereiten, um die entsprechenden Informationen für uns zu zeigen.
Lassen Sie uns die Änderungen speichern,
und dann werden wir dann zum
nächsten Schritt wechseln, wo wir das Menü für unser Restaurant mit der MenuComponent erstellen.
Bevor ich das
mache, gehe ich
hier zum App-Ordner,
und dann
werde ich im App-Ordner einen neuen Unterordner erstellen und diesen als freigegebenen Unterordner benennen.
Nun, alle Dateien, die ich über verschiedene Komponenten freigeben werde,
werde ich es in den freigegebenen Ordner hier ablegen.
Jetzt, innerhalb des freigegebenen Ordners,
werde ich eine neue Datei namens dish.ts erstellen.
In diesem dish.ts werde ich eine Klasse erstellen, um
ein Gericht zu definieren und es für die restlichen Komponenten zur Verfügung zu stellen.
Also, um hier eine TypeScript-Klasse zu definieren,
werde ich sagen, export, also exportiere ich diese TypeScript-Klasse hier,
exportiere Klasse, und dann werde ich die Klasse als Gericht benennen.
Innerhalb dieser Schüsselklasse
kann ich jetzt verschiedene Eigenschaften definieren.
Also, für die Dish-Klasse
werde ich eine Eigenschaft definieren,
die eine ID ist, die ich als Zeichenfolge definiere.
Wenn Sie aus der JavaScript-Welt kommen,
müssen Sie in JavaScript den Typ einer Variablen nicht angeben.
TypeScript bringt diese Funktion für Sie, um den Typ für jede Variable anzugeben.
Wenn Sie also Name, Spalte und Zeichenfolge angeben,
bedeutet dies, dass die Namensvariable immer vom String-Typ sein wird.
Wenn Sie also versuchen, dem Namen eine ganze Zahl zuzuweisen,
fängt der TypeScript-Compiler dies automatisch für Sie ab und teilt Ihnen dann mit, dass ein Fehler vorliegt.
Aus diesem Grund
können Sie mithilfe von TypeScript die Anzahl der Fehler reduzieren, die Sie verursachen könnten.
JavaScript führt diese
Fehlerprüfung traditionell nicht durch, da es kein Konzept von Datentypen hat.
Aber wenn Sie aus einer traditionellen Programmiersprache wie C ++ oder Java kommen,
sind Sie sehr vertraut mit den Datentypen,
den primitiven Datentypen und
anderen Arten von Datentypen, die bereits in der Sprache definiert sind.
TypeScript bringt diese Funktion in JavaScript oder vielmehr als Teil von TypeScript,
und das ermöglicht es Ihnen, Variablen zu definieren und Typen an diese Variablen anzuhängen,
daher den Namen TypeScript.
Also, für das Gericht,
werde ich eine Namenseigenschaft erstellen.
Dann werde ich eine Image-Eigenschaft erstellen,
die auch eine Zeichenfolge ist.
Diese Bildzeichenfolge wird eine Zeichenfolge sein,
die auf die URL des Bildes verweist, das ich für dieses spezielle Gericht verwenden werde.
Dann werde ich eine Kategorie für dieses Gericht als auch eine andere Zeichenfolge als Boolean gekennzeichnet definieren,
Bezeichnung als Zeichenfolge.
Preis als String und dann Beschreibung als String.
Also, das sind Eigenschaften, die ich mit der Geschirrklasse assoziiere.
Also, dies wird verschiedene Gerichte in meiner Speisekarte meines Restaurants definieren,
und für jedes Gericht muss ich all diese verschiedenen Eigenschaften angeben.
Warum sollte ich das brauchen?
Das wird mir helfen, die Speisekarte für mein Restaurant zu bauen, wie Sie schon bald sehen werden.
Damit vervollständigen wir die Definition meiner Klasse dort.
Speichern wir die Änderungen an der Datei dish.ts.
Nun exportiert diese dish.ts-Datei eine Klasse.
Jetzt kann ich diese Klasse in jede
der Komponententyp-Skriptdateien meiner Anwendung importieren.
Als nächstes werde ich zu meiner menu.component.ts-Datei wechseln.
In der menu.component.ts-Datei neben dem Importieren der Komponente
sehe ich dann auch, dass Sie dort ein OnInit importieren.
Wir werden in einer der späteren Übungen zum OnInit-Teil kommen.
Ich werde erklären, was das in einer späteren Übung tut.
Wir werden auch die neue Klasse importieren, die wir als Dish-Klasse erstellt haben.
Warum importieren wir diese Gericht Klasse?
Damit wir das als Typ für eine Variable verwenden können, die ich hier definiere.
Also, wo ist dieses Gericht Klasse?
Es ist in.. /shared/dish Ordner.
Also, das ist im freigegebenen Dish-Ordner oben.
Dann werden Sie sehen, dass wir die Menükomponente hier definiert haben.
So können Sie sehen, dass es sagt,
„Export-Klassenmenükomponente“ und dann sagt es, „Implementieren Sie darauf.“
Darauf werden wir ein wenig später zurückkommen.
Sie sehen auch, dass es einen Konstruktor gibt und es hier eine weitere Methode namens NGONit gibt.
Wir werden diese in einigen der späteren Übungen verwenden.
Also lassen wir es einfach als solche da und wir werden
zurückkommen, um zu verstehen, was das in kurzer Zeit ist.
Beachten Sie auch, dass für diese Komponente
die Vorlage im Menükomponenten-Punkt-HTML definiert ist,
und die dort definierten Stil-URLs.
Nun, zusätzlich, in meine Menükomponentenklasse,
werde ich eine neue Variable aufnehmen, die als
Gerichte genannt wird, die ein Array des Gerichttyps sein würde.
Ok? Dann werde ich einfach die Menge der
Gerichte in meine Gerichte Variable, die ich hier definiert habe.
Nun, alles mit der Hand zu tippen, braucht mich viel Zeit.
Stattdessen, was ich Ihnen vorschlagen würde, ist einfach gehen und kopieren Sie
den Inhalt direkt aus den Anweisungen, die diesem Video folgen.
Also, das werde ich tun.
Dann komm zurück und füge das hier rein.
Sie können jetzt sehen, dass ich die Informationen für
alle meine Gerichte aus den Anweisungen hier geschnitten und eingefügt habe.
Dies vervollständigt also das Array aller Gerichte, die in meinen Anweisungen definiert sind.
Also, das ist der einfachste Weg, um diese Informationen zu bekommen.
Also, schneiden Sie es einfach von dort aus und fügen Sie es ein.
Beachten Sie nun, dass für dieses Gericht
jeder von ihnen hier ein JavaScript-Objekt ist.
Das kann also dort in die entsprechende Type-Skriptklasse abgebildet werden.
Sie können also sehen, dass jedes JavaScript-Objekt dort Eigenschaften hat,
und diese Eigenschaften genau mit den Eigenschaften übereinstimmen, die ich für meine Dish-Klasse definiert habe.
Sobald ich das definiert habe,
werden diese Gerichte nun zu einer Reihe von
Gerichten und das wird
mir jetzt zur Verfügung stehen, wenn ich meine HTML-Vorlage für mein Menü definiere.
Lassen Sie uns die Änderungen speichern, die wir bisher gemacht haben, und dann
öffnen wir die menu.component.html Datei.
Also gehen wir zur menu.component.html Datei.
Sie werden sehen, dass in der menu.component.html Datei,
Sie haben derzeit nur ein P mit Menü funktioniert hier.
Also, wenn Sie es einfach dort einfügen und dann sehen, wie die Anwendung funktioniert,
hätten Sie gesehen, dass nur dieses Menü auf dem Bildschirm funktioniert.
Ich werde dies hier durch meinen eigenen Vorlagencode ersetzen.
Dies ist, wo ich die Hilfe des eckigen Flex-Layouts nehmen werde, um mir
zu helfen, meine Inhalte gut in meinem Bildschirm zu legen.
Also, um zu beginnen,
werde ich mit einem div beginnen,
auf das ich eine Klasse namens Container anwenden werde.
Ich werde die Container-Klasse definieren, indem ich
etwas CSS-Code später in dieser Übung verwende.
Also, ich werde den Klassencontainer hier anwenden.
Ich werde auch eine Eigenschaft namens fxlayout definieren.
Ein Attribut namens fxlayout.
Nun, dieses fxlayout ist ein Attribut
, das das eckige Flex-Layout mir erlaubt, auf ein div anzuwenden.
Dies gibt an, ob die verschiedenen Inhalte
, die ich in diese div einschließe, entweder horizontal oder vertikal angelegt werden sollten.
Also werde ich angeben, dass dies eine Spalte ist.
Also, egal welcher Inhalt ich in diesem div
einschließe, wird vertikal untereinander auf meinem Bildschirm angeordnet.
Wenn Sie die Grid-Art gesehen haben, mit Inhalten in Bootstrap zu arbeiten,
würden Sie sehen, dass dies mir im Wesentlichen sagt, dass ich
alles in eine einzige Spalte legen werde.
Verwechseln Sie diese Spalte nicht mit der Bootstrap-Spalte aus dem Bootstrap-Gitter.
Es sind zwei verschiedene Dinge.
Hier ist das Attribut fxlayout und ich gebe Spalte an.
Ich kann dies auch als Zeile angeben,
was bedeutet, dass der Inhalt horizontal ausgelegt wird.
Nun auch ein weiteres Attribut, das ich dafür angeben werde, ist FxLayoutGap,
das ich als 10 Pixel angeben werde.
Also, was das bedeutet, ist, dass
jeder Inhalt, den ich hier einschließe, durch einen Abstand von 10 Pixeln zwischen jedem von ihnen getrennt wird.
Aus Bootstraps Wissen sehen Sie, was ein Cutoff hier ist.
Dies definiert eine Cutoff-Trennung zwischen
zwei Teilen von Inhalten in meiner Anwendungsvorlage.
Also, damit werden wir das div hier schließen.
Jetzt, in diesem div,
werde ich den tatsächlichen Inhalt definieren, der in meine menu.component.html Datei geht.
Jetzt hier drin werde ich eine andere Komponente verwenden, die
mir das Materialdesign als Mattenlistenkomponente bietet.
Diese Komponente ermöglicht es mir, eine Liste von
Elementen zu erstellen, die ich hier in meine Vorlage einschließe.
Dies ist also eine eckige Materiallistenkomponente.
Von Bootstrap bemerken Sie, dass wir in Bootstrap das Medienobjekt hatten.
Also, die Mattenliste ist wie das Medienobjekt in gewissem Sinne von Bootstrap.
Jetzt werde ich eine Klasse anwenden,
ein Attribut namens FxFlex.
Nun, was das bedeutet, ist, dass diese ganze Sache als eine Einheit oder ein Stück
Inhalt behandelt wird, die sie von meinem Flex-Layout hier angelegt werden.
Also, wenn Sie mit CSS Flex-Layout vertraut sind.
Also, dies ist ein Stück Inhalt, der von meinem CSS-Flex-Layout ausgelegt wird.
Also, wenden Sie FxFlex hier an,
und dann werde ich hier mat-list-item definieren.
Also, das ist ein Listenelement hier.
Also, aus Ihrem HTML-Wissen,
wenn das LI-Tag, das Sie in HTML verwenden, hier ähnlich ist.
Also, das ist ein mg Listenelement hier.
Also offensichtlich
werden Sie in diesem Listenelement die Liste der Dinge definieren.
Nun bietet angular einige strukturelle Direktiven, die Sie
hier auf Ihre Tags anwenden können, mit denen Sie Ihren Inhalt erstellen können.
Jetzt werde ich eine strukturelle Direktive namens ngFor verwenden.
Wir werden sehen, wie wir es in dieser Vorlage verwenden.
Später nach dieser Übung
werde ich Ihnen kurz erläutern, was die Strukturrichtlinien sind und
welchen Zweck sie bei der Definition Ihrer Vorlagen hier dienen.
Also, in diesem leeren Listenelement, werde ich sagen,
Stern, notieren Sie die Syntax, Stern ngFor.
Dies ist also die Strukturrichtlinie,
die NGfor-Strukturrichtlinie in eckig.
Was diese ngFor strukturelle Direktive Ihnen erlaubt, ist
, über ein Array von Elementen zu iterieren.
Denken Sie daran, dass wir Gerichte als eine Reihe von Gerichten in unserem Code definiert haben.
Jetzt, in meiner Vorlage,
habe ich Zugriff auf dieses Geschirr Objekt.
Also hier drin, wenn ich darüber iterieren will,
so wie ich es spezifiziere, werde ich sagen:
„Lassen Sie Gericht.“
So funktioniert die Syntax für die ngFor strukturelle Direktive.
Also, lassen Sie Gericht von Gerichten.
Was das bedeutet, ist, dass Geschirr die Reihe von Geschirrobjekten ist.
Wenn wir sagen lassen Gericht Gerichte auswählen,
wird dies mir erlauben, auf jedes Element
des Arrays zuzugreifen und dann hilft es mir, über das Array zu iterieren.
Dies ist wie eine for-Schleife,
wenn Sie mit for-Schleifen aus der Programmierung vertraut sind.
Also, das verhält sich wie eine for-Schleife für Sie und dann hilft es Ihnen,
hier alle Elemente des Geschirr-Arrays zu durchlaufen.
Dieses Gericht wird zu einem JavaScript-Objekt, mit
dem ich dort auf jedes Element dieses Arrays zugreifen kann.
Nun, daraus können wir jetzt auch
Zugriff auf die Eigenschaften jedes einzelnen Objekts in meinem Geschirr Array bekommen.
Also, dann kann ich sie verwenden, um meine Vorlage hier zu definieren.
Lassen Sie mich die Vorlage auslegen und dann gehen wir zurück und
schauen, wie diese beiden hier miteinander verknüpft sind.
Jetzt
kann ich in meinem leeren Listenelement ein Bild mit dem Attribut als MatliStAvatar einfügen.
Dies erlaubt mir, ein Bild und dann mit der Quelle, die hier angegeben wird, einzuschließen.
Sehen Sie sich jetzt interessanterweise die Syntax an, die ich hier verwende.
In doppelten Klammern werde ich dish.image sagen.
Das bedeutet, dass es sich um eine Einweginterpolation handelt, über die wir sprechen.
Wenn ich dies angebe,
bedeutet dies, dass diese Quelle den Wert von dish.image erhält, der in
meinem
JavaScript-Objekt definiert wurde, das ich dort in meiner Type-Skript-Klasse definiert habe und das für mich verfügbar ist, um das Layout hier zu machen.
Damit der dish.image-Wert mir und auch für dieses Bild zur Verfügung steht,
werde ich einen alternativen Wert als dish.name angeben.
Erinnern Sie sich, dass mein Gericht
mir auch die Namenseigenschaft zur Verfügung hatte, so dass hier ein Bild für meine Liste definiert.
Sie werden ziemlich bald feststellen, wie diese Liste auf
dem Bildschirm aussieht, wenn wir diese Vorlage hier vervollständigen.
Darüber hinaus werde ich ein h1 mit matLine-Tag verwenden.
Auch dies ist die Verwendung
der Listenwinkelmaterialkomponente zum Definieren meiner Vorlage hier.
Also, ich sage h1 MatLine, so dass das mir hilft, eine Zeile hier und dann innen
zu definieren, ich werde die doppelten Klammern verwenden und hier dish.name sagen.
Also, das erlaubt mir, den Wert des Gerichtennamens dort zu bekommen.
Also, das definiert eine Zeile und dann die in der nächsten Zeile werde ich p MatLine sagen.
Also, ich werde das p-Tag hier verwenden und
dann das p-Tag schließen und dann innerhalb des p-Tags
werde ich eine Spanne verwenden, um dish.description zu definieren.
Also, wenn Sie mit JavaScript-Objekten vertraut sind,
sehen Sie jetzt, wie ich auf die Eigenschaften
meines JavaScript-Objekts hier zugreife, dish.description hier.
Beachten Sie, dass das
ngFor -Attribut dies noch einmal durchläuft, erlaubt es mir, hier über ein Array von Objekten zu iterieren.
Also, Geschirr hier ist eine Reihe von Geschirrobjekten.
Also, wenn ich sage, lassen Gericht Gerichte,
dieses Gericht wird mir Zugang zu jedem Element
meiner Gerichte Array geben und ich iteriere über jedes Element des Arrays
und dann werde ich diesen Inhalt für jeden von ihnen erstellen.
Also, dieses leere Listenelement,
wirkt im Wesentlichen wie eine for-Schleife aus
Ihrer traditionellen Computersprache und dann iteriert es über
die Liste der Gerichte und legt dann jedes von ihnen auf meinem Bildschirm.
Also, mit dieser Änderung,
speichern wir die Menükomponenten-Datei.
Als nächstes gehen wir zu app.module.ts und wir müssen das MatList-Modul in dieses importieren.
Also, wir sagen, importieren MatListModule
aus Angular/Material/List.Sobald wir dies dort importiert haben,
dann gehen wir nach unten und aktualisieren dann die Importe im
Ng-Modul Dekorator und fügen
das MatList-Modul zur Liste der Importe dort hinzu.
Dies meine App module.ts wird jetzt aktualisiert und dann
gehe ich auch zur styles.scss-Datei und füge dann
die Container-Klasse hier hinzu.
Was definiert die Container-Klasse hier?
Die Container-Klasse ist Rand 20 Pixel
und zeigen Flex und speichern Sie die Änderungen.
Jetzt schauen wir uns unsere Webseite an.
Gehen Sie auf unsere Webseite.
Voila. Da gehst du.
Die Speisekarte für unser Restaurant in all seiner Pracht auf dem Bildschirm gezeigt.
Sie sehen, wie dieses Menü erstellt wurde.
Schauen Sie sich das JavaScript-Objekt-Array an, das Sie gesehen haben.
Sehen Sie sich an, wie jede der Eigenschaften für das JavaScript-Objektarray verwendet und
den vier Elementen in meiner Liste zugeordnet wurde.
Sehen Sie sich hier an, wie die entsprechenden Bilder
mit dem MatliStavatar aufgenommen wurden.
So entstehen hier runde Bilder und notieren Sie dann, wie der Name
des Gerichts hier angezeigt wird und dann die Beschreibung des hier enthaltenen Gerichts.
Wunderbar. Jetzt haben wir das Menü für unser Restaurant auf
dem Bildschirm mit einer Menükomponente in Angular.
Damit ist diese Übung abgeschlossen.
In dieser Übung haben wir gelernt, wie man eine neue Komponente erstellt.
fügen Sie es in unsere Angular-Anwendung
hinzu, wie Sie diese Komponente in die Vorlage
einer anderen Komponente einschließen, so dass die Hierarchie der Komponenten erstellt wird.
Dann haben wir gesehen, wie wir das Winkelflex-Layout und auch
die Materialkonstruktionskomponenten nutzen können, um
die Vorlage für unsere Menükomponente zu entwerfen, um den Inhalt hier anzuzeigen.
Wenn du mich fragst, wie erinnere ich mich an all diese Dinge.
Nun, um ehrlich zu sein,
man kann sich nicht an alles erinnern, aber man muss den Ansatz verstehen.
Das ist wichtiger als zu versuchen, eines dieser Dinge auswendig zu lernen.
Nun, wenn Sie mich fragen, wo bekomme ich die Informationen über
die Listenkomponente aus Winkelmaterial.
Wir können die Winkelmaterialdokumentation sortieren und dort
haben Sie die Details darüber, wie eine Listenkomponente vorbereitet werden soll.
Nun, wo bekommen wir die Details darüber, wie wir eine Komponente in eckig entwerfen?
Wir haben gerade ein wenig davon untersucht und dann in dieser Übung
lernten wir, wie man eine neue Komponente erstellt und diese dann in unserer Winkelanwendung anwenden kann.
Also, dies ist ein guter Punkt für Sie, einen
get Kommentar mit den Nachrichtenkomponenten Teil eins zu tun.
In der nächsten Übung
werden wir dies ein wenig mehr verbessern, indem wir eine andere Art
von Winkelmaterialkomponente verwenden, um den Inhalt auf meinem Bildschirm auslegen zu können.