+
Hero Search
+
+
diff --git a/app/hero-search.component.ts b/app/hero-search.component.ts
new file mode 100644
index 0000000..fc827be
--- /dev/null
+++ b/app/hero-search.component.ts
@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+
+// Observable class extensions
+import 'rxjs/add/observable/of';
+
+// Observable operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+import { HeroSearchService } from './hero-search.service';
+import { Hero } from './hero';
+
+@Component({
+ moduleId: module.id,
+ selector: 'hero-search',
+ templateUrl: './hero-search.component.html',
+ styleUrls: [ './hero-search.component.css' ],
+ providers: [HeroSearchService]
+})
+export class HeroSearchComponent implements OnInit {
+ heroes: Observable
;
+ private searchTerms = new Subject();
+
+ constructor(
+ private heroSearchService: HeroSearchService,
+ private router: Router) {}
+
+ // Push a search term into the observable stream.
+ search(term: string): void {
+ this.searchTerms.next(term);
+ }
+
+ ngOnInit(): void {
+ this.heroes = this.searchTerms
+ .debounceTime(300) // wait 300ms after each keystroke before considering the term
+ .distinctUntilChanged() // ignore if next search term is same as previous
+ .switchMap(term => term // switch to new observable each time the term changes
+ // return the http search observable
+ ? this.heroSearchService.search(term)
+ // or the observable of empty heroes if there was no search term
+ : Observable.of([]))
+ .catch(error => {
+ // TODO: add real error handling
+ console.log(error);
+ return Observable.of([]);
+ });
+ }
+
+ gotoDetail(hero: Hero): void {
+ let link = ['/detail', hero.id];
+ this.router.navigate(link);
+ }
+}
diff --git a/app/hero-search.service.ts b/app/hero-search.service.ts
new file mode 100644
index 0000000..23fbffa
--- /dev/null
+++ b/app/hero-search.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroSearchService {
+ constructor(private http: Http) {}
+
+ search(term: string): Observable {
+ return this.http.get(`app/heroes/?name=${term}`)
+ .map(response => response.json().data as Hero[]);
+ }
+}
diff --git a/app/hero.service.ts b/app/hero.service.ts
new file mode 100644
index 0000000..8de8c76
--- /dev/null
+++ b/app/hero.service.ts
@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+ private heroesUrl = 'api/heroes'; // URL to web api
+ private headers = new Headers({'Content-Type': 'application/json'});
+
+ constructor(private http: Http) { }
+
+ getHeroes(): Promise {
+ return this.http.get(this.heroesUrl)
+ .toPromise()
+ .then(response => response.json().data as Hero[])
+ .catch(this.handleError);
+ }
+ getHero(id: number): Promise {
+ const url = `${this.heroesUrl}/${id}`;
+ return this.http.get(url)
+ .toPromise()
+ .then(response => response.json().data as Hero)
+ .catch(this.handleError);
+ }
+ create(name: string): Promise {
+ return this.http.post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
+ .toPromise()
+ .then(res => res.json().data)
+ .catch(this.handleError);
+ }
+ update(hero: Hero): Promise {
+ const url = `${this.heroesUrl}/${hero.id}`;
+ return this.http.put(url, JSON.stringify(hero), {headers: this.headers})
+ .toPromise()
+ .then(() => hero)
+ .catch(this.handleError);
+ }
+ delete(id: number): Promise {
+ const url = `${this.heroesUrl}/${id}`;
+ return this.http.delete(url, {headers: this.headers})
+ .toPromise()
+ .then(() => null)
+ .catch(this.handleError);
+ }
+
+ private handleError(error: any): Promise {
+ console.error('An error occurred', error); // for demo purposes only
+ return Promise.reject(error.message || error);
+ }
+}
diff --git a/app/hero.ts b/app/hero.ts
new file mode 100644
index 0000000..e3eac51
--- /dev/null
+++ b/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+ id: number;
+ name: string;
+}
diff --git a/app/heroes.component.css b/app/heroes.component.css
new file mode 100644
index 0000000..cacc340
--- /dev/null
+++ b/app/heroes.component.css
@@ -0,0 +1,55 @@
+.selected {
+ background-color: #CFD8DC !important;
+ color: white;
+}
+.heroes {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 15em;
+}
+.heroes li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+}
+.heroes li.selected:hover {
+ background-color: #BBD8DC !important;
+ color: white;
+}
+.heroes li:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+}
+.heroes .text {
+ position: relative;
+ top: -3px;
+}
+.heroes .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+
+button.delete {
+ float:right;
+ margin-top: 2px;
+ margin-right: .8em;
+ background-color: gray !important;
+ color:white;
+}
diff --git a/app/heroes.component.html b/app/heroes.component.html
new file mode 100644
index 0000000..cf0b311
--- /dev/null
+++ b/app/heroes.component.html
@@ -0,0 +1,20 @@
+My Heroes
+
+
+
+
+
+ -
+ {{hero.id}}
+ {{hero.name}}
+
+
+
+
+
+ {{selectedHero.name | uppercase}} is my hero
+
+
+
diff --git a/app/heroes.component.ts b/app/heroes.component.ts
new file mode 100644
index 0000000..d0b14a3
--- /dev/null
+++ b/app/heroes.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+ moduleId: module.id,
+ selector: 'my-heroes',
+ templateUrl: 'heroes.component.html',
+ styleUrls: [ 'heroes.component.css' ]
+})
+
+
+export class HeroesComponent implements OnInit {
+ heroes: Hero[];
+ selectedHero: Hero;
+
+ constructor(
+ private router: Router,
+ private heroService: HeroService
+ ) { }
+
+ getHeroes(): void {
+ this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+ }
+
+ add(name: string): void {
+ name = name.trim();
+ if(!name) { return; }
+ this.heroService.create(name)
+ .then(hero => {
+ this.heroes.push(hero);
+ this.selectedHero = null;
+ });
+ }
+
+ delete(hero: Hero): void {
+ this.heroService.delete(hero.id)
+ .then(() => {
+ this.heroes = this.heroes.filter(h => h !== hero);
+ if (this.selectedHero === hero) { this.selectedHero = null; }
+ });
+ }
+
+ ngOnInit(): void {
+ this.getHeroes();
+ }
+
+ onSelect(hero: Hero): void {
+ this.selectedHero = hero;
+ }
+
+ gotoDetail(): void {
+ this.router.navigate(['/detail', this.selectedHero.id]);
+ }
+}
diff --git a/app/in-memory-data.service.ts b/app/in-memory-data.service.ts
new file mode 100644
index 0000000..0f50f26
--- /dev/null
+++ b/app/in-memory-data.service.ts
@@ -0,0 +1,18 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ let heroes = [
+ {id: 11, name: 'Mr. Nice'},
+ {id: 12, name: 'Narco'},
+ {id: 13, name: 'Bombasto'},
+ {id: 14, name: 'Celeritas'},
+ {id: 15, name: 'Magneta'},
+ {id: 16, name: 'RubberMan'},
+ {id: 17, name: 'Dynama'},
+ {id: 18, name: 'Dr IQ'},
+ {id: 19, name: 'Magma'},
+ {id: 20, name: 'Tornado'}
+ ];
+ return {heroes};
+ }
+}
diff --git a/index.html b/index.html
index 4c01792..616804a 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
Angular QuickStart