BookManager 1 Diff | 06-routing (from 05-filter)

src/app/app.html CHANGED Viewed

@@ -1,3 +1,15 @@
 <main>
-  <app-books-overview-page />
 </main>

 <main>
+  <nav>
+    <ul>
+      <li>
+        <a routerLink="/home" routerLinkActive="active"
+          ariaCurrentWhenActive="page">Home</a>
+      </li>
+      <li>
+        <a routerLink="/books" routerLinkActive="active"
+          ariaCurrentWhenActive="page">Books</a>
+      </li>
+    </ul>
+  </nav>
+  <router-outlet />
 </main>

src/app/app.routes.ts CHANGED Viewed

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
-export const routes: Routes = [];

 import { Routes } from '@angular/router';
+import { HomePage } from './home-page/home-page';
+import { booksPortalRoutes } from './books-portal/books-portal.routes';
+export const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: HomePage, title: 'BookManager' },
+  ...booksPortalRoutes
+];

src/app/app.spec.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 import { App } from './app';
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
     }).compileComponents();
   });

 import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 import { App } from './app';
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideRouter([])]
     }).compileComponents();
   });

src/app/app.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
-import { BooksOverviewPage } from './books-portal/books-overview-page/books-overview-page';
 @Component({
   selector: 'app-root',
-  imports: [BooksOverviewPage],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

 import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

src/app/books-portal/book-card/book-card.html CHANGED Viewed

@@ -12,6 +12,7 @@
     ISBN: {{ b.isbn }}
   </div>
   <footer>
     <button type="button" class="secondary" (click)="likeBook()">Like</button>
   </footer>
 </article>

     ISBN: {{ b.isbn }}
   </div>
   <footer>
+    <a [routerLink]="['details', b.isbn]">Details</a>
     <button type="button" class="secondary" (click)="likeBook()">Like</button>
   </footer>
 </article>

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

@@ -1,5 +1,6 @@
 import { inputBinding, outputBinding, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Mock } from 'vitest';
 import { Book } from '../../shared/book';
@@ -22,7 +23,8 @@ describe('BookCard', () => {
     likeMock = vi.fn();
     await TestBed.configureTestingModule({
-      imports: [BookCard]
     })
     .compileComponents();

 import { inputBinding, outputBinding, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 import { Mock } from 'vitest';
 import { Book } from '../../shared/book';
     likeMock = vi.fn();
     await TestBed.configureTestingModule({
+      imports: [BookCard],
+      providers: [provideRouter([])],
     })
     .compileComponents();

src/app/books-portal/book-card/book-card.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import { Component, input, output } from '@angular/core';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'app-book-card',
-  imports: [],
   templateUrl: './book-card.html',
   styleUrl: './book-card.css'
 })

 import { Component, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'app-book-card',
+  imports: [RouterLink],
   templateUrl: './book-card.html',
   styleUrl: './book-card.css'
 })

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

	@@ -0,0 +1,33 @@

+@if (book(); as b) {
+  <article>
+    <header>
+      <h1>{{ b.title }}</h1>
+      @if (b.subtitle) {
+        <p role="doc-subtitle">{{ b.subtitle }}</p>
+      }
+      <div class="grid">
+        <div>
+          <h2>Authors</h2>
+          <ul>
+            @for (author of b.authors; track $index) {
+              <li>{{ author }}</li>
+            }
+          </ul>
+        </div>
+        <div>
+          <h2>ISBN</h2>
+          {{ b.isbn }}
+        </div>
+        <div>
+          <h2>Created at</h2>
+          {{ b.createdAt }}
+        </div>
+      </div>
+    </header>
+    <p>{{ b.description }}</p>
+    <img [src]="b.imageUrl" alt="Cover" />
+    <footer>
+      <a routerLink="/books">Back to list</a>
+    </footer>
+  </article>
+}

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

	@@ -0,0 +1,54 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { provideRouter, Router } from '@angular/router';
+import { provideLocationMocks } from '@angular/common/testing';
+import { Location } from '@angular/common';
+import { BookDetailsPage } from './book-details-page';
+import { booksPortalRoutes } from '../books-portal.routes';
+import { BookStore } from '../../shared/book-store';
+describe('BookDetailsPage', () => {
+  let component: BookDetailsPage;
+  let fixture: ComponentFixture<BookDetailsPage>;
+  let bookStore: BookStore;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BookDetailsPage],
+      providers: [
+        provideRouter(booksPortalRoutes),
+        provideLocationMocks(),
+      ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookDetailsPage);
+    component = fixture.componentInstance;
+    bookStore = TestBed.inject(BookStore);
+    await fixture.whenStable();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should load the correct book by ISBN', async () => {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/books/details/12345', BookDetailsPage);
+    const expectedBook = bookStore.getSingle('12345');
+    expect(component['book']()).toEqual(expectedBook);
+    expect(document.title).toBe('Book Details');
+  });
+  it('should navigate to the details page', async () => {
+    const location = TestBed.inject(Location);
+    const router = TestBed.inject(Router);
+    await router.navigate(['/books/details/12345']);
+    expect(location.path()).toBe('/books/details/12345');
+  });
+});

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

	@@ -0,0 +1,25 @@

