Erstellen Sie hochmoderne Web-Apps mit Angular Material

Auf der Google I/O Conference im Jahr 2014 kündigte Google Material Design an, seine neue Designsprache. Seitdem haben sie viele ihrer beliebten Anwendungen auf diese neue Spezifikation umgestellt, um ein konsistentes Erlebnis zu bieten. Jetzt versuchen sie, Sie davon zu überzeugen, ebenfalls mitzumachen.

Was ist Materialdesign?

Nach einem Besuch der offiziellen Material Design Spezifikation bekommen Sie sofort ein Gefühl von hochmodernem Minimalismus. Grundformen und flächige Farben sind hier das Thema. Das Durchgehen der Dokumentation ist eine ziemliche Erfahrung. Ich empfehle, es sich selbst anzusehen, aber ich werde es hier zusammenfassen.

Ziel

Ziel ist es, eine visuelle Sprache zu schaffen, die klassische Prinzipien guten Designs mit der Innovation und den Möglichkeiten von Technologie und Wissenschaft verbindet. Außerdem soll ein einzelnes zugrunde liegendes System entwickelt werden, das ein einheitliches Erlebnis über verschiedene Plattformen und Gerätegrößen hinweg ermöglicht.

Prinzipien

Material Design basiert auf drei Prinzipien.

Material ist die Metapher

Inspiriert durch das Studium von Papier und Tinte lebt das Material im 3D-Raum und ist in der taktilen Realität verankert. Es erzeugt die Illusion von Raum, indem es realistische Schatten verwendet. Das Papiermaterial muss sich an die Gesetze der Physik halten (dh zwei Blätter Papier dürfen sich nicht durchdringen), darf aber die physische Welt übersteigen (dh ein Papier kann wachsen oder schrumpfen).

Mutig, grafisch, absichtlich

Bewusste Farbauswahl, randlose Bilder, großformatige Typografie und absichtlicher Weißraum schaffen eine mutige und grafische Benutzeroberfläche, die den Benutzer in das Erlebnis eintauchen lässt. Der Floating Action Button, kurz FAB, ist ein Paradebeispiel für dieses Prinzip. Ist Ihnen der kleine Kreis mit dem „Plus“-Symbol aufgefallen, der in Ihrer Google Inbox-App herumschwebt? Material Design macht sehr deutlich, dass dies eine wichtige Schaltfläche ist.

Bewegung gibt Bedeutung

Bewegung ist sinnvoll und angemessen und dient dazu, die Aufmerksamkeit zu fokussieren und die Kontinuität aufrechtzuerhalten. Das Feedback ist subtil, aber klar. Übergänge sind effizient und dennoch kohärent. Der Hauptpunkt hier ist, nur zu animieren, wenn es einen Zweck hat, und es nicht zu übertreiben.

Wie passt AngularJS ins Materialdesign?

AngularJS, Googles „Superheroic JavaScript MVW Framework“, adressiert viele der Herausforderungen, die bei der Entwicklung von Single-Page-Anwendungen (SPA) auftreten. Es bietet das Framework, das zum Erstellen moderner Webanwendungen erforderlich ist, die eine Verbindung zu APIs herstellen und nie eine Aktualisierung der Seite erfordern.

AngularJS: Ein neuer Ansatz

Angular wäre HTML, wenn es für Anwendungen entwickelt worden wäre. HTML ist eine großartige deklarative Sprache für statische Dokumente, aber das Erstellen dynamischer Anwendungen nicht so sehr.

Das Erstellen dynamischer Anwendungen mit HTML war schon immer eine Übung, um den Browser dazu zu bringen, Dinge zu tun, für die er nicht vorgesehen war. Es gibt ein paar Ansätze, dies zu tun.

1. Bibliothek - eine Sammlung von Funktionen. (jQuery)
2. Framework – Code füllt statische Elemente bei Bedarf dynamisch aus. (Durandal, Glut)

Angular verfolgt einen anderen Ansatz, um dieses Problem zu lösen. Anstatt sich mit dem bereitgestellten HTML herumzuschlagen, erstellt es neue HTML-Konstrukte. Angular bringt dem Browser eine neue HTML-Syntax durch ein Konstrukt namens „Direktiven“ bei. Angular wird mit einer Reihe dieser Direktiven geliefert, erlaubt Ihnen aber auch, benutzerdefinierte Direktiven zu erstellen, sodass Sie Ihre eigenen HTML-Elemente schreiben können.

Wäre es nicht schön, wenn Google eine Reihe von Richtlinien erstellen würde, die auf Material Design-Prinzipien basieren?

Einführung in Winkelmaterial

