Angular: Auf und davon

Kapitel 1. Einführung in Angular

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Unsere Erwartungen an das, was wir im Web leisten können (und mit Web meine ich hier sowohl das Desktop- als auch das mobile Web), sind so weit gestiegen, dass früher vollwertige native Desktop-Anwendungen im Browser ausgeführt wurden. Webanwendungen ähneln jetzt in Umfang und Komplexität den nativen Desktop-Anwendungen, was auch die Komplexität für Entwickler/innen erhöht.

Darüber hinaus sind Single-Page Applications (SPAs) zu einer sehr verbreiteten Wahl bei der Entwicklung von Frontend-Erlebnissen geworden, da sie ein großartiges Kundenerlebnis in Bezug auf Geschwindigkeit und Reaktionsfähigkeit ermöglichen. Sobald die ursprüngliche Anwendung in den Browser des Kunden geladen wurde, müssen bei weiteren Interaktionen nur noch die zusätzlich benötigten Daten geladen werden, ohne dass die gesamte Seite neu geladen werden muss, wie es bei serverseitig gerenderten Seiten in der Vergangenheit üblich war.

AngularJS wurde entwickelt, um Struktur und Konsistenz in die Entwicklung von Single-Page-Webanwendungen zu bringen und gleichzeitig eine Möglichkeit zu bieten, schnell skalierbare und wartbare Webanwendungen zu entwickeln. In der Zwischenzeit haben sich das Web und die Browser sprunghaft weiterentwickelt und einige der Probleme, die AngularJS löste, waren nicht mehr so relevant.

Angular war damals im Grunde eine komplett neu geschriebene Version des Frameworks, die für das moderne Web entwickelt wurde. Es nutzte viele der neueren Entwicklungen, von Modulen bis hin zu Webkomponenten, und verbesserte gleichzeitig die bestehenden Funktionen von AngularJS, wie Dependency Injection und Templating.

Tipp

Wenn ich von AngularJS spreche, beziehe ich mich von nun an auf das ursprüngliche AngularJS-Framework, die Version 1.0. Wenn ich Angular erwähne, beziehe ich mich auf das neuere Framework ab Version 2.0. Das liegt vor allem daran, dass Angular ab Version 2.0 nicht mehr nur JavaScript verwendet, sondern auch das Schreiben von Anwendungen in TypeScript unterstützt.

Warum Angular

Angular als Framework bietet einige wichtige Vorteile und stellt gleichzeitig eine gemeinsame Struktur für die Entwickler in einem Team bereit, mit der sie arbeiten können. Es ermöglicht uns, große Anwendungen auf eine wartbare Weise zu entwickeln. In den folgenden Kapiteln werden wir auf jeden dieser Punkte näher eingehen:

Benutzerdefinierte Komponenten

Mit Angular kannst du deine eigenen deklarativen Komponenten erstellen, die die Funktionalität zusammen mit der Rendering-Logik in mundgerechte, wiederverwendbare Teile packen können. Es lässt sich auch gut mit Webkomponenten kombinieren.

Datenbindung

Mit Angular kannst du deine Daten nahtlos von deinem JavaScript-Kerncode in die View verschieben und auf View-Ereignisse reagieren, ohne den Glue-Code selbst schreiben zu müssen.

Dependency Injection

Angular ermöglicht es dir, modulare Dienste zu schreiben und sie dort einzubinden, wo sie gebraucht werden. Das verbessert die Testbarkeit und Wiederverwendbarkeit der Dienste erheblich.

Testen

Tests sind Bürger erster Klasse, und Angular wurde von Grund auf mit Blick auf die Testbarkeit entwickelt. Du kannst (und solltest!) jeden Teil deiner Anwendung testen.

Umfassend

Angular ist ein vollwertiges Framework und bietet sofort einsetzbare Lösungen für die Serverkommunikation, das Routing innerhalb deiner Anwendung und vieles mehr.

Hinweis

Angular als Framework hat die semantische Versionierung für alle neuen Versionen eingeführt. Außerdem hat das Kernteam eine aggressive Roadmap, die alle sechs Monate eine neue Hauptversion vorsieht. So wird das, was als Angular 2 begann, jetzt einfach nur noch Angular genannt, denn wir wollen sie nicht Angular 2, Angular 4, Angular 5 und so weiter nennen.

Anders als bei AngularJS zu Angular ist das Upgrade zwischen den Versionen von Angular (z. B. von 2 auf 4) jedoch ein inkrementeller Schritt und in den meisten Fällen ein fast triviales Upgrade. Du brauchst dir also keine Sorgen zu machen, dass du alle paar Monate ein großes Upgrade mit drastischen Codeänderungen durchführen musst.

Was dieses Buch nicht behandeln wird

Während Angular als Framework schon ziemlich groß ist, ist die Gemeinschaft, die es umgibt, noch größer. Viele großartige Funktionen und Optionen für die Verwendung von Angular stammen tatsächlich aus dieser Community. Das macht es für dich als Autor schwieriger, ein Buch zu schreiben, das dich, den Leser, als Angular-Entwickler vorbereitet und sich trotzdem auf das Wesentliche beschränkt.

Obwohl Angular auf so viele Arten erweitert werden kann, z. B. durch das Schreiben nativer mobiler Apps mit Angular (siehe NativeScript), das Rendern deiner Angular-Anwendung auf dem Server (siehe Angular Universal), die Verwendung von Redux als First-Class-Option in Angular (mehrere Optionen; siehe ngrx) und vieles mehr, wird sich die erste Version des Buches nur auf die Kernplattform Angular und alle Funktionen konzentrieren, die sie bietet. Außerdem wird es sich auf die häufigsten Fälle konzentrieren und nicht jede einzelne Funktion und Fähigkeit von Angular behandeln, da ein solches Buch Tausende von Seiten umfassen würde.

