Diskussionsthread zur Schulung

[fmalcher]

Herzlich Willkommen! 🎉 Hier können wir während der Schulung Links und Codeschnipsel teilen.

[fmalcher]

Google TypeScript Style Guide: https://google.github.io/styleguide/tsguide.html
Angular Coding Style Guide: https://angular.dev/style-guide

[fmalcher]

HTML für Komponente BookCard:

<div class="card mb-4">
  <div class="card-body bg-light">
      <img class="img-thumbnail float-end" alt=""
        src="https://api.angular.schule/avatar/{{ book().rating }}">
    <div class="card-title">
      <h2>
        {{ book().title }}
        <span class="badge bg-secondary">{{ book().rating }}</span>
      </h2>
    </div>
    <p>{{ book().description }}</p>
    <p>Preis: {{ book().price }}</p>
  </div>
</div>

[fmalcher]

Freiwillige Hausaufgabe (1)

• Zeige die Gesamtanzahl der Bücher an einer geeigneten Stelle in der Anwendung an.
• Entwickle eine Komponente, um die Bewertung eines Buchs anzuzeigen, z. B. <app-rating-display [value]="4" />. Im Template der Komponente kannst du als Zwischenschritt zunächst nur die Rating-Zahl anzeigen.
• Zeige die Bewertung in der neuen Komponente mit Sternen an. Du kannst entweder ein Bild, ein ASCII-Zeichen (*) oder ein Emoji (⭐️) verwenden.

[StephanPopuloh]

Hier eine Lösung um leere Sterne auch mit einem Computed anzuzeigen:

TypeScript:
protected stars = computed(() => new Array(this.rating()).fill('★').concat(new Array(5 - this.rating()).fill('☆')));

html:
@for (star of stars(); track $index) { {{star}}} ({{rating()}})

[StephanPopuloh]

QuickFix für Kommazahlen in der Bewertung (abrunden der Array Länge):
protected stars = computed(() => new Array(Math.trunc(this.rating())).fill('★').concat(new Array(5 - Math.trunc(this.rating())).fill('☆')));

[fmalcher]

Problem: Tests mit Karma laufen nicht ohne Zone.js. Wir haben aber beim Generieren der Anwendung den Schalter --zoneless verwendet. Zone.js ist die Grundlage für die traditionelle Change Detection von Angular. Das ist mit Signals aber nicht mehr notwendig.

Zone.js manuell wieder einbinden

1.) Zone.js installieren

npm install zone.js

2.) Polyfills einbinden

• Datei angular.json
• 1. Pfad: projects > book-rating > architect > build
• 2. Pfad: projects > book-rating > architect > test

"styles": [
  "src/styles.scss"
],
"polyfills": ["zone.js"] // NEU

3.) Zoneless entfernen

Datei app.config.ts:

• Zeile provideZonelessChangeDetection() entfernen
• Stattdessen einfügen:

provideZoneChangeDetection({ eventCoalescing: true }),

[fmalcher]

Zone.js, Zoneless und "Hybridbetrieb":
https://angular-buch.com/blog/2024-06-angular18

[fmalcher]

Verschachtelte Objekte klonen mit Spread Operator:

const myObj = {
  title: 'Angular',
  author: {
    firstname: 'F',
    lastname: 'M'
  }
}


const myCopy = {
  ...myObj,
  author: {
    ...myObj.author,
    firstname: 'L'
  }
};

// echte Deep Copy
const myCopy2 = structuredClone(myObj);
myCopy2.author.firstname = 'L';

[fmalcher]

https://doesitmutate.xyz/

[fmalcher]

Freiwillige Hausaufgabe (2)

Deaktiviere die Buttons in der BookCard, wenn das Max/Min-Rating erreicht ist. Für diese Aufgabe gibt es verschieden komplexe Ausprägungen. Denke über die möglichen Varianten nach und entscheide dich für einen Lösungsweg. Berücksichtige, dass die BookCard eine reine Anzeigekomponente bleibt und möglichst nicht mit Services sprechen sollte.

[fmalcher]

Model Inputs: https://angular.dev/guide/components/inputs#model-inputs

[fmalcher]

Reactive Angular: Daten laden mit der Resource API
https://angular-buch.com/blog/2024-10-resource-api

[fmalcher]

OIDC/OAuth2 mit Angular:

https://www.npmjs.com/package/angular-auth-oidc-client
https://github.com/manfredsteyer/angular-oauth2-oidc

[fmalcher]

WebSocket mit RxJS:
https://rxjs.dev/api/webSocket/webSocket

[fmalcher]

Freiwillige Hausaufgabe (3)

Bücher löschen

• Ein Buch soll auf dem Server gelöscht werden können. Erstelle dafür einen Button in der BookCard.
• Mache vor dem Löschen eine Bestätigungsabfrage, z. B. mit einem confirm()-Dialog.
• Nach dem Löschen kannst du entweder die Liste komplett neu laden oder die Änderung nur lokal durchführen, nachdem der Server Erfolg gemeldet hat.
• Tipp: Der Typ unknown kann verwendet werden, wenn der Inhalt einer Variable unbekannt und uninteressant ist.
• Tipp: Mit DELETE /books kannst du die Buchliste auf dem Server zurücksetzen, z. B. mit einem Button in der Anwendung oder direkt über die Swagger UI.

