Workshop application start

Author: brandonroberts

.angular-cli.json

@@ -21,7 +21,8 @@
       "styles": [
         "styles.css"
       ],
-      "scripts": [],
+      "scripts": [
+      ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
@@ -52,6 +53,9 @@
   },
   "defaults": {
     "styleExt": "css",
-    "component": {}
+    "component": {
+      "inlineStyle": true,
+      "inlineTemplate": true
+    }
   }
 }

package.json

@@ -12,21 +12,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": ">=4.0.0-beta <5.0.0",
-    "@angular/compiler": ">=4.0.0-beta <5.0.0",
-    "@angular/core": ">=4.0.0-beta <5.0.0",
-    "@angular/forms": ">=4.0.0-beta <5.0.0",
-    "@angular/http": ">=4.0.0-beta <5.0.0",
-    "@angular/platform-browser": ">=4.0.0-beta <5.0.0",
-    "@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0",
-    "@angular/router": ">=4.0.0-beta <5.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.2",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/effects": "^2.0.2",
+    "@ngrx/store": "^2.2.1",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.2",
-    "@angular/compiler-cli": ">=4.0.0-beta <5.0.0",
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@ngrx/store-devtools": "^3.2.4",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",
@@ -35,12 +40,10 @@
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
-    "typescript": "~2.1.0"
+    "typescript": "~2.2.0"
   }
 }

src/app/app.component.css

@@ -2,9 +2,14 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  template: `
+    <md-toolbar color="primary">
+      NGRX Workshop
+    </md-toolbar>
+
+    <router-outlet></router-outlet>
+  `
 })
 export class AppComponent {
-  title = 'app works!';
+
 }

src/app/app.component.html

@@ -1,20 +1,34 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from '@angular/material';
 
 import { AppComponent } from './app.component';
+import { SearchComponent } from './search.component';
+
+import { GoogleBooksService } from './google-books.service';
+import { BookSearchComponent } from './book-search.component';
+import { SearchResultsComponent } from './search-results.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SearchComponent,
+    BookSearchComponent,
+    SearchResultsComponent
   ],
   imports: [
     BrowserModule,
-    FormsModule,
-    HttpModule
+    ReactiveFormsModule,
+    HttpModule,
+    MaterialModule,
+    RouterModule.forRoot([
+      { path: '', component: SearchComponent }
+    ])
   ],
-  providers: [],
+  providers: [GoogleBooksService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.component.spec.ts

@@ -0,0 +1,17 @@
+export interface Book {
+  id: string;
+  volumeInfo: {
+    title: string;
+    subtitle: string;
+    authors: string[];
+    publisher: string;
+    publishDate: string;
+    description: string;
+    averageRating: number;
+    ratingsCount: number;
+    imageLinks: {
+      thumbnail: string;
+      smallThumbnail: string;
+    };
+  };
+}

src/app/app.component.ts

@@ -0,0 +1,45 @@
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/filter';
+import { Component, Output, Input, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-book-search',
+  template: `
+    <md-card>
+      <md-card-title>Find a Book</md-card-title>
+      <md-card-content>
+        <md-input-container>
+          <input mdInput placeholder="Search for a book" [formControl]="searchTerms">
+        </md-input-container>
+      </md-card-content>
+    </md-card>
+  `,
+  styles: [`
+    md-card-title,
+    md-card-content {
+      display: flex;
+      justify-content: center;
+    }
+    input {
+      width: 300px;
+    }
+  `]
+})
+export class BookSearchComponent {
+  searchTerms: FormControl = new FormControl();
+
+  @Input() set value(val: string) {
+    this.searchTerms.setValue(val, { onlySelf: true, emitEvent: false });
+  }
+
+  @Output() search = new EventEmitter<string>();
+
+  ngOnInit() {
+    this.searchTerms
+      .valueChanges
+      .debounceTime(500)
+      .filter(terms => terms != '' && terms !== this.value)
+      .subscribe(this.search);
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,26 @@
+import 'rxjs/add/operator/map';
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { Book } from './book-model';
+
+@Injectable()
+export class GoogleBooksService {
+  private API_PATH = 'https://www.googleapis.com/books/v1/volumes';
+
+  constructor(private http: Http) {}
+
+  searchBooks(queryTitle: string): Observable<Book[]> {
+    return this.http.get(`${this.API_PATH}?q=${queryTitle}`)
+      .catch(() => {
+        if (queryTitle === 'RxJS') {
+          return this.http.get('/assets/rxjs.json');
+        } else if (queryTitle === 'Star Wars Bloodline') {
+          return this.http.get('/assets/starwars.json');
+        } else {
+          return this.http.get('/assets/empty.json');
+        }
+      })    
+      .map(res => res.json().items || []);
+  }
+}