Google entwickelt aktiv Angular Material, eine Implementierung von Material Design in AngularJS. Angular Material bietet eine Reihe wiederverwendbarer UI-Komponenten, die auf dem Material Design-System basieren. Angular Material besteht aus mehreren Teilen. Es verfügt über eine CSS-Bibliothek für Typografie und andere Elemente, bietet einen interessanten JavaScript-Ansatz für die Gestaltung und sein ansprechendes Layout verwendet ein flexibles Raster. Aber das ansprechendste Merkmal von Angular Material ist seine erstaunliche Sammlung von Anweisungen.

Einstieg

Ich habe ein Open-Source-Projekt erstellt, um Ihnen beim Start Ihres nächsten Angular-Material-Projekts zu helfen. Der Zweck dieses Projekts ist es, ein Beispiel für alles zu geben, was Angular Material zu bieten hat, alles unter einem Dach. Navigation, Paging, Theming und die gesamte Sammlung von Anweisungen sind einsatzbereit, alles, was Sie tun müssen, ist, Ihre Daten einzugeben und an das HTML zu binden.

Sehen Sie sich hier die Demo an oder forken Sie den Code auf GitHub.

Richtlinien

Direktiven sind eine Kernfunktion von Angular. Angular enthält mehrere Direktiven, die Sie ständig verwenden, wie ng-model oder ng-repeat. Sie sind ein sehr wichtiger Teil von Angular, der dafür sorgt, dass das Framework so funktioniert, wie es sollte.

So verwenden Sie eine Angular-Material-Direktive

Angular Material erweitert diese Richtlinienbibliothek um eine Reihe schöner, vom Material Design inspirierter Anweisungen. Angular Material-Direktiven sind HTML-Tags, die mit „md“ beginnen; Abkürzung für Materialdesign. Sie könnten nicht viel einfacher zu bedienen sein. Schauen wir uns zum Beispiel den guten alten Knopf an.

Eine Standard-HTML-Schaltfläche könnte etwa so aussehen.

 <button>Click Me</button>

Eine Schaltfläche für eckiges Material sieht so aus.

 <md-button>Click Me</md-button>

Und das ist alles, was Sie brauchen, um einen Materialknopf zu machen. Jetzt gibt es mehrere andere Optionen, die für diese Richtlinie verfügbar sind, wie z.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Dienstleistungen

Dienste sind auch der Kern der Angular-Funktionalität. Sie werden verwendet, um Code in der gesamten Anwendung gemeinsam zu nutzen. Ein gemeinsamer Kerndienst wie $http wird für Datenaufrufe in Angular-Anwendungen verwendet und wiederverwendet.

Winkeldienste sind:

1. Nachlässig instanziiert – Angular instanziiert einen Dienst nur dann, wenn eine Anwendungskomponente davon abhängt.
2. Singletons – Jede von einem Service abhängige Komponente erhält einen Verweis auf die einzelne Instanz, die von der Service Factory generiert wird.

So verwenden Sie einen Angular Material Service

Angular Material wird mit einigen Diensten geliefert, die der Anwendung einige zusätzliche Funktionen bieten. Sie tragen auch zur Umsetzung einiger Richtlinien bei. Ein großartiges Beispiel für einen Service ist der „Toast“.

Ein Toast ist eine kleine Benachrichtigung, die von oben auf den Bildschirm gleitet und nach einigen Sekunden verschwindet. Die Nutzung dieses Dienstes ist einfach.

In JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Dieses Beispiel zeigt einen einfachen Toast, der unten links auf dem Bildschirm erscheint und sich nach 3 Sekunden zurückzieht.

Einige Dienste können mit benutzerdefinierten Vorlagen personalisiert werden. In diesem Fall kann der $mdToast-Dienst eine benutzerdefinierte HTML-Vorlage verwenden, indem er die md-toast-Direktive verwendet.

Thematisierung

Material Design ist eine visuelle Sprache, in der Themen Bedeutung durch Farbe, Töne und Kontrast vermitteln. Diese Themen werden in den Komponenten der gesamten Anwendung zum Ausdruck gebracht, um ein einheitlicheres Gefühl zu vermitteln.

Gemäß den Material Design-Richtlinien müssen Sie „Ihre Farbauswahl einschränken, indem Sie drei Farbtöne aus der Primärpalette und eine Akzentfarbe aus der Sekundärpalette auswählen“. Angular Material macht es einfach, diese Richtlinie zu befolgen, indem JavaScript verwendet wird, um das Design zu konfigurieren. Aber zuerst, was ist eine Palette und ein Farbton?

• Farbton: Ein Farbton ist eine einzelne Farbe in einer Palette.
• Palette: Eine Palette ist eine Sammlung von Farbtönen.

