Diskussionsthread zur Schulung

[JohannesHoppe]

Hier können wir während des Workshops Links und Codeschnipsel teilen.

[JohannesHoppe]

https://angular.io/resources?category=development

[JohannesHoppe]

https://primeng.org/lts

[JohannesHoppe]

npx npkill

[JohannesHoppe]

Node Version Manager

[JohannesHoppe]

Direkt die lokale CLI verwenden: npm run ng -- help

[JohannesHoppe]

app.component.html – mit Angular Logo!

<div class="container">
  <h1>
    <img
      width="100"
      alt="Angular Logo"
      src="data:image/png;base64,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"
    />
    {{ title }}
  </h1>

  <!-- <router-outlet></router-outlet> -->

</div>

[JohannesHoppe]

ng g c books/dashboard

[JohannesHoppe]

ng generate interface books/shared/book

export interface Book {
  isbn: string;
  title: string;
  description: string;
  rating: number;
}

[JohannesHoppe]

book.component.html

@if (book) {
  <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>
    </div>
  </div>
}

[JohannesHoppe]

[JohannesHoppe]

ng g service books/shared/book-rating

[JohannesHoppe]

import { Book } from './book';
import { BookRatingService } from './book-rating.service';

fdescribe('BookRatingService', () => {
  let service: BookRatingService;
  let book: Book;

  // Arrange
  beforeEach(() => {
    service = new BookRatingService();
    book = {
      isbn: '000',
      title: 'Test',
      description: 'Test',
      rating: 3
    }
  });

  it('should rate up a book by one', () => {
    // Act
    const ratedBook = service.rateUp(book);

    // Assert
    expect(ratedBook.rating).toBe(4);
  });

  it('should rate down a book by one', () => {
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(2);
  });

  it('should not be allowed to have a rating greater than 5', () => {
    book.rating = 5;
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(5);
  });

  it('should not be allowed to have a rating smaller than 1', () => {
    book.rating = 1;
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(1);
  });

  it('should not mutate the book', () => {
    const frozenBook = Object.freeze(book);
    expect(() => service.rateUp(frozenBook)).not.toThrow();
    expect(() => service.rateDown(frozenBook)).not.toThrow();
  });
});

[JohannesHoppe]

Hands on (für Donnerstag)

1.) Gesamtzahl der Bücher ausgeben
2.) Bewertung mit Sternen ⭐️ anzeigen. Zeige die Bewertung eines Buchs mit Sternsymbolen an. Du kannst Bilder verwenden, das '⭐️' Zeichen oder einen anderen Weg wählen. Probiere gerne auch eine eigene Component aus.

Hinweis: Wir wollen natürlich nicht *ngFor verwenden (alte Syntax)!

[JohannesHoppe]

Chrome DevTools Deep Dive

https://youtu.be/0XKZ8M6K9Ug?si=inwCnBFZvSXvN63-

[JohannesHoppe]

TypeScript: useDefineForClassFields – How to avoid future Breaking Changes

https://angular-buch.com/blog/2022-11-use-define-for-class-fields 🇩🇪
https://angular.schule/blog/2022-11-use-define-for-class-fields

[JohannesHoppe]

https://testing-angular.com/end-to-end-testing/

[JohannesHoppe]

import { StarRatingPipe } from './star-rating.pipe';
describe('StarRatingPipe', () => {
  let pipe: StarRatingPipe;
  beforeEach(() => {
    pipe = new StarRatingPipe();
  });
  it('should return 3 filled stars and 2 empty stars for a rating of 3', () => {
    expect(pipe.transform(3)).toBe('★★★☆☆');
  });
  it('should return 5 filled stars for a rating of 5', () => {
    expect(pipe.transform(5)).toBe('★★★★★');
  });
  it('should return 5 empty stars for a rating of 0', () => {
    expect(pipe.transform(0)).toBe('☆☆☆☆☆');
  });
});

[JohannesHoppe]

