From c7ba87409abd3aed07f346443a93470ec3ad6661 Mon Sep 17 00:00:00 2001 From: Baerspektivo Date: Fri, 28 Jul 2023 15:40:09 +0200 Subject: [PATCH] 20230728-angular-Erwieterung-observAsyncPipe --- src/app/app-routing.module.ts | 6 +++- src/app/app.component.html | 15 ++++++---- src/app/app.module.ts | 6 ++-- .../book-details/book-details.component.html | 7 +++-- .../book-details/book-details.component.ts | 24 +++++++++++---- .../book-list-item.component.html | 8 ++--- .../books/book-list/book-list.component.html | 11 +++---- .../books/book-list/book-list.component.ts | 29 +++++-------------- src/app/books/books-routing.module.ts | 11 +++++-- src/app/books/books.module.ts | 2 +- src/app/home/home.component.css | 0 src/app/home/home.component.html | 3 ++ src/app/home/home.component.spec.ts | 21 ++++++++++++++ src/app/home/home.component.ts | 10 +++++++ src/app/shared/book-store.service.spec.ts | 16 ++++++++++ src/app/shared/book-store.service.ts | 25 ++++++++++++++++ src/shared/book.ts | 2 +- 17 files changed, 141 insertions(+), 55 deletions(-) create mode 100644 src/app/home/home.component.css create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts create mode 100644 src/app/shared/book-store.service.spec.ts create mode 100644 src/app/shared/book-store.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f3daf25..7506485 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './home/home.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', redirectTo: 'home', pathMatch: 'full' }, + { path: 'home', component: HomeComponent }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index 86ee7f5..635289f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,11 @@ +
- - +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 02b95f1..1237d76 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,10 +4,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BooksModule } from './books/books.module'; +import { HomeComponent } from './home/home.component'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, BooksModule], + declarations: [AppComponent, HomeComponent], + imports: [BrowserModule, AppRoutingModule, BooksModule, HttpClientModule], providers: [], bootstrap: [AppComponent], }) diff --git a/src/app/books/book-details/book-details.component.html b/src/app/books/book-details/book-details.component.html index cec7084..33a4ea3 100644 --- a/src/app/books/book-details/book-details.component.html +++ b/src/app/books/book-details/book-details.component.html @@ -1,5 +1,5 @@ -
-

{{ book.tilte }}

+
+

{{ book.title }}

{{ book.subtilte }}

@@ -20,5 +20,6 @@

Description

{{ book.description }}

Cover - + Back to list +
diff --git a/src/app/books/book-details/book-details.component.ts b/src/app/books/book-details/book-details.component.ts index eca390f..b30955a 100644 --- a/src/app/books/book-details/book-details.component.ts +++ b/src/app/books/book-details/book-details.component.ts @@ -1,5 +1,8 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component } from '@angular/core'; import { Book } from 'src/shared/book'; +import { ActivatedRoute, Router } from '@angular/router'; +import { BookStoreService } from 'src/app/shared/book-store.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'bm-book-details', @@ -7,10 +10,21 @@ import { Book } from 'src/shared/book'; styleUrls: ['./book-details.component.css'], }) export class BookDetailsComponent { - @Input() book?: Book; - @Output() leave = new EventEmitter(); + book$: Observable; - doLeave() { - this.leave.emit(); + constructor( + private service: BookStoreService, + private route: ActivatedRoute, + private router: Router, + ) { + const isbn = this.route.snapshot.paramMap.get('isbn')!; + this.book$ = this.service.getSingle(isbn); + } + removeBook(isbn: string) { + if (window.confirm('Remove book?')) { + this.service.remove(isbn).subscribe(() => { + this.router.navigateByUrl('/books'); + }); + } } } diff --git a/src/app/books/book-list-item/book-list-item.component.html b/src/app/books/book-list-item/book-list-item.component.html index dfbe466..6fae28b 100644 --- a/src/app/books/book-list-item/book-list-item.component.html +++ b/src/app/books/book-list-item/book-list-item.component.html @@ -1,8 +1,8 @@ -
+ Cover -

{{ book.tilte }}

+

{{ book.title }}

- {{ book.tilte }} + {{ book.title }}

  • @@ -10,4 +10,4 @@
ISBN {{ book.isbn }}
-
+ diff --git a/src/app/books/book-list/book-list.component.html b/src/app/books/book-list/book-list.component.html index 3f9d384..0f89b4e 100644 --- a/src/app/books/book-list/book-list.component.html +++ b/src/app/books/book-list/book-list.component.html @@ -1,10 +1,7 @@

