Bastian Nolte
 

Angular

Was ist Angular?

Angular ist eines der beliebtesten und am häufigsten verwendeten JavaScript-Frameworks für die Erstellung von Single Page Applications. Es ist Open Source, steht unter der MIT Lizenz und wird aktiv von Google unterstützt.

Letzterer Fakt wird oft als Argument für die Nachhaltigkeit des Einsatzes von Angular als Framework herangezogen.

Angular bringt auch schon einen Satz von Material-Komponenten, wie beispielsweise Overlays, Sidebars, Switches und (fix positionierte) Navigationsleisten und Footer mit.

Andererseits hat sich das Angular(JS)-Framework in den letzten Jahren sehr stark weiterentwickelt und es gab immer wieder teils beträchtliche Designbrüche, was zu relativ hohen Migrations- und Refactoringaufwänden in Angularprojekten führte.

Der schnelle Einstieg

In den folgenden Kapiteln wird kurz umrissen, wie ein erstes Angular-Projekt erstellt werden kann.

Entwicklungsumgebung einrichten

Installiere Node.js und npm (den Package-Manager von Node) um die Voraussetzungen für die Entwicklung eines Angular-Projektes zu schaffen.

Stelle sicher, dass Du Node.js in der Version 8 oder größer und npm in der Version 5 oder größer installiert hast. Die Versionsinformation erhältst Du indem Du node -v und npm -v in einem Terminal Deiner Wahl eingibst.

Ein neues Projekt erstellen

Angular CLI ist ein Kommandozeileninterface, das benutzt werden kann, um Projekte zu erstellen, Dateien hinzuzufügen und diverse Entwicklungsaufgaben, wie Testen, Zusammenstellen (bundling) und Deployment durchzuführen.

Erstelle ein neues Projekt indem Du folgenden Code eingibst:

ng new my-app

Angular CLI installiert alle erforderlichen npm-Pakete und erstellt eine einfache Standardanwendung inklusive Konfiguration und Tests. Dieser Vorgang kann in Abhängigkeit zu der Geschwindigkeit Deiner Internetanbindung einige Zeit in Anspruch nehmen.

Anwendung starten

Wechsle in das Projektverzeichnis und führe die Anwendung aus.

cd my-app
ng serve --open

Das ng serve Kommando startet einen Webserver (node) der Deine Anwendung für den Browser zur Verfügung stellt. Es überwacht zudem die Dateien auf Änderungen und baut Deine Anwendung neu (rebuild) wenn Du Änderungen an der Dateien vornimmst.

Die Option --open sorgt dafür, dass Deine Anwendung in Deinem Browser unter der URL http://localhost:4200/ geöffnet wird.

Komponente anpassen

Angular CLI hat bereits die erste Komponente für Dich erzeugt. Diese Komponente ist die Basiskomponente (root component) Deiner Anwendung. Der Name der Komponente ist app-root und kann in der Datei ./src/app/app.component.ts gefunden werden.

Öffne die Datei der Komponente und ändere die Titel-Eigenschaft von my-app auf Meine erste Angular-Anwendung.

export class AppComponent {
  title = 'Meine erste Angular-Anwendung';
}

Du wirst feststellen, dass der Browser automatisch Deine Anwendung neu lädt und den angepassten Titel anzeigt. Im selben Verzeichnis wurde zudem eine Stylesheetdatei app.component.css erstellt, in der Du das Aussehen Deiner Angular-Komponente anpassen kannst.

Dateiübersicht

Ein Angular CLI-Projekt eignet sich gut für schnelle Experimente ist aber auch eine solide Basis für Unternehmenslösungen.

Die erste Datei, die Du lesen solltest ist README.md. Sie enthält einige grundlegende Informationen zur Verwendung von CLI-Befehlen. Weitere Informationen gibt es im Angular CLI Repository und im Wiki.

Dateien im Verzeichnis scr

Alle Dateien der Anwendung selbst befinden sich im Verzeichnis src (im Quellverzeichnis). Alle Angular-Komponenten, Templates, Styleinformationen, Bilder und alles weitere, was Bestandteil Deiner Anwendung ist, findest Du in diesem Verzeichnis.

Alle Dateien, die sich außerhalb dieses Verzeichnisses befinden, gehören nicht direkt zur Anwendung selbst, sondern unterstützen die Erstellung und das Deployment der Anwendung.

Datei

Zweck

app/app.component. {ts,html,css,spec.ts}

Die Komponente mit dem Namen AppComponent und zugehörige Dateien, im Einzelnen das HTML-Template, das Cascading Style Sheet und der Unittest der Komponente.

app/app.module.ts

Definiert das Basismodul AppModule. Es bestimmt, wie die Anwendung zusammengesetzt ist.

