1

I've been going through the Angular 2 Tour of Heroes tutorial and I'm not understanding the lesson on using HTTP to fetch data from a service.

In this lesson in the Hero Service a variable heroesUrl is declared as 'app/heroes'.

  private heroesUrl = 'app/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);
  }

The data is declared in the in-memory-data service as a static array:

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let heroes = [
      { id: 11, name: 'Mr. Nice (api)' },
      { 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' },
      { id: 21, name: 'Mister Man' }
    ];
    return { heroes };
  }
}

But in the routing module 'heroes' (which I assume is the same as 'app/heroes') points to the HeroesComponent.

 const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

In the HeroesComponent the getHeroes() function calls the this.heroService.getHeroes() function:

  getHeroes(): void {
    //Result of heroService.getHeroes is a Promise
    this.heroService.getHeroes().then(heroesresult => this.heroes = heroesresult);
  }

On the surface it looks like HeroesComponent.getHeroes() calls HeroService.getHeroes() which then does a http.get back to the HeroesComponent, not to the data source.

It all works for me (like magic) but there is no explanation of how the data which is in the in-memory-data service is fetched by the call from HeroesService to this.http.get(this.heroesUrl).

Could somebody please help me understand?

1
  • private heroesUrl = 'app/heroes'; // URL to web api, that just a simulation url, when you develop your own app, just replace that url by your url Commented Nov 28, 2016 at 10:08

2 Answers 2

1

The 'app/heroes' URL is not referring to the routing module 'heroes'. It is referring to the heroes data object in in-memory-data-service.ts. So it is not magic; the URL is just referring to a data object, not a path.

The documentation at https://angular.io/tutorial/toh-pt6 is too terse to be clear and I've made suggestions for what needs to be improved at https://github.com/angular/angular.io/issues/3559

Sign up to request clarification or add additional context in comments.

Comments

0

It's definitely not magic.

What's happening is you're calling a get request to a in memory api !

Have a look at in-memory-api

Basically , the class InMemoryDataService , extends from a InMemoryDbService which creates a in memory api observable .

Think of it as a stub that has been created on the fly and then when you call get method the call will be redirected to that package (via xhrbackend) and then you get that hero list . .

1 Comment

Aaah, I think I get it now. Thanks @xe4me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.