Zum Beispiel wäre eine Palette „grün“ und ein Farbton ist ein bestimmter Grünton. Angular Material wird mit allen gültigen Paletten aus der Material Design-Spezifikation geliefert. Hier erfahren Sie mehr über die gültigen Farbpaletten.

Konfigurieren des Themas

Ihr Projekt zu thematisieren ist ein Kinderspiel. Legen Sie in der Datei app.js Ihre gewünschten Paletten und Farbtöne mithilfe des Theming Provider-Dienstes fest.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Verwenden des Themas

Um das Thema auf die Komponenten anzuwenden, stellen Sie die Klasse des Elements auf die gewünschte Palette und den gewünschten Farbton ein.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Layout

Flexbox ist die neueste und beste Ergänzung zum Responsive Design und Angular Material wird mitgeliefert. Wenn Sie mit dem Bootstrap-Grid-System vertraut sind, sollten Sie sich schnell zurechtfinden. Tatsächlich wechselt Bootstrap in seiner bevorstehenden Version zu Flexbox. Es hat das vertraute Zeilen- und Spaltenlayout, an das Sie sich gewöhnt haben, aber mit viel mehr. Lernen Sie mit diesem Tutorial, wie Sie Flexbox verwenden, oder studieren Sie die offizielle Dokumentation.

Top 9 der besten Winkelmaterialrichtlinien

Es gibt zu viele Winkelmaterial-Richtlinien, um sie alle aufzulisten, daher möchte ich meine Favoriten mit Ihnen teilen.

9. Fortschritt linear

In SPAs benötigen Seiten häufig Zeit, um Daten vom Server zu laden. Wenn die Anwendung während dieser Zeit eine leere Seite anzeigt, denken Benutzer möglicherweise, dass die Anwendung beschädigt ist, und verlassen sie. Teilen Sie Benutzern mit der Progress Linear-Anweisung mit, dass die Daten geladen werden. Benutzer werden wissen, dass sie warten müssen, wenn sie einen animierten Fortschrittsbalken sehen, der anzeigt, dass etwas passiert. Verwenden Sie alternativ die Progress Circular-Anweisung für einen runden Indikator.

8. Datumsauswahl

Die Date Picker-Direktive macht die Auswahl eines Datums zu einer sauberen, einfachen Erfahrung für den Benutzer und zu einem echten One-Liner zum Schreiben. Verwenden Sie einfach md-datepicker und grenzen Sie den Bereich optional mit md-min-date und md-max-date ein, und das war's.

7. Automatische Vervollständigung

Die automatische Vervollständigung bietet eine angenehme Benutzererfahrung, indem sie dem Benutzer hilft, eine Option auszuwählen. Das macht die Suchmaschine von Google zur besten. Die Autocomplete-Direktive fügt diese Funktionalität zu Ihrer Anwendung hinzu, indem sie die Wörter eines Benutzers während der Eingabe vervollständigt. Aber das Beste an dieser Richtlinie ist die Anpassung. Indem Sie Ihre automatische Vervollständigung mit md-item-template füllen, können Sie den Vorschlägen mehr Bedeutung verleihen. Wenn ein Benutzer beispielsweise nach Namen in einem Unternehmen sucht, kann die automatische Vervollständigung die übereinstimmenden Namen mit ihrem Bild und ihrer Unternehmensrolle anzeigen, was zu einer robusteren Benutzererfahrung führt.

6. Unteres Blatt

Das untere Blatt ist ein kleines Menü, das vom unteren Rand Ihres Bildschirms nach oben gleitet, den Inhalt abdeckt und den Fokus nimmt. Ursprünglich nur für mobile Geräte gedacht, erfreut sich das untere Blatt auf größeren Bildschirmen zunehmender Beliebtheit. Um es zu verwenden, erstellen Sie eine Vorlage mit md-bottom-sheet, die entweder ein md-grid oder eine md-list für ein Grid-Layout bzw. ein Listen-Layout enthält. Rufen Sie es dann mit dem Bottom Sheet-Dienst $mdBottomSheet.show() auf.

5. Eingabe

Eingabeformulare sind langweilig und das schon seit den Anfängen des Internets. Aber sie müssen nicht sein! Geben Sie Ihren Eingaben etwas Flair mit der Input-Direktive. Umhüllen Sie Ihr Eingabe-Tag mit md-input-container und beobachten Sie, wie es zum Leben erwacht. Beobachten Sie, wie Ihr Platzhalter zu einem schwebenden Etikett animiert wird. Bestätigen Sie Ihre Eingaben ganz einfach mit sofortigen, aber subtilen Farbänderungen und Warnmeldungen. Die Input-Direktive übernimmt ein Element, von dem erwartet wird, dass es langweilig ist, und liefert eine angenehme Überraschung.

