Webentwicklung mit dem JavaScript-Framework Angular von Google
Das Ziel des folgenden Beitrags ist, dem Leser zu zeigen wie einfach der Einstieg und die Entwicklung mit Angular ist. Anfangen werde ich mit einem kurzen Überblick von Angular und dessen Vorteile. Dann werde ich anhand von einem Beispiel die Stärken von dem Framework demonstrieren – nämlich wie einfach, schnell und unkompliziert die Implementierung in Angular ist.
Angular – was ist und was kann das?
Angular (Ängulah ausgesprochen) ist ein JavaScript Framework von Google, das seit 2010 stetig weiterentwickelt wird und derzeit als Version 10 veröffentlicht ist. Das Framework hat die MIT-Lizenz und darf somit sowohl für den privaten als auch für den gewerblichen Gebrauch genutzt werden.
Das Framework wurde für die Entwicklung von Webapplikationen für den Desktop sowie für den mobilen Bereich konzipiert. Mit Angular wird komponentenbasiert entwickelt, das heißt, dass die geplante Applikation in wiederverwendbare Komponenten heruntergebrochen und in Module gebündelt wird. Dadurch erhalten Sie eine wart-, test- und erweiterbare Software, dazu gleich ein paar Beispiele.
Die Komponenten und anderen Bestandteile werden in TypeScript entwickelt. TypeScript ist eine Art Erweiterung von JavaScript. Die TypeScript-Dateien werden letztendlich in JavaScript-Code „transpiliert“ (vereinfacht: zu JavaScript umgewandelt).
Vorteile von Angular
Angular ist ein ideales Werkzeug, um komplexe Webanwendungen zu entwickeln. Das Framework bietet viele Vorteile, einige davon nimmt der Benutzer direkt gar nicht wahr, weil diese quasi „unter der Haube“ passieren. Im Folgenden werden die wichtigsten Vorteile stichwortartig aufgelistet, um einen Eindruck der Stärken zu vermitteln:
- Komponentenbasierte Entwicklung
- TypeScript
- Integration von RxJS
- Plattformunabhängigkeit
- Hohe Performance (Stichwort: Ivy Renderer, Differential Loading)
- Lang-Zeit-Support
- Material Design von Angular
- Leistungsstarkes Ökosystem
- Angular-Elemente
Komponentenbasierte Entwicklung
Komponenten sind die Bausteine einer Angular-Applikation. Jede Komponente ist eine eigenständige und in sich geschlossene Einheit, die wiederverwendet und für sich getestet werden kann. Sie besteht aus den folgenden Bestandteilen:
- ein Template (englisch für Vorlage), das das HTML-Fragment bildet – das Gesicht der Komponente
- eine Klasse, die die Logik und das Verhalten der Komponente beinhaltet und
- ein Layout beziehungsweise ein Stylesheet.
Eine Komponente kann zum Beispiel der Header einer Applikation sein oder nur ein Eintrag in einer Liste, der besonders gestaltet und animiert ist. Der Entwickler entscheidet, welche Funktionalität und welches User Interface die Komponente jeweils abdecken soll. Hierbei wird im Allgemeinen von einer komponentenbasierten Entwicklung gesprochen.
Sobald sich Oberflächen-Funktionalitäten oder Elemente wiederholen, lohnt es sich, eine Komponente daraus zu erstellen und diese dann wiederzuverwenden. Je kleiner eine Komponente gestaltet wird, desto einfacher lässt sie sich wiederverwenden, desto leichter lassen sich Code-Stellen wiederfinden und desto einfacher ist es, die Komponente zu erweitern.
Eine neue Angular-Applikation generieren
Angular bietet zur Generierung von allen Angular-Bestandteilen (inklusive der Angular-Applikation selbst) die sogenannte CLI. Der Name CLI steht für Command Line Interface. Die CLI vereint etliche Tools und unterstützt den Entwickler bei wiederkehrenden Arbeiten sowie bei der Einhaltung von definierten Vorlagen und Pfaden. Zu empfehlen ist, dass das eigene Angular-Projekt stets mit der CLI anfangen (Stichwort: new) und enden (Stichwort: build) sollte.
Die Installation (siehe auch https://cli.angular.io/) ist sehr einfach und wird wie folgt über die Konsole ausgeführt: npm install -g @angular/cli
Die CLI bietet einen großen Funktionsumfang in Form von Befehlen, die über die Konsole ausgeführt werden können. Grundsätzlich ist die Befehlseingabe über die Konsole wie folgt aufgebaut:
ng Befehl Argument Optionen
Jetzt soll eine neue Angular-Applikation namens Blog Example erstellt werden. Dazu gibt man in der Konsole ein: ng new blog-example
Die CLI generiert nun automatisch diverse Dateien, eine Ordnerstruktur und installiert die dazugehörigen Abhängigkeiten. In der folgenden Abbildung ist die Konsolenausgabe der Generierung zu erkennen.
Wechseln Sie in das Verzeichnis blog-example und starten mit dem Konsolenbefehl ng serve einen lokalen Webserver, der die Applikation „vorbereitet“ und dann im Browser abrufbar macht. In der Konsolenausgabe (folgende Abbildung) erkennt man das sogenannte „Bundling“ der Daten sowie den Hinweis, unter welcher Adresse und Port die Applikation verfügbar ist – in diesem Fall: http://localhost:4200
Gibt man die Adresse http://localhost:4200 im Webbrowser wie den Chrome ein, dann wird eine Standard-Seite ausgeliefert, die wie Abbildung 3 aussieht. Diese dient lediglich als Platzhalter und kann beliebig angepasst werden, was im Folgenden auch getan wird.
Eine Komponente – der Counter
Es wird das Beispiel mit dem Button aufgegriffen. Für eine Applikation wird eine Schaltfläche benötigt, die einen Zähler inkrementieren oder dekrementieren kann. Der Zähler (hier Counter genannt) wird dabei ausgegeben. Die Schaltfläche besteht aus drei gelben Buttons. Der eine Button ist mit einem „+“ (Plus) gekennzeichnet und inkrementiert den Zähler um den Wert 1. Der andere Button ist mit einem „-“ (Minus) gekennzeichnet und dekrementiert den Zähler um den Wert 1. Ein dritter Button mit der Kennzeichnung „0“ (Null) ist dafür vorhanden, um den Zähler wieder auf 0 zu setzen. Die Beispielkomponente im Ausgangszustand ist in der folgenden Abbildung zu sehen.
Wenn der Benutzer nun drei Mal auf den „+“ Button drückt, wird wie in der folgenden Abbildung der Counter mit dem Wert 3 ausgegeben.
Der Counter wird in den Ausgangszustand mit dem Wert 0 gebracht und der Benutzer drückt zwei Mal auf den „-“ Button. Wie in Abbildung 6 zu sehen ist, ist der Counter nun auf den Wert -2 gesetzt.
Wie erstellt man eine Komponente?
Die Komponentenerstellung geht wieder über die CLI wie folgt: ng generate component #name
Wobei #name der Platzhalter für den Namen ist, in unserem Fall soll die Komponente counter heißen. Es gibt folgende Kurzschreibweise: ng g c counter
Die CLI generiert einen Ordner mit dem Namen counter, in dem standardmäßig die vier Dateien (siehe auch die Konsolenausgabe in Abbildung 7) angelegt werden:
- Layout-Datei (hier counter.component.scss)
- Template-Datei (hier counter.component.html)
- Test-Datei (hier counter.component.spec.ts)
- Komponenten-Klasse (hier counter.component.ts)
Implementierung der Komponente Counter
Es wird in die Template-Datei counter.component.html gewechselt. Die Oberflächengestaltung wird wie gewohnt über HTML Elemente realisiert – wie diverse div’s, eine Überschrift Counter im h4-Tag, die drei Buttons sowie eine Ausgabe im h5-Tag, siehe Listing 1.
Styling dazu gibt es auch. Die Styles der Elemente aus Listing 1 werden in der Layout-Datei counter.component.scss (siehe Listing 2) nach den jeweiligen Bedürfnissen implementiert.
Bisher hat das Template noch keinerlei Funktionalität. Wenn man die Buttons drückt passiert nichts und in der Ausgabe erscheint ebenfalls kein Wert. Für das Template gibt es die sogenannte Template-Syntax, um die Logik aus der Komponenten-Klasse (counter.component.ts, siehe Listing 4) mit dem Template zu verknüpfen.
Die HTML-Elemente werden in Listing 3 mit der folgenden Template-Syntax verknüpft:
- Click-Event mit (click)
- Ausgabe einer Variable bzw. Eigenschaft über die Interpolation mit {{ }}
Wenn der Button “-” gedrückt wird, dann wird beim Click-Event die Methode decrement aufgerufen (diese und die weiteren Methoden werden gleich definiert). Beim Klick auf den Button “0” wird die Methode clearCounter und beim Button “+” die Methode increment aufgerufen.
Die Eigenschaft counter (wird auch gleich definiert) wird über die Interpolation {{ }} ausgegeben.
Die Methoden und Eigenschaften werden nun in der Komponentenklasse CounterComponent in Listing 4 definiert. Die Eigenschaft counter wird als öffentliche Eigenschaft über den Modifier public deklariert und mit dem Wert 0 initialisiert.
In den einzelnen öffentlichen Methoden wird die Eigenschaft counter entweder um den Wert 1 erhöht (increment) oder verringert (decrement) oder wieder auf den Wert 0 zurückgesetzt (clearCounter).
Alle öffentlichen Eigenschaften und Methoden können mit der Template-Datei verknüpft werden.
Wie bindet man die Komponente ein?
Die Komponenten kann nun an jeder beliebigen Stelle und in jeder beliebigen Komponente in der Applikation “eingebunden” werden. Die Hauptkomponente ist die AppComponent, welche beim Start der Applikation als erstes “aufgerufen” wird. Wie eingangs beschrieben gibt die Hauptkomponente standardmäßig diverse Informationen (siehe Abbildung 3) aus. Diese werden nicht mehr gebraucht, daher kann der gesamte Inhalt der Template Datei app.component.html entfernt werden.
Stattdessen wird die neue Komponente CounterComponent in der Template-Datei (app.component.html) von der AppComponent eingebunden. Das wird durch die vergebenen Selektoren realisiert (siehe Listing 4, selector).
<app-counter></app-counter>
Wird nun die Applikation mittels ng serve gestartet, wird die Komponenten Counter wie in Abbildung 4 angezeigt. Durch das Klicken auf die Buttons kann der Counter letztendlich gesetzt sowie der Wert auf der Oberfläche für den Benutzer ausgegeben werden.
Die Komponente kann natürlich beliebig oft wie in Listing 6 eingebunden werden.
<app-counter></app-counter> <app-counter></app-counter> <app-counter></app-counter>
Dadurch wird die Komponente wie in Abbildung 8 drei mal “ausgegeben”. Jede Komponente ist dabei eine geschlossene Einheit, d.h. die Eigenschaft counter wird in der ersten Komponente nicht durch die zwei anderen Komponenten beeinflusst.
Fazit
Angular ist ein sehr mächtiges Framework, welches immer weiter optimiert und auf Performance getrimmt wird. Zahlreiche Tools und gängige Bibliotheken (z.B. Bootstrap) können in Angular verwendet werden. Eine Crossplattform sowie eine App-Entwicklung ist damit ebenfalls möglich, Stichwort Ionic.
Angular kann für jede beliebige Aufgabenstellung und Projektumsetzung im Webumfeld genutzt werden. Der Trend, dass viele Unternehmen vermehrt auf die Stärken von Webanwendungen und speziell von Angular setzen, wird auch in den nächsten Jahren weiter zunehmen.
Angular Logo: Googe Inc. https://angular.io/presskit
I would like to thank you for the efforts you’ve put in penning this site.
I’m hoping to see the same high-grade blog posts from you later on as well.
In fact, your creative writing abilities has motivated me to get my own, personal blog now 😉