# 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](https://angular.io/tutorial/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 versionieren, 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:
```typescript
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:
```typescript
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
```typescript
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.
2. im Konstruktor zuweisen
```typescript
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.
3. direkt zuweisen
```typescript
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.
4. mittels Non-null Assertion Operator kennzeichnen
```typescript
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.
5. Mittels `ts-ignore` ignorieren
Da es sich hierbei nicht um sauberen Code handelt, wird diese Lösungsvariante nicht weiter erläutert.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://m335.ict-bz.ch/tag-1/tour-of-heroes.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.