Bevor wir mit den restlichen Übungen und den Aufgaben in diesem Kurs vorangehen,
dachte ich, dies wäre ein guter Zeitpunkt für mich,
meiner Winkelanwendung eine schöne Struktur zu geben.
Also, hier werde ich in der Kopf- und Fußzeile
für meine eckige Anwendung hinzufügen, so dass die Art und Weise, wie
die Benutzeroberfläche gerendert wird, viel attraktiver ist als das, was es bisher war.
Also, lassen Sie uns sehen, wie wir mehrere Komponenten aufbauen können, um
verschiedene Teile des Bildschirms innerhalb unserer Winkelanwendung zu besetzen.
Also, hier werden Sie sehen, dass meine Winkelanwendung jetzt aus einem Header besteht
, der eine separate Komponente ist, der Fußzeile
, die eine andere Komponente ist
, und dann zwischen
den beiden, werde ich den Teil meiner Winkelanwendung haben,
der später mit der Winkelfräser.
Also, sehen Sie, ich richte die Bühne für das, was später in diesem Kurs kommen wird.
Auf dem Weg
werden wir auch Font Awesome Icons innerhalb unserer eckigen Anwendung verwenden.
Ich mag nur die Font Awesome Icons,
also dachte ich, dies wäre ein guter Ort, um
diese Symbole in meine eckige Anwendung einzuführen.
Um vorwärts fortzufahren, lassen Sie uns Schriftart awesome in unsere eckige Anwendung installieren.
Also, um das zu tun, werde ich NPM verwenden, um zu gehen
und font-awesome für mich holen,
also installiere NPM font-awesome 4.7.0 und speichere.
Dann lassen Sie font-awesome installiert werden.
Also, sobald font-awesome in unsere eckige Anwendung gelangt
und dann Teil der Knotenmodule wird, die
in unserer Winkelanwendung enthalten sind, besteht
der nächste Schritt darin, es für unsere Winkelanwendung verfügbar zu machen.
Wir müssen font-awesome in unsere eckige Anwendung integrieren.
Um dies zu tun,
gehen Sie zum Quellordner,
und erstellen Sie dann eine Datei mit dem Namen _Variables.scss im Quellordner.
Fügen Sie in der Datei Variables.scss $ fa-font-path: hinzu und
setzen Sie dann in Anführungszeichen.. /node_modules/font-awesome/fonts.
Also, wir geben hier den Schriftartpfad für unsere Schriftart fantastische Dateien an.
Öffnen Sie dann die Datei Styles.scss,
und dann
fügen wir in der Datei Styles.scss ein paar Zeilen hinzu.
Zuerst werden wir die Variablen importieren, die wir gerade erklärt haben, indem wir @import sagen,
und in Anführungszeichen Variablen,
dann werden wir die font-awesome Dateien dort importieren,
dann sagen wir
@import.. /node_modules/font-awesome/scss/font-awesome. Wir importieren die
SCSS Version davon, weil wir SCSS in unserer eckigen Anwendung verwenden.
Sobald wir die Stile für die CSS-Datei geändert haben,
speichern wir die Änderungen.
An diesem Punkt müssen wir möglicherweise
unseren Server neu starten, der unsere Winkelanwendung bereitete.
Also, wo Sie den NG-Dienst eingegeben
haben, möchten Sie möglicherweise den Server stoppen, der Ihre Winkelanwendung bereitstellt, und
starten Sie ihn neu, so dass er diese neuen Änderungen enthält, die vorgenommen wurden.
Also, wenn ich zu meinem Terminal
gehe,
werde ich meinen Server stoppen und dann den Server neu starten, damit er die Änderung berücksichtigt, die ich vorgenommen habe.
Sie würden den aktuellen Zustand
unserer Winkelanwendung sehen, indem Sie sie im Browser betrachten.
Also, das ist, was wir in unserer Winkelanwendung haben.
Ich möchte in der Lage sein,
dieser Ansicht eine Kopf- und Fußzeile hinzuzufügen, damit ich sowohl die Kopf- und Fußzeile als auch
dann den tatsächlichen Inhalt zwischen der Kopf- und der
Fußzeile in der Art und Weise verwenden kann, wie ich meine Winkelanwendung konstruiere.
Um dies zu tun,
werde ich zwei neue Komponenten namens Kopf- und Fußzeile erstellen und
ihnen erlauben, ihren Teil des Bildschirms zu verwalten, der ihnen zugewiesen ist.
Gehen Sie zur Eingabeaufforderung, lassen Sie mich eine neue Header-Komponente generieren.
Ich kann sogar sagen ng g,
das ist genug, um eckige CLI zu
erkennen, dass es eine Komponente generieren will.
Also, ich sage ng g Komponenten-Header,
und auch ng g Komponenten-Fußzeile.
Also, jetzt habe ich zwei Komponenten, die für mich verfügbar sind
, um in meiner Winkelanwendung zu verwenden.
Wie werde ich diese beiden Komponenten nutzen?
Gehen wir zur App component.html Datei,
und nutzen Sie dann diese beiden Komponenten in der Art und Weise, wie wir
den gesamten Bildschirm für unsere Winkelanwendung zusammenstellen.
Zurück zu unserer Anwendung
sehen wir, dass die app module.ts Datei
bereits die Kopf- und Fußzeilenkomponente enthält
und sie bereits in die Deklarationen hier aufgenommen wurden.
Dies ist also der Vorteil der Verwendung der eckigen CLI,
es kümmert sich um all diese Grundlagen für
Sie, so dass Sie sich darauf konzentrieren können, nur Ihre Winkelanwendung zu erstellen.
Also, das ist der Grund, warum ich die eckige CLI
als Ansatz zum Erstellen meiner Winkelanwendung liebe.
Also jetzt, lassen Sie uns auf die App-Komponenten HTML-Datei gehen.
Also, hier sehen Sie, dass wir das App-Menü dort unten aufgenommen haben.
Ich werde diese Symbolleiste aus meiner App-Komponenten-HTML-Datei entfernen.
Diese Symbolleiste wird Teil der Header-Vorlage für meine Header-Komponente.
Stattdessen
enthält meine App-Komponenten-Vorlagendatei nur die Kopfzeile und die Fußzeile am unteren Rand.
Sie sehen also, dass
wir jetzt die Ansichten der drei Komponenten haben.
Die Kopfzeile, das Menü
und die Fußzeile, die den gesamten Bildschirm einnehmen.
Also, diese drei Komponenten bekommen diesen Teil des Bildschirms für sich selbst.
Lassen Sie uns die Änderungen speichern und werfen Sie einen kurzen Blick auf unsere Anwendung im Browser. Wenn Sie
zur Anwendung im Browser gehen,
sehen Sie jetzt, dass der Header bereits besetzt hat, es ist
Teil des Bildschirms dort oben, und offensichtlich,
da wir gerade die Komponente vorbereitet haben,
sagt es nur Header funktioniert
, und dann unten unten
hat die Fußzeile auch ihren Platz in der -Bildschirmseite.
Jetzt werden wir fortfahren und die Vorlagen sowohl für die Kopf- als auch für die Fußzeile aktualisieren
, so dass wir unsere Benutzeroberfläche für unsere Winkelanwendung gut definieren können.
Beginnen wir mit der Arbeit an unserer Fußzeile.
Um mit der Fußzeile zu beginnen,
gehen wir zur Vorlagendatei der Fußzeile,
und dann werden wir dies durch die neu entworfene Vorlage der Fußzeile ersetzen.
Nun, zu Ihrer Bequemlichkeit,
habe ich den Code für Sie in der Anleitung zur Verfügung gestellt.
Es ist ratsam, den gesamten Code von dort zu kopieren
und ihn dann hier einzufügen.
Überprüfen Sie dann, was diese Fußzeile tut.
Hier sehen Sie, dass ich den Code für meine Fußzeilenvorlage eingefügt habe.
Nun, ich werde ein wenig später zu diesem Code zurückkommen.
Wenn Sie den vorherigen Kurs auf Bootstrap gemacht haben,
würden Sie sehen, dass dies der eckige Materialweg ist, um
die gleiche Art von Struktur für die Fußzeile zu implementieren, die wir im Bootstrap-Kurs gemacht haben.
Einige dieser Dinge werden für Sie bereits erkennbar sein,
aber lassen Sie mich das Update der Fußzeilenvorlage abschließen,
und dann werden wir auch ein paar SCSS-Code in meine Footer Component.scss-Datei hinzufügen
und dann einen Blick darauf werfen, wie die Fußzeile jetzt formt.
Hier habe ich wieder den Code
aus den Übungsanweisungen eingefügt, die diesem Video folgen,
um die verschiedenen SCSS-Klassen zu zeigen, die ich in meiner Fußzeile hinzugefügt habe.
Also, ich habe ein paar Klassen, die ich hier definiert habe,
ich werde sie verwenden, um einen Teil meiner Fußzeile zu definieren,
und dann ähnlich Fußzeilenklasse hier,
und ich habe hier eine SCSS-Mischung
und einige Variablen, die
verschiedene Farben definieren, die ich in meiner Winkelanwendung verwenden werde.
Lassen Sie uns also die Änderungen speichern, die wir vorgenommen haben.
Werfen wir einen Blick auf die Fußzeile in seiner aktuellen Inkarnation,
und dann kommen wir zurück und besuchen den Code, den ich sowohl
in die Fußzeilenkomponenten-Vorlagendatei als auch den SCSS-Code hier aufgenommen habe.
Gehen Sie zu unserer eckigen Anwendung im Browser, wallah,
dort haben Sie die neue Fußzeile für unsere eckige Anwendung.
Sie können also sehen, dass ich hier ein paar Dinge habe.
Diese am linken Rand sind die verschiedenen Links
zu verschiedenen Seiten, die Teil meiner Angular-Anwendung sein werden.
Wir werden sehen, wie wir das im Rahmen der nächsten Übungen machen.
Nun, hier benutze ich die Tastenkomponente, die
Teil von Angular Material ist, um diese Links hier zu definieren,
dann habe ich die Adresse hier,
und dann benutze ich auch wieder Tasten, um diese Reihenfolge
von Schaltflächen für die verschiedenen Social Media Links für mein Restaurant hier zu definieren.
Sie können also sehen, dass ich all diese habe. Um
diese zu erstellen, verwende ich
hier die Angular Materialunterstützung für kleine schwebende Aktionstasten,
und das gibt eine schöne Struktur dafür.
Wenn Sie die Bootstrap-Version davon gesehen haben,
gefällt mir das viel besser als die Bootstrap-Version, die ich im vorherigen Kurs erstellt habe.
Also, unsere Fußzeile ist jetzt gut an Ort und Stelle.
Schauen wir uns schnell einen Teil des Codes in der Fußzeile an.
Nun, ich werde das nicht in einer ganzen Menge Detail erklären, weil es sich um
mehr mit dem Angular Material als Angular selbst handelt,
aber auf dem Weg, indem Sie nur die Struktur des Codes betrachten,
werden Sie beginnen zu sehen, wie
diese Winkelmaterial-Komponenten verwendet werden können, um etwas zu definieren wie diese. Wenn Sie
zur Fußzeilenkomponente gehen,
sehen Sie, dass ich hier ein äußeres div habe, für das ich
hier einige eckige Layout, Flex-Layout-Attribute angegeben habe,
also sage ich, dass FxLayout-Zeile
und dann FxLayout sm und xs Spalte sein.
Also, für kleine und extra kleine Bildschirmgrößen
wird den gesamten Inhalt als Spalten zu positionieren,
aber für die größeren Bildschirmgrößen
wird es sie als Zeile positionieren.
Also, das ist, was mir die schöne Struktur für meine Fußzeile gibt.
Wie Sie im UI-Div sehen,
positioniere ich das gesamte Content-Center-Center hier,
und unten
definiere ich das erste.
Also, dieser mathematische Twist hier, den ich verwende, definiert meine Links hier.
Also, in diesem verwende ich Matte als Winkel-Materialkomponente,
und im Inneren verwende ich das A mit dem
Mattenknopf-Komponenten-Attribut, das einem zugewiesen ist, um diese Schaltflächen hier zu erstellen.
Später komme ich zurück und füge
den eigentlichen Code für diese Links in den nachfolgenden Übungen hier hinzu.
Dies hilft mir, die Liste der Links auf der linken Seite zu erstellen.
Dies ist die Adresse, die Sie sehen,
das ist ziemlich einfach zu betrachten.
Also, das ist ein div, für das ich FxFlex mit 50 verwende,
und das andere mit FxFlex mit 40.
Also, 40 bedeutet 40 Prozent und 50 bedeutet 50 Prozent,
und hier verwende ich FxFlex-Offset 20 Pixel.
Es verschiebt diesen Inhalt also um 20 Pixel nach rechts.
Also, ich habe einen 20-Pixel-Raum auf der linken Seite für
dieses spezielle div, das diese Links hier enthält.
Dann endlich unten hier,
ich habe diese Reihe von Links, die ich verwende, um
die Bar mit allen Social-Media-Links dort zu erstellen.
Also, ich benutze eine mit dem Matten-Symbol-Button hier.
Also, das ist es, was die abgerundeten Schaltflächen erstellt, die Sie in der Fußzeile sehen.
Jetzt wende
ich für jeden von diesen hier die entsprechende Klasse an.
So können Sie feststellen, dass Schaltfläche Google Plus, Button Facebook,
alle diese Klassen sind in meiner SCSS-Datei definiert,
wo ich die Farben für den Hintergrund angegeben habe und so weiter dafür,
so dass es dem typischen Farbschema entspricht, das diese Social-Media-Websites verwenden.
Also, verbringen Sie ein wenig Zeit, um diesen Code hier zu betrachten,
und dann werden Sie schnell ein Gefühl davon bekommen, wie die Fußzeile entworfen wurde.
In ähnlicher Weise gehen Sie zu den Fußzeilenkomponenten Sass Code hier,
so dass Sie sehen können, dass ich verschiedene Farben hier definiert habe.
Ich benutze eine Mischung mit dem hier eingerichteten Rand,
und dann für meine Fußzeile
definiere ich die Hintergrundfarbe entsprechend,
und merke die verschiedenen Klassen, die ich hier
eine Schaltfläche Facebook definiere, für die die Farbe und
die Hintergrundfarbe ich für jeden von ihnen definiert habe.
Also, dass die entsprechende Farbe
dieser Social-Media-Website wird als Hintergrundfarbe für jeden dieser verwendet.
Nun, im Bootstrap-Kurs früher,
hatte ich den Bootstrap Social benutzt, um dasselbe zu erreichen.
Das funktioniert nicht sehr gut mit dem Angular-Material,
deshalb habe ich hier gerade meine eigenen Sass-Brillen erstellt
und dann den Code hinzugefügt, den ich brauche, um diese Schaltflächen dort zu erstellen.
Wenn Sie weitere Schaltflächen hinzufügen müssen,
erstellen Sie einfach mehr Klassen wie diese
den Schaltflächen entsprechen, die Sie Ihrer Anwendung hinzufügen möchten.
Das baut also unsere Fußzeile auf.
Nun, der Header ist der nächste Teil, den wir anvisieren werden.
Gehen Sie in den Header, öffnet die
Header-Komponenten-Vorlagendatei und Sie sehen, was es enthält.
Wir werden dies durch
die Vorlage ersetzen, die ich für Sie in den Anweisungen gegeben habe, die hier folgen.
Also, gehen Sie einfach voran und schneiden und fügen Sie diesen Code hier ein,
denn dies hat nichts speziell mit eckig zu tun.
Deshalb erlaube ich Ihnen nur, den Code direkt von dort auszuschneiden und einzufügen,
spart uns etwas Zeit.
Sie können sehen, dass ich jetzt die Header-Vorlage durch Code ersetzt habe.
Ähnlich, während wir dabei sind,
werden wir auch einige SCSS-Code für meine Header.components.scss-Datei hier hinzufügen,
gehen Sie einfach und kopieren Sie den Code aus den Anweisungen.
In ähnlicher Weise
werden wir, während wir dabei sind, einige weitere SCSS-Klassen zu meiner Hauptdatei styles.scss hinzufügen.
Also, in diese Haupt-styles.scss-Datei
werde ich in Unterfarben und ein paar weitere Klassen hinzufügen.
Also, lassen Sie uns den Code aus den Anweisungen einfügen, die ich Ihnen gegeben habe.
Also, das Update auf die Styles.scss-Datei ist jetzt abgeschlossen,
also habe ich hier einige Farben hinzugefügt und dort gemischt,
und dann habe ich unten ein paar weitere Klassen hier hinzugefügt, die
mir helfen, wenn ich meine Vorlagen für meine Winkelanwendung entwerfe.
Also, all diese Änderungen,
lassen Sie uns die Änderungen speichern,
werfen Sie einen kurzen Blick darauf, wie mein Header jetzt in der Anwendung aussieht,
und dann kommen wir zurück und besuchen schnell den Code, den wir gerade hier aufgenommen haben.
Wenn Sie zu meiner Angular-Anwendung im Browser zurückkehren,
sehen Sie jetzt die Symbolleiste wieder in der Kopfzeile hier erscheint,
zusammen mit ein paar Links
darin und dann ein Bild, das das Logo für mein Restaurant darstellt,
und dann haben Sie hier etwas, das wir die Jumbotron-Datei im vorherigen Kurs verwenden.
Ich werde nur eine Klasse namens Jumbotron verwenden, um dies
auch in der Angular-Anwendung zu erstellen,
also hier auf der linken Seite habe ich die Informationen meines Restaurants und
das Logo des Restaurants und ließ mir hier etwas Platz für das Hinzufügen von etwas in der Zukunft.
Also, hier sehen Sie, dass meine Anwendung jetzt Gestalt annimmt mit einem Header,
mit einigen Links darin.
Jetzt werden wir diese Links in
den nächsten Übungen verwenden, um meine Angular-Anwendung einzurichten,
und dann das Menü dazwischen und dann unten unten hier meine Fußzeile. Wenn Sie
zu meiner Header-Komponenten-Vorlagendatei gehen,
können Sie jetzt sehen, wie ich die Symbolleiste mit den zusätzlichen Schaltflächen hier erstellt habe.
Sie erinnern sich also, dass wir die Symbolleiste
bereits in der App-Komponenten-Vorlagendatei verwendet
haben, ich habe sie von dort geschnitten und stattdessen die Symbolleiste in die Header-Vorlage hier verwendet.
Nun, in dieser Symbolleiste,
habe ich einige Links mit der Button-Klasse hinzugefügt, die darauf angewendet wird, und das
ermöglicht es mir, diese Links in der Symbolleiste als Menü für meine Webanwendung zu erstellen.
Unten habe ich ein div mit dem Klassencontainer und Jumbotron erstellt.
Das ist der Grund, warum ich die Container- und Jumbotron-Klassen in meine SCSS-Datei hinzugefügt habe,
damit ich sie in meinen Vorlagen hier verwenden kann.
Also, für die
ich wieder anwende und einige Flex-Layout-Attribute hier, um mir zu helfen, den Bildschirm dort zu entwerfen.
Dann können Sie sehen, wie ich hier ein paar divs mit
dem FxFlex-Attribut verwendet habe, um die Benutzeroberfläche
für meine Anwendung hier zu erstellen.
Also, verbringen Sie ein wenig Zeit hier, um einen kurzen Blick auf diesen Code hier zu werfen, um
schnell zu verstehen, wie mein Layout für meine Header-Vorlage erstellt wurde.
Es ist nicht so kompliziert,
wenn Sie den Bootstrap-Kurs abgeschlossen haben,
ist das nicht so schwer zu verstehen.
Auf dem Weg lernt man auch das Winkelflex-Layout und dann
auch die Winkelmaterialkomponenten hier. Wenn Sie
zur SCSS-Datei für die Header-Komponente gehen,
können Sie sehen, dass ich hier einige Farben hinzugefügt und dann einen Mix
in und dann auch eine Jumbotron-Klasse hier hinzugefügt habe.
Nun ist die Container-Klasse nicht hier,
die Container-Klasse befindet sich in der Haupt-Style-Datei.
Weil die Container-Klasse etwas ist, das ich
für viele der Vorlagen dort verwenden werde.
Deshalb habe ich die Container-Klasse der Styles.scss-Datei hinzugefügt
, die die gemeinsame Datei für meine gesamte Winkelanwendung ist.
Also, da habe ich hier einige zusätzliche Farben hinzugefügt,
und auch ich habe hier eine Mischung erstellt
und dann in den Container,
die primären Hintergrund- und die Hintergrundakzentfarben hinzugefügt,
und dann verwende ich auch eine andere Klasse namens Flexes Spacer,
die ich in einem von die späteren Übungen.
All diese Schritte sind in Vorbereitung auf das, was
in den nächsten Übungen kommen wird.
Meine Angular-Anwendung hat jetzt eine gute Form in Bezug auf die Art und Weise angenommen, wie die Benutzeroberfläche ausgelegt ist,
so dass ich jetzt beginnen kann, viel mehr neue Funktionen für eckig einzuführen. Wenn Sie
noch einen Besuch in meiner Angular-Anwendung im Browser tätigen,
lassen Sie mich sehen, wie diese Anwendung in verschiedenen Bildschirmgrößen aussieht.
Dies ist also die Standard-Desktop-Bildschirmgröße,
also lassen Sie uns zu einer kleineren Bildschirmgröße wechseln und dann sehen, wie die Anwendung aussieht.
Also, dies ist eine iPhone 6 Plus Bildschirmgröße,
so dass Sie sehen können, wie das Layout für die kleinere Bildschirmgröße unterschiedlich ist.
Also, meine Kopfzeile ist genau da oben und mein Menü unten und die Fußzeile hier,
merke, wie die verschiedenen Teile der Fußzeile
für die extra kleine Bildschirmgröße unterschiedlich angelegt wurden.
Dies ist die gleiche Anwendung im Querformat oder ein iPhone 6 Plus,
so dass Sie sehen können, dass mein Header so ausgelegt ist und das Menü dort und die Fußzeile.
Das zeigt Ihnen also, dass ich das eckige Flex-Layout genutzt habe,
um verschiedene Layouts für verschiedene Bildschirmgrößen erstellen zu können.
Also, wieder, wenn Sie den Bootstrap-Kurs früher besucht haben,
werden Sie beginnen zu sehen, wie das responsive Design mit
dem eckigen Flex-Layout auch verwendet werden kann, um ähnliche Ergebnisse zu erzielen.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir unsere Angular-Anwendung vorbereitet und
für die restlichen Übungen in diesem Kurs vorbereitet.
Dies ist auch ein guter Zeitpunkt für Sie, ein Git-Commit mit den Nachrichtenkopf- und -fußzeilen zu machen.