BookMonkey 3 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 +4 -9
  3. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/app.component.ts +1 -17
  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 -4
  6. tmp/src/app/book-monkey/{iteration-1/event-bindings → iteration-2/routing}/book-details/book-details.component.ts +11 -7
  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,10 +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>
9
-
10
<router-outlet></router-outlet>
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,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-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
@@ -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-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,17 +10,19 @@
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() {
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() {
21
+ const params = this.route.snapshot.paramMap;
22
+ this.book = this.bs.getSingle(params.get('isbn'));
23
}
24
25
getRating(num: number) {
26
return new Array(num);
27
}
28
}
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() {
15
- this.books = [
16
- {
17
- isbn: '9783864906466',
18
- title: 'Angular',
19
- authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
20
- published: new Date(2019, 4, 30),
21
- subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices - mit NativeScript und NgRx',
22
- rating: 5,
23
- thumbnails: [{
24
- url: 'https://ng-buch.de/buch1.jpg',
25
- title: 'Buchcover'
26
- }],
27
- description: 'Die Autoren führen Sie mit einem anspruchsvollen Beispielprojekt durch die Welt von Angular...'
28
- },
29
- {
30
- isbn: '9783864903274',
31
- title: 'React',
32
- authors: ['Oliver Zeigermann', 'Nils Hartmann'],
33
- published: new Date(2016, 6, 17),
34
- subtitle: 'Die praktische Einführung in React, React Router und Redux',
35
- rating: 3,
36
- thumbnails: [{
37
- url: 'https://ng-buch.de/buch2.jpg',
38
- title: 'Buchcover'
39
- }],
40
- description: 'React ist ein JavaScript-Framework zur Entwicklung von Benutzeroberflächen...'
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() {
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() {
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: '9783864906466',
15
+ title: 'Angular',
16
+ authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
17
+ published: new Date(2019, 4, 30),
18
+ subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices - mit NativeScript und NgRx',
19
+ rating: 5,
20
+ thumbnails: [{
21
+ url: 'https://ng-buch.de/buch1.jpg',
22
+ title: 'Buchcover'
23
+ }],
24
+ description: 'Die Autoren führen Sie mit einem anspruchsvollen Beispielprojekt durch die Welt von Angular...'
25
+ },
26
+ {
27
+ isbn: '9783864903274',
28
+ title: 'React',
29
+ authors: ['Oliver Zeigermann', 'Nils Hartmann'],
30
+ published: new Date(2016, 6, 17),
31
+ subtitle: 'Die praktische Einführung in React, React Router und Redux',
32
+ rating: 3,
33
+ thumbnails: [{
34
+ url: 'https://ng-buch.de/buch2.jpg',
35
+ title: 'Buchcover'
36
+ }],
37
+ description: 'React ist ein JavaScript-Framework zur Entwicklung von Benutzeroberflächen...'
38
+ }
39
+ ];
40
+ }
41
+
42
+ getAll(): Book[] {
43
+ return this.books;
44
+ }
45
+
46
+ getSingle(isbn: string): Book {
47
+ return this.books.find(book => book.isbn === isbn);
48
+ }
49
+ }