Information

Dieses Dokument befindet sich in Arbeit

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 erster Angular-Projekt erstellt werden kann.

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

Stelle sicher das 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.

Angular CLI ist ein Kommandozeileninterface, das benutzt werden kann, um Projekte zu erstellen, Dateien hinzuzufügen und diverese 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.

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.

Angular CLI hat bereits die erste Komponente für Dich erzeugt. Diese Komponete 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.

Alle Dateien der Anwendung selbst befinden sich im Verzeichnis src (im Quelverzeichnis). Alle Angular-Komponenten, Templates, Styleinfomationen, 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 Defiert 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 exortiert Konfigurationsvariablen die in der Anweundung verwendert 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 autmatisch 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
styles.css
test.ts
tsconfig.{app|spec}.json
tslint.json

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

Ich habe beim Lernen folgende Quellen verwendet, die auch als Basis für die Erstellung dieses Dokumentes gedient haben: