Differenzansicht 07-http
im Vergleich zu 06-routing

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.module.ts CHANGED
@@ -1,4 +1,5 @@
1
  import { NgModule } from '@angular/core';
 
2
  import { BrowserModule } from '@angular/platform-browser';
3
 
4
  import { AppRoutingModule } from './app-routing.module';
@@ -16,7 +17,9 @@ import { HomeComponent } from './home/home.component';
16
  AppRoutingModule,
17
  BooksModule
18
  ],
19
- providers: [],
 
 
20
  bootstrap: [AppComponent]
21
  })
22
  export class AppModule { }
1
  import { NgModule } from '@angular/core';
2
+ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
3
  import { BrowserModule } from '@angular/platform-browser';
4
 
5
  import { AppRoutingModule } from './app-routing.module';
17
  AppRoutingModule,
18
  BooksModule
19
  ],
20
+ providers: [
21
+ provideHttpClient(withInterceptorsFromDi())
22
+ ],
23
  bootstrap: [AppComponent]
24
  })
25
  export class AppModule { }
src/app/books/book-details/book-details.component.html CHANGED
@@ -23,4 +23,7 @@
23
  [src]="book.thumbnailUrl"
24
  alt="Cover">
25
  <a class="button arrow-left" routerLink="..">Back to list</a>
 
 
 
26
  </div>
23
  [src]="book.thumbnailUrl"
24
  alt="Cover">
25
  <a class="button arrow-left" routerLink="..">Back to list</a>
26
+ <button class="red" (click)="removeBook(book.isbn)">
27
+ Remove book
28
+ </button>
29
  </div>
src/app/books/book-details/book-details.component.ts CHANGED
@@ -1,5 +1,5 @@
1
  import { Component } from '@angular/core';
2
- import { ActivatedRoute } from '@angular/router';
3
 
4
  import { BookStoreService } from '../../shared/book-store.service';
5
  import { Book } from '../../shared/book';
@@ -15,8 +15,19 @@ export class BookDetailsComponent {
15
  constructor(
16
  private service: BookStoreService,
17
  private route: ActivatedRoute,
 
18
  ) {
19
  const isbn = this.route.snapshot.paramMap.get('isbn')!;
20
- this.book = this.service.getSingle(isbn);
 
 
 
 
 
 
 
 
 
 
21
  }
22
  }
1
  import { Component } from '@angular/core';
2
+ import { ActivatedRoute, Router } from '@angular/router';
3
 
4
  import { BookStoreService } from '../../shared/book-store.service';
5
  import { Book } from '../../shared/book';
15
  constructor(
16
  private service: BookStoreService,
17
  private route: ActivatedRoute,
18
+ private router: Router
19
  ) {
20
  const isbn = this.route.snapshot.paramMap.get('isbn')!;
21
+ this.service.getSingle(isbn).subscribe(book => {
22
+ this.book = book;
23
+ });
24
+ }
25
+
26
+ removeBook(isbn: string) {
27
+ if (window.confirm('Remove book?')) {
28
+ this.service.remove(isbn).subscribe(() => {
29
+ this.router.navigateByUrl('/books');
30
+ });
31
+ }
32
  }
33
  }
src/app/books/book-list/book-list.component.ts CHANGED
@@ -13,6 +13,8 @@ export class BookListComponent {
13
  books: Book[] = [];
14
 
15
  constructor(private service: BookStoreService) {
16
- this.books = this.service.getAll();
 
 
17
  }
18
  }
13
  books: Book[] = [];
14
 
15
  constructor(private service: BookStoreService) {
16
+ this.service.getAll().subscribe(books => {
17
+ this.books = books;
18
+ });
19
  }
20
  }
src/app/shared/book-store.service.ts CHANGED
@@ -1,4 +1,6 @@
 
1
  import { Injectable } from '@angular/core';
 
2
 
3
  import { Book } from './book';
4
 
@@ -6,36 +8,19 @@ import { Book } from './book';
6
  providedIn: 'root'
7
  })
8
  export class BookStoreService {
9
- private books: Book[] = [];
10
 
11
- constructor() {
12
- this.books = [
13
- {
14
- isbn: '12345',
15
- title: 'Tierisch gut kochen',
16
- authors: ['Mrs Chimp', 'Mr Gorilla'],
17
- published: '2022-06-20',
18
- subtitle: 'Rezepte von Affe bis Zebra',
19
- thumbnailUrl: 'https://cdn.ng-buch.de/kochen.png',
20
- description: 'Immer lecker und gut'
21
- },
22
- {
23
- isbn: '67890',
24
- title: 'Backen mit Affen',
25
- authors: ['Orang Utan'],
26
- published: '2022-07-15',
27
- subtitle: 'Bananenbrot und mehr',
28
- thumbnailUrl: 'https://cdn.ng-buch.de/backen.png',
29
- description: 'Tolle Backtipps für Mensch und Tier'
30
- }
31
- ];
32
  }
33
 
34
- getAll(): Book[] {
35
- return this.books;
36
  }
37
 
38
- getSingle(isbn: string): Book | undefined {
39
- return this.books.find(book => book.isbn === isbn);
40
  }
41
  }
1
+ import { HttpClient } from '@angular/common/http';
2
  import { Injectable } from '@angular/core';
3
+ import { Observable } from 'rxjs';
4
 
5
  import { Book } from './book';
6
 
8
  providedIn: 'root'
9
  })
10
  export class BookStoreService {
11
+ private apiUrl = 'https://api5.angular-buch.com';
12
 
13
+ constructor(private http: HttpClient) {}
14
+
15
+ getAll(): Observable<Book[]> {
16
+ return this.http.get<Book[]>(`${this.apiUrl}/books`);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
18
 
19
+ getSingle(isbn: string): Observable<Book> {
20
+ return this.http.get<Book>(`${this.apiUrl}/books/${isbn}`);
21
  }
22
 
23
+ remove(isbn: string): Observable<unknown> {
24
+ return this.http.delete(`${this.apiUrl}/books/${isbn}`);
25
  }
26
  }