Angular. Ferdinand Malcher
vorab konfigurieren und anpassen, damit sie ihren Zweck erfüllen können. Dies macht den Code unübersichtlich und erschwert zu einem späteren Zeitpunkt das Verständnis über die Anwendung. Irgendwann fällt es schwer, zwischen der wertvollen Geschäftslogik und dem notwendigen »Klebstoff« für das Framework zu unterscheiden.
Angular vermeidet dieses Dilemma durch den Einsatz von Decorators. Mit Decorators können wir Klassen, Methoden und Eigenschaften dekorieren und damit Metadaten hinzufügen. Man erkennt einen Decorator stets am @-Zeichen zu Beginn des Namens.
@Component({
// Konfigurations-Objekt
})
export class MyComponent { }
Funktionsklammern nicht vergessen!
Durch den Decorator @Component() erhält die Klasse eine Semantik innerhalb des Angular-Frameworks: Diese Klasse ist als Komponente zu behandeln. Alle Decorators von Angular sind Funktionen, daher darf man die Funktionsklammern bei der Verwendung nicht vergessen.
4.12Optional Chaining
Mit TypeScript 3.7 wurde das Feature Optional Chaining eingeführt. Optional Chaining ermöglicht einen sicheren Zugriff auf verschachtelte Objekte, bei denen ein Teil des Objekts potenziell null oder undefined zurückliefert. Dabei wertet TypeScript den Ausdruck Schritt für Schritt aus und bricht ab, sobald ein Objekt-Property null oder undefined liefert.
interface MyData {
bar: { baz: string } | null | string
}
const foo: MyData | null = {
bar: {
baz: 'Angular'
}
}
// Sicherer Zugriff auf "baz" ohne Optional Chaining
if (foo && foo.bar && foo.bar.baz) {
// ...
}
// Sicherer Zugriff auf "baz" mit Optional Chaining
if (foo?.bar?.baz) {
// ...
}
4.13Nullish Coalescing
Ein weiteres Feature, das mit TypeScript 3.7 eingeführt wurde, ist das Nullish Coalescing. Es erlaubt die einfache Zuweisung von Rückfallwerten, für den Fall, dass eine Variable den Wert null oder undefined hat. Der Operator greift jedoch nicht generell bei falsy-Werten3. Er erlaubt im Gegensatz zum ||-Operator die Zuweisung von 0, "" oder NaN.
const foo = 0;
// foo oder alternativ 'backup' ohne Nullish Coalescing
let bar = (foo !== null && foo !== undefined)
? foo
: 'backup'; // Ergebnis: 0
// foo oder alternativ 'backup' mit Nullish Coalescing
let bar = foo ?? 'backup'; // Ergebnis: 0
// Vergleich zum "||" Operator
let bar = foo || 'backup'; // Ergebnis: 'backup'
Zusammenfassung
TypeScript erweitert den JavaScript-Sprachstandard um viele Features, die wir bereits aus etablierten Sprachen wie C# oder Java kennen. Dadurch fällt auch der Umstieg von einer anderen objektorientierten Sprache nicht schwer. Auch für reine JavaScript-Entwickler ist der Umstieg auf TypeScript keine große Hürde, weil alle bekannten Features aus JavaScript weiterhin verwendet werden können.
Mit der Typisierung und Objektorientierung können wir die Schnittstellen unserer Klassen klar definieren. Der Editor kann uns bei der Arbeit mit TypeScript effizient unterstützen und schon zur Entwicklungszeit auf Fehler hinweisen.
Damit unsere Anwendung später auch in jedem Browser lauffähig ist, wird TypeScript vor der Auslieferung immer in reines JavaScript umgewandelt (transpiliert). Damit werden auch Kompatibilitätsprobleme umgangen, denn die Umwandlung ist Sache des TypeScript-Compilers.
5Projekt- und Prozessvorstellung
»For me Angular is much much more than some code, APIs or syntax. It’s the ‘more’ we wanted to preserve, even if it means short term issues.«
Igor Minar
(Angular Lead Developer)
Nachdem wir die Grundlagen zur Struktur unserer Anwendung und zu TypeScript gelegt haben, widmen wir uns nun dem größten Abschnitt dieses Buchs. Wir wollen das Angular-Framework anwenden und kennenlernen und dabei ein umfangreiches Beispielprojekt entwickeln. Dabei werden wir alle wichtigen Konzepte von Angular kennenlernen.
5.1Unser Projekt: BookMonkey
Unser Projekt ist eine Webanwendung, mit der wir Bücher verwalten können. Die Software trägt den Namen BookMonkey. Wir wollen zunächst Bücher in einer Liste und einzeln darstellen. Außerdem wollen wir Möglichkeiten schaffen, den Buchbestand selbst zu verwalten.
Iterative Entwicklung
Der BookMonkey wird in den folgenden Kapiteln Schritt für Schritt verändert und erweitert. Das anfänglich einfache Beispiel wird mit dem Reichtum an Funktionalitäten zunehmend komplexer. Diese stetige Entwicklung wird durch Iterationen dargestellt. In jeder Iteration wird ein neues großes Thema behandelt und in mehreren Schritten zur Umsetzung gebracht. Bevor wir den BookMonkey erweitern, erläutern wir jeweils zunächst die theoretischen Grundlagen. Anschließend wird das gelernte Wissen angewandt und im Projekt umgesetzt.
Der BookMonkey online
Eine vollständige Demo des BookMonkeys ist auf der Webseite https://ng-buch.de/bm4-demo verfügbar. Der gesamte Quelltext des BookMonkeys wird auf GitHub gehostet.1
Demo und Quelltext: https://ng-buch.de/bm4-demo
Über diesen Zugang lassen sich auch die Teilschritte der einzelnen Iterationen als separate Apps abrufen, sodass stets nachvollziehbar ist, welche Änderungen von Schritt zu Schritt getätigt wurden.
Abb. 5–1 Online-Version des BookMonkeys zum Ausprobieren
Differenzansicht
Ab und an wird es vielleicht passieren, dass eine wichtige Zeile Quelltext vergessen wurde und ein Teilschritt dadurch nicht funktioniert. Als Unterstützung haben wir die Änderungen zwischen den einzelnen Iterationen sowie zwischen den »großen« Abschnitten als Differenzansicht bereitgestellt. So sehen Sie genau, was sich verändert hat.