BookMonkey 4 Diff

Files changed (11) hide show
  1. tmp/src/app/book-monkey/iteration-2/{di → routing}/app-routing.module.ts +23 -1
  2. tmp/src/app/book-monkey/iteration-2/{di → routing}/app.component.html +5 -8
  3. tmp/src/app/book-monkey/iteration-2/{di → routing}/app.component.ts +1 -17
  4. tmp/src/app/book-monkey/iteration-2/{di → routing}/app.module.ts +3 -1
  5. tmp/src/app/book-monkey/iteration-2/{di → routing}/book-details/book-details.component.html +0 -4
  6. tmp/src/app/book-monkey/iteration-2/{di → routing}/book-details/book-details.component.ts +12 -7
  7. tmp/src/app/book-monkey/iteration-2/{di → routing}/book-list/book-list.component.html +1 -1
  8. tmp/src/app/book-monkey/iteration-2/{di → routing}/book-list/book-list.component.ts +2 -7
  9. tmp/src/app/book-monkey/iteration-2/{di → routing}/home/home.component.html +6 -0
  10. tmp/src/app/book-monkey/iteration-2/{di → routing}/home/home.component.ts +14 -0
  11. tmp/src/app/book-monkey/iteration-2/{di → routing}/shared/book-store.service.ts +4 -0
tmp/src/app/book-monkey/iteration-2/{di → 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-2/{di → 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-2/{di → routing}/app.component.ts RENAMED
@@ -1,24 +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
- book?: Book;
14
- viewState: ViewState = 'list';
15
-  
16
- showList() {
17
- this.viewState = 'list';
18
- }
19
-  
20
- showDetails(book: Book) {
21
- this.book = book;
22
- this.viewState = 'details';
23
- }
24
- }
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-2/{di → 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-2/{di → routing}/book-details/book-details.component.html RENAMED
@@ -29,8 +29,4 @@
29
  <img *ngFor="let thumbnail of book.thumbnails"
30
  [src]="thumbnail.url">
31
  </div>
32
- <button class="ui red button"
33
- (click)="showBookList()">
34
- Zurück zur Buchliste
35
- </button>
36
  </div>
29
  <img *ngFor="let thumbnail of book.thumbnails"
30
  [src]="thumbnail.url">
31
  </div>
   
   
   
   
32
  </div>
tmp/src/app/book-monkey/iteration-2/{di → 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,17 +10,20 @@
8
  styleUrls: ['./book-details.component.css']
9
  })
10
  export class BookDetailsComponent implements OnInit {
11
- @Input() book?: Book;
12
- @Output() showListEvent = new EventEmitter<any>();
   
   
   
   
13
   
14
  ngOnInit(): void {
   
   
   
15
  }
16
   
17
  getRating(num: number) {
18
  return new Array(num);
19
  }
20
-  
21
- showBookList() {
22
- this.showListEvent.emit();
23
- }
24
  }
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-2/{di → 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-2/{di → routing}/book-list/book-list.component.ts RENAMED
@@ -1,4 +1,4 @@
1
- import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2
   
3
  import { Book } from '../shared/book';
4
  import { BookStoreService } from '../shared/book-store.service';
@@ -10,15 +10,10 @@
10
  })
11
  export class BookListComponent implements OnInit {
12
  books: Book[] = [];
13
- @Output() showDetailsEvent = new EventEmitter<Book>();
14
   
15
  constructor(private bs: BookStoreService) { }
16
   
17
  ngOnInit(): void {
18
- this.books = this.bs.getAll();
19
- }
20
-  
21
- showDetails(book: Book) {
22
- this.showDetailsEvent.emit(book);
23
  }
24
  }
1
+ import { Component, OnInit } from '@angular/core';
2
   
3
  import { Book } from '../shared/book';
4
  import { BookStoreService } from '../shared/book-store.service';
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-2/{di → 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-2/{di → 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-2/{di → routing}/shared/book-store.service.ts RENAMED
@@ -42,4 +42,8 @@
42
  getAll(): Book[] {
43
  return this.books;
44
  }
   
   
   
   
45
  }
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
  }