Es ist an der Zeit, mit unserer nächsten Übung fortzufahren, wo wir die Komponenten noch einmal untersuchen werden.
Wir werden die Vorlage für
die Menükomponente ändern, die wir bereits in unsere Angular-Anwendung aufgenommen haben,
indem wir eine neue Art von Materialkomponente verwenden, um unser Menü auf eine andere Weise zu gestalten.
Dabei werden wir uns auch mit der Verwendung der NGif-Strukturrichtlinie beschäftigen.
Wenn ich zur Vorlagendatei unserer Menükomponente gehe,
werde ich einige Änderungen an dieser Vorlagendatei vornehmen.
Zuerst werde ich hier
mit FxFlex ein anderes div hinzufügen und dann dieses div dort schließen.
Also, beachte, dass
ich jetzt in meinem äußeren div zwei divs hier habe.
Also, einer mit dem div und der zweite mit der leeren Liste.
Also, dies sind zwei Teile von Inhalten, die auf dem Bildschirm ausgelegt werden müssen.
Aber beachten Sie, dass ich das FxLayout angegeben habe, das gefärbt werden soll.
Also, was bedeutet, dass diese beiden Teile des
Inhalts übereinander gelegt werden,
übereinander gestapelt werden.
Also, im ersten div,
werde ich hier ein wenig Inhalt enthalten.
Also, ich werde ein anderes div hier drinnen setzen.
Später werde ich mehr in dieses div hinzufügen.
Aber im Moment werde ich nur ein h3 mit dem Menüpunkt dort haben
und dann ein horizontales Linienelement zu diesem Menü hinzufügen.
Dies wird also den Titel für
diese bestimmte Seite direkt oben in meiner Anwendung geben, wenn sie gerendert wird.
Also, das ist eine Modifikation.
Jetzt für den zweiten Teil,
anstatt den mat-list-item
zu verwenden, werde ich jetzt die Hilfe einer Mat-Grid-Liste nehmen.
Mat-Grid-Liste ermöglicht es mir, den Inhalt
als Raster von Elementen anstatt als Liste von Elementen zu erstellen.
Wir haben gesehen, wie das Menü mit der Liste der Elemente in der vorherigen Übung ausgelegt wurde.
Nun möchte ich das gleiche Menü auf eine andere Weise ein
bisschen attraktiveres Layout für das Menü anlegen.
Also, anstatt die Mat-Liste
zu verwenden, werde ich dies jetzt von Mat-Liste zu einer Mat-Grid-Liste ändern.
Also, bevor ich das mache,
werde ich dies auch in ein anderes div einschließen, auf das ich den FxFlex hier anwenden werde,
so dass die Mat-Grid-Liste sich dort befindet.
Also, das wird mir mehr Flexibilität geben,
um Elemente zu dieser bestimmten Einheit hinzuzufügen, wenn ich später brauche.
Die Rasterliste nimmt nun einen Parameter namens
Spalten, der angibt, wie viele Spalten dieses Raster enthalten sollen.
Im Moment werde ich die Spalten als zwei angeben, weil ich nur vier Elemente in meinem Menü habe.
Also, zwei Spalten sind ausreichend.
Also habe ich wenigstens zwei Reihen des Rasters dort.
Dies nimmt auch einen anderen Parameter namens
RowHeight oder ein Attribut namens RowHeight,
das ich hier als 200 Pixel angeben werde.
Also, das würde die Mat-Grid-Liste vervollständigen, die ich innerhalb des div dort habe.
Jetzt, sobald ich die Änderung vorgenommen habe, dann
werde ich eingehen und
anstelle des mat-list-Elements verwenden,
wird dies jetzt eine Mat-Grid-Kachel hier sein.
Also, die Gitterkachel.
Grundsätzlich Kacheln des Gitters.
Diese Gitterfliese, wie Sie erkennen,
werde ich über die Liste der Gerichte iterieren.
Also verwende ich immer noch meine ngFor-Direktive damit.
Diese Mat-Grid-Kachel schließt nun
den Inhalt ein, der in jeder Kachel meines Gitters angelegt wird.
Jetzt, in der Kachel,
werde ich das Bild so verwenden, wie es existiert.
Aber ich werde das Bild verwenden,
nicht mit dem MatliListAvatar, weil das hier nicht angewendet werden kann, und stattdessen
werde ich die Höhe für das Bild als 200 Pixel angeben.
Dies entspricht also der Zeilenhöhe, so dass mein Bild
die gesamte Höhe meiner Kachel dort dehnt.
Also, Bildhöhe, 200 Pixel,
und die Quelle und die Alt bleiben als solche.
Dann, der nächste Teil,
anstelle des h1,
werde ich diesen ändern, um
in Mat-Gitter-Fliesen-Fußzeile eingeschlossen zu werden.
Also, was auch immer Inhalt hier ist, wird in der Mat-Grid-Kachel-Fußzeile hier erscheinen.
Jetzt, da drin kann ich angeben, welchen Inhalt ich will.
Also, für die Gitterkachel
ist die vollständige Beschreibung ein bisschen zu viel.
Also, ich werde diese Beschreibung entfernen,
und stattdessen nur die h1 dort verwenden.
Nun, zusätzlich werde ich hier die Hilfe eines Winkelrohrs nehmen.
Die Pipe, die ich darauf anwenden werde, wie Sie sehen können,
ist das Rohr die vertikale Leiste auf Ihrer Tastatur.
Dann werde ich die Großbuchstaben Pipe verwenden.
Also, was macht diese Pfeife?
Diese Pipe, die Großbuchstabe, verwandelt den Namen des Schüssels aus dem,
was auch immer es ist, in ein ganzes Wort mit Großbuchstaben.
Also, was auch immer der Dishname würde als
vollständig Großbuchstaben gerendert werden, wenn er dort auf die Vorlage gerendert wird.
Also, das ist die Verwendung eines Winkelrohrs hier.
Also, wir werden mehr Winkelrohre verwenden, während wir weitergehen.
Dies ist unsere erste Begegnung mit einem der eingebauten Winkelrohre in diesem Kurs.
Also, damit haben wir jetzt unser Layout geändert,
um dieses div hier und dann diese Rasterliste hier anzuzeigen.
Speichern wir die Änderungen.
Gehen Sie jetzt zu app.module.ts Datei,
müssen wir das MatGridListModule dort importieren.
Also, nach oben gehen, werden wir sagen:
„Importieren Sie MatGridListModule aus Winkel/Material/Grid/Liste.“
Sobald wir dies hinzugefügt haben,
werden wir zu den Importen im Dekorator gehen
und dann das MatGridListModule in die Eingaben aufnehmen.
Lassen Sie uns die Änderungen nochmals speichern.
Werfen wir einen kurzen Blick auf unsere Webseite und wie es auf dem Bildschirm aussieht. Wenn Sie
auf unsere Webseite gehen,
können Sie jetzt sehen, dass Ihre Speisekarte auf eine andere Weise ausgelegt ist.
Obwohl, es ist nicht wirklich so toll Blick auf den Moment.
Ich bin kein Designer,
also das ist das Beste, was ich daraus bekommen konnte.
Nun, wenn ich 20 Elemente in meinem Menü hätte,
könnte ich mehrere Elemente in jeder Zeile und mehrere Spalten auslegen,
und dann könnte ich den Platz komprimieren, den jedes Element belegt,
oder ich kann die Größe des Bildes vergrößern, so dass es
das ganze Ding einnimmt, bis es auf der -Bildschirm.
Sehen wir uns das Gleiche an, wenn es in einem kleineren Bildschirm angezeigt wird.
Also, hier werde ich die Hilfe der
Entwickleroptionen in meinem Chrome-Browser nehmen.
Also werde ich hier mit den Entwicklungstools beginnen.
Wenn ich die Entwicklungstools hier habe,
können Sie diese Schaltfläche hier sehen, die besagt, „Geräte-Symbolleiste einschalten“.
Also, lassen Sie mich zurückschalten.
Dann können Sie sehen, dass die gleiche Seite auf verschiedenen Bildschirmgrößen gerendert wird.
Hier sehen Sie die Seite, die in einem Galaxy S5 gerendert wird,
und dann das gleiche, was
Sie sehen können, dass es im Querformat gerendert wird.
Sie können also sehen, dass es mir ermöglicht, dieselbe Seite
auf verschiedenen Bildschirmgrößen mit den integrierten Entwicklertools in Android anzuzeigen.
Werfen wir einen Blick darauf, wie es auf einem iPhone aussieht.
Die Speisekarte sieht hier viel attraktiver aus.
Das möchte ich auf dem Bildschirm erreichen.
Wenn meine Bilder sogar auf den Bildschirmen mit höherer Auflösung viel größer wären,
würde das Menü so aussehen.
Im Landschaftsmodus wird es so aussehen.
Notieren Sie sich nun diese Entwicklertools in Chrome.
Wir werden die Entwickler-Tools später verwenden, wenn wir Angular
genauer verwenden, weil wir Dinge wie das untersuchen können, was Angular
für uns auf der Konsole drucken kann.
Dann können wir sogar untersuchen, wie die verschiedenen Teile unserer Anwendung abgerufen werden.
Wir können uns die Netzwerkleistung unserer Anwendung ansehen und so weiter.
Also, das ist, wo diese Entwickler-Tools Addition ist sehr,
sehr nützlich für uns.
Wenn wir auf den normalen Weg zurückkehren,
sieht unsere Webseite in einem Standard-Desktop-Browser aus.
Wir sind noch nicht fertig.
Gehen wir zurück zu den Menükomponenten.
Typoskriptdatei und dann dieses Geschirr, das ich
hier definiert habe, anstatt dies in meiner Klasse
zu halten, werde ich dieses Geschirr in eine Konstante verschieben, die ich
dort oben definieren werde und wir werden es als const Gerichte nennen,
und dies wäre von der Art Gericht ein Array sein,
und dann werde ich schneiden diese ganze Reihe von Gerichten von hier und dann bewegen Sie es dort oben.
Dies ist in Vorbereitung auf eine zukünftige Übung, bei der wir
diese Art von Daten nicht in unsere Anwendung aufnehmen werden,
sondern wir werden diese in einen Dienst verschieben.
Also, was ich getan habe, ist, dass Geschirr Informationen geschnitten und
dann in eine Konstante hier mit dem Namen Gerichte in allen Hauptstädten hier,
und dann ist mein Geschirr jetzt als Waise hier gelassen.
Also, das werde ich es gleich Geschirr hier machen.
Nun, Sie müssen sich fragen, wie kommt es, dass ich den Typ für das Geschirr entfernt habe.
TypeScript ist intelligent genug, um zu erkennen, dass, wenn Sie dies tun,
wird es automatisch den Typ auf Gerichte zuweisen, was Sie in Geschirr haben.
Also, selbst wenn Sie es nicht in TypeScript eingeben, wird das tun,
aber wenn Sie völlig klar sein möchten,
können Sie dies auch tun und das wird genauso gut funktionieren.
Okay, wenn du es vorziehst, wird es als solches verlassen.
Nun, zusätzlich werde ich hier eine weitere Variable namens SelectedDish vorstellen.
Diese Variable werde ich in dieser Übung und einer der späteren Übungen auch verwenden.
Also werde ich das gleich dem ersten Gericht in meinem Array machen.
Nun wird dieses SelectedDish für den nächsten Teil dieser Übung nützlich sein.
Lassen Sie uns also die Änderungen speichern und dann zu unserer Vorlage zurückkehren.
In der Vorlage, was ich tun werde, ist direkt unter dem Menü,
ich werde ein Kartenelement aus eckigem Material verwenden, um
dieses selectedDish direkt unter dem Menü dort anzuzeigen.
Nun, obwohl dies nicht der beste Weg ist,
dies zu tun, aber das mache ich in Vorbereitung auf die nächste Übung, nur um
Ihnen zu zeigen, wie ein Material Kartenelement für unsere Anwendung verwendet werden kann.
Also, ich werde hier ein div mit einem fx flex verwenden,
und dann werde ich zu diesem div
ein nGIF mit dem SelectedDish hinzufügen.
Beachten Sie also, dass ich hier ein nGIF auf dieses div anwende, um
anzugeben, dass, wenn das selectedDish derzeit null ist,
ich dieses div nicht zum dom hinzufügen werde.
Wenn dies nicht der Fall ist,
wird dieses div dem dom hinzugefügt
und zeigt das Kartenelement mit dem Inhalt im If an.
Also werde ich ein Kartenelement verwenden, um die Details des SelectedDish anzuzeigen. Um
das zu tun,
benutze ich hier eine Mattenkarte von der Materialdesigns Karte hier.
Die Mat-Karte selbst hat
einen Mat-Card-Header Teil
und auch zusammen mit dem Mat-Card-Header
wird es einen Mat-Card-Inhalt haben.
Lassen Sie mich diesen Mat-Card-Inhalt abschließen.
Also, in der Kopfzeile, was möchte ich in der Kopfzeile anzeigen?
In der Kopfzeile möchte ich
einen Mat-Card-Titel verwenden, um
hier die Details des Namens des SelectedDish anzuzeigen.
Also, ich würde hineingehen und h3 sagen und das h3 schließen und innen hier werde ich
die Interpolation verwenden und dann
SelectedDish Name und Pipe Großbuchstaben sagen.
Beachten Sie also, wie ich den Namen des SelectedDish mit dem Mat-Card-Titel eingefügt habe.
Nun, zusätzlich werde ich eine Methode verwenden, ein
genanntes Bild, das ein Attribut namens mat-card-image nimmt und
die Quelle wäre, wie Sie erwartet haben,
sollte dies selectedDish.Image und
dann die Alternative, die ich
als selectedDish.Name geben werde.
Also, das wäre das Bild, das in meiner Karte hier enthalten sein wird.
Also, im Inhalt,
werde ich SelectedDish Beschreibung einschließen,
und dann zusammen mit dem Inhalt hier,
kann ich auch einige Schaltflächen an der Unterseite der Karte hinzufügen.
Also, ich werde mat-card-Aktionen hier und
innen verwenden, kann ich einen Knopf einschließen.
Sie sehen also, dass dies die Verwendung einer Schaltfläche
in meiner Anwendung ist, zwei Schaltflächen.
Beachten Sie die Verwendung dieser Mat-Button hier.
Also, dies wird diese Schaltfläche in ein materielles Design wie Schaltfläche hier verwandeln
, und so werden diese beiden Tasten unten auf meiner Karte erscheinen hier.
Also, damit habe ich in den Details des SelectedDish hinzugefügt.
Es gibt Grund für mich, das zu tun.
Ich zeige Ihnen, wie Sie die Details in einer Karte anzeigen können,
nun, das ist in Vorbereitung auf Ihre erste Aufgabe.
So können Sie hier sehen, wie wir eine Materialdesign-Karte in unserer Vorlage verwenden können.
Gehen Sie zu @module .ts, müssen wir die Karte und das Schaltflächenmodul importieren.
Also, nach oben gehen wir sagen, importieren MatCardModule von
eckigen Materialkarte und
importieren MatButtonModule aus eckigem Materialknopf.
Nun, da wir diese beiden oben hinzugefügt haben,
gehen wir zum Dekorator,
und in den Importen fügen wir das MatCardModule und das MatPatternModule hinzu.
Also, lassen Sie uns die Änderungen speichern und dann einen kurzen Blick auf unsere Webseite werfen.
Wenn Sie sich unsere eckige Anwendung im Browser ansehen,
sehen Sie jetzt, dass wir das Menü
hier angezeigt haben und dann unten haben wir jetzt ein Kartenelement.
So können Sie hier das Kartenelement mit dem Titel dort und dem Bild sehen.
Natürlich sieht das Bild schrecklich aus, weil es
die tatsächliche Bildgröße ist, die ich Ihnen gegeben habe, ist so
klein und es wurde erweitert, um den gesamten Bildschirm zu füllen.
Sehen Sie sich hier unten an. Dies
enthält also die Beschreibung des Bildes und dann zwei Schaltflächen
hier, unten unten hier.
So, das ist, wie die Mat-Button die Schaltflächen in einer eckigen Vorlage formatiert,
so dass Sie mögen und die Freigabe-Schaltfläche haben.
Natürlich tun sie nichts,
aber beachten Sie, dass das Materialdesign wie Verhalten da ist.
Wenn Sie also auf die Schaltfläche klicken,
können Sie sehen, wie die Wellen durchlaufen.
Deshalb habe ich mich entschieden, das
Winkelmaterialmodul für die Gestaltung der Vorlagen in diesem Kurs zu verwenden.
Wenn man es auf einem kleineren Gerät betrachtet,
sieht es auf einem kleineren Gerät viel attraktiver aus.
So können Sie sehen, dass das Rendering auf einem kleineren Gerät viel besser ist,
Sie können sehen, dass Sie auf dem Bildschirm
die Karte dort sehen können, die die Details und die beiden Tasten dort zeigt,
wie und die Freigabe-Taste
und die Details des Gerichts.
Also, das schließt diese Übung ab.
In dieser Übung
haben wir also die Verwendung der Rasterliste und der
Kartenmaterial-Designkomponenten untersucht, um die Vorlage für unsere Menükomponente zu entwerfen.
Dies kann ein guter Zeitpunkt für Sie sein, einen guten Kommentar mit der Nachricht zu machen,
Winkelkomponenten Teil zwei.