Verwendung des Materialdesigns in Angular 6

Angular hat sich im Laufe der Jahre weiterentwickelt und mit jeder Veröffentlichung wurden ständig aufregende neue Funktionen hinzugefügt. Eine der Verbesserungen ist das Materialdesign, das neue Komponenten enthält. Dieses Tutorial befasst sich mit Angular-Material und wie es in Angular 6-Projekte integriert werden kann.

Was ist Materialdesign?

Material Design ist eine Designsprache für Web- und mobile Anwendungen, die 2014 von Google entwickelt wurde. Mit Material Design können Entwickler ihre Benutzeroberfläche einfach anpassen und gleichzeitig eine attraktive Anwendungsoberfläche beibehalten, die den Benutzern gefällt. Mit Material Design erhalten Sie ein gut organisiertes Format sowie die Flexibilität, Ihre Marke und Ihren Stil auszudrücken.

Ein Beispiel für Material Design finden Sie in Houzz, einer App für Wohndesign, die 2016 mit dem Google Play Award ausgezeichnet wurde. Diese App verwendet Material Design, um ihre zahlreichen Funktionen in die begrenzte Fläche mobiler Geräte zu integrieren. Dies bietet eine gute Benutzererfahrung, da sie die App anzeigen und navigieren können, ohne sich überfordert zu fühlen. Es ist wirklich eine der besten Materialdesign-Apps auf dem Markt.

In diesem Artikel geht es nicht um Hardware-Design, daher werden wir nicht auf alle Details eingehen. Wenn Sie mehr wissen wollen, gibt es eine Tolles Tutorial zum Materialdesign auf dem Envato-Blog.

Einführung in Winkelmaterial

Winkelmaterial besteht aus einer Reihe vorgefertigter Winkelkomponenten. Im Gegensatz zu Bootstrap, mit dem Sie Komponenten erhalten, die Sie beliebig gestalten können, ist Angular Material bestrebt, eine verbesserte und konsistente Benutzererfahrung zu bieten. Gleichzeitig haben Sie die Möglichkeit, das Verhalten der verschiedenen Komponenten zu steuern.

Ähnlich wie Angular hat sich Angular Material seit seiner ersten Veröffentlichung stark weiterentwickelt, mit großen Verbesserungen und Fehlerkorrekturen.

So fügen Sie Ihrem Projekt eckiges Material hinzu

Um einem Projekt eckiges Material hinzuzufügen, verwenden wir das ng add Befehl, mit dem Angular-Projekten neue Funktionen hinzugefügt werden. Dieser Befehl ist eine neue Funktion in Angular 6 und so einfach wie:

Dieser Befehl fügt die Bibliothek einem vorhandenen Projekt hinzu und führt das CSS-Thema in ein angle.json. Es werden auch Skripte hinzugefügt index.html und aktualisieren Sie die AppModule.

Ein weiteres Merkmal von Angular 6 ist ng update, die npm-Abhängigkeiten aktualisiert, wenn eine neue Version veröffentlicht wird. Außerdem werden Ihr RxJS-Code und Ihr Material Design-Code aktualisiert, um die neuen APIs zu nutzen.

Abhängigkeiten und Komponenten

Winkelmaterial besteht aus mehreren Designkomponenten, die in die folgenden Kategorien fallen:

  • Formularsteuerelemente
  • Tasten und Indikatoren
  • Navigation und Layout
  • Popups und Modals
  • Datentabelle

Sie können die Startkomponenten mit dem generieren ng update bestellen. Einige der über diesen Befehl verfügbaren Schaltpläne sind:

  • Navigation
  • Instrumententafel
  • Tabelle
verbunden :  Michael Kors Access Smartwatches: Beste OS Wear-Geräte auf der IFA 2019

Diese Diagramme können einfach mit dem installiert werden ng generate Befehl wie folgt:

  • ng generate @angular/material:material-table --name : generiert eine Komponente, die Daten mit einer Datentabelle anzeigt
  • ng generate @angular/material:material-nav --name : generiert eine Komponente mit Seitennavigation und Symbolleiste
  • ng generate @angular/material:material-dashboard --name : generiert eine Komponente, die eine dynamische Rasterliste von Karten enthält.

Erstellen einer Angular-Hardware-Anwendung 6

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 ausführen.

Als nächstes müssen wir ein neues Angular-Projekt initialisieren. Führen Sie dazu den folgenden Befehl aus, wobei Material-ng ist der Name unseres Angular-Projekts.

Dieser Befehl erstellt mehrere Angular-Vorlagendateien für Ihr Projekt und installiert die erforderlichen Startabhängigkeiten.

Gehen Sie zu Ihrem Projektverzeichnis und fügen Sie Ihrem Projekt Angular-Material hinzu.

Als Nächstes fügen wir einige Komponenten hinzu, die vielen Apps gemeinsam sind, z. B. die Navigation.

Fügen Sie eine Navigationsleiste hinzu

Um eine Navigationsleiste hinzuzufügen, geben Sie einfach Folgendes ein:

Dieser Befehl fügt eine zusammenklappbare Seitennavigation und eine Schubladenkomponente hinzu. Sie sollten die folgende Ausgabe erhalten, in der vier Dateien für uns generiert wurden, nämlich mon-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, und my-nav.component.ts.

Öffnen my-nav.component.html und Sie sollten den gesamten HTML-Code für die Navigation sehen, die für uns generiert wurde.

Standardmäßig dient ein Angular-Startprojekt als Standardseite, aber wir möchten die Magie des Materialdesigns sehen können! Öffnen Sie, um unsere generierte Material Design-Navigationskomponente 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 beachten, dass die von uns hinzugefügte Navigationskomponente wie gezeigt in das Hauptmodul importiert wurde:

Im my-nav.component.htmlNehmen wir auch einige Änderungen an den Menülisten vor:

Jetzt können Sie den Entwicklungsserver starten, indem Sie Folgendes ausführen:

Das Ergebnis sollte folgendermaßen aussehen:

Winkellayout der Material Design App

Wie Sie sehen können, bietet Angular Material eine einfache Möglichkeit, Ihre App zum Laufen zu bringen. Mit nur wenigen Befehlen und wenigen Codezeilen konnten wir das Materialdesign in unsere Angular-Anwendung integrieren!

Besuchen Sie unser GitHub-Repository für den vollständigen Quellcode dieser Beispiel-App.

Fazit

Ich hoffe, dieses Tutorial hat Ihnen geholfen zu verstehen, wie Sie die Leistungsfähigkeit von Material Design in Ihrer App für eine erstklassige Benutzeroberfläche nutzen können. Weitere Informationen zum Materialdesign in Angular 6 finden Sie auf der offiziellen Website docs die gebrauchsfertige Vorlagen enthalten. Es ist ein großartiger Ort, um mehr über Angular zu erfahren. Sie können auch unsere Angular-Tutorials und -Kurse hier auf Envato Tuts + lesen!

Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.
We would like to show you notifications for the latest news and updates.
Dismiss
Allow Notifications