+import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Book } from '../../shared/book';
+import { BookStore } from '../../shared/book-store';
+@Component({
+  selector: 'app-book-details-page',
+  imports: [RouterLink],
+  templateUrl: './book-details-page.html',
+  styleUrl: './book-details-page.css'
+})
+export class BookDetailsPage {
+  #bookStore = inject(BookStore);
+  #route = inject(ActivatedRoute);
+  protected book = signal<Book | undefined>(undefined);
+  constructor() {
+    const isbn = this.#route.snapshot.paramMap.get('isbn');
+    if (isbn) {
+      this.book.set(this.#bookStore.getSingle(isbn));
+    }
+  }
+}

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

@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BooksOverviewPage } from './books-overview-page';
 describe('BooksOverviewPage', () => {
   let component: BooksOverviewPage;
@@ -8,7 +11,8 @@ describe('BooksOverviewPage', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BooksOverviewPage]
     })
     .compileComponents();
@@ -81,4 +85,12 @@ describe('BooksOverviewPage', () => {
     const books = component['filteredBooks']();
     expect(books.length).toBe(0);
   });
 });

 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { BooksOverviewPage } from './books-overview-page';
+import { booksPortalRoutes } from '../books-portal.routes';
 describe('BooksOverviewPage', () => {
   let component: BooksOverviewPage;
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [BooksOverviewPage],
+      providers: [provideRouter(booksPortalRoutes)]
     })
     .compileComponents();
     const books = component['filteredBooks']();
     expect(books.length).toBe(0);
   });
+  it('should load the BooksOverviewPage for /books', async () => {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/books', BooksOverviewPage);
+    expect(component).toBeTruthy();
+    expect(document.title).toBe('Books');
+  });
 });

src/app/books-portal/books-portal.routes.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+import { Routes } from '@angular/router';
+import { BooksOverviewPage } from './books-overview-page/books-overview-page';
+import { BookDetailsPage } from './book-details-page/book-details-page';
+export const booksPortalRoutes: Routes = [
+  { path: 'books', component: BooksOverviewPage, title: 'Books' },
+  { path: 'books/details/:isbn', component: BookDetailsPage, title: 'Book Details' },
+];

src/app/home-page/home-page.html ADDED Viewed

	@@ -0,0 +1 @@


1	+ <h1>Welcome to the BookManager!</h1>

src/app/home-page/home-page.spec.ts ADDED Viewed

	@@ -0,0 +1,35 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { HomePage } from './home-page';
+import { routes } from '../app.routes';
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomePage],
+      providers: [provideRouter(routes)]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should load the HomePage component for /home', async () => {
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/home', HomePage);
+    expect(component).toBeTruthy();
+    expect(document.title).toBe('BookManager');
+  });
+});

src/app/home-page/home-page.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-home-page',
+  imports: [],
+  templateUrl: './home-page.html',
+  styleUrl: './home-page.css'
+})
+export class HomePage {
+}

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

@@ -31,4 +31,8 @@ export class BookStore {
   getAll(): Book[] {
     return this.#books;
   }
 }

   getAll(): Book[] {
     return this.#books;
   }
+  getSingle(isbn: string): Book | undefined {
+    return this.#books.find(book => book.isbn === isbn);
+  }
 }

Differenzansicht 06-routingim Vergleich zu 05-filter

Differenzansicht 06-routing
im Vergleich zu 05-filter