describe('My First Test', () => {
  it('has the text three books', () => {
    cy.visit('/')
    cy.contains('Anzahl Bücher: 3')
  })
  it('press upvote and check for 5 stars', () => {
    cy.visit('/')

    cy.contains('+1').click();
    cy.contains('Test ⭐ ⭐')
  })
})

[JohannesHoppe]

it('should emit rateUp event when clicking the button', () => {
  component.rateUpAllowed = true;
  component.rateDownAllowed = true;
  fixture.detectChanges();
  jest.spyOn(component.rateUp, 'emit');
  const button = fixture.nativeElement.querySelector('.rate-up');
  button.click();

  fixture.whenStable().then(() => {
    expect(component.rateUp.emit).toHaveBeenCalled();
  });
});

[JohannesHoppe]

TODO für Johannes: mit async/await

[dti-dolce]

Other exclusions that may help cypress-io/cypress#22059 (comment)

  "exclude": [
    "./cypress.config.ts",
    "node_modules",
    "cypress",
    "**/*.cy.tsx"
  ]

[JohannesHoppe]

ng g c books/book-create

[JohannesHoppe]

book-create.component.html

<form>

  <div class="form-group">
    <label for="isbn">ISBN</label>
    <input type="text" class="form-control" id="isbn">
    @if (true) {
      <div class="feedback-error">Die ISBN ist ungültig!</div>
    }
  </div>

  <div class="form-group">
    <label for="title">Titel</label>
    <input type="text" class="form-control" id="title">
  </div>

  <div class="form-group">
    <label for="description">Beschreibung</label>
    <textarea class="form-control" id="description"></textarea>
  </div>

  <button type="submit" class="btn btn-primary mb-4">Erstellen</button>

</form>

[JohannesHoppe]

// Hands On:
// 1. Erstelle ein Event mit dem Namen `create`
// 2. Versende das neue Buch über das Event
// 3. Subscribe dich auf das Event im Dashboard
// 4. Füge das neue Buch zum Buch-Array hinzu (Immutability berücksichtigen)

[JohannesHoppe]

🎮 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/.

[JohannesHoppe]

ng g service books/shared/book-store

[JohannesHoppe]

book-store.service.ts

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { Book } from './book';

@Injectable({
  providedIn: 'root'
})
export class BookStoreService {

  http = inject(HttpClient);

  getBooks(): Observable<Book[]> {
    return this.http.get<Book[]>('https://api.angular.schule/books');
  }

  getSingleBook(isbn: string): Observable<Book> {
    return this.http.get<Book>('https://api.angular.schule/books/' + isbn);
  }
}

[JohannesHoppe]

Hands on (für Freitag)

1. Erforsche die API auf https://api.angular.schule
2. Generiere den API Client mit Hilfe vom OpenAPI Code Generator (siehe Slides)
3. Zeige statt der Katzenfotos das Buch-Cover an

[JohannesHoppe]

ng g c books/book-details

[JohannesHoppe]

import { JsonPipe } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { catchError, map, of, retry, switchMap } from 'rxjs';

import { BookStoreService } from '../shared/book-store.service';


@Component({
  selector: 'app-book-details',
  standalone: true,
  imports: [RouterLink, JsonPipe],
  templateUrl: './book-details.component.html',
  styleUrl: './book-details.component.scss'
})
export class BookDetailsComponent {

  bookStore = inject(BookStoreService);

  book$ = toSignal(
    inject(ActivatedRoute).paramMap.pipe(
      map(paramMap => paramMap.get('isbn') || ''),
      switchMap(isbn => this.bookStore.getSingleBook(isbn).pipe(
        retry({
          count: 3,
          delay: 200
        }),
        catchError((err: HttpErrorResponse) => of({
          title: 'ERROR',
          description: err.message
        }))
      ))
    )
  );
}

@if(book$(); as book) {

  <h2>{{ book.title }}</h2>
  <p>{{ book.description }}</p>

}


<a routerLink="/books/9783864909467">Gehe zu Angular</a><br>
<a routerLink="/books/9783864905520">Gehe zu React</a><br>
<a routerLink="/books/404">Gehe zu 404</a><br>