├── .gitignore ├── 10_bookDetails ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.service.ts │ │ ├── book.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ ├── shared │ │ ├── favorite │ │ │ ├── favorite.component.html │ │ │ └── favorite.component.ts │ │ └── pipes │ │ │ └── truncate.pipe.ts │ └── welcome │ │ ├── welcome.component.html │ │ └── welcome.component.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 1_starter ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.ts │ ├── app.module.ts │ └── main.ts ├── index.html ├── package-lock.json ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 2_eventBind ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ └── main.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 3_customPipe ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── main.ts │ └── shared │ │ └── pipes │ │ └── truncate.pipe.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 4_input ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ └── shared │ │ └── pipes │ │ └── truncate.pipe.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 5_output ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ └── shared │ │ └── pipes │ │ └── truncate.pipe.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 6_favorite_component ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ └── shared │ │ └── pipes │ │ └── truncate.pipe.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 7_service_example ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.service.ts │ │ ├── book.ts │ │ ├── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ │ └── books.service.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ └── shared │ │ └── pipes │ │ └── truncate.pipe.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json ├── 8_http_example ├── books.json └── complete │ ├── README.md │ ├── api │ └── books │ │ └── books.json │ ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.service.ts │ │ ├── book.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ └── shared │ │ └── pipes │ │ └── truncate.pipe.ts │ ├── index.html │ ├── package.json │ ├── systemjs.config.js │ └── tsconfig.json ├── 9_routing_solution ├── README.md ├── api │ └── books │ │ └── books.json ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── assets │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── images │ │ │ ├── 107291.jpg │ │ │ ├── 16213.jpg │ │ │ ├── 2095.jpg │ │ │ ├── 2657.jpg │ │ │ ├── 5907.jpg │ │ │ ├── 656.jpg │ │ │ └── navbar.png │ ├── books │ │ ├── book-details │ │ │ ├── book-details.component.html │ │ │ └── book-details.component.ts │ │ ├── book.service.ts │ │ ├── book.ts │ │ └── books-list │ │ │ ├── books-list.component.html │ │ │ └── books-list.component.ts │ ├── css │ │ └── styles.css │ ├── favorites │ │ ├── favorite.component.html │ │ └── favorite.component.ts │ ├── main.ts │ ├── shared │ │ ├── favorite │ │ │ ├── favorite.component.html │ │ │ └── favorite.component.ts │ │ └── pipes │ │ │ └── truncate.pipe.ts │ └── welcome │ │ ├── welcome.component.html │ │ └── welcome.component.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | typings 4 | **/app/**/*.js 5 | **/app/**/*.map 6 | node_modules 7 | jspm_packages 8 | bower_components 9 | 10 | .vs 11 | **/*.sou 12 | **/*.user 13 | bin 14 | obj 15 | packages 16 | .idea 17 | 18 | secrets.js 19 | error.log -------------------------------------------------------------------------------- /10_bookDetails/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /10_bookDetails/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | 43 | -------------------------------------------------------------------------------- /10_bookDetails/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /10_bookDetails/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | import { RouterModule } from '@angular/router'; 6 | 7 | import { WelcomeComponent } from './welcome/welcome.component'; 8 | import { AppComponent } from './app.component'; 9 | import { BooksListComponent } from './books/books-list/books-list.component'; 10 | import { BookDetailsComponent } from './books/book-details/book-details.component'; 11 | 12 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 13 | import { FavoriteComponent } from './favorites/favorite.component'; 14 | 15 | import { BookService } from './books/book.service'; 16 | 17 | @NgModule({ 18 | imports: [ BrowserModule, 19 | FormsModule, 20 | HttpModule, 21 | RouterModule.forRoot([ 22 | { path: 'welcome', component: WelcomeComponent }, 23 | { path: 'books', component: BooksListComponent }, 24 | { path: 'book/:id', component: BookDetailsComponent }, 25 | { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 26 | { path: '**', redirectTo: 'welcome', pathMatch: 'full' } 27 | ]) 28 | ], 29 | providers: [ BookService ], 30 | declarations: [ AppComponent, 31 | BooksListComponent, 32 | BookDetailsComponent, 33 | WelcomeComponent, 34 | TruncatePipe, 35 | FavoriteComponent ], 36 | bootstrap: [ AppComponent ] 37 | }) 38 | 39 | export class AppModule { } -------------------------------------------------------------------------------- /10_bookDetails/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /10_bookDetails/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /10_bookDetails/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/656.jpg -------------------------------------------------------------------------------- /10_bookDetails/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/10_bookDetails/app/assets/images/navbar.png -------------------------------------------------------------------------------- /10_bookDetails/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

{{book?.name}}

11 |
{{book?.price | currency: 'USD' : true}}
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | {{ book?.description }} 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | {{ book?.specifications }} 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | {{ book?.releaseDate }} 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | {{ book?.genre }} 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /10_bookDetails/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | 4 | import { IBook } from '../book'; 5 | import { BookService } from '../book.service'; 6 | 7 | import { Subscription } from 'rxjs/Subscription'; 8 | 9 | @Component({ 10 | moduleId: module.id, 11 | templateUrl: 'book-details.component.html' 12 | }) 13 | 14 | export class BookDetailsComponent implements OnInit, OnDestroy { 15 | book: IBook; 16 | errorMessage: string; 17 | private sub: Subscription; 18 | 19 | constructor(private _route: ActivatedRoute, 20 | private _bookService: BookService) { 21 | console.log(this._route.snapshot.params['id']); 22 | } 23 | 24 | ngOnInit(): void { 25 | this.sub = this._route.params.subscribe( 26 | params => { 27 | let id = params['id']; 28 | this.getBook(id); 29 | }); 30 | } 31 | 32 | getBook(id: string) { 33 | this._bookService.getBook(id).subscribe( 34 | book => this.book = book, 35 | error => this.errorMessage = error 36 | ); 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /10_bookDetails/app/books/book.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http, Response } from '@angular/http'; 3 | import {Observable } from 'rxjs/Observable'; 4 | import { IBook } from './book'; 5 | import 'rxjs/add/operator/map'; 6 | import 'rxjs/add/observable/throw'; 7 | import 'rxjs/add/operator/catch'; 8 | import 'rxjs/add/operator/do'; 9 | 10 | @Injectable() 11 | export class BookService { 12 | 13 | constructor(private _http: Http) { } 14 | 15 | getBooks(): Observable { 16 | return this._http 17 | .get('api/books/books.json') 18 | .map((response: Response) => response.json()) 19 | // .do(data => console.log(data)) 20 | .catch(this.handleError); 21 | } 22 | 23 | getBook(id: string): Observable { 24 | return this.getBooks() 25 | .map((books: IBook[]) => books.find(book => book.id === id)) 26 | .do(data => console.log(data)); 27 | } 28 | 29 | private handleError(error: Response) { 30 | console.error(error); 31 | let message = `Error status code ${error.status} at ${error.url}`; 32 | return Observable.throw(message); 33 | } 34 | } -------------------------------------------------------------------------------- /10_bookDetails/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | id: string; 3 | name: string; 4 | productCode: string; 5 | releaseDate: Date; 6 | description: string; 7 | author: string; 8 | genre: string; 9 | specifications: string; 10 | inStock: boolean; 11 | price: number; 12 | starRating: number; 13 | imageUrl: string; 14 | } 15 | 16 | // export interface IBook { 17 | // bookTitle: string; 18 | // bookAuthor: string; 19 | // productCode?: string; 20 | // publishedOn: Date; 21 | // bookDescription: string; 22 | // genre?: string; 23 | // specifications?: string; 24 | // inStock: string; 25 | // bookPrice: number; 26 | // bookReviews: number; 27 | // bookImageUrl: string; 28 | // } 29 | 30 | 31 | -------------------------------------------------------------------------------- /10_bookDetails/app/books/books-list/books-list.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

{{ favoriteMessage }}

6 |
7 |
9 |
10 | 13 |
14 |

15 | {{book.price | currency: 'EUR' : true}} 16 |

17 |

{{book.name}}

18 |

Author: {{book.author}}

19 |

Description: {{book.description | limitChar: '10'}}

20 |

Published On: {{book.releaseDate | date: 'longDate' }}

21 | In Stock:

{{ book.inStock ? 'YES' : 'NO'}}

22 | 23 | 24 | 25 | 26 |

Reviews {{book.starRating}}

27 |
28 | 32 |
33 |
34 |
35 |
36 |
37 |
-------------------------------------------------------------------------------- /10_bookDetails/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { IBook } from '../book'; 3 | import { BookService } from '../book.service'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: 'books-list.component.html' 8 | }) 9 | 10 | export class BooksListComponent implements OnInit { 11 | 12 | books: IBook[]; 13 | favoriteMessage: string = ''; 14 | imageWidth: number = 100; 15 | showImage: boolean = true; 16 | booksInStock: number = 2; 17 | errorMessage: string; 18 | 19 | constructor(private _bookService: BookService) { } 20 | 21 | ngOnInit() { this.getBooks() } 22 | 23 | getBooks() { 24 | this._bookService.getBooks() 25 | .subscribe( 26 | books => this.books = books, 27 | error => this.errorMessage = error 28 | ); 29 | } 30 | 31 | onFavoriteClicked(message: string): void { 32 | this.favoriteMessage = message; 33 | } 34 | 35 | toggleImage(): void { 36 | this.showImage = !this.showImage; 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /10_bookDetails/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .faveSelected { 2 | color: red; 3 | } 4 | 5 | .redClass { 6 | background-color: red; 7 | } 8 | .yellowClass { 9 | background-color: yellow; 10 | } 11 | a { 12 | color: #FF9721 13 | } 14 | .navbar { 15 | margin-bottom: 20px; 16 | margin-top: 30px; 17 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 18 | border: 1px solid #ccc 19 | } 20 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 21 | background: 0 0; 22 | color: #FF9721!important; 23 | font-weight: 700 24 | } 25 | .logo { 26 | width: 100%; 27 | margin: 40px 0 0; 28 | font-family: Oswald, sans-serif 29 | } 30 | .primary { 31 | color: #FF9721 32 | } 33 | .subtext { 34 | color: #666; 35 | font-size: 16px; 36 | font-weight: 700; 37 | margin: 10px 0 0 45px 38 | } 39 | header form { 40 | float: right; 41 | margin-top: 30px; 42 | background: #FF9721; 43 | padding: 15px; 44 | color: #fff; 45 | border-radius: 5px 46 | } 47 | #products img { 48 | width: 130px; 49 | height: 130px 50 | } 51 | .jumbotron { 52 | overflow: auto; 53 | padding: 0!important 54 | } 55 | .jumbotron p { 56 | font-size: 15px 57 | } 58 | .tablist { 59 | float: left; 60 | padding: 0; 61 | margin: 0; 62 | width: 30% 63 | } 64 | .tablist li { 65 | background: #ccc; 66 | list-style: none; 67 | color: #666; 68 | padding: 15px 10px 15px 20px; 69 | margin-bottom: 5px; 70 | width: 100%; 71 | font-size: 15px 72 | } 73 | .tablist li.active { 74 | background: #FF9721; 75 | color: #fff 76 | } 77 | .tablist li.active a { 78 | color: #fff 79 | } 80 | .tablist a { 81 | color: #666; 82 | display: block; 83 | text-decoration: none 84 | } 85 | .tab-content { 86 | float: right; 87 | width: 70%; 88 | background: #FF9721; 89 | color: #fff; 90 | overflow: hidden; 91 | height: 275px; 92 | padding-top: 20px 93 | } 94 | .slide-img { 95 | float: right; 96 | width: 50% 97 | } 98 | .tab-text { 99 | float: left; 100 | width: 40%; 101 | margin-left: 40px 102 | } 103 | .main-img { 104 | width: 100% 105 | } 106 | footer { 107 | text-align: center; 108 | height: 60px; 109 | background: #f4f4f4; 110 | padding-top: 20px; 111 | margin-top: 50px 112 | } 113 | @media (max-width:960px) { 114 | header form { 115 | width: 100%!important 116 | } 117 | } 118 | @media (max-width:768px) { 119 | .slide-img { 120 | display: none 121 | } 122 | .tab-text { 123 | float: none; 124 | width: 80% 125 | } 126 | .navbar a { 127 | color: #fff!important 128 | } 129 | .navbar a:hover { 130 | color: #ccc!important 131 | } 132 | .navbar form { 133 | display: none 134 | } 135 | } 136 | @media (max-width:600px) { 137 | .tab-content { 138 | height: 350px 139 | } 140 | } -------------------------------------------------------------------------------- /10_bookDetails/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |
4 |

Add to Favorite: 6 |   7 | {{ reviews }}

8 |
-------------------------------------------------------------------------------- /10_bookDetails/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | 11 | fave: boolean = false; 12 | 13 | @Input() favorite: string; 14 | @Input() reviews: number; 15 | @Output() favoriteClicked: EventEmitter = new EventEmitter(); 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /10_bookDetails/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /10_bookDetails/app/shared/favorite/favorite.component.html: -------------------------------------------------------------------------------- 1 | 2 |
5 | Add to favorite: 7 |   {{reviews}} 8 |
-------------------------------------------------------------------------------- /10_bookDetails/app/shared/favorite/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | @Input() favorite: string; 11 | @Input() reviews: number; 12 | @Output() favoriteClicked: EventEmitter = 13 | new EventEmitter(); 14 | 15 | fave: boolean = false; 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved!`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /10_bookDetails/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /10_bookDetails/app/welcome/welcome.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Hello, Everyone!

5 |

Dev Books bookstore is a sample application used to learn the fundamentals of building Angular 2 applications.

6 |
7 |

Find out more about all the books we have in stock.

8 |

9 | All Books 10 |

11 |
12 |
13 |
-------------------------------------------------------------------------------- /10_bookDetails/app/welcome/welcome.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: 'welcome.component.html' 6 | }) 7 | 8 | export class WelcomeComponent { 9 | 10 | } -------------------------------------------------------------------------------- /10_bookDetails/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dev Book Store 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /10_bookDetails/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /10_bookDetails/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /10_bookDetails/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /1_starter/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /1_starter/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: '

My Brand New Angular App

' 6 | }) 7 | export class AppComponent { } 8 | -------------------------------------------------------------------------------- /1_starter/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | @NgModule({ 6 | imports: [ BrowserModule ], 7 | declarations: [ AppComponent ], 8 | bootstrap: [ AppComponent ] 9 | }) 10 | 11 | export class AppModule { } -------------------------------------------------------------------------------- /1_starter/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /1_starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Angular QuickStart 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | Loading... 22 | 23 | 24 | -------------------------------------------------------------------------------- /1_starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /1_starter/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /1_starter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /2_eventBind/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /2_eventBind/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /2_eventBind/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /2_eventBind/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { AppComponent } from './app.component'; 5 | import { BooksListComponent } from './books/books-list/books-list.component'; 6 | 7 | @NgModule({ 8 | imports: [ BrowserModule, 9 | FormsModule ], 10 | declarations: [ AppComponent, 11 | BooksListComponent ], 12 | bootstrap: [ AppComponent ] 13 | }) 14 | 15 | export class AppModule { } -------------------------------------------------------------------------------- /2_eventBind/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /2_eventBind/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /2_eventBind/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/656.jpg -------------------------------------------------------------------------------- /2_eventBind/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/assets/images/navbar.png -------------------------------------------------------------------------------- /2_eventBind/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

War and Peace

11 |
$19.95
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | Tolstoy's epic masterpiece intertwines the lives of private and public individuals during the time of the Napoleonic wars and the French invasion of Russia. The fortunes of the Rostovs and the Bolkonskys, of Pierre, Natasha, and Andrei, are intimately connected with the national history that is played out in parallel with their lives. Balls and soirees alternate with councils of war and the machinations of statesmen and generals, scenes of violent battles with everyday human passions in a work whose extraordinary imaginative power has never been surpassed. 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | Paperback, 1392 pages 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | March 19, 1865 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | war 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /2_eventBind/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/2_eventBind/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /2_eventBind/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-books-list', 6 | templateUrl: 'books-list.component.html' 7 | }) 8 | 9 | export class BooksListComponent { 10 | imageWidth: number = 100; 11 | showImage: boolean = true; 12 | 13 | bookAuthor: string = "Tom Jones"; 14 | bookTitle: string = "War and Peace 2"; 15 | bookPrice: string = "$29.95"; 16 | bookDescription: string = "Book of historical fiction"; 17 | bookReviews: number = 15; 18 | bookImageUrl: string = "app/assets/images/656.jpg"; 19 | 20 | toggleImage(): void { 21 | this.showImage = !this.showImage; 22 | } 23 | } -------------------------------------------------------------------------------- /2_eventBind/app/css/styles.css: -------------------------------------------------------------------------------- 1 | a{color:#FF9721}.navbar{margin-bottom:20px;margin-top:30px;background:url(../assets/images/navbar.png) repeat-x #0383c0;border:1px solid #ccc}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default a:hover{background:0 0;color:#FF9721!important;font-weight:700}.logo{width:100%;margin:40px 0 0;font-family:Oswald,sans-serif}.primary{color:#FF9721}.subtext{color:#666;font-size:16px;font-weight:700;margin:10px 0 0 45px}header form{float:right;margin-top:30px;background:#FF9721;padding:15px;color:#fff;border-radius:5px}#products img{width:130px;height:130px}.jumbotron{overflow:auto;padding:0!important}.jumbotron p{font-size:15px}.tablist{float:left;padding:0;margin:0;width:30%}.tablist li{background:#ccc;list-style:none;color:#666;padding:15px 10px 15px 20px;margin-bottom:5px;width:100%;font-size:15px}.tablist li.active{background:#FF9721;color:#fff}.tablist li.active a{color:#fff}.tablist a{color:#666;display:block;text-decoration:none}.tab-content{float:right;width:70%;background:#FF9721;color:#fff;overflow:hidden;height:275px;padding-top:20px}.slide-img{float:right;width:50%}.tab-text{float:left;width:40%;margin-left:40px}.main-img{width:100%}footer{text-align:center;height:60px;background:#f4f4f4;padding-top:20px;margin-top:50px}@media (max-width:960px){header form{width:100%!important}}@media (max-width:768px){.slide-img{display:none}.tab-text{float:none;width:80%}.navbar a{color:#fff!important}.navbar a:hover{color:#ccc!important}.navbar form{display:none}}@media (max-width:600px){.tab-content{height:350px}} -------------------------------------------------------------------------------- /2_eventBind/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /2_eventBind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /2_eventBind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /2_eventBind/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /2_eventBind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /3_customPipe/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /3_customPipe/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /3_customPipe/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /3_customPipe/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { AppComponent } from './app.component'; 5 | import { BooksListComponent } from './books/books-list/books-list.component'; 6 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 7 | 8 | @NgModule({ 9 | imports: [ BrowserModule, 10 | FormsModule ], 11 | declarations: [ AppComponent, 12 | BooksListComponent, 13 | TruncatePipe ], 14 | bootstrap: [ AppComponent ] 15 | }) 16 | 17 | export class AppModule { } -------------------------------------------------------------------------------- /3_customPipe/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /3_customPipe/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /3_customPipe/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/656.jpg -------------------------------------------------------------------------------- /3_customPipe/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/assets/images/navbar.png -------------------------------------------------------------------------------- /3_customPipe/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

War and Peace

11 |
$19.95
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | Tolstoy's epic masterpiece intertwines the lives of private and public individuals during the time of the Napoleonic wars and the French invasion of Russia. The fortunes of the Rostovs and the Bolkonskys, of Pierre, Natasha, and Andrei, are intimately connected with the national history that is played out in parallel with their lives. Balls and soirees alternate with councils of war and the machinations of statesmen and generals, scenes of violent battles with everyday human passions in a work whose extraordinary imaginative power has never been surpassed. 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | Paperback, 1392 pages 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | March 19, 1865 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | war 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /3_customPipe/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/3_customPipe/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /3_customPipe/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-books-list', 6 | templateUrl: 'books-list.component.html' 7 | }) 8 | 9 | export class BooksListComponent { 10 | imageWidth: number = 100; 11 | showImage: boolean = true; 12 | booksInStock: number = 2; 13 | 14 | books: any[] = [{ 15 | bookAuthor: "Tom Jones", 16 | bookTitle: "War and Peace 2", 17 | bookPrice: 29.95, 18 | bookDescription: "Book of historical fiction", 19 | publishedOn: new Date('02/11/1921'), 20 | inStock: "yes", 21 | bookReviews: 15, 22 | bookImageUrl: "app/assets/images/656.jpg" 23 | }] 24 | 25 | toggleImage(): void { 26 | this.showImage = !this.showImage; 27 | } 28 | } -------------------------------------------------------------------------------- /3_customPipe/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .redClass { 2 | background-color: red; 3 | } 4 | .yellowClass { 5 | background-color: yellow; 6 | } 7 | a { 8 | color: #FF9721 9 | } 10 | .navbar { 11 | margin-bottom: 20px; 12 | margin-top: 30px; 13 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 14 | border: 1px solid #ccc 15 | } 16 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 17 | background: 0 0; 18 | color: #FF9721!important; 19 | font-weight: 700 20 | } 21 | .logo { 22 | width: 100%; 23 | margin: 40px 0 0; 24 | font-family: Oswald, sans-serif 25 | } 26 | .primary { 27 | color: #FF9721 28 | } 29 | .subtext { 30 | color: #666; 31 | font-size: 16px; 32 | font-weight: 700; 33 | margin: 10px 0 0 45px 34 | } 35 | header form { 36 | float: right; 37 | margin-top: 30px; 38 | background: #FF9721; 39 | padding: 15px; 40 | color: #fff; 41 | border-radius: 5px 42 | } 43 | #products img { 44 | width: 130px; 45 | height: 130px 46 | } 47 | .jumbotron { 48 | overflow: auto; 49 | padding: 0!important 50 | } 51 | .jumbotron p { 52 | font-size: 15px 53 | } 54 | .tablist { 55 | float: left; 56 | padding: 0; 57 | margin: 0; 58 | width: 30% 59 | } 60 | .tablist li { 61 | background: #ccc; 62 | list-style: none; 63 | color: #666; 64 | padding: 15px 10px 15px 20px; 65 | margin-bottom: 5px; 66 | width: 100%; 67 | font-size: 15px 68 | } 69 | .tablist li.active { 70 | background: #FF9721; 71 | color: #fff 72 | } 73 | .tablist li.active a { 74 | color: #fff 75 | } 76 | .tablist a { 77 | color: #666; 78 | display: block; 79 | text-decoration: none 80 | } 81 | .tab-content { 82 | float: right; 83 | width: 70%; 84 | background: #FF9721; 85 | color: #fff; 86 | overflow: hidden; 87 | height: 275px; 88 | padding-top: 20px 89 | } 90 | .slide-img { 91 | float: right; 92 | width: 50% 93 | } 94 | .tab-text { 95 | float: left; 96 | width: 40%; 97 | margin-left: 40px 98 | } 99 | .main-img { 100 | width: 100% 101 | } 102 | footer { 103 | text-align: center; 104 | height: 60px; 105 | background: #f4f4f4; 106 | padding-top: 20px; 107 | margin-top: 50px 108 | } 109 | @media (max-width:960px) { 110 | header form { 111 | width: 100%!important 112 | } 113 | } 114 | @media (max-width:768px) { 115 | .slide-img { 116 | display: none 117 | } 118 | .tab-text { 119 | float: none; 120 | width: 80% 121 | } 122 | .navbar a { 123 | color: #fff!important 124 | } 125 | .navbar a:hover { 126 | color: #ccc!important 127 | } 128 | .navbar form { 129 | display: none 130 | } 131 | } 132 | @media (max-width:600px) { 133 | .tab-content { 134 | height: 350px 135 | } 136 | } -------------------------------------------------------------------------------- /3_customPipe/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /3_customPipe/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /3_customPipe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /3_customPipe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /3_customPipe/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /3_customPipe/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /4_input/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /4_input/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /4_input/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { AppComponent } from './app.component'; 5 | import { BooksListComponent } from './books/books-list/books-list.component'; 6 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 7 | import { FavoriteComponent } from './favorites/favorite.component'; 8 | 9 | @NgModule({ 10 | imports: [ BrowserModule, 11 | FormsModule ], 12 | declarations: [ AppComponent, 13 | BooksListComponent, 14 | TruncatePipe, 15 | FavoriteComponent ], 16 | bootstrap: [ AppComponent ] 17 | }) 18 | 19 | export class AppModule { } -------------------------------------------------------------------------------- /4_input/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /4_input/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /4_input/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /4_input/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /4_input/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /4_input/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /4_input/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /4_input/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /4_input/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/656.jpg -------------------------------------------------------------------------------- /4_input/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/assets/images/navbar.png -------------------------------------------------------------------------------- /4_input/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

War and Peace

11 |
$19.95
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | Tolstoy's epic masterpiece intertwines the lives of private and public individuals during the time of the Napoleonic wars and the French invasion of Russia. The fortunes of the Rostovs and the Bolkonskys, of Pierre, Natasha, and Andrei, are intimately connected with the national history that is played out in parallel with their lives. Balls and soirees alternate with councils of war and the machinations of statesmen and generals, scenes of violent battles with everyday human passions in a work whose extraordinary imaginative power has never been surpassed. 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | Paperback, 1392 pages 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | March 19, 1865 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | war 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /4_input/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/4_input/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /4_input/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | id: string; 3 | name: string; 4 | productCode: string; 5 | releaseDate: Date; 6 | description: string; 7 | author: string; 8 | genre: string; 9 | specifications: string; 10 | inStock: boolean; 11 | price: number; 12 | starRating: number; 13 | imageUrl: string; 14 | } -------------------------------------------------------------------------------- /4_input/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnChanges } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-books-list', 6 | templateUrl: 'books-list.component.html' 7 | }) 8 | 9 | export class BooksListComponent implements OnInit, OnChanges { 10 | 11 | ngOnInit() { 12 | console.log('Init', this.booksInStock); 13 | } 14 | 15 | ngOnChanges() { 16 | console.log('new change detected'); 17 | } 18 | 19 | changeMethod(): void { 20 | this.animals = ['dog', 'cat']; 21 | console.log('change method happened', this.animals); 22 | } 23 | 24 | animals: string[] = ['zebra', 'moose']; 25 | imageWidth: number = 100; 26 | showImage: boolean = true; 27 | booksInStock: number = 2; 28 | 29 | books: any[] = [{ 30 | bookAuthor: "Tom Jones", 31 | bookTitle: "War and Peace 2", 32 | bookPrice: 29.95, 33 | bookDescription: "Book of historical fiction", 34 | publishedOn: new Date('02/11/1921'), 35 | inStock: "yes", 36 | bookReviews: 15, 37 | bookImageUrl: "app/assets/images/656.jpg" 38 | }] 39 | 40 | toggleImage(): void { 41 | this.showImage = !this.showImage; 42 | } 43 | } -------------------------------------------------------------------------------- /4_input/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .redClass { 2 | background-color: red; 3 | } 4 | .yellowClass { 5 | background-color: yellow; 6 | } 7 | a { 8 | color: #FF9721 9 | } 10 | .navbar { 11 | margin-bottom: 20px; 12 | margin-top: 30px; 13 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 14 | border: 1px solid #ccc 15 | } 16 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 17 | background: 0 0; 18 | color: #FF9721!important; 19 | font-weight: 700 20 | } 21 | .logo { 22 | width: 100%; 23 | margin: 40px 0 0; 24 | font-family: Oswald, sans-serif 25 | } 26 | .primary { 27 | color: #FF9721 28 | } 29 | .subtext { 30 | color: #666; 31 | font-size: 16px; 32 | font-weight: 700; 33 | margin: 10px 0 0 45px 34 | } 35 | header form { 36 | float: right; 37 | margin-top: 30px; 38 | background: #FF9721; 39 | padding: 15px; 40 | color: #fff; 41 | border-radius: 5px 42 | } 43 | #products img { 44 | width: 130px; 45 | height: 130px 46 | } 47 | .jumbotron { 48 | overflow: auto; 49 | padding: 0!important 50 | } 51 | .jumbotron p { 52 | font-size: 15px 53 | } 54 | .tablist { 55 | float: left; 56 | padding: 0; 57 | margin: 0; 58 | width: 30% 59 | } 60 | .tablist li { 61 | background: #ccc; 62 | list-style: none; 63 | color: #666; 64 | padding: 15px 10px 15px 20px; 65 | margin-bottom: 5px; 66 | width: 100%; 67 | font-size: 15px 68 | } 69 | .tablist li.active { 70 | background: #FF9721; 71 | color: #fff 72 | } 73 | .tablist li.active a { 74 | color: #fff 75 | } 76 | .tablist a { 77 | color: #666; 78 | display: block; 79 | text-decoration: none 80 | } 81 | .tab-content { 82 | float: right; 83 | width: 70%; 84 | background: #FF9721; 85 | color: #fff; 86 | overflow: hidden; 87 | height: 275px; 88 | padding-top: 20px 89 | } 90 | .slide-img { 91 | float: right; 92 | width: 50% 93 | } 94 | .tab-text { 95 | float: left; 96 | width: 40%; 97 | margin-left: 40px 98 | } 99 | .main-img { 100 | width: 100% 101 | } 102 | footer { 103 | text-align: center; 104 | height: 60px; 105 | background: #f4f4f4; 106 | padding-top: 20px; 107 | margin-top: 50px 108 | } 109 | @media (max-width:960px) { 110 | header form { 111 | width: 100%!important 112 | } 113 | } 114 | @media (max-width:768px) { 115 | .slide-img { 116 | display: none 117 | } 118 | .tab-text { 119 | float: none; 120 | width: 80% 121 | } 122 | .navbar a { 123 | color: #fff!important 124 | } 125 | .navbar a:hover { 126 | color: #ccc!important 127 | } 128 | .navbar form { 129 | display: none 130 | } 131 | } 132 | @media (max-width:600px) { 133 | .tab-content { 134 | height: 350px 135 | } 136 | } -------------------------------------------------------------------------------- /4_input/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |

Hello world - {{ reviews }}

-------------------------------------------------------------------------------- /4_input/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | @Input() reviews: number; 11 | } -------------------------------------------------------------------------------- /4_input/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /4_input/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /4_input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /4_input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /4_input/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /4_input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /5_output/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /5_output/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /5_output/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /5_output/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { AppComponent } from './app.component'; 5 | import { BooksListComponent } from './books/books-list/books-list.component'; 6 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 7 | import { FavoriteComponent } from './favorites/favorite.component'; 8 | 9 | @NgModule({ 10 | imports: [ BrowserModule, 11 | FormsModule ], 12 | declarations: [ AppComponent, 13 | BooksListComponent, 14 | TruncatePipe, 15 | FavoriteComponent ], 16 | bootstrap: [ AppComponent ] 17 | }) 18 | 19 | export class AppModule { } -------------------------------------------------------------------------------- /5_output/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /5_output/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /5_output/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /5_output/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /5_output/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /5_output/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /5_output/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /5_output/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /5_output/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/656.jpg -------------------------------------------------------------------------------- /5_output/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/assets/images/navbar.png -------------------------------------------------------------------------------- /5_output/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

War and Peace

11 |
$19.95
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | Tolstoy's epic masterpiece intertwines the lives of private and public individuals during the time of the Napoleonic wars and the French invasion of Russia. The fortunes of the Rostovs and the Bolkonskys, of Pierre, Natasha, and Andrei, are intimately connected with the national history that is played out in parallel with their lives. Balls and soirees alternate with councils of war and the machinations of statesmen and generals, scenes of violent battles with everyday human passions in a work whose extraordinary imaginative power has never been surpassed. 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | Paperback, 1392 pages 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | March 19, 1865 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | war 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /5_output/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/5_output/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /5_output/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | id: string; 3 | name: string; 4 | productCode: string; 5 | releaseDate: Date; 6 | description: string; 7 | author: string; 8 | genre: string; 9 | specifications: string; 10 | inStock: boolean; 11 | price: number; 12 | starRating: number; 13 | imageUrl: string; 14 | } -------------------------------------------------------------------------------- /5_output/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-books-list', 6 | templateUrl: 'books-list.component.html' 7 | }) 8 | 9 | export class BooksListComponent { 10 | 11 | showMessage: string = 'test'; 12 | imageWidth: number = 100; 13 | showImage: boolean = true; 14 | booksInStock: number = 2; 15 | 16 | books: any[] = [{ 17 | bookAuthor: "Tom Jones", 18 | bookTitle: "War and Peace 2", 19 | bookPrice: 29.95, 20 | bookDescription: "Book of historical fiction", 21 | publishedOn: new Date('02/11/1921'), 22 | inStock: "yes", 23 | bookReviews: 15, 24 | bookImageUrl: "app/assets/images/656.jpg" 25 | }] 26 | 27 | toggleImage(): void { 28 | this.showImage = !this.showImage; 29 | } 30 | 31 | onNotifyClicked(message: string): void { 32 | this.showMessage = message; 33 | } 34 | } -------------------------------------------------------------------------------- /5_output/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .redClass { 2 | background-color: red; 3 | } 4 | .yellowClass { 5 | background-color: yellow; 6 | } 7 | a { 8 | color: #FF9721 9 | } 10 | .navbar { 11 | margin-bottom: 20px; 12 | margin-top: 30px; 13 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 14 | border: 1px solid #ccc 15 | } 16 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 17 | background: 0 0; 18 | color: #FF9721!important; 19 | font-weight: 700 20 | } 21 | .logo { 22 | width: 100%; 23 | margin: 40px 0 0; 24 | font-family: Oswald, sans-serif 25 | } 26 | .primary { 27 | color: #FF9721 28 | } 29 | .subtext { 30 | color: #666; 31 | font-size: 16px; 32 | font-weight: 700; 33 | margin: 10px 0 0 45px 34 | } 35 | header form { 36 | float: right; 37 | margin-top: 30px; 38 | background: #FF9721; 39 | padding: 15px; 40 | color: #fff; 41 | border-radius: 5px 42 | } 43 | #products img { 44 | width: 130px; 45 | height: 130px 46 | } 47 | .jumbotron { 48 | overflow: auto; 49 | padding: 0!important 50 | } 51 | .jumbotron p { 52 | font-size: 15px 53 | } 54 | .tablist { 55 | float: left; 56 | padding: 0; 57 | margin: 0; 58 | width: 30% 59 | } 60 | .tablist li { 61 | background: #ccc; 62 | list-style: none; 63 | color: #666; 64 | padding: 15px 10px 15px 20px; 65 | margin-bottom: 5px; 66 | width: 100%; 67 | font-size: 15px 68 | } 69 | .tablist li.active { 70 | background: #FF9721; 71 | color: #fff 72 | } 73 | .tablist li.active a { 74 | color: #fff 75 | } 76 | .tablist a { 77 | color: #666; 78 | display: block; 79 | text-decoration: none 80 | } 81 | .tab-content { 82 | float: right; 83 | width: 70%; 84 | background: #FF9721; 85 | color: #fff; 86 | overflow: hidden; 87 | height: 275px; 88 | padding-top: 20px 89 | } 90 | .slide-img { 91 | float: right; 92 | width: 50% 93 | } 94 | .tab-text { 95 | float: left; 96 | width: 40%; 97 | margin-left: 40px 98 | } 99 | .main-img { 100 | width: 100% 101 | } 102 | footer { 103 | text-align: center; 104 | height: 60px; 105 | background: #f4f4f4; 106 | padding-top: 20px; 107 | margin-top: 50px 108 | } 109 | @media (max-width:960px) { 110 | header form { 111 | width: 100%!important 112 | } 113 | } 114 | @media (max-width:768px) { 115 | .slide-img { 116 | display: none 117 | } 118 | .tab-text { 119 | float: none; 120 | width: 80% 121 | } 122 | .navbar a { 123 | color: #fff!important 124 | } 125 | .navbar a:hover { 126 | color: #ccc!important 127 | } 128 | .navbar form { 129 | display: none 130 | } 131 | } 132 | @media (max-width:600px) { 133 | .tab-content { 134 | height: 350px 135 | } 136 | } -------------------------------------------------------------------------------- /5_output/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |

Hello world - {{ reviews }}

2 |
4 | 7 |
-------------------------------------------------------------------------------- /5_output/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | @Input() reviews: number; 11 | @Output() notify: EventEmitter = new EventEmitter(); 12 | 13 | onClick(): void { 14 | this.notify.emit('Message from child'); 15 | } 16 | } -------------------------------------------------------------------------------- /5_output/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /5_output/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /5_output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /5_output/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /5_output/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /5_output/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /6_favorite_component/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /6_favorite_component/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /6_favorite_component/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /6_favorite_component/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { AppComponent } from './app.component'; 5 | import { BooksListComponent } from './books/books-list/books-list.component'; 6 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 7 | import { FavoriteComponent } from './favorites/favorite.component'; 8 | 9 | @NgModule({ 10 | imports: [ BrowserModule, 11 | FormsModule ], 12 | declarations: [ AppComponent, 13 | BooksListComponent, 14 | TruncatePipe, 15 | FavoriteComponent ], 16 | bootstrap: [ AppComponent ] 17 | }) 18 | 19 | export class AppModule { } -------------------------------------------------------------------------------- /6_favorite_component/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /6_favorite_component/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /6_favorite_component/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/656.jpg -------------------------------------------------------------------------------- /6_favorite_component/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/assets/images/navbar.png -------------------------------------------------------------------------------- /6_favorite_component/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/6_favorite_component/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /6_favorite_component/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | id: string; 3 | name: string; 4 | productCode: string; 5 | releaseDate: Date; 6 | description: string; 7 | author: string; 8 | genre: string; 9 | specifications: string; 10 | inStock: boolean; 11 | price: number; 12 | starRating: number; 13 | imageUrl: string; 14 | } -------------------------------------------------------------------------------- /6_favorite_component/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-books-list', 6 | templateUrl: 'books-list.component.html' 7 | }) 8 | 9 | export class BooksListComponent { 10 | 11 | favoriteMessage: string = ''; 12 | imageWidth: number = 100; 13 | showImage: boolean = true; 14 | booksInStock: number = 2; 15 | 16 | books: any[] = [{ 17 | bookAuthor: "Tom Jones", 18 | bookTitle: "War and Peace 2", 19 | bookPrice: 29.95, 20 | bookDescription: "Book of historical fiction", 21 | publishedOn: new Date('02/11/1921'), 22 | inStock: "yes", 23 | bookReviews: 15, 24 | bookImageUrl: "app/assets/images/656.jpg" 25 | }, { 26 | bookAuthor: "Mike Jones", 27 | bookTitle: "War and Peace 3", 28 | bookPrice: 19.95, 29 | bookDescription: "Book of historical fact", 30 | publishedOn: new Date('02/11/1921'), 31 | inStock: "yes", 32 | bookReviews: 18, 33 | bookImageUrl: "app/assets/images/656.jpg" 34 | }] 35 | 36 | onFavoriteClicked(message: string): void { 37 | this.favoriteMessage = message; 38 | } 39 | 40 | toggleImage(): void { 41 | this.showImage = !this.showImage; 42 | } 43 | 44 | } -------------------------------------------------------------------------------- /6_favorite_component/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .faveSelected { 2 | color: red; 3 | } 4 | 5 | .redClass { 6 | background-color: red; 7 | } 8 | .yellowClass { 9 | background-color: yellow; 10 | } 11 | a { 12 | color: #FF9721 13 | } 14 | .navbar { 15 | margin-bottom: 20px; 16 | margin-top: 30px; 17 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 18 | border: 1px solid #ccc 19 | } 20 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 21 | background: 0 0; 22 | color: #FF9721!important; 23 | font-weight: 700 24 | } 25 | .logo { 26 | width: 100%; 27 | margin: 40px 0 0; 28 | font-family: Oswald, sans-serif 29 | } 30 | .primary { 31 | color: #FF9721 32 | } 33 | .subtext { 34 | color: #666; 35 | font-size: 16px; 36 | font-weight: 700; 37 | margin: 10px 0 0 45px 38 | } 39 | header form { 40 | float: right; 41 | margin-top: 30px; 42 | background: #FF9721; 43 | padding: 15px; 44 | color: #fff; 45 | border-radius: 5px 46 | } 47 | #products img { 48 | width: 130px; 49 | height: 130px 50 | } 51 | .jumbotron { 52 | overflow: auto; 53 | padding: 0!important 54 | } 55 | .jumbotron p { 56 | font-size: 15px 57 | } 58 | .tablist { 59 | float: left; 60 | padding: 0; 61 | margin: 0; 62 | width: 30% 63 | } 64 | .tablist li { 65 | background: #ccc; 66 | list-style: none; 67 | color: #666; 68 | padding: 15px 10px 15px 20px; 69 | margin-bottom: 5px; 70 | width: 100%; 71 | font-size: 15px 72 | } 73 | .tablist li.active { 74 | background: #FF9721; 75 | color: #fff 76 | } 77 | .tablist li.active a { 78 | color: #fff 79 | } 80 | .tablist a { 81 | color: #666; 82 | display: block; 83 | text-decoration: none 84 | } 85 | .tab-content { 86 | float: right; 87 | width: 70%; 88 | background: #FF9721; 89 | color: #fff; 90 | overflow: hidden; 91 | height: 275px; 92 | padding-top: 20px 93 | } 94 | .slide-img { 95 | float: right; 96 | width: 50% 97 | } 98 | .tab-text { 99 | float: left; 100 | width: 40%; 101 | margin-left: 40px 102 | } 103 | .main-img { 104 | width: 100% 105 | } 106 | footer { 107 | text-align: center; 108 | height: 60px; 109 | background: #f4f4f4; 110 | padding-top: 20px; 111 | margin-top: 50px 112 | } 113 | @media (max-width:960px) { 114 | header form { 115 | width: 100%!important 116 | } 117 | } 118 | @media (max-width:768px) { 119 | .slide-img { 120 | display: none 121 | } 122 | .tab-text { 123 | float: none; 124 | width: 80% 125 | } 126 | .navbar a { 127 | color: #fff!important 128 | } 129 | .navbar a:hover { 130 | color: #ccc!important 131 | } 132 | .navbar form { 133 | display: none 134 | } 135 | } 136 | @media (max-width:600px) { 137 | .tab-content { 138 | height: 350px 139 | } 140 | } -------------------------------------------------------------------------------- /6_favorite_component/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |
4 |

Add to Favorite: 6 |   7 | {{ reviews }}

8 |
-------------------------------------------------------------------------------- /6_favorite_component/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | 11 | fave: boolean = false; 12 | 13 | @Input() favorite: string; 14 | @Input() reviews: number; 15 | @Output() favoriteClicked: EventEmitter = new EventEmitter(); 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /6_favorite_component/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /6_favorite_component/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /6_favorite_component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /6_favorite_component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /6_favorite_component/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /6_favorite_component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /7_service_example/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /7_service_example/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /7_service_example/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /7_service_example/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { AppComponent } from './app.component'; 5 | import { BooksListComponent } from './books/books-list/books-list.component'; 6 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 7 | import { FavoriteComponent } from './favorites/favorite.component'; 8 | import { BookService } from './books/book.service'; 9 | 10 | @NgModule({ 11 | imports: [ BrowserModule, 12 | FormsModule ], 13 | providers: [BookService], 14 | declarations: [ AppComponent, 15 | BooksListComponent, 16 | TruncatePipe, 17 | FavoriteComponent ], 18 | bootstrap: [ AppComponent ] 19 | }) 20 | 21 | export class AppModule { } -------------------------------------------------------------------------------- /7_service_example/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /7_service_example/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /7_service_example/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /7_service_example/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /7_service_example/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /7_service_example/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /7_service_example/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /7_service_example/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /7_service_example/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/656.jpg -------------------------------------------------------------------------------- /7_service_example/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/assets/images/navbar.png -------------------------------------------------------------------------------- /7_service_example/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

War and Peace

11 |
$19.95
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | Tolstoy's epic masterpiece intertwines the lives of private and public individuals during the time of the Napoleonic wars and the French invasion of Russia. The fortunes of the Rostovs and the Bolkonskys, of Pierre, Natasha, and Andrei, are intimately connected with the national history that is played out in parallel with their lives. Balls and soirees alternate with councils of war and the machinations of statesmen and generals, scenes of violent battles with everyday human passions in a work whose extraordinary imaginative power has never been surpassed. 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | Paperback, 1392 pages 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | March 19, 1865 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | war 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /7_service_example/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/7_service_example/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /7_service_example/app/books/book.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http } from '@angular/http'; 3 | import { IBook } from './book'; 4 | 5 | @Injectable() 6 | export class BookService { 7 | 8 | getBooks(): IBook[] { 9 | return [{ 10 | bookAuthor: "Tom Jones", 11 | bookTitle: "War and Peace 2", 12 | bookPrice: 29.95, 13 | bookDescription: "Book of historical fiction", 14 | publishedOn: new Date('02/11/1921'), 15 | inStock: "yes", 16 | bookReviews: 15, 17 | bookImageUrl: "app/assets/images/656.jpg" 18 | }, { 19 | bookAuthor: "Mike Jones", 20 | bookTitle: "War and Peace 3", 21 | bookPrice: 19.95, 22 | bookDescription: "Book of historical fact", 23 | publishedOn: new Date('02/11/1921'), 24 | inStock: "yes", 25 | bookReviews: 18, 26 | bookImageUrl: "app/assets/images/656.jpg" 27 | }] 28 | } 29 | } -------------------------------------------------------------------------------- /7_service_example/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | bookTitle: string; 3 | bookAuthor: string; 4 | productCode?: string; 5 | publishedOn: Date; 6 | bookDescription: string; 7 | genre?: string; 8 | specifications?: string; 9 | inStock: string; 10 | bookPrice: number; 11 | bookReviews: number; 12 | bookImageUrl: string; 13 | } 14 | 15 | // export interface IBook { 16 | // id: string; 17 | // name: string; 18 | // productCode: string; 19 | // releaseDate: Date; 20 | // description: string; 21 | // author: string; 22 | // genre: string; 23 | // specifications: string; 24 | // inStock: boolean; 25 | // price: number; 26 | // starRating: number; 27 | // imageUrl: string; 28 | // } 29 | -------------------------------------------------------------------------------- /7_service_example/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IBook } from '../book'; 3 | import { BookService } from '../book.service'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | selector: 'bs-books-list', 8 | templateUrl: 'books-list.component.html' 9 | }) 10 | 11 | export class BooksListComponent { 12 | 13 | books: IBook[]; 14 | favoriteMessage: string = ''; 15 | imageWidth: number = 100; 16 | showImage: boolean = true; 17 | booksInStock: number = 2; 18 | 19 | constructor(private _bookService: BookService) { 20 | this.books = _bookService.getBooks(); 21 | } 22 | 23 | // books: any[] = [{ 24 | // bookAuthor: "Tom Jones", 25 | // bookTitle: "War and Peace 2", 26 | // bookPrice: 29.95, 27 | // bookDescription: "Book of historical fiction", 28 | // publishedOn: new Date('02/11/1921'), 29 | // inStock: "yes", 30 | // bookReviews: 15, 31 | // bookImageUrl: "app/assets/images/656.jpg" 32 | // }, { 33 | // bookAuthor: "Mike Jones", 34 | // bookTitle: "War and Peace 3", 35 | // bookPrice: 19.95, 36 | // bookDescription: "Book of historical fact", 37 | // publishedOn: new Date('02/11/1921'), 38 | // inStock: "yes", 39 | // bookReviews: 18, 40 | // bookImageUrl: "app/assets/images/656.jpg" 41 | // }] 42 | 43 | onFavoriteClicked(message: string): void { 44 | this.favoriteMessage = message; 45 | } 46 | 47 | toggleImage(): void { 48 | this.showImage = !this.showImage; 49 | } 50 | 51 | } -------------------------------------------------------------------------------- /7_service_example/app/books/books.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http } from '@angular/http'; 3 | import { IBook } from './book'; 4 | 5 | @Injectable() 6 | export class BookService { 7 | 8 | getBooks(): IBook[] { 9 | return [{ 10 | bookAuthor: "Tom Jones", 11 | bookTitle: "War and Peace 2", 12 | bookPrice: 29.95, 13 | bookDescription: "Book of historical fiction", 14 | publishedOn: new Date('02/11/1921'), 15 | inStock: "yes", 16 | bookReviews: 15, 17 | bookImageUrl: "app/assets/images/656.jpg" 18 | }, { 19 | bookAuthor: "Mike Jones", 20 | bookTitle: "War and Peace 3", 21 | bookPrice: 19.95, 22 | bookDescription: "Book of historical fact", 23 | publishedOn: new Date('02/11/1921'), 24 | inStock: "yes", 25 | bookReviews: 18, 26 | bookImageUrl: "app/assets/images/656.jpg" 27 | }] 28 | } 29 | } -------------------------------------------------------------------------------- /7_service_example/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .faveSelected { 2 | color: red; 3 | } 4 | 5 | .redClass { 6 | background-color: red; 7 | } 8 | .yellowClass { 9 | background-color: yellow; 10 | } 11 | a { 12 | color: #FF9721 13 | } 14 | .navbar { 15 | margin-bottom: 20px; 16 | margin-top: 30px; 17 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 18 | border: 1px solid #ccc 19 | } 20 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 21 | background: 0 0; 22 | color: #FF9721!important; 23 | font-weight: 700 24 | } 25 | .logo { 26 | width: 100%; 27 | margin: 40px 0 0; 28 | font-family: Oswald, sans-serif 29 | } 30 | .primary { 31 | color: #FF9721 32 | } 33 | .subtext { 34 | color: #666; 35 | font-size: 16px; 36 | font-weight: 700; 37 | margin: 10px 0 0 45px 38 | } 39 | header form { 40 | float: right; 41 | margin-top: 30px; 42 | background: #FF9721; 43 | padding: 15px; 44 | color: #fff; 45 | border-radius: 5px 46 | } 47 | #products img { 48 | width: 130px; 49 | height: 130px 50 | } 51 | .jumbotron { 52 | overflow: auto; 53 | padding: 0!important 54 | } 55 | .jumbotron p { 56 | font-size: 15px 57 | } 58 | .tablist { 59 | float: left; 60 | padding: 0; 61 | margin: 0; 62 | width: 30% 63 | } 64 | .tablist li { 65 | background: #ccc; 66 | list-style: none; 67 | color: #666; 68 | padding: 15px 10px 15px 20px; 69 | margin-bottom: 5px; 70 | width: 100%; 71 | font-size: 15px 72 | } 73 | .tablist li.active { 74 | background: #FF9721; 75 | color: #fff 76 | } 77 | .tablist li.active a { 78 | color: #fff 79 | } 80 | .tablist a { 81 | color: #666; 82 | display: block; 83 | text-decoration: none 84 | } 85 | .tab-content { 86 | float: right; 87 | width: 70%; 88 | background: #FF9721; 89 | color: #fff; 90 | overflow: hidden; 91 | height: 275px; 92 | padding-top: 20px 93 | } 94 | .slide-img { 95 | float: right; 96 | width: 50% 97 | } 98 | .tab-text { 99 | float: left; 100 | width: 40%; 101 | margin-left: 40px 102 | } 103 | .main-img { 104 | width: 100% 105 | } 106 | footer { 107 | text-align: center; 108 | height: 60px; 109 | background: #f4f4f4; 110 | padding-top: 20px; 111 | margin-top: 50px 112 | } 113 | @media (max-width:960px) { 114 | header form { 115 | width: 100%!important 116 | } 117 | } 118 | @media (max-width:768px) { 119 | .slide-img { 120 | display: none 121 | } 122 | .tab-text { 123 | float: none; 124 | width: 80% 125 | } 126 | .navbar a { 127 | color: #fff!important 128 | } 129 | .navbar a:hover { 130 | color: #ccc!important 131 | } 132 | .navbar form { 133 | display: none 134 | } 135 | } 136 | @media (max-width:600px) { 137 | .tab-content { 138 | height: 350px 139 | } 140 | } -------------------------------------------------------------------------------- /7_service_example/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |
4 |

Add to Favorite: 6 |   7 | {{ reviews }}

8 |
-------------------------------------------------------------------------------- /7_service_example/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | 11 | fave: boolean = false; 12 | 13 | @Input() favorite: string; 14 | @Input() reviews: number; 15 | @Output() favoriteClicked: EventEmitter = new EventEmitter(); 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /7_service_example/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /7_service_example/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /7_service_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /7_service_example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /7_service_example/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /7_service_example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /8_http_example/complete/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /8_http_example/complete/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | -------------------------------------------------------------------------------- /8_http_example/complete/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /8_http_example/complete/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { BooksListComponent } from './books/books-list/books-list.component'; 8 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 9 | import { FavoriteComponent } from './favorites/favorite.component'; 10 | 11 | import { BookService } from './books/book.service'; 12 | 13 | @NgModule({ 14 | imports: [ BrowserModule, 15 | FormsModule, 16 | HttpModule ], 17 | providers: [BookService], 18 | declarations: [ AppComponent, 19 | BooksListComponent, 20 | TruncatePipe, 21 | FavoriteComponent ], 22 | bootstrap: [ AppComponent ] 23 | }) 24 | 25 | export class AppModule { } -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/656.jpg -------------------------------------------------------------------------------- /8_http_example/complete/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/assets/images/navbar.png -------------------------------------------------------------------------------- /8_http_example/complete/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/8_http_example/complete/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /8_http_example/complete/app/books/book.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http, Response } from '@angular/http'; 3 | import {Observable } from 'rxjs/Observable'; 4 | import { IBook } from './book'; 5 | import 'rxjs/add/operator/map'; 6 | 7 | @Injectable() 8 | export class BookService { 9 | 10 | constructor(private _http: Http) { } 11 | 12 | getBooks(): Observable { 13 | return this._http 14 | .get('api/books/books.json') 15 | .map((response: Response) => response.json()); 16 | } 17 | } -------------------------------------------------------------------------------- /8_http_example/complete/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | bookTitle: string; 3 | bookAuthor: string; 4 | productCode?: string; 5 | publishedOn: Date; 6 | bookDescription: string; 7 | genre?: string; 8 | specifications?: string; 9 | inStock: string; 10 | bookPrice: number; 11 | bookReviews: number; 12 | bookImageUrl: string; 13 | } 14 | 15 | // export interface IBook { 16 | // id: string; 17 | // name: string; 18 | // productCode: string; 19 | // releaseDate: Date; 20 | // description: string; 21 | // author: string; 22 | // genre: string; 23 | // specifications: string; 24 | // inStock: boolean; 25 | // price: number; 26 | // starRating: number; 27 | // imageUrl: string; 28 | // } 29 | -------------------------------------------------------------------------------- /8_http_example/complete/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { IBook } from '../book'; 3 | import { BookService } from '../book.service'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | selector: 'bs-books-list', 8 | templateUrl: 'books-list.component.html' 9 | }) 10 | 11 | export class BooksListComponent implements OnInit { 12 | 13 | books: IBook[]; 14 | favoriteMessage: string = ''; 15 | imageWidth: number = 100; 16 | showImage: boolean = true; 17 | booksInStock: number = 2; 18 | errorMessage: string; 19 | 20 | constructor(private _bookService: BookService) { } 21 | 22 | ngOnInit() { this.getBooks() } 23 | 24 | getBooks() { 25 | this._bookService.getBooks() 26 | .subscribe( 27 | books => this.books = books, 28 | error => this.errorMessage = error 29 | ); 30 | } 31 | 32 | onFavoriteClicked(message: string): void { 33 | this.favoriteMessage = message; 34 | } 35 | 36 | toggleImage(): void { 37 | this.showImage = !this.showImage; 38 | } 39 | 40 | } -------------------------------------------------------------------------------- /8_http_example/complete/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .faveSelected { 2 | color: red; 3 | } 4 | 5 | .redClass { 6 | background-color: red; 7 | } 8 | .yellowClass { 9 | background-color: yellow; 10 | } 11 | a { 12 | color: #FF9721 13 | } 14 | .navbar { 15 | margin-bottom: 20px; 16 | margin-top: 30px; 17 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 18 | border: 1px solid #ccc 19 | } 20 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 21 | background: 0 0; 22 | color: #FF9721!important; 23 | font-weight: 700 24 | } 25 | .logo { 26 | width: 100%; 27 | margin: 40px 0 0; 28 | font-family: Oswald, sans-serif 29 | } 30 | .primary { 31 | color: #FF9721 32 | } 33 | .subtext { 34 | color: #666; 35 | font-size: 16px; 36 | font-weight: 700; 37 | margin: 10px 0 0 45px 38 | } 39 | header form { 40 | float: right; 41 | margin-top: 30px; 42 | background: #FF9721; 43 | padding: 15px; 44 | color: #fff; 45 | border-radius: 5px 46 | } 47 | #products img { 48 | width: 130px; 49 | height: 130px 50 | } 51 | .jumbotron { 52 | overflow: auto; 53 | padding: 0!important 54 | } 55 | .jumbotron p { 56 | font-size: 15px 57 | } 58 | .tablist { 59 | float: left; 60 | padding: 0; 61 | margin: 0; 62 | width: 30% 63 | } 64 | .tablist li { 65 | background: #ccc; 66 | list-style: none; 67 | color: #666; 68 | padding: 15px 10px 15px 20px; 69 | margin-bottom: 5px; 70 | width: 100%; 71 | font-size: 15px 72 | } 73 | .tablist li.active { 74 | background: #FF9721; 75 | color: #fff 76 | } 77 | .tablist li.active a { 78 | color: #fff 79 | } 80 | .tablist a { 81 | color: #666; 82 | display: block; 83 | text-decoration: none 84 | } 85 | .tab-content { 86 | float: right; 87 | width: 70%; 88 | background: #FF9721; 89 | color: #fff; 90 | overflow: hidden; 91 | height: 275px; 92 | padding-top: 20px 93 | } 94 | .slide-img { 95 | float: right; 96 | width: 50% 97 | } 98 | .tab-text { 99 | float: left; 100 | width: 40%; 101 | margin-left: 40px 102 | } 103 | .main-img { 104 | width: 100% 105 | } 106 | footer { 107 | text-align: center; 108 | height: 60px; 109 | background: #f4f4f4; 110 | padding-top: 20px; 111 | margin-top: 50px 112 | } 113 | @media (max-width:960px) { 114 | header form { 115 | width: 100%!important 116 | } 117 | } 118 | @media (max-width:768px) { 119 | .slide-img { 120 | display: none 121 | } 122 | .tab-text { 123 | float: none; 124 | width: 80% 125 | } 126 | .navbar a { 127 | color: #fff!important 128 | } 129 | .navbar a:hover { 130 | color: #ccc!important 131 | } 132 | .navbar form { 133 | display: none 134 | } 135 | } 136 | @media (max-width:600px) { 137 | .tab-content { 138 | height: 350px 139 | } 140 | } -------------------------------------------------------------------------------- /8_http_example/complete/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |
4 |

Add to Favorite: 6 |   7 | {{ reviews }}

8 |
-------------------------------------------------------------------------------- /8_http_example/complete/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | 11 | fave: boolean = false; 12 | 13 | @Input() favorite: string; 14 | @Input() reviews: number; 15 | @Output() favoriteClicked: EventEmitter = new EventEmitter(); 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /8_http_example/complete/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /8_http_example/complete/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /8_http_example/complete/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dev Book Store 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /8_http_example/complete/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /8_http_example/complete/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /8_http_example/complete/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /9_routing_solution/README.md: -------------------------------------------------------------------------------- 1 | ** Make sure you are running Node.js Version 8.x ** 2 | 3 | 1. Download the files 4 | 5 | 2. Navigate to the root folder location in your terminal. 6 | 7 | 3. Type 'npm install'. This installs the node-module dependencies defined in the package.json 8 | 9 | 4. Type 'npm start'. This launches the TypeScript compiler (tsc) to compile the typescript files into javascript and watches for changes. It also starts the lite-server and launches in the browser to run the application on port 3000. -------------------------------------------------------------------------------- /9_routing_solution/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Dev Book Store

6 |
7 |
8 |
9 | 10 | 41 |
42 | 43 | -------------------------------------------------------------------------------- /9_routing_solution/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-app', 6 | templateUrl: 'app.component.html' 7 | }) 8 | 9 | export class AppComponent { 10 | pageTitle: string = "Dev Book Store" 11 | searchBox: string = ''; 12 | } -------------------------------------------------------------------------------- /9_routing_solution/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | import { RouterModule } from '@angular/router'; 6 | 7 | import { WelcomeComponent } from './welcome/welcome.component'; 8 | import { AppComponent } from './app.component'; 9 | import { BooksListComponent } from './books/books-list/books-list.component'; 10 | import { TruncatePipe } from './shared/pipes/truncate.pipe'; 11 | import { FavoriteComponent } from './favorites/favorite.component'; 12 | 13 | import { BookService } from './books/book.service'; 14 | 15 | @NgModule({ 16 | imports: [ BrowserModule, 17 | FormsModule, 18 | HttpModule, 19 | RouterModule.forRoot([ 20 | { path: 'welcome', component: WelcomeComponent }, 21 | { path: 'books', component: BooksListComponent }, 22 | { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 23 | { path: '**', redirectTo: 'welcome', pathMatch: 'full' } 24 | ]) 25 | ], 26 | providers: [BookService], 27 | declarations: [ AppComponent, 28 | BooksListComponent, 29 | WelcomeComponent, 30 | TruncatePipe, 31 | FavoriteComponent ], 32 | bootstrap: [ AppComponent ] 33 | }) 34 | 35 | export class AppModule { } -------------------------------------------------------------------------------- /9_routing_solution/app/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /9_routing_solution/app/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /9_routing_solution/app/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/107291.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/107291.jpg -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/16213.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/16213.jpg -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/2095.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/2095.jpg -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/2657.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/2657.jpg -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/5907.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/5907.jpg -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/656.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/656.jpg -------------------------------------------------------------------------------- /9_routing_solution/app/assets/images/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/assets/images/navbar.png -------------------------------------------------------------------------------- /9_routing_solution/app/books/book-details/book-details.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |

War and Peace

11 |
$19.95
12 | 13 |

Quanity: 14 |

21 | Buy Now 22 |


23 |
24 |
25 | 32 |
33 |
34 | Tolstoy's epic masterpiece intertwines the lives of private and public individuals during the time of the Napoleonic wars and the French invasion of Russia. The fortunes of the Rostovs and the Bolkonskys, of Pierre, Natasha, and Andrei, are intimately connected with the national history that is played out in parallel with their lives. Balls and soirees alternate with councils of war and the machinations of statesmen and generals, scenes of violent battles with everyday human passions in a work whose extraordinary imaginative power has never been surpassed. 35 |
36 |
37 |
38 |
39 | 46 |
47 |
48 | Paperback, 1392 pages 49 |
50 |
51 |
52 |
53 | 60 |
61 |
62 | March 19, 1865 63 |
64 |
65 |
66 |
67 | 74 |
75 |
76 | war 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | -------------------------------------------------------------------------------- /9_routing_solution/app/books/book-details/book-details.component.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jakblak/learn-angular2/eaa0ec9c9db84a3a37533d3b66fc824d19b733a2/9_routing_solution/app/books/book-details/book-details.component.ts -------------------------------------------------------------------------------- /9_routing_solution/app/books/book.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http, Response } from '@angular/http'; 3 | import {Observable } from 'rxjs/Observable'; 4 | import { IBook } from './book'; 5 | import 'rxjs/add/operator/map'; 6 | import 'rxjs/add/observable/throw'; 7 | import 'rxjs/add/operator/catch'; 8 | import 'rxjs/add/operator/do'; 9 | // import 'rxjs/Rx'; 10 | 11 | @Injectable() 12 | export class BookService { 13 | 14 | constructor(private _http: Http) { } 15 | 16 | getBooks(): Observable { 17 | return this._http 18 | .get('api/books/books.json') 19 | .map((response: Response) => response.json()) 20 | .do(data => console.log(data)) 21 | .catch(this.handleError); 22 | } 23 | 24 | private handleError(error: Response) { 25 | console.error(error); 26 | let message = `Error status code ${error.status} at ${error.url}`; 27 | return Observable.throw(message); 28 | } 29 | } -------------------------------------------------------------------------------- /9_routing_solution/app/books/book.ts: -------------------------------------------------------------------------------- 1 | export interface IBook { 2 | bookTitle: string; 3 | bookAuthor: string; 4 | productCode?: string; 5 | publishedOn: Date; 6 | bookDescription: string; 7 | genre?: string; 8 | specifications?: string; 9 | inStock: string; 10 | bookPrice: number; 11 | bookReviews: number; 12 | bookImageUrl: string; 13 | } 14 | 15 | // export interface IBook { 16 | // id: string; 17 | // name: string; 18 | // productCode: string; 19 | // releaseDate: Date; 20 | // description: string; 21 | // author: string; 22 | // genre: string; 23 | // specifications: string; 24 | // inStock: boolean; 25 | // price: number; 26 | // starRating: number; 27 | // imageUrl: string; 28 | // } 29 | -------------------------------------------------------------------------------- /9_routing_solution/app/books/books-list/books-list.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

{{ favoriteMessage }}

6 |
7 |
9 |
10 | 13 |
14 |

15 | {{book.price | currency: 'EUR' : true}} 16 |

17 |

{{book.name}}

18 |

Author: {{book.author}}

19 |

Description: {{book.description | limitChar: '10'}}

20 |

Published On: {{book.releaseDate | date: 'longDate' }}

21 | In Stock:

{{ book.inStock ? 'YES' : 'NO'}}

22 | 23 | 24 | 25 | 26 |

Reviews {{book.starRating}}

27 |
28 | 32 |
33 |
34 |
35 |
36 |
37 |
-------------------------------------------------------------------------------- /9_routing_solution/app/books/books-list/books-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { IBook } from '../book'; 3 | import { BookService } from '../book.service'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: 'books-list.component.html' 8 | }) 9 | 10 | export class BooksListComponent implements OnInit { 11 | 12 | books: IBook[]; 13 | favoriteMessage: string = ''; 14 | imageWidth: number = 100; 15 | showImage: boolean = true; 16 | booksInStock: number = 2; 17 | errorMessage: string; 18 | 19 | constructor(private _bookService: BookService) { } 20 | 21 | ngOnInit() { this.getBooks() } 22 | 23 | getBooks() { 24 | this._bookService.getBooks() 25 | .subscribe( 26 | books => this.books = books, 27 | error => this.errorMessage = error 28 | ); 29 | } 30 | 31 | onFavoriteClicked(message: string): void { 32 | this.favoriteMessage = message; 33 | } 34 | 35 | toggleImage(): void { 36 | this.showImage = !this.showImage; 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /9_routing_solution/app/css/styles.css: -------------------------------------------------------------------------------- 1 | .faveSelected { 2 | color: red; 3 | } 4 | 5 | .redClass { 6 | background-color: red; 7 | } 8 | .yellowClass { 9 | background-color: yellow; 10 | } 11 | a { 12 | color: #FF9721 13 | } 14 | .navbar { 15 | margin-bottom: 20px; 16 | margin-top: 30px; 17 | background: url(../assets/images/navbar.png) repeat-x #0383c0; 18 | border: 1px solid #ccc 19 | } 20 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default a:hover { 21 | background: 0 0; 22 | color: #FF9721!important; 23 | font-weight: 700 24 | } 25 | .logo { 26 | width: 100%; 27 | margin: 40px 0 0; 28 | font-family: Oswald, sans-serif 29 | } 30 | .primary { 31 | color: #FF9721 32 | } 33 | .subtext { 34 | color: #666; 35 | font-size: 16px; 36 | font-weight: 700; 37 | margin: 10px 0 0 45px 38 | } 39 | header form { 40 | float: right; 41 | margin-top: 30px; 42 | background: #FF9721; 43 | padding: 15px; 44 | color: #fff; 45 | border-radius: 5px 46 | } 47 | #products img { 48 | width: 130px; 49 | height: 130px 50 | } 51 | .jumbotron { 52 | overflow: auto; 53 | padding: 0!important 54 | } 55 | .jumbotron p { 56 | font-size: 15px 57 | } 58 | .tablist { 59 | float: left; 60 | padding: 0; 61 | margin: 0; 62 | width: 30% 63 | } 64 | .tablist li { 65 | background: #ccc; 66 | list-style: none; 67 | color: #666; 68 | padding: 15px 10px 15px 20px; 69 | margin-bottom: 5px; 70 | width: 100%; 71 | font-size: 15px 72 | } 73 | .tablist li.active { 74 | background: #FF9721; 75 | color: #fff 76 | } 77 | .tablist li.active a { 78 | color: #fff 79 | } 80 | .tablist a { 81 | color: #666; 82 | display: block; 83 | text-decoration: none 84 | } 85 | .tab-content { 86 | float: right; 87 | width: 70%; 88 | background: #FF9721; 89 | color: #fff; 90 | overflow: hidden; 91 | height: 275px; 92 | padding-top: 20px 93 | } 94 | .slide-img { 95 | float: right; 96 | width: 50% 97 | } 98 | .tab-text { 99 | float: left; 100 | width: 40%; 101 | margin-left: 40px 102 | } 103 | .main-img { 104 | width: 100% 105 | } 106 | footer { 107 | text-align: center; 108 | height: 60px; 109 | background: #f4f4f4; 110 | padding-top: 20px; 111 | margin-top: 50px 112 | } 113 | @media (max-width:960px) { 114 | header form { 115 | width: 100%!important 116 | } 117 | } 118 | @media (max-width:768px) { 119 | .slide-img { 120 | display: none 121 | } 122 | .tab-text { 123 | float: none; 124 | width: 80% 125 | } 126 | .navbar a { 127 | color: #fff!important 128 | } 129 | .navbar a:hover { 130 | color: #ccc!important 131 | } 132 | .navbar form { 133 | display: none 134 | } 135 | } 136 | @media (max-width:600px) { 137 | .tab-content { 138 | height: 350px 139 | } 140 | } -------------------------------------------------------------------------------- /9_routing_solution/app/favorites/favorite.component.html: -------------------------------------------------------------------------------- 1 |
4 |

Add to Favorite: 6 |   7 | {{ reviews }}

8 |
-------------------------------------------------------------------------------- /9_routing_solution/app/favorites/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | 11 | fave: boolean = false; 12 | 13 | @Input() favorite: string; 14 | @Input() reviews: number; 15 | @Output() favoriteClicked: EventEmitter = new EventEmitter(); 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /9_routing_solution/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | const platform = platformBrowserDynamic(); 5 | 6 | platform.bootstrapModule(AppModule); -------------------------------------------------------------------------------- /9_routing_solution/app/shared/favorite/favorite.component.html: -------------------------------------------------------------------------------- 1 | 2 |
5 | Add to favorite: 7 |   {{reviews}} 8 |
-------------------------------------------------------------------------------- /9_routing_solution/app/shared/favorite/favorite.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'bs-favorite', 6 | templateUrl: 'favorite.component.html' 7 | }) 8 | 9 | export class FavoriteComponent { 10 | @Input() favorite: string; 11 | @Input() reviews: number; 12 | @Output() favoriteClicked: EventEmitter = 13 | new EventEmitter(); 14 | 15 | fave: boolean = false; 16 | 17 | onClick(): void { 18 | this.favoriteClicked.emit(`The favorite ${this.favorite} was saved!`); 19 | this.fave = !this.fave; 20 | } 21 | 22 | isSelected(fave: boolean): boolean { 23 | if(!fave || !this.fave) { 24 | return false; 25 | } 26 | if(fave) { 27 | return true; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /9_routing_solution/app/shared/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'limitChar' 5 | }) 6 | 7 | export class TruncatePipe implements PipeTransform { 8 | transform(input: string, limit: number) { 9 | if(input) 10 | return (input.length > length) ? input.substr(0, limit) + '...' : input; 11 | } 12 | } -------------------------------------------------------------------------------- /9_routing_solution/app/welcome/welcome.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Hello, Everyone!

5 |

Dev Books bookstore is a sample application used to learn the fundamentals of building Angular 2 applications.

6 |
7 |

Find out more about all the books we have in stock.

8 |

9 | All Books 10 |

11 |
12 |
13 |
-------------------------------------------------------------------------------- /9_routing_solution/app/welcome/welcome.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: 'welcome.component.html' 6 | }) 7 | 8 | export class WelcomeComponent { 9 | 10 | } -------------------------------------------------------------------------------- /9_routing_solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dev Book Store 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /9_routing_solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 6 | "lite": "lite-server", 7 | "tsc": "tsc", 8 | "tsc:w": "tsc -w" 9 | }, 10 | "licenses": [ 11 | { 12 | "license": "MIT", 13 | "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 14 | } 15 | ], 16 | "dependencies": { 17 | "@angular/common": "~4.3.4", 18 | "@angular/compiler": "~4.3.4", 19 | "@angular/core": "~4.3.4", 20 | "@angular/forms": "~4.3.4", 21 | "@angular/http": "~4.3.4", 22 | "@angular/platform-browser": "~4.3.4", 23 | "@angular/platform-browser-dynamic": "~4.3.4", 24 | "@angular/router": "~4.3.4", 25 | "angular-in-memory-web-api": "~0.3.0", 26 | "bootstrap": "^3.3.7", 27 | "core-js": "^2.4.1", 28 | "reflect-metadata": "^0.1.8", 29 | "rxjs": "5.0.1", 30 | "systemjs": "0.19.40", 31 | "zone.js": "^0.8.4" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^3.2.0", 35 | "lite-server": "^2.2.2", 36 | "typescript": "~2.1.0", 37 | "@types/node": "^8.0.58" 38 | }, 39 | "repository": {} 40 | } 41 | -------------------------------------------------------------------------------- /9_routing_solution/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /9_routing_solution/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Angular 2 Training - Source Code 2 | 3 | Resource files from my course [Angular 2 Essential Training](https://www.udemy.com/angular-2-training/?couponCode=NGPROMO10) 4 | 5 | 1) Open a command prompt in any of the sub-folders 6 | 7 | 2) Type: `npm install` 8 | This installs the node-module and typings dependencies 9 | 10 | 3) Type: `npm start` 11 | This launches the TypeScript compiler (tsc) to compile the application and watches for changes. 12 | It also starts the lite-server and launches in the browser to run the application on port 3000. 13 | 14 | ## Folder Organization 15 | **starter** - Lecture 9: Starter Files Setup 16 | 17 | **eventBind** - Lecture 27: Event Binding in our App 18 | 19 | **customPipe** - Lecture 35: Custom Pipes 20 | 21 | **input** - Lecture 45: Input Example 22 | 23 | **output** - Lecture 47: Output Example 24 | 25 | **favorite_component** - Lecture 48: Favorite Component 26 | 27 | **service_example** - Lecture 52: Services Example 28 | 29 | **http_example** - Lecture 57: Http with Observables in our App 30 | 31 | **routing_solution** - Lecture 62: Routing Challenge Solution 32 | 33 | **bookDetails** - Lecture 64: Display Book Deails --------------------------------------------------------------------------------