BookMonkey 4 Diff

Files changed (11) hide show
  1. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app-routing.module.ts +23 -1
  2. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.component.html +5 -8
  3. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.component.ts +1 -18
  4. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.module.ts +3 -1
  5. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-details/book-details.component.html +0 -5
  6. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-details/book-details.component.ts +12 -8
  7. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-list/book-list.component.html +1 -1
  8. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-list/book-list.component.ts +5 -34
  9. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/home/home.component.html +6 -0
  10. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/home/home.component.ts +14 -0
  11. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/shared/book-store.service.ts +49 -0
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app-routing.module.ts RENAMED
@@ -1,7 +1,29 @@
1
  import { NgModule } from '@angular/core';
2
  import { Routes, RouterModule } from '@angular/router';
3
   
4
- const routes: Routes = [];
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
5
   
6
  @NgModule({
7
  imports: [RouterModule.forChild(routes)],
1
  import { NgModule } from '@angular/core';
2
  import { Routes, RouterModule } from '@angular/router';
3
   
4
+ import { HomeComponent } from './home/home.component';
5
+ import { BookListComponent } from './book-list/book-list.component';
6
+ import { BookDetailsComponent } from './book-details/book-details.component';
7
+  
8
+ export const routes: Routes = [
9
+ {
10
+ path: '',
11
+ redirectTo: 'home',
12
+ pathMatch: 'full'
13
+ },
14
+ {
15
+ path: 'home',
16
+ component: HomeComponent
17
+ },
18
+ {
19
+ path: 'books',
20
+ component: BookListComponent
21
+ },
22
+ {
23
+ path: 'books/:isbn',
24
+ component: BookDetailsComponent
25
+ }
26
+ ];
27
   
28
  @NgModule({
29
  imports: [RouterModule.forChild(routes)],
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.component.html RENAMED
@@ -1,8 +1,5 @@
1
- <bm-book-list
2
- *ngIf="viewState === 'list'"
3
- (showDetailsEvent)="showDetails($event)"></bm-book-list>
4
-  
5
- <bm-book-details
6
- *ngIf="viewState === 'details'"
7
- (showListEvent)="showList()"
8
- [book]="book"></bm-book-details>
1
+ <div class="ui menu">
2
+ <a routerLink="home" routerLinkActive="active" class="item">Home</a>
3
+ <a routerLink="books" routerLinkActive="active" class="item">Bücher</a>
4
+ </div>
5
+ <router-outlet></router-outlet>
   
   
   
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.component.ts RENAMED
@@ -1,25 +1,8 @@
1
  import { Component } from '@angular/core';
2
   
3
- import { Book } from './shared/book';
4
-  
5
- type ViewState = 'list' | 'details';
6
-  
7
  @Component({
8
  selector: 'bm-root',
9
  templateUrl: './app.component.html',
10
  styleUrls: ['./app.component.css']
11
  })
12
- export class AppComponent {
13
-
14
- book?: Book;
15
- viewState: ViewState = 'list';
16
-  
17
- showList() {
18
- this.viewState = 'list';
19
- }
20
-  
21
- showDetails(book: Book) {
22
- this.book = book;
23
- this.viewState = 'details';
24
- }
25
- }
1
  import { Component } from '@angular/core';
2
   
   
   
   
   
3
  @Component({
4
  selector: 'bm-root',
5
  templateUrl: './app.component.html',
6
  styleUrls: ['./app.component.css']
7
  })
8
+ export class AppComponent { }
   
   
   
   
   
   
   
   
   
   
   
   
   
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.module.ts RENAMED
@@ -1,8 +1,9 @@
1
  import { CommonModule } from '@angular/common';
2
  import { NgModule } from '@angular/core';
3
   
4
- import { AppRoutingModule } from './app-routing.module';
5
  import { AppComponent } from './app.component';
   
6
  import { BookListComponent } from './book-list/book-list.component';
7
  import { BookListItemComponent } from './book-list-item/book-list-item.component';
8
  import { BookDetailsComponent } from './book-details/book-details.component';
@@ -10,6 +11,7 @@
10
  @NgModule({
11
  declarations: [
12
  AppComponent,
   
13
  BookListComponent,
14
  BookListItemComponent,
15
  BookDetailsComponent
1
  import { CommonModule } from '@angular/common';
2
  import { NgModule } from '@angular/core';
3
   
4
+ import { AppRoutingModule } from './app-routing.module.one-app';
5
  import { AppComponent } from './app.component';
6
+ import { HomeComponent } from './home/home.component';
7
  import { BookListComponent } from './book-list/book-list.component';
8
  import { BookListItemComponent } from './book-list-item/book-list-item.component';
9
  import { BookDetailsComponent } from './book-details/book-details.component';
11
  @NgModule({
12
  declarations: [
13
  AppComponent,
14
+ HomeComponent,
15
  BookListComponent,
16
  BookListItemComponent,
17
  BookDetailsComponent
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-details/book-details.component.html RENAMED
@@ -17,7 +17,6 @@
17
  <h4>Erschienen</h4>
18
  {{ book.published }}
19
  </div>
20
-
21
  <div class="four wide column" *ngIf="book.rating">
22
  <h4>Rating</h4>
23
  <i class="yellow star icon"
@@ -30,8 +29,4 @@
30
  <img *ngFor="let thumbnail of book.thumbnails"
31
  [src]="thumbnail.url">
32
  </div>
33
- <button class="ui red button"
34
- (click)="showBookList()">
35
- Zurück zur Buchliste
36
- </button>
37
  </div>
17
  <h4>Erschienen</h4>
18
  {{ book.published }}
19
  </div>
   
20
  <div class="four wide column" *ngIf="book.rating">
21
  <h4>Rating</h4>
22
  <i class="yellow star icon"
29
  <img *ngFor="let thumbnail of book.thumbnails"
30
  [src]="thumbnail.url">
31
  </div>
   
   
   
   
32
  </div>
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-details/book-details.component.ts RENAMED
@@ -1,6 +1,8 @@
1
- import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
   
2
   
3
  import { Book } from '../shared/book';
   
4
   
5
  @Component({
6
  selector: 'bm-book-details',
@@ -8,18 +10,20 @@
8
  styleUrls: ['./book-details.component.css']
9
  })
10
  export class BookDetailsComponent implements OnInit {
11
-
12
- @Input() book?: Book;
13
- @Output() showListEvent = new EventEmitter<any>();
   
   
   
14
   
15
  ngOnInit(): void {
   
   
   
16
  }
17
   
18
  getRating(num: number) {
19
  return new Array(num);
20
  }
21
-  
22
- showBookList() {
23
- this.showListEvent.emit();
24
- }
25
  }
1
+ import { Component, OnInit } from '@angular/core';
2
+ import { ActivatedRoute } from '@angular/router';
3
   
4
  import { Book } from '../shared/book';
5
+ import { BookStoreService } from '../shared/book-store.service';
6
   
7
  @Component({
8
  selector: 'bm-book-details',
10
  styleUrls: ['./book-details.component.css']
11
  })
12
  export class BookDetailsComponent implements OnInit {
13
+ book?: Book;
14
+  
15
+ constructor(
16
+ private bs: BookStoreService,
17
+ private route: ActivatedRoute
18
+ ) { }
19
   
20
  ngOnInit(): void {
21
+ const params = this.route.snapshot.paramMap;
22
+
23
+ this.book = this.bs.getSingle(params.get('isbn') || '');
24
  }
25
   
26
  getRating(num: number) {
27
  return new Array(num);
28
  }
   
   
   
   
29
  }
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-list/book-list.component.html RENAMED
@@ -2,5 +2,5 @@
2
  <bm-book-list-item class="item"
3
  *ngFor="let b of books"
4
  [book]="b"
5
- (click)="showDetails(b)"></bm-book-list-item>
6
  </div>
2
  <bm-book-list-item class="item"
3
  *ngFor="let b of books"
4
  [book]="b"
5
+ [routerLink]="b.isbn"></bm-book-list-item>
6
  </div>
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-list/book-list.component.ts RENAMED
@@ -1,6 +1,7 @@
1
- import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2
   
3
  import { Book } from '../shared/book';
   
4
   
5
  @Component({
6
  selector: 'bm-book-list',
@@ -9,40 +10,10 @@
9
  })
10
  export class BookListComponent implements OnInit {
11
  books: Book[] = [];
12
- @Output() showDetailsEvent = new EventEmitter<Book>();
13
   
14
- ngOnInit(): void {
15
- this.books = [
16
- {
17
- isbn: '9783864907791',
18
- title: 'Angular',
19
- authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
20
- published: new Date(2020, 8, 1),
21
- subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices',
22
- rating: 5,
23
- thumbnails: [{
24
- url: 'https://ng-buch.de/angular-cover.jpg',
25
- title: 'Buchcover'
26
- }],
27
- description: 'Lernen Sie Angular mit diesem Praxisbuch!'
28
- },
29
- {
30
- isbn: '9783864905520',
31
- title: 'React',
32
- authors: ['Oliver Zeigermann', 'Nils Hartmann'],
33
- published: new Date(2019, 11, 12),
34
- subtitle: 'Grundlagen, fortgeschrittene Techniken und Praxistipps',
35
- rating: 3,
36
- thumbnails: [{
37
- url: 'https://ng-buch.de/react-cover.jpg',
38
- title: 'Buchcover'
39
- }],
40
- description: 'Das bewährte und umfassende Praxisbuch zu React.'
41
- }
42
- ];
43
- }
44
   
45
- showDetails(book: Book) {
46
- this.showDetailsEvent.emit(book);
47
  }
48
  }
1
+ import { Component, OnInit } from '@angular/core';
2
   
3
  import { Book } from '../shared/book';
4
+ import { BookStoreService } from '../shared/book-store.service';
5
   
6
  @Component({
7
  selector: 'bm-book-list',
10
  })
11
  export class BookListComponent implements OnInit {
12
  books: Book[] = [];
   
13
   
14
+ constructor(private bs: BookStoreService) { }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
15
   
16
+ ngOnInit(): void {
17
+ this.books = this.bs.getAll();
18
  }
19
  }
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/home/home.component.html RENAMED
@@ -0,0 +1,6 @@
   
   
   
   
   
   
1
+ <h1>Home</h1>
2
+ <p>Das ist der BookMonkey.</p>
3
+ <a routerLink="../books" class="ui red button">
4
+ Buchliste ansehen
5
+ <i class="right arrow icon"></i>
6
+ </a>
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/home/home.component.ts RENAMED
@@ -0,0 +1,14 @@
   
   
   
   
   
   
   
   
   
   
   
   
   
   
1
+ import { Component, OnInit } from '@angular/core';
2
+  
3
+ @Component({
4
+ selector: 'bm-home',
5
+ templateUrl: './home.component.html',
6
+ styleUrls: ['./home.component.css']
7
+ })
8
+ export class HomeComponent implements OnInit {
9
+  
10
+ constructor() { }
11
+  
12
+ ngOnInit(): void {
13
+ }
14
+ }
tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/shared/book-store.service.ts RENAMED
@@ -0,0 +1,49 @@
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
1
+ import { Injectable } from '@angular/core';
2
+  
3
+ import { Book } from './book';
4
+  
5
+ @Injectable({
6
+ providedIn: 'root'
7
+ })
8
+ export class BookStoreService {
9
+ books: Book[];
10
+  
11
+ constructor() {
12
+ this.books = [
13
+ {
14
+ isbn: '9783864907791',
15
+ title: 'Angular',
16
+ authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
17
+ published: new Date(2020, 8, 1),
18
+ subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices',
19
+ rating: 5,
20
+ thumbnails: [{
21
+ url: 'https://ng-buch.de/angular-cover.jpg',
22
+ title: 'Buchcover'
23
+ }],
24
+ description: 'Lernen Sie Angular mit diesem Praxisbuch!'
25
+ },
26
+ {
27
+ isbn: '9783864905520',
28
+ title: 'React',
29
+ authors: ['Oliver Zeigermann', 'Nils Hartmann'],
30
+ published: new Date(2019, 11, 12),
31
+ subtitle: 'Grundlagen, fortgeschrittene Techniken und Praxistipps',
32
+ rating: 3,
33
+ thumbnails: [{
34
+ url: 'https://ng-buch.de/react-cover.jpg',
35
+ title: 'Buchcover'
36
+ }],
37
+ description: 'Das bewährte und umfassende Praxisbuch zu React.'
38
+ }
39
+ ];
40
+ }
41
+  
42
+ getAll(): Book[] {
43
+ return this.books;
44
+ }
45
+  
46
+ getSingle(isbn: string): Book | undefined {
47
+ return this.books.find(book => book.isbn === isbn);
48
+ }
49
+ }