🦸‍♂️Tour of Heroes

Aufgabe von Jason

Angular bietete früher von Haus aus ein sehr cooles Tutorial, mit welchem du dir selbstständig Angular beibringen konntest. Ursprünglich konnte das offizielle "Tour of Heroes"-Tutorial Seite auf der offiziellen Angular-Seite aufgerufen werden. Da dieses Tutorial nicht mehr auf die aktuellste Angular-Version aktualisiert wurde, habe ich es dir in den Kursunterlagen zusammengestellt und dir pro Kapitel nützliche Infos und Zusatzaufgaben hinzugefügt.

Erledige alle 5 Aufgaben, welche du in dem Tutorial findest, um dir ein fundiertes Fachwissen in Angular anzueignen.

Falls du während der Entwicklung Probleme oder Schwierigkeiten haben solltest, findest du in den folgenden Unterkapitel einige Tipps, Tricks und Erklärungen zu den einzelnen Aufgaben. Natürlich darfst du eigens mittels Google recherchieren oder den Instruktor um Rat fragen.

Starte bereits hier deine Codes mit Git zu ver­si­o­nie­ren, dadurch sammelst du Erfahrungen, welche du später im Projekt verwenden kannst.

Happy Coding 🥳

Prettier installieren

Mit Hilfe von Prettier wird dein Code nach festen Richtlinien formatiert und gestyled. Coding Guidelines können so standardisiert und eingehalten werden.

Der grosse Vorteil von Prettier ist, dass es unzählige Programmiersprachen unterstützt und dir die Arbeit vom Code styling übernimmt, so kannst du dich voll und ganz auf die Programmierlogik stürzen.

Nun wie installierst du prettier? Dazu musst du bereits ein Projekt erstellt haben:

ng new angular-tour-of-heroes
cd angular-tour-of-heroes

In dem Folder wo du dich nun aufhälst muss sich die Datei "package.json" befinden, ansonsten kannst du den folgenden Befehl nicht ausführen:

npm i prettier --save-dev

• npm: Du rufst den Node Package Manager auf, welcher deine installierten Packages verwaltet

• i: installiert Pakete welche du anschliessend angeben kannst, ohne weitere Angaben werden alle Pakete aus dem package.json installiert

• prettier: das Paket das du installieren möchtest

• --save-dev: (optional) Ein Flag wodurch das Paket nur für die lokale Entwicklung installiert wird

Nun hast du erfolgreich prettier installiert und kannst diesen in WebStorm einstellen, dafür öffne das Projekt im WebStorm. Dann öffne die Einstellungen und suche nach "Prettier". Folgende Einstellungen kannst du dann vornehmen:

Stelle sicher dass du alle benötigten Dateitypen angegeben hast, die du benötigst (html, ts, css, scss, json).

Tipps & Tricks

1. Bei der Erstellung der Projektes mit ng new wählt yes für "Would you like to add Angular routing?"

no initializer - Fehlermeldung

Diese Fehlermeldung taucht gerade in den Anfängen der Programmierung mit Angular des Öfteren auf. In diesem Fall wird die Variable nicht nur deklariert, sondern ebenso definiert. Das bedeutet nichts weiteres als, ab diesem Momemnt ist die Variable vollumfänglich nutzbar. Was bedeutet denn genau die Fehlermeldung:

Die Variable hat aktuell den folgenden Typ: undefined. Dies ist jedoch nicht zugelassen, da die Variable kein Optional ist.

Optionals markieren Objekte als mögliche nullables, das bedeutet der Entwickler muss damit rechnen, dass das Objekt null oder undefined sein kann. Solche Optionals werden im Code mit einem ? gekennzeichnet.

Heisst in diesem Falls gibt es mehrere Lösungsansätze die Fehlermeldung zu beseitigen.

1. als Optional markieren

title?: string;

Das ist einer der saubersten Varianten. Dadurch es die Variable als nullable markiert wurde, darf diese ebenso den initialen Wert undefined haben. Dementsprechend ist die Verantwortung beim Entwickler zu überprüfen, ob die Variable bei der Verwendung bereits einen Wert hat.

1. im Konstruktor zuweisen

title: string;

constructor() {
  this.title = "Page title"
}

Dadurch dass die Variable im Konstruktor direkt gesetzt wird, bekommt die Variable bei der Initiierung der Klasse direkt einen Wert.

1. direkt zuweisen

title = "Page title";

Wenn eine Variable ausserhalb des Konstruktors gesetzt wird, handelt es sich hierbei um einen class field/member. Diese Felder haben bereits bei der Initiierung einen Wert und können so ebenfalls null oder undefined sein.

1. mittels Non-null Assertion Operator kennzeichnen

title!: string;

Durch den non-null assertion operator wird dem Kompiler "aufgezeigt", dass die Variable bei der Initiierung einen Wert haben wird. Dadurch wird erst zur Laufzeit überprüft ob die Variable einen Wert hat. Dies kann zu Laufzeitfehler führen, sobald die Variable nicht gesetzt ist.

Ein möglicher Anwendungsbereich wären hier die Input(), welche im 3. Kapitel erläutert wird.

1. Mittels ts-ignore ignorieren

Da es sich hierbei nicht um sauberen Code handelt, wird diese Lösungsvariante nicht weiter erläutert.