Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

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

[fmalcher]

<!-- book.component.html -->
<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><strong>Preis:</strong> {{ book().price }}</p>
  </div>
</div>

[fmalcher]

Angular Material – Komponentenbibliothek von Angular: https://material.angular.io

[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 [value]="4"></app-rating>. Im Template der Komponente soll zunächst nur die Rating-Zahl angezeigt werden.
• Zeige die Bewertung in der neuen Komponente mit Sternen an. Du kannst entweder ein Bild, ein ASCII-Zeichen (*) oder ein Emoji (⭐️) verwenden.

[fmalcher]

inject() vs Constructor Injection

Hintergrund ist die Einstellung useDefineForClassFields:

• siehe Handout 2
• Angular-Buch Seite 851
• oder https://angular-buch.com/blog/2022-11-use-define-for-class-fields

[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]

Prettier – Opinionated Code Formatter: https://prettier.io/

[fmalcher]

Freiwillige Hausaufgabe (2)

Deaktiviere die Buttons in der BookComponent, 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.

[fmalcher]

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

[fmalcher]

Codegenerierung für HTTP-Services mit OpenAPI Generator:
https://angular.schule/blog/2018-04-swagger-codegen

[fmalcher]

Freiwillige Hausaufgabe (3)

• Ein Buch soll auf dem Server gelöscht werden können. Erstelle dafür einen Button in der BookComponent.
• 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: Mit DELETE /books kannst du die Buchliste auf dem Server zurücksetzen (entweder über die Swagger UI oder mit einem HTTP-Call direkt aus unserer Anwendung)
• Tipp: Der Typ unknown kann verwendet werden, wenn der Inhalt einer Variable unbekannt und uninteressant ist.

[fmalcher]

Freiwillige Hausaufgabe (4)

• 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).

[fmalcher]

JSON powered / Dynamic forms in Angular: https://formly.dev/

[fmalcher]

RxMarbles – Interactive Marble Diagrams: https://rxmarbles.com

[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)
• AsyncPipe oder Signals verwenden

[fmalcher]

NgRx einrichten

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

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

Redux DevTools (Browser-Extension):
https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=de

[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. BookFormComponent. Die BookCreateComponent 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. BookEditComponent), erstelle eine Route und Links zur neuen Seite.
• Die BookFormComponent soll wiederverwendet werden, sodass das Formular nicht zweimal implementiert wird.
• Der Abruf des zu bearbeitenden Buchs soll natürlich in der oberen BookEditComponent passieren. Das Buch wird über ein Property Binding an das Formular übergeben. Nutze hier am besten die AsyncPipe oder ein Signal.
• 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 BookStoreService. 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.