docs(toh6-http): ward's tweaks

Author: wardbell

public/docs/_examples/toh-6/ts/app/hero-detail.component.ts

@@ -12,8 +12,9 @@ import { HeroService } from './hero.service';
 })
 export class HeroDetailComponent implements OnInit {
   @Input() hero: Hero;
-  @Output() updateHeroes = new EventEmitter();
-  error:any; 
+  @Output() close = new EventEmitter();
+  error: any;
+  navigated = false; // true if navigated here
 
   constructor(
     private _heroService: HeroService,
@@ -22,28 +23,31 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    if(this._routeParams.get('id') !== null){
+    if (this._routeParams.get('id') !== null) {
       let id = +this._routeParams.get('id');
+      this.navigated = true;
       this._heroService.getHero(id)
           .then(hero => this.hero = hero);
-    }
-    else{
+    } else {
+      this.navigated = false;
       this.hero = new Hero();
     }
   }
   // #enddocregion ngOnInit
   // #docregion save
-  save(){
+  save() {
     this._heroService
         .save(this.hero)
-        .then(response => {
-          this.updateHeroes.emit(response);
+        .then(hero => {
+          this.hero = hero; // saved hero, w/ id if new
+          this.goBack(hero);
         })
-        .catch(error => this.error = error);//TODO: Display error message
+        .catch(error => this.error = error); // TODO: Display error message
   }
   // #enddocregion save
-  goBack() {
-    window.history.back();
+  goBack(savedHero: Hero = null) {
+    this.close.emit(savedHero);
+    if (this.navigated) { window.history.back(); }
   }
 }
 

public/docs/_examples/toh-6/ts/app/hero.service.ts

@@ -6,80 +6,83 @@ import { Http, Response, Headers } from 'angular2/http';
 
 @Injectable()
 export class HeroService {
-  
+
   private _heroesUrl = 'app/heroes';  // URL to web api
-  
-  constructor(private _http:Http){
-  }
-  
-  //#docregion get-heroes
-  getHeroes() {
+
+  constructor(private _http: Http) { }
+
+  // #docregion get-heroes
+  getHeroes(): Promise<Hero[]> {
     return this._http
                .get(this._heroesUrl).toPromise()
-               .then((res:Response) => res.json().data)
+               .then(response => response.json().data)
                .catch(this._handleError);
   }
-  //#enddocregion get-heroes
-  
+  // #enddocregion get-heroes
+
   getHero(id: number) {
     return this.getHeroes()
-               .then(heroes => heroes.filter((hero:Hero) => hero.id === id)[0]);
+               .then(heroes => heroes.filter(hero => hero.id === id)[0]);
   }
-  
-  //#docregion save
-  save(hero:Hero){
-    if(hero.id){
+
+  // #docregion save
+  save(hero: Hero): Promise<Hero>  {
+    if (hero.id) {
       return this._put(hero);
     }
     return this._post(hero);
   }
-  //#enddocregion save
-  
-  //#docregion delete-hero
-  delete(hero:Hero){
+  // #enddocregion save
+
+  // #docregion delete-hero
+  delete(hero: Hero) {
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
-    
+
     let url = `${this._heroesUrl}/${hero.id}`;
-    
+
     return this._http
-               .delete(url,headers)
+               .delete(url, headers)
                .toPromise()
                .catch(this._handleError);
   }
-  //#enddocregion delete-hero
-  
-  //#docregion post-hero
-  private _post(hero:Hero){
-    let headers = new Headers();
-    headers.append('Content-Type', 'application/json');
-    
+  // #enddocregion delete-hero
+
+  // #docregion post-hero
+  // Add new Hero
+  private _post(hero: Hero): Promise<Hero> {
+    let headers = new Headers({
+      'Content-Type': 'application/json'});
+
     return this._http
-               .post(this._heroesUrl, JSON.stringify(hero), {headers:headers})
+               .post(this._heroesUrl, JSON.stringify(hero), {headers: headers})
                .toPromise()
+               .then(res => res.json().data)
                .catch(this._handleError);
   }
-  //#enddocregion post-hero 
-  
-  //#docregion put-hero
-  private _put(hero:Hero){
+  // #enddocregion post-hero
+
+  // #docregion put-hero
+  // Update existing Hero
+  private _put(hero: Hero) {
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
-    
+
     let url = `${this._heroesUrl}/${hero.id}`;
-    
+
     return this._http
-               .put(url, JSON.stringify(hero), {headers:headers})
+               .put(url, JSON.stringify(hero), {headers: headers})
                .toPromise()
+               .then(() => hero)
                .catch(this._handleError);
   }
-  //#enddocregion put-hero
-  
-  //#docregion error-handler
-  private _handleError(error:any){
-    console.log('An error occurred:' + error);
-    return Promise.reject(error);
+  // #enddocregion put-hero
+
+  // #docregion error-handler
+  private _handleError(error: any) {
+    console.error('An error occurred', error);
+    return Promise.reject(error.message || error);
   }
-  //#enddocregion error-handler 
+  // #enddocregion error-handler
 }
-// #enddocregion
+// #enddocregion

public/docs/_examples/toh-6/ts/app/heroes.component.html

@@ -11,7 +11,7 @@ <h2>My Heroes</h2>
 
 <button (click)="addHero()">Add New Hero</button>
 <div *ngIf="addingHero">
-  <my-hero-detail (updateHeroes)="getHeroes()"></my-hero-detail>
+  <my-hero-detail (close)="close($event)"></my-hero-detail>
 </div>
 <div *ngIf="selectedHero">
   <h2>

public/docs/_examples/toh-6/ts/app/heroes.component.ts

@@ -16,7 +16,7 @@ export class HeroesComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
   addingHero = false;
-  error:any; 
+  error: any;
 
   constructor(
     private _router: Router,
@@ -26,32 +26,37 @@ export class HeroesComponent implements OnInit {
     this._heroService
         .getHeroes()
         .then(heroes => this.heroes = heroes)
-        .catch(error => this.error = error);//TODO: Display error message
+        .catch(error => this.error = error); // TODO: Display error message
   }
-  
-  addHero(){
+
+  addHero() {
     this.addingHero = true;
     this.selectedHero = null;
   }
-  
+
+  close(savedHero: Hero) {
+    this.addingHero = false;
+    if (savedHero) { this.getHeroes(); }
+  }
+
   // #docregion delete
-  delete(hero:Hero, event:any){
-    event.stopPropagation(); 
+  delete(hero: Hero, event: any) {
+    event.stopPropagation();
     this._heroService
         .delete(hero)
         .then(res => {
           this.heroes = this.heroes.filter(h => h.id !== hero.id);
         })
-        .catch(error => this.error = error);//TODO: Display error message
+        .catch(error => this.error = error); // TODO: Display error message
   }
   // #enddocregion delete
 
   ngOnInit() {
     this.getHeroes();
   }
 
-  onSelect(hero: Hero) { 
-    this.selectedHero = hero; 
+  onSelect(hero: Hero) {
+    this.selectedHero = hero;
     this.addingHero = false;
   }
 

public/docs/ts/latest/tutorial/toh-pt6.jade

@@ -72,14 +72,18 @@ code-example(format="." language="bash").
 
   In our previous implementation we created a promise ourselves and resolved it immediately. When using `Http` we no longer have to create the promise manually. Instead `Http` will create it for us, but we have to call `toPromise()` to get it.
 
-  In the `then` we convert the response to a json object by calling `res.json()`.
+  In the `then` we convert the response to a json object by calling `response.json()`.
 
-  Our api follows the convention of returning the result wrapped in a `data` property, but we don't want to expose this to the caller, so we flatten the response by returning `res.data`.   
+  Our api follows the convention of returning the result wrapped in a `data` property, but we don't want to expose this to the caller, so we flatten the response by returning `response.data`.   
 
 :marked
   ### Error Handling
 
-  At the end we are calling `catch` and passing in an error handler. This is an important step since it allows us to catch any error returned by the api. In the service we log the error and return the rejected promise. It's important that the service returns the rejected promise to the component, so that we can display an error message to the user.   
+  At the end we are calling `catch` and passing in an error handler. 
+  This is an important step since it allows us to catch any error returned by the api.
+  In the service we log the error and return the rejected promise. 
+  It's important that the service returns some form — perhaps a user friendly form — 
+  of the rejected promise to the component, so that we can display a proper error message to the user.   
 +makeExample('toh-6/ts/app/hero.service.ts', 'error-handler', 'app/hero.service.ts (Error handler)')(format=".")
 
 :marked