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]

HTML für BookComponent:

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

[numbulan]

@for (star of starArray(); track $index) {
  <i>⭐️</i>
}
@if (this.rating() % 1 !== 0) {
  <i>✧</i>
}

[Pennham]

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'starRating'
})
export class StarRatingPipe implements PipeTransform {

  transform(value: number): string {
    let starString = '';
    for (let i = 1; i <= value; i++) {
      starString += '★';
    }
    if (value % 1 >= 0.5) {
      starString += '⯨'
    }
    return starString;
  }

}

[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. Berücksichtige das Pattern der Container/Presentational Components.

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

ESLint-Regel für Signals: @angular-eslint/prefer-signals

• Erzwingt die Verwendung von input(), viewChild(), … statt alter Varianten.
• Alle Signal-Propertys müssen readonly sein!

[fmalcher]

// eslint.config.js
module.exports = tseslint.config(
  {
    // ...
    rules: {
      "@angular-eslint/prefer-signals": ["error"],
      // ...
    }
  });

[fmalcher]

Schema Validation: https://github.com/colinhacks/zod

[fmalcher]

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

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

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

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

🎮 NEU: RxJS Playground

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]

RxJS Operator Decision Tree: https://rxjs.dev/operator-decision-tree

[fmalcher]

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

[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. Bringe morgen deine Fragen mit! 🙂

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