Diskussionsthread zur Schulung

[fmalcher]

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

[fmalcher]

https://angular.dev/style-guide

[fmalcher]

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

[fmalcher]

Aufgabe: Anzahl Bücher

Zeige die Gesamtanzahl der Bücher in der Anwendung an (z. B. im Dashboard).

[fmalcher]

Aufgabe: Datum anzeigen

• Zeige das aktuelle Datum in der Anwendung an, z. B. in der DashboardPage.
• Zusatz: Zeige auch die Uhrzeit an und aktualisiere die Zeit regelmäßig (z. B. 1x pro Sekunde)
• Doku DatePipe: https://angular.dev/api/common/DatePipe

[fmalcher]

Aufgabe: Komponente für Rating

Erstelle eine Komponente, die sich um die Anzeige der Bewertung kümmert (RatingDisplay).
Sie ist auch Teil des Features books.

Die Komponente RatingDisplay erhält das aktuelle Rating per Input und zeigt es an.
In der BookCard wird momentan das Rating direkt eingebunden – dieser Teil soll durch die neue Komponente ersetzt werden.

[fmalcher]

https://doesitmutate.xyz

[fmalcher]

Verschachtelte Objekte klonen mit Spread Operator:

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


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

[fmalcher]

Aufgabe: Buttons deaktivieren

Deaktiviere die Buttons in der BookCard, wenn die Grenzen erreicht sind.

[fmalcher]

Aufgabe: Coverbild anzeigen

Der HTTP-Server liefert in den Buchdatensätzen auch eine Eigenschaft firstThumbnailUrl. Sie enthält die URL zum Coverbild des Buchs. Ersetze die Katzenbilder durch das richtige Coverbild!
Tipp: Native Propertys können auch mit Property Bindings beschrieben werden.

[fmalcher]

Aufgabe: Bücher löschen

• Auf der BookCard soll ein weiterer Button zum Löschen des Buchs platziert werden.
• Die BookCard soll "dumm" bleiben, also nicht mit Services sprechen. Es muss also ein Event deleteBook hoch zum Dashboard geworfen werden.
• im Service BookStore: Methode deleteBook(isbn) bauen
• Tipp: Der Typ unknown sagt aus, dass wir den Inhalt einer Variable nicht kennen und das auch nicht wollen.
• im Dashboard den Service benutzen, um das gewünschte Buch zu löschen
• nach erfolgreichem löschen: Liste aktualisieren
  • Option a) neu vom Server laden ⭐️
  • Option b) Liste lokal aktualisieren (Immutability beachten!)
• Zusatzaufgabe: Baue einen Button zum Zurücksetzen der Buchliste auf dem Server (DELETE /books)

[fmalcher]

https://angular-buch.com/blog/2024-10-resource-api

[fmalcher]

Aufgabe: Vorarbeit für Formulare und Suche

Für das Buchformular und die Suche ist etwas Vorbereitung nötig: Wir brauchen neue Komponenten und Routen.

• Alle neu angelegten Komponenten sollen Teil des Books-Features sein, also im Ordner books liegen
• Formular: BookCreatePage, erreichbar unter der Route books/create
• Suche: BookSearchPage, erreichbar unter der Route books/search
• Navigationsleiste erweitern
• Bitte noch kein Formular implementieren – das machen wir anschließend gemeinsam!

[fmalcher]

Aufgabe: 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.

• Suche mit HTTP zum Server schicken
• Ergebnisse in einfacher Liste darstellen (z. B. alle Titel in Bulletpoint-Liste)
• Signals verwenden
• 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 => Operator siehe Handout

[fmalcher]

Begriffe

Arrow Function
Komponente
Direktive
Component.imports: Was wird da eingetragen?
Host-Element
Signal
Computed Signal
Effect
Service
Dependency Injection
Provider
Singleton
CRUD
map()
filter()
ngOnDestroy()
Pipe
Immutability
Spread-Operator
Shallow Copy / Deep Copy
Interpolation
Property Binding
Event Binding
Input
Output
Observable
Observer
Subscription
Operator (RxJS)
Lazy Loading
Single-Page-Anwendung
Routing
Wildcard-Route
Router-Outlet
Routenparameter auslesen
private/public/protected
Resource API