From: Kai Moritz <kai@juplo.de>
Date: Sat, 16 May 2020 07:30:55 +0000 (+0200)
Subject: 6: Get Data from a Server
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=f48ad6f3e3fa28778b2648a505706cc95ee51978;p=examples%2Fangular-tour-of-heroes

6: Get Data from a Server
c) Heroes and HTTP - Get Heroes with HttpClient
---

diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
index 649b856..d44f22f 100644
--- a/src/app/hero.service.ts
+++ b/src/app/hero.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Observable, of, EMPTY } from 'rxjs';
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
+import { HttpClient } from '@angular/common/http';
 import { MessageService } from './message.service';
 
 
@@ -10,15 +11,19 @@ import { MessageService } from './message.service';
 })
 export class HeroService {
 
-  constructor(private messageService : MessageService) { }
+  private heroesUrl = 'api/heroes';  // URL to web api
 
-  getHeroes() : Observable<Hero[]> {
-    this.messageService.add('HeroService: fetching heroes...');
-    return of(HEROES);
+  constructor(
+    private http: HttpClient,
+    private messageService: MessageService) { }
+
+  getHeroes(): Observable<Hero[]> {
+    this.log('fetching heroes...');
+    return this.http.get<Hero[]>(this.heroesUrl);
   }
 
   getHero(id: number): Observable<Hero> {
-    this.messageService.add(`HeroService: requested hero id=${id}`);
+    this.log(`requested hero id=${id}`);
     const found: Hero | undefined = HEROES.find(hero => hero.id === id);
     if (found === undefined) {
       return EMPTY;
@@ -26,4 +31,9 @@ export class HeroService {
       return of(found);
     }
   }
+
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add(`HeroService: ${message}`);
+  }
 }