* docs(toh-6/dart): refactoring of 'add, edit, delete heroes' Refactoring of "add, edit, delete heroes" section of toh-6 from one big bottom-up step into small independent feature slices, where the user achieves a "milesone" (i.e., can run the full app) after each feature section. The section rewrite is shorter and offers a better UX. Other simplifications: - Error handling is consistent: in the hero service we log to the console, everwhere else we just let errors bubble up. - Hero service methods renamed based on function (create, update) rather then lower-level implementation (post, put). - @Output properties have been eliminated (since they weren't explained). E2E tests now pass on both the TS and Dart sides. * docs(toh-6/ts): refactoring of 'add, edit, delete heroes' Refactoring of "add, edit, delete heroes" section of toh-6 from one big bottom-up step into small independent feature slices, where the user achieves a "milesone" (i.e., can run the full app) after each feature section. The section rewrite is shorter and offers a better UX. Other simplifications: - Error handling is consistent: in the hero service we log to the console, everwhere else we just let errors bubble up. - Hero service methods renamed based on function (create, update) rather then lower-level implementation (post, put). - @Output properties have been eliminated (since they weren't explained). E2E tests now pass on both the TS and Dart sides. Post-Dart-review updates included. * docs(toh-6): ward tweaks
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
// #docplaster
|
|
// #docregion , imports
|
|
import { Injectable } from '@angular/core';
|
|
import { Headers, Http } from '@angular/http';
|
|
|
|
// #docregion rxjs
|
|
import 'rxjs/add/operator/toPromise';
|
|
// #enddocregion rxjs
|
|
|
|
import { Hero } from './hero';
|
|
// #enddocregion imports
|
|
|
|
@Injectable()
|
|
export class HeroService {
|
|
|
|
// #docregion update
|
|
private headers = new Headers({'Content-Type': 'application/json'});
|
|
// #enddocregion update
|
|
// #docregion getHeroes
|
|
private heroesUrl = 'app/heroes'; // URL to web api
|
|
|
|
constructor(private http: Http) { }
|
|
|
|
getHeroes(): Promise<Hero[]> {
|
|
return this.http.get(this.heroesUrl)
|
|
// #docregion to-promise
|
|
.toPromise()
|
|
// #enddocregion to-promise
|
|
// #docregion to-data
|
|
.then(response => response.json().data as Hero[])
|
|
// #enddocregion to-data
|
|
// #docregion catch
|
|
.catch(this.handleError);
|
|
// #enddocregion catch
|
|
}
|
|
// #enddocregion getHeroes
|
|
|
|
getHero(id: number): Promise<Hero> {
|
|
return this.getHeroes()
|
|
.then(heroes => heroes.find(hero => hero.id === id));
|
|
}
|
|
|
|
// #docregion delete
|
|
delete(id: number): Promise<void> {
|
|
let url = `${this.heroesUrl}/${id}`;
|
|
return this.http.delete(url, {headers: this.headers})
|
|
.toPromise()
|
|
.then(() => null)
|
|
.catch(this.handleError);
|
|
}
|
|
// #enddocregion delete
|
|
|
|
// #docregion create
|
|
create(name: string): Promise<Hero> {
|
|
return this.http
|
|
.post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
|
|
.toPromise()
|
|
.then(res => res.json().data)
|
|
.catch(this.handleError);
|
|
}
|
|
// #enddocregion create
|
|
// #docregion update
|
|
|
|
update(hero: Hero): Promise<Hero> {
|
|
const url = `${this.heroesUrl}/${hero.id}`;
|
|
return this.http
|
|
.put(url, JSON.stringify(hero), {headers: this.headers})
|
|
.toPromise()
|
|
.then(() => hero)
|
|
.catch(this.handleError);
|
|
}
|
|
// #enddocregion put, update
|
|
|
|
// #docregion handleError
|
|
private handleError(error: any): Promise<any> {
|
|
console.error('An error occurred', error); // for demo purposes only
|
|
return Promise.reject(error.message || error);
|
|
}
|
|
// #enddocregion handleError
|
|
}
|
|
|