Erstellen Sie eine Material Design App mit Angular 2

Laptop- und Telefonbildschirme mit Angular-Logo

Angular Material ist ein UI-Komponenten-Framework, das die Material Design-Spezifikation von Google für Angular 2 implementiert - die neue, schnellere Implementierung von Angular, geschrieben in TypeScript. Obwohl Angular Material noch in Alpha ist, bietet es bereits eine Reihe wiederverwendbarer und zugänglicher UI-Komponenten, die auf Material Design basieren.

Angular 2 selbst ist für die Verwendung auf allen Plattformen (Web, Mobile und Desktop) konzipiert und mit vielen neuen Technologien verbunden. Auf JavaScript-Ebene verfügen wir über die zusätzliche Syntax von ECMAScript 2015 (ES6), die Eingabe- und Schnittstellenunterstützung von TypeScript sowie über Dekoratoren aus der Metadata Reflection-API. Es verwendet Observables aus der Reactive Extensions-Bibliothek, um Ereignissequenzen auf funktionale Programmierweise zu verwalten. Es verwendet Zonen, um asynchrone Aktivitäten zu kapseln und abzufangen, um eine Form von threadlokalem Speicher bereitzustellen, sodass Angular automatisch auf Datenänderungen in asynchronen Ereignissen reagieren kann, um Datenbindungen aufrechtzuerhalten. Schließlich wird das Laden des Moduls von SystemJS übernommen.

In diesem Tutorial werden wir Angular 2 verwenden, um eine einfache Aufgaben-App mit einigen charakteristischen Material Design-Elementen zu erstellen. Holen Sie sich die Quelldateien hier .



Mach dich bereit

Das Einrichten der Anfangsumgebung kann schwierig sein. Da ist ein eckig2-Samen verfügbar, sowie eine Angular2-Starter . Es gibt jedoch noch etwas Besseres: mit eckig-cli Sie können Ihr Angular 2-Projekt mit einem einzigen Befehl konfigurieren.

Es kümmert sich nicht nur um das Setup für alle Technologien, die ich im letzten Abschnitt erwähnt habe (über Node und npm), sondern erweitert auch das Gerüst für Jasmine-Unit-Tests, Winkelmesser-End-to-End-Tests sowie TSLint-Tests und Codelyzer statische Code-Analyse von Angular 2 TypeScript. Obwohl Sie nicht alle verwenden müssen, sollten Sie dies auf jeden Fall tun. Es ist so einfach zu bedienen, dass Sie sich fragen werden, wie Sie jemals ohne es ausgekommen sind.

Angular CLI ist als npm-Paket verfügbar, daher müssen Sie Node und npm global auf Ihrem Computer installieren npm install -g angle-cli . Erstellen Sie jetzt eine neue Angular 2-App mit von neuem material2-do . Sie müssen ein wenig warten, denn nachdem die erforderlichen Dateien generiert wurden, wird ein Git-Repo initialisiert und ein npm installieren um alle notwendigen Module in herunterzuladen node_modules / . Schauen Sie sich das an package.json und machen Sie sich mit den Modulen und Skripten dort vertraut.

Sie haben jetzt eine neue Angular 2-Anwendung erstellt, die den offiziellen Best Practices entspricht.

Materialdesign hinzufügen

Die Standard-App weiß nichts über Material Design (ein Versehen, da bin ich mir sicher), daher müssen wir es selbst hinzufügen.

Es gibt eine Liste der veröffentlichten Angular 2 Material Design-Pakete in der @ Angular2-Material Bibliothek. In diesem Beispiel werden wir verwenden Ader (erforderlich für alle Angular Material 2-Apps) sowie Taste , Karte , Kontrollkästchen , Symbol , Eingang , Liste und Symbolleiste ::

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Damit das Vendor Bundle funktioniert, müssen wir hinzufügen @ angle2-material / ** / * zum Array von vendorNpmFiles im angle-cli-build.js . Wir müssen auch den Pfad hinzufügen @ Angular2-Material zum Karten Objekt:

const map: any = { '@angular2-material': 'vendor/@angular2-material' };

Lassen Sie SystemJS wissen, wie neue Module verarbeitet werden, indem Sie auf die Hauptdateien der einzelnen Pakete verweisen:

const packages:any = {}; // put the names of any of your Material components here const materialPkgs:string[] = ['core','button','card','checkbox', 'icon','input','list','toolbar']; materialPkgs.forEach((pkg) => { packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}; });

