=> {
+
+ // TODO: send the error to remote logging infrastructure
+ console.error(error); // log to console instead
+
+ // TODO: better job of transforming error for user consumption
+ this.log(`${operation} failed: ${error.message}`);
+
+ // Let the app keep running by returning an empty result.
+ return of(result as T);
+ };
+ }
+
+}
diff --git a/src/app/hero.ts b/src/app/hero.ts
new file mode 100644
index 0000000..e3eac51
--- /dev/null
+++ b/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+ id: number;
+ name: string;
+}
diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css
new file mode 100644
index 0000000..05b8221
--- /dev/null
+++ b/src/app/heroes/heroes.component.css
@@ -0,0 +1,73 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 15em;
+}
+.heroes li {
+ position: relative;
+ cursor: pointer;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+}
+
+.heroes li:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+}
+
+.heroes a {
+ color: #888;
+ text-decoration: none;
+ position: relative;
+ display: block;
+ width: 250px;
+}
+
+.heroes a:hover {
+ color:#607D8B;
+}
+
+.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;
+ min-width: 16px;
+ text-align: right;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+
+.button {
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+ font-family: Arial;
+}
+
+button:hover {
+ background-color: #cfd8dc;
+}
+
+button.delete {
+ position: relative;
+ left: 194px;
+ top: -32px;
+ background-color: gray !important;
+ color: white;
+}
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
new file mode 100644
index 0000000..f9148a0
--- /dev/null
+++ b/src/app/heroes/heroes.component.html
@@ -0,0 +1,21 @@
+ My Heroes
+
+
+
+
+
+
+
+
diff --git a/src/app/heroes/heroes.component.spec.ts b/src/app/heroes/heroes.component.spec.ts
new file mode 100644
index 0000000..66518e4
--- /dev/null
+++ b/src/app/heroes/heroes.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+ let component: HeroesComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HeroesComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeroesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
new file mode 100644
index 0000000..db03e34
--- /dev/null
+++ b/src/app/heroes/heroes.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+
+@Component({
+ selector: 'app-heroes',
+ templateUrl: './heroes.component.html',
+ styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+
+ heroes: Hero[];
+
+ selectedHero: Hero;
+
+ constructor(private heroService: HeroService) { }
+
+ ngOnInit() {
+ this.getHeroes();
+ }
+
+ onSelect(h: Hero): void {
+ this.selectedHero = h;
+ }
+
+ getHeroes():void {
+ this.heroService.getHeroes()
+ .subscribe(heroes => this.heroes = heroes);
+ }
+
+ add(name: string): void {
+ name = name.trim();
+ if (!name) { return; }
+ this.heroService.addHero( { name } as Hero)
+ .subscribe(hero => this.heroes.push(hero));
+ }
+
+ delete(hero: Hero): void {
+ this.heroes = this.heroes.filter(h => h !== hero);
+ this.heroService.deleteHero(hero).subscribe();
+ }
+
+}
diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts
new file mode 100644
index 0000000..ff1f190
--- /dev/null
+++ b/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: 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/src/app/message.service.spec.ts b/src/app/message.service.spec.ts
new file mode 100644
index 0000000..63ecfd8
--- /dev/null
+++ b/src/app/message.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [MessageService]
+ });
+ });
+
+ it('should be created', inject([MessageService], (service: MessageService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/message.service.ts b/src/app/message.service.ts
new file mode 100644
index 0000000..59ac8fe
--- /dev/null
+++ b/src/app/message.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MessageService {
+
+ messages: string[] = [];
+
+ add(message: string) {
+ this.messages.push(message);
+ }
+
+ clear() {
+ this.messages = [];
+ }
+
+}
diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css
new file mode 100644
index 0000000..d08d9be
--- /dev/null
+++ b/src/app/messages/messages.component.css
@@ -0,0 +1,35 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+ color: red;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: lighter;
+}
+body {
+ margin: 2em;
+}
+body, input[text], button {
+ color: crimson;
+ font-family: Cambria, Georgia;
+}
+
+button.clear {
+ font-family: Arial;
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+}
+button:hover {
+ background-color: #cfd8dc;
+}
+button:disabled {
+ background-color: #eee;
+ color: #aaa;
+ cursor: auto;
+}
+button.clear {
+ color: #888;
+ margin-bottom: 12px;
+}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
new file mode 100644
index 0000000..1df7dfd
--- /dev/null
+++ b/src/app/messages/messages.component.html
@@ -0,0 +1,8 @@
+
+
+
Messages
+
+
{{message}}
+
+
-