Share
Angular hat sich im Laufe der Jahre weiterentwickelt und jeder Version wurden ständig neue aufregende Funktionen hinzugefügt. Eine der Verbesserungen betrifft das Material Design, das neue Komponenten enthält. In diesem Lernprogramm wird das Angular-Material und seine Einbindung in Angular 6-Projekte behandelt.
Material Design ist eine Design-Sprache für Web- und mobile Apps, die 2014 von Google entwickelt wurde. Mit Material Design können Entwickler ihre Benutzeroberfläche leicht anpassen und dabei eine gut aussehende App-Oberfläche beibehalten, mit der sich die Benutzer wohl fühlen. Mit Material Design erhalten Sie ein gut organisiertes Format und die Flexibilität, Ihre Marke und Ihren Stil zum Ausdruck zu bringen.
Ein Beispiel für Material Design finden Sie in Houzz, einer Home-Design-Anwendung, die 2016 mit den Google Play-Awards ausgezeichnet wurde. Diese App nutzt Material Design, um seine vielen Funktionen in die begrenzten mobilen Geräte zu integrieren. Dies bietet dem Benutzer eine gute Erfahrung, indem er die Anwendung sehen und navigieren lässt, ohne sich überfordert zu fühlen. Es ist wirklich eine der besten Material Design Apps.
In diesem Beitrag geht es nicht um Material Design, daher werden wir nicht auf alle Details eingehen. Wenn Sie mehr erfahren möchten, finden Sie im Envato-Blog ein großartiges Tutorial zu Material Design.
Winkelmaterial besteht aus einer Reihe vorgefertigter Winkelkomponenten. Im Gegensatz zu Bootstrap, das Ihnen Komponenten bietet, die Sie nach Belieben gestalten können, ist Angular Material bestrebt, eine verbesserte und konsistente Benutzererfahrung zu bieten. Gleichzeitig haben Sie die Möglichkeit, das Verhalten verschiedener Komponenten zu steuern.
Genau wie Angular hat sich Angular Material seit seiner ersten Veröffentlichung stark weiterentwickelt, mit großen Verbesserungen und Fehlerbehebungen.
Um einem Projekt Winkelmaterial hinzuzufügen, verwenden wir die ng add Befehl, mit dem neue Funktionen zu Angular-Projekten hinzugefügt werden. Dieser Befehl ist ein neues Feature in Angular 6 und es ist so einfach wie:
ng add @ angle / material
Dieser Befehl fügt die Bibliothek zu einem vorhandenen Projekt hinzu und fügt CSS-Themen ein eckig.json. Es werden auch Skripte hinzugefügt index.html und aktualisieren Sie die AppModule.
Ein weiteres Feature in Angular 6 ist ng Update, welche npm-Abhängigkeiten aktualisiert, wenn eine neue Version veröffentlicht wird. Außerdem werden der RxJS-Code und der Material Design-Code aktualisiert, um die neuen APIs zu nutzen.
Winkelmaterial besteht aus mehreren Konstruktionskomponenten, die in die folgenden Kategorien fallen:
Sie können die Starterkomponenten mit dem generieren ng Update Befehl. Einige der über diesen Befehl verfügbaren Schaltpläne sind:
Diese Schaltpläne können einfach mit installiert werden ng erzeugen Befehl wie folgt:
Accentsconagua
ng Generiere @ angle / material: material-table -name : Erzeugt eine Komponente, die Daten mit einer Datentabelle anzeigtng Generiere @ angle / material: material-nav - name : Erzeugt eine Komponente mit Seitennavigation und einer Symbolleisteng Generiere @ angle / material: material-dashboard - name : Erzeugt eine Komponente, die eine dynamische Kartenliste enthält.
Für den Einstieg benötigen Sie die Angular CLI. Wenn Sie Angular CLI nicht installiert haben, installieren Sie es einfach, indem Sie den folgenden Befehl eingeben.
npm install -g @ angle / cli
Als nächstes müssen wir ein neues Angular-Projekt initialisieren. Geben Sie dazu den folgenden Befehl ein, wo Material-Nr ist der Name unseres Angular-Projekts.
ng neues Material-ng
Dieser Befehl erstellt mehrere Angular-Vorlagendateien für Ihr Projekt und installiert die erforderlichen Starterabhängigkeiten.
Wechseln Sie in das Verzeichnis Ihres Projekts und fügen Sie Ihrem Projekt Angular Material hinzu.
cd MaterialApp ng add @ angle / material
Als Nächstes werden wir einige Komponenten hinzufügen, die in vielen Anwendungen üblich sind, beispielsweise die Navigation.
Um eine Navigationsleiste hinzuzufügen, geben Sie einfach Folgendes ein:
ng Generiere @ angle / material: material-nav - name myNav
Dieser Befehl fügt eine reduzierbare Seitennavigation und eine Schubladenkomponente hinzu. Sie sollten die folgende Ausgabe erhalten, die vier Dateien enthält, nämlich mein-nav.component.css, meine-nav.component.html, mein-nav.component.spec.ts, und mein-nav.component.ts.
CREATE src / app / mein-nav / meine-nav.component.css (129 bytes) CREATE src / app / mein-nav / meine-nav.component.html (958 bytes) CREATE src / app / mein-nav / my -nav.component.spec.ts (699 Bytes) CREATE src / app / mein-nav / mein-nav.component.ts (580 bytes) UPDATE src / app / app.module.ts (795 bytes)
Jetzt offen meine-nav.component.html und Sie sollten den gesamten HTML-Code für die Navigation sehen, der für uns generiert wurde.
Speisekarte Link 1 Link 2 Link 3 Material-Nr
Standardmäßig dient ein Starter-Angular-Projekt der Standardseite, aber wir möchten die Magie von Material Design sehen! Öffnen Sie, um die generierte Navi-Komponente "Material Design" zu verwenden app.component.html und ersetzen Sie den gesamten Code durch:
Wenn Sie nun die App ausführen, wird die Navigationsleiste angezeigt.
Sie sollten auch bemerken, dass die hinzugefügte Navigationskomponente wie gezeigt in das Hauptmodul importiert wurde:
# app.module.ts import BrowserModule aus '@ angle / platform-browser'; NgModule aus '@ angle / core' importieren; import AppComponent aus './app.component'; BrowserAnimationsModule aus '@ angle / platform-browser / animations' importieren; import MyNavComponent aus './my-nav/my-nav.component'; LayoutModule aus '@ angle / cdk / layout' importieren; import MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule aus '@ angle / material'; @NgModule (Deklarationen: [AppComponent, MyNavComponent]), importiert: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule], Anbieter: [], Bootstrap:].
Im meine-nav.component.html, Nehmen wir einige Änderungen an den Menülisten vor:
Zuhause Formularsteuerelemente Schaltflächen und Anzeigen für das Navigationslayout Popups und Modale Datentabelle
Jetzt können Sie den Entwicklungsserver starten, indem Sie Folgendes ausführen:
ng Server -open
Das Ergebnis sollte so aussehen:
Wie Sie sehen, bietet Angular Material eine einfache Möglichkeit, Ihre Anwendung zum Laufen zu bringen. Mit nur wenigen Befehlen und wenigen Codezeilen konnten wir Material Design in unsere Angular-Anwendung integrieren!
Besuchen Sie unser GitHub-Repo, um den vollständigen Quellcode dieser Beispiel-App zu erhalten.
Ich hoffe, dieses Tutorial hat Ihnen geholfen zu verstehen, wie Sie die Möglichkeiten von Material Design in Ihrer App für eine erstklassige Benutzeroberfläche nutzen können. Weitere Informationen zu Material Design in Angular 6 finden Sie in den offiziellen Dokumenten, die gebrauchsfertige Vorlagen enthalten. Es ist ein großartiger Ort, um etwas über Angular zu lernen. Sie können auch unsere Angular-Tutorials und -Kurse hier bei Envato Tuts nachlesen+!
