BookManager 1 Diff | 09-resource (from 08-http)

src/app/books-portal/book-details-page/book-details-page.html CHANGED Viewed

@@ -1,4 +1,14 @@
-@if (book(); as b) {
   <article>
     <header>
       <h1>{{ b.title }}</h1>

+@if (book.error()) {
+  <p role="alert">Book could not be found.</p>
+  <a routerLink="/books">Back to list</a>
+}
+@if (book.isLoading()) {
+  <p aria-busy="true">Loading ...</p>
+}
+@if (book.hasValue()) {
+  @let b = book.value();
   <article>
     <header>
       <h1>{{ b.title }}</h1>

src/app/books-portal/book-details-page/book-details-page.spec.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 import { Location } from '@angular/common';
 import { provideLocationMocks } from '@angular/common/testing';
-import { inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter, Router } from '@angular/router';
-import { of } from 'rxjs';
 import { Mock } from 'vitest';
 import { BookStore } from '../../shared/book-store';
@@ -20,7 +19,7 @@ describe('BookDetailsPage', () => {
   beforeEach(async () => {
     isbn = signal('12345');
-    getSingleMock = vi.fn().mockReturnValue(of(testBook));
     await TestBed.configureTestingModule({
       imports: [BookDetailsPage],
@@ -29,7 +28,12 @@ describe('BookDetailsPage', () => {
         provideLocationMocks(),
         {
           provide: BookStore,
-          useValue: { getSingle: getSingleMock }
         }
       ]
     })
@@ -47,8 +51,10 @@ describe('BookDetailsPage', () => {
   });
   it('should load the correct book by ISBN', async () => {
-    expect(getSingleMock).toHaveBeenCalledExactlyOnceWith('12345');
-    expect(component['book']()).toEqual(testBook);
   });
   it('should navigate to the details page', async () => {
@@ -62,12 +68,14 @@ describe('BookDetailsPage', () => {
   it('should update the book when ISBN changes', async () => {
     const anotherBook = { isbn: '67890', title: 'Test Book 2', authors: [] };
-    getSingleMock.mockReturnValue(of(anotherBook));
     isbn.set('67890');
     await fixture.whenStable();
-    expect(getSingleMock).toHaveBeenCalledWith('67890');
-    expect(component['book']()).toEqual(anotherBook);
   });
 });

 import { Location } from '@angular/common';
 import { provideLocationMocks } from '@angular/common/testing';
+import { inputBinding, resource, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter, Router } from '@angular/router';
 import { Mock } from 'vitest';
 import { BookStore } from '../../shared/book-store';
   beforeEach(async () => {
     isbn = signal('12345');
+    getSingleMock = vi.fn().mockResolvedValue(testBook);
     await TestBed.configureTestingModule({
       imports: [BookDetailsPage],
         provideLocationMocks(),
         {
           provide: BookStore,
+          useFactory: () => ({
+            getSingle: (isbn: () => string) => resource({
+              params: isbn,
+              loader: getSingleMock,
+            })
+          })
         }
       ]
     })
   });
   it('should load the correct book by ISBN', async () => {
+    expect(getSingleMock).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({ params: '12345' })
+    );
+    expect(component['book'].value()).toEqual(testBook);
   });
   it('should navigate to the details page', async () => {
   it('should update the book when ISBN changes', async () => {
     const anotherBook = { isbn: '67890', title: 'Test Book 2', authors: [] };
+    getSingleMock.mockResolvedValue(anotherBook);
     isbn.set('67890');
     await fixture.whenStable();
+    expect(getSingleMock).toHaveBeenLastCalledWith(
+      expect.objectContaining({ params: '67890' })
+    );
+    expect(component['book'].value()).toEqual(anotherBook);
   });
 });

src/app/books-portal/book-details-page/book-details-page.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import { Component, effect, inject, input, signal } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
-import { Book } from '../../shared/book';
 import { BookStore } from '../../shared/book-store';
 @Component({
@@ -15,15 +14,7 @@ export class BookDetailsPage {
   #router = inject(Router);
   readonly isbn = input.required<string>();
-  protected book = signal<Book | undefined>(undefined);
-  constructor() {
-    effect(() => {
-      this.#bookStore.getSingle(this.isbn()).subscribe(book => {
-        this.book.set(book);
-      });
-    });
-  }
   removeBook(isbn: string) {
     if (window.confirm('Delete book?')) {

+import { Component, inject, input } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { BookStore } from '../../shared/book-store';
 @Component({
   #router = inject(Router);
   readonly isbn = input.required<string>();
+  protected book = this.#bookStore.getSingle(() => this.isbn());
   removeBook(isbn: string) {
     if (window.confirm('Delete book?')) {

src/app/books-portal/books-overview-page/books-overview-page.html CHANGED Viewed

@@ -12,6 +12,10 @@
 <section>
   <h1>Books</h1>
   <div>
     <input
       type="search"

 <section>
   <h1>Books</h1>
+  <button type="button" (click)="books.reload()" [aria-busy]="books.isLoading()">
+    Reload
+  </button>
   <div>
     <input
       type="search"

src/app/books-portal/books-overview-page/books-overview-page.spec.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
-import { of } from 'rxjs';
 import { BooksOverviewPage } from './books-overview-page';
 import { booksPortalRoutes } from '../books-portal.routes';
@@ -24,9 +24,11 @@ describe('BooksOverviewPage', () => {
         provideRouter(booksPortalRoutes),
         {
           provide: BookStore,
-          useValue: {
-            getAll: () => of(mockBooks)
-          }
         }
       ]
     })
@@ -42,7 +44,7 @@ describe('BooksOverviewPage', () => {
   });
   it('should have a list of 2 books with correct titles', () => {
-    const books = component['books']();
     expect(books.length).toBe(2);
     expect(books[0].title).toBe('Tierisch gut kochen');

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
+import { resource } from '@angular/core';
 import { BooksOverviewPage } from './books-overview-page';
 import { booksPortalRoutes } from '../books-portal.routes';
         provideRouter(booksPortalRoutes),
         {
           provide: BookStore,
+          useFactory: () => ({
+            getAll: () => resource({
+              loader: () => Promise.resolve(mockBooks),
+            })
+          })
         }
       ]
     })
   });
   it('should have a list of 2 books with correct titles', () => {
+    const books = component['books'].value();
     expect(books.length).toBe(2);
     expect(books[0].title).toBe('Tierisch gut kochen');

src/app/books-portal/books-overview-page/books-overview-page.ts CHANGED Viewed

@@ -15,24 +15,22 @@ export class BooksOverviewPage {
   protected searchTerm = signal('');
-  protected books = signal<Book[]>([]);
   protected likedBooks = signal<Book[]>([]);
   protected filteredBooks = computed(() => {
     if (!this.searchTerm()) {
-      return this.books();
     }
     const term = this.searchTerm().toLowerCase();
-    return this.books().filter((b) => b.title.toLowerCase().includes(term));
   });
-  constructor() {
-    this.#bookStore.getAll().subscribe(books => {
-      this.books.set(books);
-    });
-  }
   addLikedBook(newLikedBook: Book) {
     const foundBook = this.likedBooks().find(
       (b) => b.isbn === newLikedBook.isbn

   protected searchTerm = signal('');
+  protected books = this.#bookStore.getAll();
   protected likedBooks = signal<Book[]>([]);
   protected filteredBooks = computed(() => {
+    if (!this.books.hasValue()) {
+      return [];
+    }
     if (!this.searchTerm()) {
+      return this.books.value();
     }
     const term = this.searchTerm().toLowerCase();
+    return this.books.value().filter((b) => b.title.toLowerCase().includes(term));
   });
   addLikedBook(newLikedBook: Book) {
     const foundBook = this.likedBooks().find(
       (b) => b.isbn === newLikedBook.isbn

src/app/shared/book-store.spec.ts CHANGED Viewed

@@ -1,13 +1,15 @@
-import { HttpErrorResponse } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { Book } from './book';
 import { BookStore } from './book-store';
 describe('BookStore', () => {
   let service: BookStore;
   let httpTesting: HttpTestingController;
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -15,6 +17,7 @@ describe('BookStore', () => {
     });
     service = TestBed.inject(BookStore);
     httpTesting = TestBed.inject(HttpTestingController);
   });
   afterEach(() => {
@@ -25,33 +28,43 @@ describe('BookStore', () => {
     expect(service).toBeTruthy();
   });
-  it('should fetch all books from API', () => {
     const mockBooks: Partial<Book>[] = [
       { isbn: '123', title: 'Book 1' },
       { isbn: '456', title: 'Book 2' }
     ];
-    let receivedBooks: Book[] | undefined;
-    service.getAll().subscribe(books => receivedBooks = books);
     const req = httpTesting.expectOne('https://api1.angular-buch.com/books');
     expect(req.request.method).toBe('GET');
     req.flush(mockBooks);
-    expect(receivedBooks).toEqual(mockBooks);
   });
-  it('should fetch a single book by ISBN', () => {
     const mockBook: Partial<Book> = { isbn: '123', title: 'Test Book' };
-    let receivedBook: Book | undefined;
-    service.getSingle('123').subscribe(book => receivedBook = book);
     const req = httpTesting.expectOne('https://api1.angular-buch.com/books/123');
     expect(req.request.method).toBe('GET');
     req.flush(mockBook);
-    expect(receivedBook).toEqual(mockBook);
   });
   it('should delete a book', () => {
@@ -65,15 +78,19 @@ describe('BookStore', () => {
     expect(success).toBe(true);
   });
-  it('should handle server errors', () => {
-    let errorResponse: HttpErrorResponse | undefined;
-    service.getAll().subscribe({
-      error: (err: HttpErrorResponse) => errorResponse = err
     });
     const req = httpTesting.expectOne('https://api1.angular-buch.com/books');
     req.flush('Server Error', { status: 500, statusText: 'Internal Server Error' });
-    expect(errorResponse?.status).toBe(500);
   });
 });

+import { HttpErrorResponse, HttpResourceRef } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { ApplicationRef, Injector, runInInjectionContext } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { BookStore } from './book-store';
+import { Book } from './book';
 describe('BookStore', () => {
   let service: BookStore;
   let httpTesting: HttpTestingController;
+  let injector: Injector;
   beforeEach(() => {
     TestBed.configureTestingModule({
     });
     service = TestBed.inject(BookStore);
     httpTesting = TestBed.inject(HttpTestingController);
+    injector = TestBed.inject(Injector);
   });
   afterEach(() => {
     expect(service).toBeTruthy();
   });
+  it('should fetch all books from API', async () => {
     const mockBooks: Partial<Book>[] = [
       { isbn: '123', title: 'Book 1' },
       { isbn: '456', title: 'Book 2' }
     ];
+    let booksResource!: HttpResourceRef<Book[]>;
+    runInInjectionContext(injector, () => {
+      booksResource = service.getAll();
+    });
+    TestBed.tick();
     const req = httpTesting.expectOne('https://api1.angular-buch.com/books');
     expect(req.request.method).toBe('GET');
     req.flush(mockBooks);
+    await TestBed.inject(ApplicationRef).whenStable();
+    expect(booksResource.value()).toEqual(mockBooks);
   });
+  it('should fetch a single book by ISBN', async () => {
     const mockBook: Partial<Book> = { isbn: '123', title: 'Test Book' };
+    let bookResource!: HttpResourceRef<Book | undefined>;
+    runInInjectionContext(injector, () => {
+      bookResource = service.getSingle(() => '123');
+    });
+    TestBed.tick();
     const req = httpTesting.expectOne('https://api1.angular-buch.com/books/123');
     expect(req.request.method).toBe('GET');
     req.flush(mockBook);
+    await TestBed.inject(ApplicationRef).whenStable();
+    expect(bookResource.value()).toEqual(mockBook);
   });
   it('should delete a book', () => {
     expect(success).toBe(true);
   });
+  it('should handle server errors', async () => {
+    let booksResource!: HttpResourceRef<Book[]>;
+    runInInjectionContext(injector, () => {
+      booksResource = service.getAll();
     });
+    TestBed.tick();
     const req = httpTesting.expectOne('https://api1.angular-buch.com/books');
     req.flush('Server Error', { status: 500, statusText: 'Internal Server Error' });
+    await TestBed.inject(ApplicationRef).whenStable();
+    expect(booksResource.error()).toBeInstanceOf(HttpErrorResponse);
+    expect((booksResource.error() as HttpErrorResponse).status).toBe(500);
   });
 });

src/app/shared/book-store.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Book } from './book';
@@ -11,12 +11,17 @@ export class BookStore {
   #http = inject(HttpClient);
   #apiUrl = 'https://api1.angular-buch.com';
-  getAll(): Observable<Book[]> {
-    return this.#http.get<Book[]>(`${this.#apiUrl}/books`);
   }
-  getSingle(isbn: string): Observable<Book> {
-    return this.#http.get<Book>(`${this.#apiUrl}/books/${isbn}`);
   }
   remove(isbn: string): Observable<void> {

 import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource, HttpResourceRef } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Book } from './book';
   #http = inject(HttpClient);
   #apiUrl = 'https://api1.angular-buch.com';
+  getAll(): HttpResourceRef<Book[]> {
+    return httpResource<Book[]>(
+      () => `${this.#apiUrl}/books`,
+      { defaultValue: [] }
+    );
   }
+  getSingle(isbn: () => string): HttpResourceRef<Book | undefined> {
+    return httpResource<Book>(
+      () => `${this.#apiUrl}/books/${isbn()}`
+    );
   }
   remove(isbn: string): Observable<void> {

Differenzansicht 09-resourceim Vergleich zu 08-http

Differenzansicht 09-resource
im Vergleich zu 08-http