In der vorherigen Übung
haben wir unsere erste grundlegende Angular-Anwendung ausgearbeitet.
Wie ich bereits erwähnt habe, werden wir an dieser Angular-Anwendung arbeiten und
sie während des gesamten Kurses weiter entwickeln.
Nun, bevor wir mit der Arbeit an unserer Angular-Anwendung beginnen,
lassen Sie uns unsere Angular-Anwendung so konfigurieren, dass wir einige zusätzliche Module verwenden,
die es uns ermöglichen, die Vorlagen für unsere Angular-Anwendung zu entwerfen.
Wir werden das Angular Material Modul für die Gestaltung der UI-Layouts verwenden.
Das Modul Angular Material bietet uns eine Reihe interessanter Layout-Komponenten
, die wir bei der Gestaltung unserer Angular-Komponenten-Vorlagen nutzen können.
Darüber hinaus werden wir das Flex-Layout verwenden, das auf dem CSS-Flex-Layout basiert,
was es uns ermöglicht, responsive Design innerhalb unserer Angular-Anwendung durchzuführen.
In dieser Übung
werden wir diese Konfigurationen durchführen.
Auf dem Weg lernen wir unsere ersten kurzen Kenntnisse der Komponenten kennen,
noch bevor wir die Komponenten in der nächsten Lektion genauer untersuchen.
Um zu beginnen, beginnen wir unsere Reise mit einem kurzen Besuch der Datei app.component.ts.
Dies ist die Datei, die
die Root-Komponente unterstützt, die Teil unserer Angular-Anwendung ist.
Nun, wenn man sich diese Root-Komponente anschaut,
gibt es ein paar Dinge, die Ihnen auch ohne viel Erklärung sehr klar werden.
Das erste, worauf ich Sie aufmerksam machen möchte, ist diese Importerklärung.
Wie Sie sehen können, importiert dies die Komponentenklasse aus der Angular-Kernbibliothek.
Danach bereiten wir unsere AppComponent-Klasse hier vor
und exportieren diese Klasse.
Also, innerhalb dieser AppComponent-Klasse, die wir deklariert
haben, haben wir eine Variable, die wir hier als title deklariert haben,
die derzeit als String zugewiesen ist. Wenn Sie
nun einen kurzen Blick auf diese Variable werfen,
beginnen Sie sich sofort zu fragen,
wie dies mit dem zusammenhängt, was wir im Browser gesehen haben,
als Sie sahen, dass unsere Angular-Anwendung im Browser angezeigt
wurde, zeigte die Angular-Anwendung genau diese Wörter im Browser an.
In der Tat spielt diese Variable eine wichtige Rolle,
um die Ansicht zu erhalten, die Sie in unserem Browser gesehen haben.
Nun sehen Sie auch, dass
diese Komponentenklasse hier mit einem Dekorator angehängt wird.
Also wieder, dies ist ein weiterer Dekorator, dem Sie in Angular begegnen werden.
Also, das, wie wir sehen, ist ein Komponenten-Dekorator.
Der Komponenten-Dekorator nimmt intern ein JavaScript-Objekt als Parameter hier,
und die erste Eigenschaft, die Sie hier sehen als selector: app-root.
Nun, wenn Sie sich erinnern, als wir uns die Datei index.HTML angesehen haben,
haben wir gesehen, dass wir dort ein Element namens app-root aufgenommen haben.
Jetzt beginnen Sie zu sehen, woher diese App-Root entsteht.
Dies ist also der Selektor für die Komponente, die wir hier deklarieren,
was innerhalb unserer Template-Klasse verwendet wird, um anzugeben, wo
die Ansicht, die dieser Komponente entspricht, im Browser angezeigt werden soll.
Die zweite Eigenschaft, die Sie hier definieren, ist die TemplateURL.
Dies verweist auf eine Datei,
eine HTML-Datei, wie Sie sehen können,
die die Vorlage enthält, die dieser bestimmten Komponente entspricht.
Die Vorlage, die die Ansicht für diese Komponente definiert.
Die dritte Eigenschaft, die Sie hier definieren, wie Sie sehen können, sagt StyleURLs,
die, wie Sie hier bemerken, der Datei app.component.scss zugewiesen ist.
Diese Datei sollte also den gesamten scss-Code enthalten, der für das
CSS-Styling für unsere Komponenten-Vorlage verwendet werden kann.
Dies ist also ein kurzer Besuch der Datei app.component.ts.
Gehen wir nun zur Datei App.component.html,
und werfen Sie einen kurzen Blick auf die Vorlage.
Gehen Sie in die App.component.html Datei,
sehen Sie, dass diese app.component-Datei,
der HTML-Code hier enthält nur ein h1-Tag mit etwas hier mit einem doppelten Klammern.
Nun, offensichtlich ist dies nicht etwas, das Sie aus Ihrem Wissen über HTML,
CSS oder JavaScript, das Sie zuvor gesehen haben, gewohnt sind.
Dies ist Angular-Syntax.
Das nennen wir als Interpolation.
Dies verwendet die unidirektionale Datenbindung des Angular.
Ich werfe Ihnen in diesem Moment ein paar Begriffe zu.
Halten Sie diese Begriffe fest, werden wir zurückkommen, um diese Begriffe
in den verbleibenden Lektionen dieses Kurses genauer zu betrachten.
Das erste, was ich erwähnt habe, ist die Interpolation,
die zweite, die ich erwähnte, ist eine unidirektionale Datenbindung.
Außerdem sehen Sie sofort, dass dies die Variable ist, die Sie in der
Begleitdatei TypeScript gesehen haben, die den TypeScript-Code definiert, der der App-Komponente entspricht.
Also, sobald Sie hier etwas wie dieses angeben,
besteht die Implikation darin, dass was auch immer der Wert für diesen Titel
hier ersetzt wird und als innerer HTML-Code für dieses h1-Tag hier verwendet wird.
Das ist der Zweck, das hier einzubeziehen.
Wir werden nun einige der
anderen Angular Relation Module installieren, die es uns ermöglichen, Vorlagen zu entwerfen.
Dann kommen wir zurück zu dieser App.component.html Datei.
Dann entwerfen Sie diese Vorlage ein wenig später in dieser Übung neu.
Um uns dabei zu helfen, responsive Ansichten innerhalb unserer Angular-Anwendung
zu entwerfen, werden wir die Hilfe von ein paar
verwandten Modulen für Angular nehmen, die als Angular Material Modul bezeichnet werden.
Das Angular Material Modul stellt uns eine Reihe von Komponenten zur Verfügung.
Layout-Komponenten, die wir bei der Gestaltung
unserer neuen Vorlagen für unsere Angular-Komponenten verwenden können.
Das Angular Material Modul, wenn Sie dies vergleichen möchten, ist etwas wie das, was Bootstrap
uns für die Gestaltung unserer Webseiten zur Verfügung gestellt hat, die wir im vorherigen Kurs untersucht haben.
Außerdem werde ich ein anderes Modul verwenden, das als Angular Flex-Layout-Modul bezeichnet wird.
Das Flex-Layout-Modul bietet Unterstützung für die Verwendung von
CSS-Flex-Layout innerhalb unserer Angular-Vorlagen für unsere Angular-Komponenten.
Nun, diese beiden Module müssen explizit
installiert und dann in unsere Angular-Anwendung importiert werden,
das ist, was wir im nächsten Schritt tun werden.
Aber bevor wir vorwärts gehen,
ist eine Frage, über die Sie sich vielleicht fragen,
warum nicht Bootstrap für das Design der Vorlagen für unsere Angular-Anwendung verwenden?
In der Tat können Sie Bootstrap auch verwenden, um die Vorlagen für unsere Angular-Anwendung zu entwerfen.
Sie können jedoch nur
den CSS-Komponentententeil von Bootstrap innerhalb Ihrer Angular-Anwendung verwenden.
Die jQuery-basierten Komponenten.
Die JavaScript-Komponenten können nicht explizit verwendet werden, es könnten einige Konflikte
zwischen den jQuery-basierten Komponenten von Bootstrap und dem Angular-Code selbst geben.
Daher ist es am besten, die JavaScript-Komponenten von Bootstrap
zu verwenden, falls Sie Bootstrap als Weg zum Entwerfen Ihrer Angular-Vorlagen verwenden.
Aber auf der anderen Seite
dachte ich auch, dass dies uns eine gute Gelegenheit bieten würde, zu lernen, ein
anderes UI-Layout-Framework zu bekommen, das das Angular Material Framework ist.
Das ist der Grund, warum ich in diesem
speziellen Kurs das Angular-Materialframework und das Angular-Flex-Layout verwendet habe.
Nun, während wir den Rest dieses Kurses durchlaufen,
werde ich nicht explizit erklären, wie
die Winkelmaterial-Komponenten verwendet werden oder wie man das Winkel-Flex-Layout verwendet.
Stattdessen werden wir sie lernen, indem wir uns Beispiele ansehen.
Wir werden diese beiden,
sowohl die besten Angular Material Komponenten als auch die Angular Flex-Layout-Unterstützung, verwenden,
wenn wir unsere Vorlagen für unsere Winkelkomponenten in diesem speziellen Kurs entwerfen.
Also, durch den Prozess der Verwendung dieser Komponenten,
werden Sie auch auf dem Weg,
lernen, wie Sie sowohl Winkelmaterial als auch
Winkel-Flex-Layout in Ihrer Winkel-Anwendung verwenden.
Ich dachte, wenn Sie die Übungen machen,
würden Sie viel mehr über Winkelmaterial lernen.
Um nun die konzeptionellen Aspekte zu erklären, warum
Angular Material Komponenten so funktionieren, wie sie funktionieren oder wie Grid funktioniert
oder wie ein responsive Design funktioniert,
haben wir bereits einige davon im vorherigen Kurs auf Bootstrap untersucht.
So werden uns auch die gleichen Konzepte helfen.
Stattdessen werden wir uns die Mechanik der Verwendung von Winkelmaterial und
Winkel-Flex-Layout innerhalb unserer Winkel-Anwendung in diesem speziellen Kurs ansehen.
Um mit einem Winkelmaterial zu beginnen, müssen Sie
natürlich das erste, was Sie tun müssen, das Winkelmaterial-Modul installieren. Geben
Sie also an der Eingabeaufforderung npm install —save @angular /material ein.
Also, wie Sie sehen können,
geben wir alle Angular Relation Module mit dem @angular an,
so dass Sie auch das Gleiche für das Flex-Layout sehen werden.
Wir installieren die Version 6.4.7 des Angular Material Moduls.
Darüber hinaus erfordert das Materialmodul die Installation von CDK.
Also, wir werden das auch installieren, indem wir
npm install @angular /cdk @6 .4.7 —save tun
und das zusammen mit Angular Material installieren.
Also, Angular Material nutzt die Angular cdk für seine Komponenten.
Wenn Sie Angular Material verwenden,
müssen Sie außerdem das Angular Animations Modul in Ihre Angular-Anwendung importieren.
Beginnend mit der Angular Version vier
wurde die Angular Animationsunterstützung
aus den Kernmodulen in ein eigenes separates Modul extrahiert.
Wenn Sie also
Animationen in Ihrer Angular-Anwendung verwenden müssen,
müssen Sie das Angular Animations Modul explizit installieren.
Also, lasst uns weitermachen und das auch installieren.
Sie werden also sagen,
npm install —save @angular /animations @6 .1.7.
Ein anderes Modul, das ich
zusammen installieren werde, heißt HammerJS.
Das HammerJS-Modul wird von Angular verwendet,
um einige Gesten innerhalb Ihrer Angular-Anwendung zu unterstützen.
Also, das ist der Grund, warum wir HammerJS auch in unserer Anwendung installieren,
und die aktuelle Version von HammerJS, die wir verwenden, ist 2.0.8.
Nun haben wir jetzt alles installiert, was wir brauchen,
damit das Winkelmaterialmodul innerhalb unserer Angular Anwendung verwendet werden kann.
Als nächstes werde ich fortfahren, um
das Angular Flex-Layout in meiner Angular-Anwendung zu installieren.
Also, um das zu tun, poppe ich die Eingabeaufforderung
npm install —save @angular/flex-layout
und wir installieren die neueste Version davon.
Nun, da wir alle Teile, die wir für unsere Angular-Anwendung benötigen, installiert haben,
lassen Sie uns fortfahren und dann unsere Angular-Anwendung konfigurieren, um
diese neuen Module zu nutzen, die wir in unserer Angular-Anwendung installiert haben.
Das erste, was wir tun werden, ist zu index.HTML Datei gehen,
und dann werden wir die Datei index.HTML konfigurieren, um die Winkelmaterial-Symbole zu verwenden.
Also, um die Winkelmaterial-Symbole einzuschließen, so dass sie
in den Vorlagen Ihrer Angular-Anwendung verwendet werden können, also
lassen Sie mich direkt dort in den Kopf von index.HTML gehen,
und erstellen Sie dann einen neuen Link mit
href=“ https://fonts.googleapis.com/icon?family=Material+Icons "und das ist ein Stil Blatt.
Damit kann ich nun die Winkelmaterial-Symbole in
meiner Angular-Anwendung überall dort verwenden, wo ich dies innerhalb der Vorlagen tue.
Der nächste Schritt besteht darin, zur App module.ts zu gehen und
dann die drei Module zu importieren, die wir gerade installiert haben.
Also, das erste, das ich importieren werde, wird als
BrowserAnimationsModule aufgerufen, das ich aus
@angular /platform-browser/animationen importieren werde. Also, jetzt ist
das nächste, das ich importieren werde, das MaterialToolbarModule.
Dies importiert also das @angular /material/toolbar-Modul
, das innerhalb unserer Angular-Anwendungsvorlagen verwendet werden kann.
Also, Angular Material, und importieren Sie auch
das FlexLayoutModule aus @angular /flex-layout.
Also, sobald wir alle diese Module importiert haben, dann ist eine zusätzliche Änderung, die ich
tun muss, - oh lassen Sie mich auch Hammer.JS importieren, während ich genau dort bin.
Also, lassen Sie mich
Hammer.JS in meine Anwendung importieren.
Und sobald ich dabei bin,
ist die andere Änderung, die ich tun muss, auch
diese Module in die Eingänge des NG-Modul-Dekorators hier aufzunehmen.
Also, ich gehe dorthin und sage Browsermodul,
Browseranimationsmodul und dann nach dem HTTP-Modul
werde ich das Material-Symbolar-Modul und auch das
Flex-Layout-Modul als Teil der Eingaben innerhalb des NG-Moduls Dekorator für mein App-Modul importieren.
Damit sind alle meine Konfigurationen, um das Material-Symbolar-Modul und
das Winkel-Flex-Layout-Modul zu verwenden und zusammen mit
dem Animationsmodul in eckig abgeschlossen.
Nun gehen wir in die Komponentenvorlage ein und nutzen
unsere erste Winkelmaterialkomponente bei der Gestaltung des Layouts
für unsere App-Komponente.
Wenn ich zur App-Komponenten-Vorlagendatei
gehe, werde ich dies jetzt durch
eine eckige Materialkomponente ersetzen, die
als mat-Symbolleiste bezeichnet wird.
Die Mat-Symbolleiste ermöglicht es mir,
eine Symbolleiste zu entwerfen, die ich in meiner Winkelanwendung verwenden kann.
Symbolleiste, die in der Regel oben auf der Seite in Ihrer Anwendung angezeigt wird.
Also, für diese Symbolleiste werde ich die Farbe als primär angeben.
Wir werden sehen, was das bedeutet, in kurzer Zeit.
Und auch wir werden diese MD-Symbolleiste hier schließen.
Jetzt in diesem werde ich eine Spanne mit
dem Namen meines Restaurants verwenden, für das ich diese Website entwerfe.
Also, Ristorante Con Fusion.
Jetzt sehen Sie, warum ich diesen Ordner als „Verwirrung“ bezeichnet habe.
Also, was ist das Update, das wir tun müssen, um die App-Komponente HTML-Datei.
Während wir dabei sind, werden wir auch ein paar SCSS Updates für meine Styles.scss Datei enthalten.
Also, wenn Sie hier in Ihren Code gehen,
finden Sie diese Styles.scss-Datei hier.
Hier können Sie also alle globalen Stile in
diese Datei aufnehmen, und dies wird für alle Komponenten verfügbar sein, die verwendet werden sollen.
Jede Komponente verfügt über eigene SCSS-Dateien, in denen Sie
Anpassungen auf Komponentenebene oder
SCSS-Code auf Komponentenebene für die Verwendung in dieser bestimmten Komponente einschließen können.
Wir werden beide Ansätze innerhalb
dieser Winkelanwendung verwenden, die wir in diesem Kurs entwickeln.
Aber im Moment werde ich die Haupt
Styles.scss-Datei mit etwas Code aktualisieren, der für meine ganze eckige Anwendung nützlich sein wird.
Das erste, was ich tun werde,
ist, ein vorgebautes Thema zu importieren, das über eckiges Material verfügbar ist.
Dieses vorgefertigte Thema in eckigem Material bietet uns eine Möglichkeit,
bestimmte Farben zu spezifizieren und die Art und Weise, wie einige Dinge
in meinen eckigen Materialkomponenten angeordnet sind.
Die Farben, die durch den vorgefertigten Rahmen unsere Primärfarbe,
die Akzentfarbe und die Warnfarbe verfügbar sein wird.
Jetzt wird das spezifische Thema, das ich verwenden werde, Deep Purple genannt.
Also, in diesem Fall wird die Primärfarbe tief Purple sein.
Die Akzentfarbe ist bernsteinfarben und die Warnfarbe wird in diesem Fall rot sein.
Jetzt können Sie Ihre eigenen eckigen Materialthemen erstellen, die
Sie in Ihrer Anwendung verwenden können, aber ich werde
das als eine Übung für Sie selbst überlassen.
Im Moment werde ich in meiner eckigen Anwendung eines
der vorgefertigten Dinge verwenden, die tief lila Bernstein genannt werden.
Also, um das in die Styles.scss-Datei zu gehen,
werde ich
eckiges Material
vorgefertigte Themen tief lila amber.CSS importieren.
Also, dieses eine vorgefertigte Thema werde ich innerhalb meiner eckigen Anwendung verwenden.
Sie werden ziemlich bald sehen, wie dieses vorgefertigte Thema in
der Winkelanwendung in den Vorlagen funktioniert, die wir für unsere Winkelanwendung entwickelt haben.
Darüber hinaus werde ich einige Eigenschaften für
meinen Körper der Seite index.HTML konfigurieren, so dass ich das Padding als Null,
Marge als Null angeben werde, und dann
ist die Schriftfamilie, die ich verwenden werde, rubato oder sans serif in meiner Anwendung.
Sie können wählen, was Sie wollen in Ihren Winkelanwendungen verwenden.
Ich habe mich dafür entschieden, diese beiden in meiner Winkelanwendung zu verwenden.
Speichern wir die Änderungen,
und lassen Sie uns gehen und werfen einen kurzen Blick auf unsere eckige Anwendung im Browser.
Bevor Sie dies tun,
stellen Sie sicher, dass Ihr NG serve in
einem der Terminalfenster Ihres Computers ausgeführt wird.
Der Entwicklungsserver sollte kontinuierlich ausgeführt werden, damit er automatisch
Dekompilierung durchführt und dann
die aktualisierte Version der Winkelanwendung in das Browserfenster lädt. Wenn Sie
zum Browser gehen,
sehen Sie jetzt die Änderungen, die wir an
der Winkelanwendung vorgenommen haben, spiegeln sich in der Ansicht in
meinem Browser wider, so dass Sie sehen können, dass wir jetzt eine Symbolleiste an der Spitze mit den
Formulierungen haben, die wir in der App-Komponenten-Vorlagendatei dort aufgenommen haben.
Und Sie können die Farbe sehen, die auf die Symbolleiste angewendet wurde.
Also die Farbe, Primärfarbe,
also ist dies die tiefviolette Farbe, die auf die Symbolleiste angewendet wird.
Nun wird das Thema, das wir definiert haben, entweder eine tiefe lila oder bernsteinfarbene Farbe hinzufügen,
je nachdem, was von den spezifischen Winkelmaterialkomponenten verwendet wird
, die wir in unseren Winkelapplikationsvorlagen verwenden.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir unsere Winkelanwendung so konfiguriert, dass das
Winkelmaterial und das Winkelflex-Layout verwendet werden.
Wir haben auch
unsere erste Winkelmaterialkomponente in der App-Komponenten-Vorlagendatei verwendet.
Und wir haben das eingebaute Thema aus eckigem Material für unsere eckige Anwendung verwendet.
Speichern Sie alle Änderungen und dann ist dies ein guter Zeitpunkt für Sie,
ein Git-Commit mit der Nachricht zu machen, die angular konfiguriert.