Jetzt ist es Zeit, die Material Design-Symbolschrift in die zu laden von src / index.html . Jede Schriftart funktioniert, aber wir verwenden die Standard-Materialdesign-Symbole:

wie man Haare in Ölen malt

Erstellen Sie einen MD-Dialog

Wir können jetzt mit Material Design in unserer To-Do-App arbeiten. Eine der Komponenten, die derzeit in Angular 2 Material Design fehlen, ist eine Eingabeaufforderung oder ein Dialogfeld. Für unsere erste Aufgabe erstellen wir also eine!

Erstellen Sie eine neue Komponente mit einer Material Design-Karte, einer Symbolleiste, einer Eingabe und einigen Schaltflächen. In dem src / app Geben Sie den Ordner Ihres Repos ein ng Komponentendialog erzeugen . Dies erzeugt eine neue DialogComponent im src / app / dialog und fügt ein Fass hinzu system-config.ts SystemJS weiß also, wie es geladen wird.

Wenn Sie sich das Generierte ansehen dialog.component.ts Datei, sehen Sie die erste Zeile ist: {Component, OnInit} importieren von '@ eckig / Kern'; . Komponente ist einer der Hauptbausteine ​​von Angular und OnInit ist eine der implementierten Schnittstellen. Um jedoch Zugriff auf die Kommunikation zwischen verschachtelten Komponenten sowie den oben genannten Material Design-Komponenten zu haben, müssen wir Input importieren. Ausgabe und EventEmitter von @ eckig / Kern; und MdCard , MdInput , MdToolbar und MdButton von ihren entsprechenden Modulen in der @ angle2- Material Bibliothek.

Um diese Materialkomponenten zu rendern, müssen wir die Anweisungen unserer einfügen DialogComponent erfordert. Wir werden die folgenden Anweisungen hinzufügen @ Komponenten Metadaten:

templateUrl: 'dialog.component.html', directives: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: ['dialog.component.css']

Wir deklarieren dann eine Reihe von @Eingang Variablen ( okText , cancelText usw.), mit denen wir den Inhalt des Dialogs definieren können. Wir müssen auch eine hinzufügen @Ausgabe Emitter, mit dem wir eine Funktion mit einem Wert in der übergeordneten Komponente auslösen können, wenn der Dialog geschlossen wird.

Jetzt können wir den generierten Konstruktor in ersetzen dialog.component.ts mit folgendem Code:

constructor() { this.okText = 'OK'; this.cancelText = 'Cancel'; } emitValue(value) { this.valueEmitted.emit(value); }

Sowie mit dem @Eingang Variablen in unserem DialogComponent innerhalb der dialog.component.html Vorlage, die md-input ermöglicht es uns, Eingaben des Benutzers zu akzeptieren:

Das MD-Tasten Erlauben Sie dem Benutzer, auf 'OK', 'Abbrechen' oder was auch immer Sie beschließen, diese Schaltflächen zu beschriften:

{{cancelText}} {{okText}}

Beachten Sie die keyup Ereignishandler, die sich um Dinge kümmern, wenn die Eingabetaste oder die Escape-Taste gedrückt wird. Diese Handler sind identisch mit den klicken Event-Handler für cancelText und okText . Escape macht dasselbe wie Abbrechen (emitValue (null)) Wenn Sie die Eingabetaste drücken, erhalten Sie das gleiche Ergebnis wie beim Klicken auf OK (emitValue (Wert)) . Dies ermöglicht es uns, den Benutzer zur Eingabe eines Wert über eine md-input und senden emittierte Ausgabe.

Wir können Beispiele für eine Reihe von Material Design-Komponenten sehen: MD-Karte , MD-Taste , und so weiter. Wir müssen auch etwas CSS hinzufügen dialog.component.css Um das gewünschte Layout zu erreichen, können Sie den vollständigen Code im zugehörigen GitHub-Repo anzeigen.

Fügen wir dies jetzt hinzu DialogComponent zu material2-do.component.html um zu sehen, wie es aussieht:

Beachten Sie, dass wir wörtliche Zeichenfolgen für alle haben @Eingaben . Dazu müssen wir sowohl einfache als auch doppelte Anführungszeichen verwenden, andernfalls würde Angular den Inhalt als Variablennamen in der Liste interpretieren Komponente Umfang.

Wir haben auch die emittiert @Ausgabe . Dies macht den Dialog einfach und extrem konfigurierbar. Die meisten Eingaben hätten standardmäßig leere Zeichenfolgen verwendet, wenn sie weggelassen worden wären.