assets/*

Hier kann alles andere abgelegt werden, das mit der Anwendung ausgeliefert werden soll.

environments/*

Dieser Ordner enthält eine Datei für jede Zielumgebung. Mögliche Zielumgebungen können zum Beispiel Entwicklung, Test, Akzeptanz und Produktion sein. Jede der Dateien exportiert Konfigurationsvariablen die in der Anwendung verwendet werden können. Diese Dateien werden ersetzt, wenn die Anwendung gebaut wird.

browserslist

Eine Liste mit den unterstützten Zielbrowsern

favicon.ico

Das Icon der Anwendung

index.html

Die zentrale HTML-Datei die ausgeliefert wird, wenn jemand die Anwendung aufruft. Es ist eher selten notwendig diese Datei anzupassen, da Angular CLI die <script>- und <link>-Tags automatisch anlegt.

karma.conf.js

Die Unit-Test-Konfiguration für den Karma Test Runner. Dieser wird aufgerufen, wenn ng test ausgeführt wird.

main.ts

Die zentrale Einstiegsdatei der Anwendung.

polyfills.ts

Die diversen Browser unterstützen abhängig von ihrer Version die Webstandards im unterschiedlichem Maße. Polyfills helfen dabei, diese Unterschiede auszugleichen.

Setze core-js und zone.js ein um einen weitestgehend einheitlichen Unterstützungsgrad zu erreichen. Detailierte Informationen bietet das Dokument Browserunterstützung auf der Angular-Seite.

styles.css

Alle globalen Cascading Style Sheets (CSS) der Anwendung werden hier abgelegt. Styles die ausschließlich eine Komponente betreffen, solltest Du direkt im Verzeichnis der jeweiligen Komponente ablegen.

test.ts

Dies ist der Einstiegspunkt für die Komponententests.

tsconfig. {app|spec}.json

Die TypeScript-Compiler-Konfiguration für die Angular-App (tsconfig.app.json) und für die Unit-Tests (tsconfig.spec.json).

tslint.json

Zusätzliche Linting-Konfiguration für TSLint zusammen mit Codelyzer, die bei der Ausführung von ng lint verwendet wird. Linting hilft den Codestil konsistent zu halten.

Dateien im Wurzelverzeichnis (root)

Der Ordner src/ ist nur eines der Elemente im Stammordner des Projekts. Andere Dateien helfen bei der Erstellung, Prüfung, Wartung, Dokumentation und Bereitstellung der App.

Datei

Zweck

e2e/

Im Verzeichnis e2e/ liegen die End-to-End-Tests. Das Angular-Team ist der Ansicht, dass diese Tests nicht innerhalb von src/ liegen sollten und begründet dies mit der Aussage, dass e2e Tests eine separate App darstellen, die quasi zufällig die Hauptanwendung testet. Deshalb haben die Ende-Zu-Ende-Tests auch ihre eigene tsconfig.e2e.json.

node_modules/

Node.js erstellt diesen Ordner und legt alle Module von Drittanbietern darin ab, die in der Datei package.json aufgeführt sind.

.editorconfig

Einfache Konfiguration für Deinen Editor, die sicherstellen soll, dass jeder der Dein Projekt verwendet die gleiche Grundkonfiguration benutzt. Die meisten Editoren unterstützen eine .editorconfig-Datei.

Weitere Informationen findest Du unter http://editorconfig.org

.gitignore

Eine Git-Konfigurationsdatei, die sicherstellt, dass autogen erzeugte Dateien nicht an die Versionsverwaltung gebunden werden.

angular.json

Konfiguration für Angular CLI.

In dieser Datei können Standardeinstellungen vorgenommen werden und es kann festgelegt werden, welche Dateien beim Erstellen des Projekts enthalten sind.

package.json

Eine npm-Konfigurationsdatei, die die im Projekt verwendeten Drittanbieterpakete auflistet. Hier können auch eigene benutzerdefinierte Skripte hinzugefügt werden.

protractor.conf.js

Die End-to-End-Testkonfiguration für Protractor, die bei der Ausführung von ng e2e verwendet wird.

README.md

Die Basisdokumentation des Projekts, die bei Erstellung des Projektes mit erzeugt wurde und Informationen darüber enthält, wie die App erzeugt und getestet werden kann. Es ist wichtig diese Datei aktuell zu halten, sodass jeder der das Projekt auscheckt, in die Lage versetzt wird die Anwendung zu erstellen.

tsconfig.json

Konfigurationsdatei für den TypeScript-Compiler und die IDE, um bestmögliches Tooling zu gewährleisten.

tslint.json

Linting-Konfiguration für TSLint zusammen mit Codelyzer, die bei der Ausführung von ng lint verwendet wird. Linting hilft den Codestil konsistent zu halten.

Alternativen

Populäre Alternativen (Stand 2018) sind unter anderem

React

Das vergleichsweise junge Framework React aus dem Jahre 2013 hat schnell seine Anhängerschaft gefunden.

React wurde ursprünglich von Facebook entwickelt und wird inzwischen von diversen größeren Firmen eingesetzt. Darunter sind unter anderem Atlassian, BBC, Coursera, Dropbox, Flipboard, Netflix, Paypal und WhatsApp. Sollten Ihnen die SPAs dieser Unternehmen gefallen, so ist vielleicht React das richtige Framework für Sie.

Vue.js

Vue.js gibt es seit 2016. Die Lernkurve ist im Vergleich zu anderen Frameworks relativ niedrig. Das Framework bietet unter anderem bidirektionales Data Binding und serverseitiges Rendering, ein Command Line Interface und (optionale) JSX-Unterstützung.

Es ist eines der am schnellstwachsenden Frameworks auf dem Markt.

Quellen