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
- https://angular.io/guide/quickstart
- Das bringt der neue Ivy Renderer in Angular 6
- JavaScript Frameworks you should know
- Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.