模拟web API 利用HTTP服务实现更新添加删除英雄

Author: CarolSum

src/app/app.module.js

@@ -1,7 +1,10 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import { HttpModule } from '@angular/http';
+
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
 
 import { AppComponent }  from './app.component';
 import { HeroDetailComponent } from './hero-detail.component';
@@ -16,6 +19,8 @@ import { AppRoutingModule } from './app-routing.module';
     BrowserModule,
     FormsModule,
     AppRoutingModule,
+    HttpModule,
+    InMemoryWebApiModule.forRoot(InMemoryDataService),
   ],
   declarations: [
     AppComponent,

src/app/app.module.js.map

@@ -6,4 +6,5 @@ <h2>{{hero.name}} details!</h2>
     <input [(ngModel)]="hero.name" placeholder="name">
   </div>
   <button (click)="goBack()">Back</button>
+  <button (click)="save()">Save</button>
 </div>

src/app/app.module.ts

@@ -29,4 +29,9 @@ export class HeroDetailComponent implements OnInit {
   goBack(): void{
     this.location.back();
   }
+
+  save(): void{
+    this.heroService.update(this.hero)
+      .then(() => this.goBack());
+  }
 }

src/app/hero-detail.component.html

@@ -1,16 +1,35 @@
 import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http'; 
+
+import 'rxjs/add/operator/toPromise';
+
 import { Hero } from './hero';
-import { HEROES } from './mock-heroes';
 
 @Injectable()
 export class HeroService{
-  getHeroes(): Promise<Hero[]>{
-      return Promise.resolve(HEROES);
+  private heroesUrl = 'api/heroes';  // URL to web api
+
+  constructor(private http: Http) { }
+
+  getHeroes(): Promise<Hero[]> {
+    return this.http.get(this.heroesUrl)
+               .toPromise()
+               .then(response => response.json().data as Hero[])
+               .catch(this.handleError);
   }
 
+  private handleError(error: any): Promise<any> {
+    console.error('An error occurred', error); // for demo purposes only
+    return Promise.reject(error.message || error);
+  }
+
+
   getHero(id: number): Promise<Hero>{
-    return this.getHeroes()
-        .then(heroes => heroes.find(hero => hero.id === id));
+    const url = `${this.heroesUrl}/${id}`;
+    return this.http.get(url)
+      .toPromise()
+      .then(response => response.json().data as Hero)
+      .catch(this.handleError);
   }
 
   getHeroesSlowly(): Promise<Hero[]> {
@@ -19,4 +38,30 @@ export class HeroService{
       setTimeout(() => resolve(this.getHeroes()), 2000);
     });
   }
+
+  private headers = new Headers({'Content-Type': 'application/json'});
+  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);
+  }
+
+  create(name: string): Promise<Hero>{
+    return this.http
+      .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
+      .toPromise()
+      .then(res => res.json().data as Hero)
+      .catch(this.handleError);
+  }
+
+  delete(id: number): Promise<void>{
+    const url = `${this.heroesUrl}/${id}`;
+    return this.http.delete(url, {headers: this.headers})
+      .toPromise()
+      .then(() => null)
+      .catch(this.handleError);
+  }
+
 }