Books

-
    -
  • - +
      +
    • +
      • -
    • No books available.
      • +
    • No books available.
    diff --git a/src/app/books/book-list/book-list.component.ts b/src/app/books/book-list/book-list.component.ts index 6573856..2d8147e 100644 --- a/src/app/books/book-list/book-list.component.ts +++ b/src/app/books/book-list/book-list.component.ts @@ -1,5 +1,7 @@ import { Component, EventEmitter, Output } from '@angular/core'; import { Book } from 'src/shared/book'; +import { BookStoreService } from 'src/app/shared/book-store.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'bm-book-list', @@ -7,30 +9,13 @@ import { Book } from 'src/shared/book'; styleUrls: ['./book-list.component.css'], }) export class BookListComponent { - books: Book[] = []; + books$: Observable; @Output() selectBook = new EventEmitter(); - constructor() { - this.books = [ - { - isbn: '12345', - tilte: 'Tierisch gut kochen', - authors: ['Mrs Chimp', 'Mr Gorilla'], - published: '2022-06-20', - subtilte: 'Rezepte von Affe bis Zebre', - thumbnailUrl: 'https://cdn.ng-buch.de/kochen.png', - description: 'Immer lecker und gut', - }, - { - isbn: '67890', - tilte: 'Backen mit Affen', - authors: ['Orang Utan'], - published: '2022-07-15', - subtilte: 'Bananenbrot und mehr', - thumbnailUrl: 'https://cdn.ng-buch.de/backen.png', - description: 'Tolle Backtipps für Menschen und Tier', - }, - ]; + + constructor(private service: BookStoreService) { + this.books$ = this.service.getAll(); } + doSelect(book: Book) { this.selectBook.emit(book); } diff --git a/src/app/books/books-routing.module.ts b/src/app/books/books-routing.module.ts index bb662b4..feacd0d 100644 --- a/src/app/books/books-routing.module.ts +++ b/src/app/books/books-routing.module.ts @@ -1,10 +1,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { BookDetailsComponent } from './book-details/book-details.component'; +import { BookListComponent } from './book-list/book-list.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: 'books', component: BookListComponent }, + { path: 'books/:isbn', component: BookDetailsComponent }, +]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class BooksRoutingModule { } +export class BooksRoutingModule {} diff --git a/src/app/books/books.module.ts b/src/app/books/books.module.ts index 9141a25..e27a098 100644 --- a/src/app/books/books.module.ts +++ b/src/app/books/books.module.ts @@ -13,6 +13,6 @@ import { BookDetailsComponent } from './book-details/book-details.component'; BookListItemComponent, ], imports: [CommonModule, BooksRoutingModule], - exports: [BookListComponent, BookDetailsComponent], + exports: [], }) export class BooksModule {} diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..d872ed6 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,3 @@ +

    Home

    + +Show book list diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..ba1b4a3 --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HomeComponent] + }); + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..b0a16ef --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'bm-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent { + +} diff --git a/src/app/shared/book-store.service.spec.ts b/src/app/shared/book-store.service.spec.ts new file mode 100644 index 0000000..862e61e --- /dev/null +++ b/src/app/shared/book-store.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { BookStoreService } from './book-store.service'; + +describe('BookStoreService', () => { + let service: BookStoreService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(BookStoreService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/book-store.service.ts b/src/app/shared/book-store.service.ts new file mode 100644 index 0000000..f054a21 --- /dev/null +++ b/src/app/shared/book-store.service.ts @@ -0,0 +1,25 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Book } from 'src/shared/book'; + +@Injectable({ + providedIn: 'root', +}) +export class BookStoreService { + private apiUrl = 'https://api5.angular-buch.com'; + + constructor(private http: HttpClient) {} + + getAll(): Observable { + return this.http.get(`${this.apiUrl}/books`); + } + + getSingle(isbn: string): Observable { + return this.http.get(`${this.apiUrl}/books/${isbn}`); + } + + remove(isbn: string): Observable { + return this.http.delete(`${this.apiUrl}/books/${isbn}`); + } +} diff --git a/src/shared/book.ts b/src/shared/book.ts index c575455..3e4cf39 100644 --- a/src/shared/book.ts +++ b/src/shared/book.ts @@ -1,6 +1,6 @@ export interface Book { isbn: string; - tilte: string; + title: string; authors: string[]; published?: string; subtilte?: string;