4. Toast

Die ärgerlichste Benutzererfahrung besteht darin, nicht zu wissen, was die Anwendung tut. Wir lindern diesen Ärger mit Toastern oder kleinen unauffälligen Benachrichtigungen. Wenn wir früher eine Anfrage an den Server gesendet haben, haben wir auf dieser Seite gewartet, bis die Antwort zurückkam, bevor wir weitermachen konnten. Die Aufmerksamkeitsspanne der Benutzer ist seitdem drastisch gesunken. In den heutigen SPAs klicken wir auf eine Schaltfläche und erwarten, sofort weiterzumachen und uns mit der Serverantwort zu befassen, wenn sie kommt. Die Toast-Richtlinie macht dies zu einem Kinderspiel. Ein Toaster wird aufgerufen, indem Sie einfach den Toast-Dienst $mdToast.show() verwenden und den Text, die Dauer und die Ecke festlegen, in der er erscheinen soll. Erstellen Sie Ihren eigenen benutzerdefinierten Toaster mit md-toast.

3. Rasterliste

Fehlt es Ihren Listen an Schwung? Rasterlisten sind eine Alternative zu standardmäßigen Listenansichten. Eine Rasterliste eignet sich am besten zum Präsentieren von Bildern und ist für das visuelle Verständnis optimiert. Es funktioniert, indem unterschiedlich große Fliesen auf ein Gitter gelegt werden, was ein verstreutes, vielseitiges Gefühl vermittelt. Die Kachelgröße und das Layout reagieren dann auf die Bildschirmgröße. Diese Richtlinie verleiht Ihrer Bewerbung mit Sicherheit einen spannenden und lustigen Look.

2. Weißer Rahmen

Das Raumkonzept ist der Kern des Materialdesigns und seiner Papiermetapher. Zwei Blätter Papier in derselben Z-Position (oder Tiefe) bilden eine Naht und müssen sich zusammen bewegen. Zwei überlappende Papierbögen mit unterschiedlichen z-Positionen bilden eine Stufe. Sie bewegen sich unabhängig voneinander. Um dem Design zu folgen, müssen wir in der Lage sein, Elemente entlang der z-Achse zu verschieben. Angular Material bietet eine einfache Möglichkeit, dies zu tun. Setzen Sie die Klasse mithilfe der Whiteframe-Direktive auf md-whiteframe-z{x}, wobei x die Tiefeneinheit vom Hintergrund aus ist. Je größer die Zahl, desto größer der vom Papier geworfene Schatten.

1. Seitennav

Das Erstellen eines seitlichen Navigationsmenüs war noch nie so einfach. Die Direktive Sidenav platziert ein Navigationsmenü entweder links oder rechts auf dem Bildschirm. Unter Berücksichtigung von Mobilgeräten wird es wie erwartet oder programmgesteuert mit einem Tastenklick ein- und ausgeblendet. Eine nette Ergänzung ist die Lock-Open-Funktion. Die Seitennavigation kann so eingestellt werden, dass sie geöffnet wird, wenn der Bildschirm eine bestimmte Größe erreicht. Durch Setzen des Parameters md-is-locked-open=”$mdMedia('gt-sm')” wird das Menü auf dem Telefon versteckt, aber auf Tablets und größer gesperrt.

Fazit

Google stellt seine beliebtesten Anwendungen auf Material Design um. Jetzt leiten sie die Entwicklung von Angular Material, einer in AngularJS geschriebenen Implementierung von Material Design. Material Design verwendet eine Papiermetapher, mutige Absichten und sinnvolle Bewegungen. AngularJS organisiert Single-Page-Anwendungen. Angular Material wendet Materialdesign-Prinzipien auf AngularJS-Anwendungen an.

Material Design ist da und Angular Material ist eine fantastische Möglichkeit, die Material Design-Spezifikation auf Ihre Single-Page-Anwendungen anzuwenden. Wenn Sie Ihre eigene Angular Material-Anwendung erstellen möchten, verschwenden Sie keine Zeit damit, bei Null anzufangen. Beginnen Sie lieber mit einer voll funktionsfähigen App mit Demos der Richtlinien, bereits eingerichteter Thematisierung und einsatzbereiter Navigation und Routenführung. Sehen Sie sich hier die Demo an oder forken Sie den Code auf GitHub. Natürlich können Sie auch alles über Angular Material erfahren, indem Sie die offizielle Dokumentation besuchen.

Was denkst du über meine Auswahl der besten Winkelmaterial-Richtlinien? Habe ich sie richtig verstanden? Was sind deine Favoriten?