up to observables section

src/app/app.module.ts

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

src/app/hero-detail.component.html

@@ -7,4 +7,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/hero-detail.component.ts

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

src/app/hero.service.ts

@@ -1,24 +1,71 @@
 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 {
 
+  private heroesUrl = 'api/heroes';
+
+  constructor(private http: Http) {}
+
   getHeroes(): Promise<Hero[]> {
-    return Promise.resolve(HEROES);
+    return this.http.get(this.heroesUrl)
+    .toPromise()
+    .then(response => response.json().data as Hero[])
+    .catch(this.handleError);
+
   }
 
-  getHeroesSlowly(): Promise<Hero[]> {
-    return new Promise(resolve => {
-      // Simulate server latency with 2 second delay
-      setTimeout(() => resolve(this.getHeroes()), 2000);
-    });
+  private handleError(error: any): Promise<any> {
+    console.log('An error occurred', error);
+    return Promise.reject(error.message || error);
   }
 
+  // getHeroesSlowly(): Promise<Hero[]> {
+  //   return new Promise(resolve => {
+  //     // Simulate server latency with 2 second delay
+  //     setTimeout(() => resolve(this.getHeroes()), 2000);
+  //   });
+  // }
+
   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);
+  }
+
+  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);
+  }
+
 }

src/app/heroes.component.css

@@ -57,3 +57,10 @@ button {
 button:hover {
   background-color: #cfd8dc;
 }
+button.delete {
+  float:right;
+  margin-top: 2px;
+  margin-right: .8em;
+  background-color: gray !important;
+  color:white;
+}

src/app/heroes.component.html

@@ -1,9 +1,18 @@
 <h2>My Heroes</h2>
+<div>
+  <label>Hero name:</label> <input #heroName />
+  <button (click)="add(heroName.value); heroName.value=''">
+    Add
+  </button>
+</div>
 <ul class="heroes">
   <li *ngFor="let hero of heroes"
     [class.selected]="hero === selectedHero"
     (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+    <span class="badge">{{hero.id}}</span>
+    <span>{{hero.name}}</span>
+    <button class="delete"
+    (click)="delete(hero); $event.stopPropagation()">x</button>
   </li>
 </ul>
 <div *ngIf="selectedHero">

src/app/heroes.component.ts

@@ -34,6 +34,26 @@ import { HeroService } from './hero.service';
     gotoDetail(): void {
       this.router.navigate(['/detail', this.selectedHero.id]);
     }
+
+    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; }
+          });
+    }
+
   }
 
 

src/app/in-memory-data.service.ts

@@ -0,0 +1,19 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
+  createDb() {
+    const heroes = [
+      { id: 0,  name: 'Zero' },
+      { 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};
+  }
+}