Resource API

Lies dir den Blogpost zur neuen Resource API in Ruhe durch: https://angular-buch.com/blog/2024-10-resource-api

[fmalcher]

Vorarbeit für Formulare und Suche

Für die nächsten Übungen ist etwas Vorarbeit nötig. Wir benötigen neue Routen und Komponenten.

• Alle Komponenten sollen Teil des Books-Features sein!
• Formularkomponente: BookCreatePage, Route books/create
• Suchkomponente: BookSearchPage, Route books/search
• Navigationsleiste z. B. in der Komponente App bauen (ganz einfach halten)

[fmalcher]

Freiwillige Hausaufgabe (4)

Datum anzeigen

• Nutze die DatePipe, um das aktuelle Datum und Uhrzeit in der Anwendung anzuzeigen. Verwende als Anzeigeort bitte eine geroutete Komponente, z. B. das Dashboard.
• Aktualisiere die Zeit regelmäßig.
• Beende den laufenden Timer, wenn die Komponente beendet wird (z. B. beim Wegnavigieren).

optionale Zusatzaufgabe: eigener Validator

Entwickle einen eigenen Validator (ValidatorFn) für eine selbst gewählte Regel für unser Buchformular.

[fmalcher]

🎮 RxJS Playground installieren

Du kannst dir entweder

• den Code als ZIP-Datei herunterladen: rxjs-playground.zip
  oder
  
• dieses Repository per Git herunterladen und in den Ordner rxjs-playground wechseln.

cd rxjs-playground
npm install
ng serve

Öffne den Browser unter der URL http://localhost:4300 (!), um die Anwendung zu sehen.
Die Übungen befinden sich im Ordner rxjs-playground/src/app/exercises/.

[fmalcher]

Falsy Values:
false, null, undefined, 0, '' (leerer String), NaN

[fmalcher]

Hausaufgabe (5)

Lies dir das Handout und die Folien zu RxJS in Ruhe durch (siehe Portalseite) und schau dir die vergangenen Übungen im Playground noch einmal an. Mehr Informationen findest Du im Angular-Buch in Kapitel 15 (ab Seite 243). Bringe morgen deine Fragen mit! 🙂

[fmalcher]

Dokumentation: https://rxjs.dev
Marbles: https://rxmarbles.com
Operator Decision Tree: https://rxjs.dev/operator-decision-tree

[fmalcher]

Typeahead-Suche

Implementiere eine Typeahead-Suche. Nutze als Basis dafür den Datenstrom valueChanges aus dem Formular, um während der Eingabe eine Suche zu starten.

• Suchbegriff muss mindestens 3 Zeichen lang sein. Bitte löse das nicht mit einem Validator, sondern mit RxJS!
• nicht zu viele Anfragen kurz hintereinander zum Server schicken
• Suche mit HTTP zum Server schicken
• Ergebnisse in einfacher Liste darstellen (z. B. alle Titel in Bulletpoint-Liste)
• Signals verwenden

[fmalcher]

NgRx einrichten (20.0.0-beta)

ng add @ngrx/store@next
ng add @ngrx/store-devtools@next
ng add @ngrx/effects@next
ng add @ngrx/schematics@next

ng g feature books/store/book --api --entity=false --defaults

Redux DevTools (Browser-Extension):
https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=de
https://addons.mozilla.org/de/firefox/addon/reduxdevtools/

[fmalcher]

Zusatzaufgaben

RxJS Playground

Hier gibt es noch die offenen Aufgaben "Chat" und "Dragdrop". Die Lösung für das Dragdrop findet ihr im Repo.

Refactoring des bestehenden Formulars

Teile das Formular zum Erstellen von Büchern in zwei Komponenten auf. Das reine Formular soll in einer eigenen neuen Komponente liegen, z. B. BookForm. Die BookCreatePage soll das Formular als Kindkomponente einbinden. Das Formular soll beim Abschicken das erzeugte Buch per Event Binding an die Elternkomponente übergeben. Die Formularkomponente ist dann also vollständig entkoppelt von der konkreten Verwendung.

Bücher bearbeiten

• Implementiere die Funktionalität zum Bearbeiten von Büchern.
• Lege dazu eine passende Komponente an (z. B. BookEditPage), erstelle eine Route und Links zur neuen Seite.
• Die BookForm soll wiederverwendet werden, sodass das Formular nicht zweimal implementiert wird.
• Der Abruf des zu bearbeitenden Buchs soll natürlich in der oberen BookEditPage passieren. Das Buch wird über ein Property Binding an das Formular übergeben. Nutze hier am besten die Funktion toSignal() oder die AsyncPipe.
• Tipp: Mit einem effect() können wir darauf reagieren, dass ein Signal seinen Wert ändert.
• Tipp: Mit setValue()/patchValue() kann man den Formularwert überschreiben, siehe dazu auch die Folien.
• Zusatz: Die ISBN darf nicht geändert werden. Beim Bearbeiten ist das Feld also deaktiviert.
• Zum Aktualisieren des Buchs auf dem Server erweitere den Service BookStore. In der API-Doku findest du den passenden Endpunkt dafür: https://api.angular.schule/swagger-ui/
• Nach Bearbeiten eines Buchs soll wieder die Detailseite sichtbar sein.