Angular. Ferdinand Malcher

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.

Teil III

       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.

image

      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.

       https://ng-buch.de/bm4-diff


Скачать книгу