Lassen Sie uns ändern Material2DoComponent . Andernfalls müssen wir DialogComponent importieren und als Direktive deklarieren Material2DoComponent wird es nicht rendern können. Wir werden auch die Protokollfunktion hinzufügen:

log(text) { console.log(text); }

Werfen wir einen Blick auf unsere Handarbeit. Sie können die App (der Standardport ist 4200) durch Ausführen bereitstellen npm run-script start , die wiederum läuft des Servers . Wenn Sie die Konsole öffnen, können Sie sehen, was protokolliert wird: Der Inhalt der Eingabe wird ausgegeben, wenn Sie auf 'Ja' klicken Null wird ausgegeben, wenn Sie auf 'Nein' klicken.

Wir sind jetzt bereit, dieses neue zu verwenden DialogComponent um unsere To-Do-App zu erstellen.

Erstellen Sie die Haupt-App

Wir werden die folgenden MD-Komponenten für die Haupt-App verwenden: Symbolleiste , Liste , Listenpunkt , Kontrollkästchen , Taste , Symbol , Icon-Registrierung und seine abhängigen, HTTP_PROVIDER aus der Angular HTTP-Bibliothek. Diese müssen also zum Importbereich von hinzugefügt werden Material2DoComponent .

Um diese Komponenten wiedergeben zu können, müssen wir sie erneut in die Liste aufnehmen @ Komponenten Metadaten Richtlinien Array zusammen mit DialogComponent , die wir gerade hinzugefügt haben:

directives: [MdCard, MdToolbar, MdList, MdListItem, MdCheckbox, MdButton, MdIcon, DialogComponent],

Um Zugang zu erhalten MdIconRegistry müssen wir es zusammen mit injizieren HTTP_PROVIDERS über die @ Komponenten Metadaten Anbieter Array:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Jetzt nutzen wir unsere DialogComponent Hinzufügen von genügend Logik für eine einfache Aufgabenanwendung. Das todoDialog wird aufgerufen, um unseren Dialog zu öffnen, entweder mit der zu bearbeitenden Aufgabe ( alles ) oder Null wenn wir eine neue erstellen.

Wir richten die Standardvariablen für eine neue Aufgabe ein oder ändern sie entsprechend, wenn wir stattdessen eine Aufgabe bearbeiten. Wir zeigen dann die DialogComponent durch Einstellen der showDialog Variable zu wahr ::

todoDialog(todo = null) { this.okButtonText = 'Create task'; this.fieldValue = ''; this.editingTodo = todo; if (todo) { this.fieldValue = todo.title; this.okButtonText = 'Edit task'; } this.showDialog = true; }

Das updateTodo Funktion wird aufgerufen, wenn wir sie schließen möchten. Die anderen Funktionen ( editTodo , addTodo , hideDialog ) sind Hilfsmethoden für updateTodo .

updateTodo(title) { if (title) { title = title.trim(); if (this.editingTodo) { this.editTodo(title); } else { this.addTodo(title); } } this.hideDialog(); }

Im material2-do.component.html Wir haben unserer Bewerbung eine gegeben md-toolbar wo wir den Titel gesetzt haben, und ein md-icon namens hinzufügen (was wie ein Pluszeichen aussieht) für unseren schwebenden Aktionsknopf (FAB), mit dem wir eine neue Aufgabe erstellen können:

add

Wir gebrauchen md-card-content ein halten md-liste und ein * ngFor um unsere zu durchlaufen und anzuzeigen Aufgabenliste Array als md-list-items ::

md-checkbox ermöglicht es uns, Elemente auf unserer Liste anzukreuzen. Und wir haben zwei md-mini-fab Schaltflächen, mit denen wir unsere Aufgabe löschen und bearbeiten können: md-icons delete_forever und mode_edit ::

delete_forever mode_edit

Mit ein wenig CSS bleiben diese verborgen, bis Sie einen Rollover durchführen (oder klicken). Sie können den Code im Repo sehen.

Vorwärts gehen

Da Angular Material 2 immer noch in Alpha ist, fehlen einige Dinge - insbesondere der Signatur-MD-Button-Ripple-Effekt. Während möglicherweise Änderungen an der API vorgenommen werden, funktioniert diese sehr gut. Es wird auch dem Anspruch gerecht, eine unkomplizierte API zu haben, die Entwickler nicht verwirrt und leicht für die Erstellung großartig aussehender Anwendungen zu nutzen ist.

Dieser Artikel wurde ursprünglich in Ausgabe 284 von net veröffentlicht, dem weltweit meistverkauften Magazin für Webdesigner und Entwickler. Abonnieren Sie hier .

Zum Thema passende Artikel: