@@ -1,7 +1,29 @@
|
|
1 |
import { NgModule } from '@angular/core';
|
2 |
import { Routes, RouterModule } from '@angular/router';
|
3 |
|
4 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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)],
|
@@ -1,10 +1,5 @@
|
|
1 |
-
<
|
2 |
-
|
3 |
-
|
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>
|
@@ -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 { }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -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
|
@@ -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>
|
@@ -1,6 +1,8 @@
|
|
1 |
-
import { Component, OnInit
|
|
|
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 |
-
|
12 |
-
|
|
|
|
|
|
|
|
|
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 |
}
|
@@ -2,5 +2,5 @@
|
|
2 |
<bm-book-list-item class="item"
|
3 |
*ngFor="let b of books"
|
4 |
[book]="b"
|
5 |
-
|
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>
|
@@ -1,4 +1,4 @@
|
|
1 |
-
import { Component, OnInit
|
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() {
|
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() {
|
17 |
+
this.books = this.bs.getAll();
|
|
|
|
|
|
|
|
|
18 |
}
|
19 |
}
|
@@ -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>
|
@@ -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 |
+
}
|
@@ -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 {
|
47 |
+
return this.books.find(book => book.isbn === isbn);
|
48 |
+
}
|
49 |
}
|