Wir wollen uns auf die Teile konzentrieren, die für alle Angular-Entwicklerinnen und -Entwickler notwendig und nützlich sind, anstatt uns auf Teile zu konzentrieren, die nur für eine kleine Gruppe nützlich sind.

Erste Schritte mit deiner Entwicklungsumgebung

Angular erwartet, dass du eine ganze Menge Vorarbeit leistest, um nahtlos auf deinem Computer entwickeln zu können. Es müssen bestimmte Voraussetzungen installiert werden, die wir in diesem Abschnitt behandeln.

Node.js

Du wirst zwar nie in Node.js programmieren, aber Angular nutzt Node.js als Basis für einen großen Teil seiner Build-Umgebung. Um mit Angular loszulegen, musst du also Node.js in deiner Umgebung installiert haben. Es gibt mehrere Möglichkeiten, Node.js zu installieren, daher findest du auf der Node.js Download-Seite weitere Anweisungen.

Warnung

Es ist bekannt, dass die Installation von Node.js über Homebrew unter macOS einige Probleme verursacht. Versuche also, es direkt zu installieren, wenn du Probleme hast.

Du musst Node.js Version 6.9.0 oder höher und npm Version 3.0.0 oder höher installieren. Du kannst deine Versionen nach der Installation mit den folgenden Befehlen überprüfen:

node --version
npm --v

TypeScript

TypeScript fügt dem JavaScript-Code, den wir schreiben, eine Reihe von Typen hinzu, die es uns ermöglichen, JavaScript so zu schreiben, dass es leichter zu verstehen, zu verstehen und zu verfolgen ist. Es stellt sicher, dass die neuesten vorgeschlagenen ECMAScript-Funktionen auf Knopfdruck verfügbar sind. Am Ende des Tages wird dein TypeScript-Code zu JavaScript kompiliert, das in jeder Umgebung problemlos ausgeführt werden kann.

TypeScript ist für die Entwicklung einer Angular-Anwendung nicht zwingend erforderlich, wird aber sehr empfohlen, da es einige syntaktische Verbesserungen bietet und die Codebasis leichter verständlich und wartbar macht. In diesem Buch werden wir TypeScript verwenden, um Angular-Anwendungen zu entwickeln.

TypeScript wird als NPM-Paket installiert, und kann daher einfach mit dem folgenden Befehl installiert werden:

npm install -g typescript

Stelle sicher, dass du mindestens die Version 2.4.0 oder höher installierst.

Wir werden zwar die meisten grundlegenden Funktionen/Konzepte von TypeScript behandeln, aber es ist immer eine gute Idee, mehr aus der offiziellen TypeScript-Dokumentation zu lernen.

Angular CLI

Im Gegensatz zu AngularJS, wo es einfach war, eine Datei als Abhängigkeit einzubinden und loszulegen, ist der Aufbau von Angular etwas komplizierter. Deshalb hat das Angular-Team ein Kommandozeilen-Tool (CLI) entwickelt, um das Bootstrapping und die Entwicklung deiner Angular-Anwendungen zu erleichtern.

Da es den Entwicklungsprozess erheblich vereinfacht, empfehle ich, es zumindest für deine ersten Projekte zu verwenden, bis du den Dreh raus hast und dich damit auskennst. In diesem Buch werden wir sowohl den CLI-Befehl als auch die darunter liegenden Aktionen behandeln, damit du ein gutes Verständnis für alle notwendigen Änderungen bekommst.

Die Installation der neuesten Version (1.7.3 zum Zeitpunkt der Erstellung dieses Buches) ist so einfach wie das Ausführen des folgenden Befehls:

npm install -g @angular/cli

Tipp

Wenn du dich bei dieser neumodischen Namenskonvention für Angular-Pakete am Kopf kratzt, ist die neue Syntax eine Funktion von NPM namens scoped packages. Sie ermöglicht es, Pakete innerhalb von NPM in einem einzigen Ordner zusammenzufassen. Hier kannst du mehr darüber lesen.

Nach der Installation kannst du überprüfen, ob sie erfolgreich war, indem du den folgenden Befehl ausführst:

ng --version

Die Codebasis erhalten

Alle Beispiele aus diesem Buch, zusammen mit den Übungen und der endgültigen Lösung, werden als Git-Repository gehostet. Es ist zwar nicht zwingend erforderlich, dieses herunterzuladen, aber du kannst es tun, wenn du eine Referenz brauchst oder mit den Beispielen in diesem Buch herumspielen möchtest. Dazu klonst du das Git-Repository, indem du den folgenden Befehl ausführst:

git clone https://github.com/shyamseshadri/angular-up-and-running.git

Dadurch wird in deinem aktuellen Arbeitsverzeichnis ein Ordner mit dem Namen angular-up-and-running erstellt, der alle notwendigen Beispiele enthält. In diesem Verzeichnis findest du Unterordner mit den Beispielen, die nach Kapiteln geordnet sind.

Fazit

Jetzt haben wir unsere Entwicklungsumgebung eingerichtet und sind bereit, mit der Entwicklung von Angular-Anwendungen zu beginnen. Wir haben Node.js, TypeScript und das Angular CLI installiert und verstehen den Bedarf und die Verwendung der einzelnen Komponenten.

Im nächsten Kapitel werden wir uns endlich die Hände schmutzig machen, indem wir unsere erste Angular-Anwendung bauen und einige der grundlegenden Begriffe und Konzepte von Angular verstehen.