Angular Material – Moderne Webprogrammierung

Angular ist ein leistungsfähiges OpenSource-Framework zur Entwicklung moderner und komplexer Web-Anwendungen. Es ist der Nachfolger des Frameworks AngularJS und basiert auf der Sprache TypeScript Ich benutze in diesem Beispiel Angular Version 7.

In diesem Tutorial werden zunächst einige Konfigurationen vorgenommen um anschließend ein neues Angular Projekt zu erstellen und zu starten. Des Weiteren wird eine Tabelle mit Hilfe von Angular Material erstellt, die über eine neu erstellte Komponente bereitgestellt wird.

Entwicklungsumgebung konfigurieren

Um eine Angular-App zu erstellen benötigten Sie die Angular CLI (Command Line Interface). Mit Hilfe dieser können Anwendungen über einfache Terminalbefehle erstellt werden. Die Angular CLI benötigt wiederum eine aktuelle Node.js Version.

Besorgen Sie sich also zunächst eine aktuelle Node.js Version:
https://nodejs.org/en/

um anschließend über ein Terminal die Angular CLI zu installieren:

npm install -g @angular/cli

Neues Projekt erstellen und Starten

Angular Projekt erstellen

ng new first-angular-application

Während der Erstellung einer neuen Angular Anwendung aktivieren Sie das Angular Routing, indem Sie die Frage „Would you like to add Angular Routing?“ mit Ja beantworten. Außerdem muss angegeben werden welches Sylesheetformat benutzt werden soll. In unserem Beispiel wählen wir SCSS.

Folgende Ordnerstruktur wird erstellt:

Build erstellen

ng build

Ein neuer Ordner dist wird im Projektverzeichnis abgelegt. Der Build kann später z.B. über FTP auf einen Server transferiert werden.

Anwendung starten

ng serve

Öffnen sie anschließend über Ihren Browser http://localhost:4200 um die Anwendung zu starten.

Angular Material

Angular Material installieren

ng add @angular/material

Angular Material bietet bei der Installation einige vordefinierte Themes an. Diese können später angepasst werden. Es gibt auch die Möglichkeit eigene individuelle Themes zu erstellen. Dazu später mehr, zu Beginn genügt es ein vorgefertigtes Theme zu benutzen.

Die Einrichtung von „HammerJS“ und den „browser animations“ können Sie mit Ja bestätigen.

Die Anwendung startet mit der Standard-Komponente app-root. Um den Code übersichtlich zu gestalten, arbeiten wir mit einzelnen Komponenten, die bestimmte Bereiche einer Anwendung repräsentieren.

Neue Komponente erstellen

ng generate component home

Als erstes öffnen Sie die Datei app.component.html, löschen dort den vordefinierten Code und rufen stattdessen die neu erstellte Komponente app-home auf. In der TypeScript Datei der jeweiligen Komponente finden Sie unter selector den Namen, über welche sie aufgerufen werden kann.

Die Komponente app-home kann nun folgendermaßen von der Komponente app-root aufgerufen werden.

Werfen wir einen Blick auf die Anwendung sehen wir, dass der Aufruf der Komponente app-home funktioniert.

Passen wir nun die home Komponente mit Hilfe von Angular Material an. Die offizielle Webseite lautet https://material.angular.io/. Unter Components finden Sie alle verfügbaren Komponenten, die Sie in Ihrer Anwendung einbauen können.

Die Vorgehensweise ist fast immer identisch. Sie suchen auf der Webseite nach der gewünschten Komponente, z.B. nach einer Tabelle, kopieren den Code eines Beispiels und passen ihn anschließend an.

Angular Material Tabelle

Wählen Sie im Menü links den Reiter Table aus und kopieren Sie den Code in Ihre Anwendung.

Nachdem Sie eine neue Material Komponente in der Anwendung eingebaut haben, müssen alle benötigten Module geladen werden. Hierfür navigieren Sie auf der Angular Material Webseite unter der jeweiligen Komponente zu API. Diesen import benötigt die Material Komponente, um auf vordefinierte Elemente und Funktionen zuzugreifen.

Die Module werden in der Datei app.module.ts importiert.

Schauen wir uns unsere Anwendung über localhost:4200 an, sehen wir, dass das Navigieren zur Home Komponente funktioniert und die Material Tabelle korrekt dargestellt wird.