1

Q) Can anyone explain how to achieve this with a clear example?

I've done the Angular2 with TypeScript tutorial here:

https://angular.io/docs/js/latest/quickstart.html

I want to replace the mock-heroes.ts and get the hero.service.ts to fetch real http data. E.g. from here:

http://jsonplaceholder.typicode.com/users

But Google haven't written the next part of the tutorial.

Help would be greatly appreciated!

Dave
  • 5,283
  • 7
  • 44
  • 66

2 Answers2

2

You need to leverage the Http class. After injecting it, you can use it to get data asynchronously:

@Component({
  template: `
    <ul>
     <li *ngFor="#user of users | async">{{user.name}}</lu>
    </ul>
  `
})
export class AppComponent {
  constructor(private http:Http) {
    this.users = this.http.get(
      'http://jsonplaceholder.typicode.com/users').map(res=>res.json());
  }
}

Angular2 leverages observables at this level. You can use the async pipe or subscribe a callback...

Don't forget to set the HTTP_PROVIDERS when bootstraping your application:

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Ok, but how would I use this with a "component.ts" calling a method in the "service.ts" file though? Or does it have to be done in the constructor? Thanks. – Dave Feb 15 '16 at 15:33
  • It's related to the way you handle modules. SystemJS is responsible to load the file content on import { something } from 'module'... – Thierry Templier Feb 15 '16 at 15:59
  • Sorry, I think you misunderstand my question. How would I change your example so that the "getData" method is in a separate service, and it is called for example on a button click in a separate "component". Like how the tutorial I mentioned is organised already. – Dave Feb 15 '16 at 16:29
  • 1
    Oh sorry! I think that this answer could help you: http://stackoverflow.com/questions/34450131/how-to-consume-http-component-efficiently-in-a-service-in-angular-2-beta/34450948#34450948 – Thierry Templier Feb 15 '16 at 16:44
1

Like Thierry explained, you need to bootstrap the HTTP_PROVIDERS as well as import the HTTP class on the component/service where you will do the http call. Remember to include the http and rxjs javascripts in your index.html.

The following service replaces the mock Heroes data with your json.

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import 'rxjs/Rx'; 

@Injectable()
export class HeroService {
  private _url = 'http://jsonplaceholder.typicode.com/users';
  constructor(private http: Http){}
  getHeroes() { 
    return this.http.get(this._url)
      .map(res => <any[]> res.json())
      .catch(function(err) {console.log("err")}) 
  }
}

To better illustrate what I mean, I made a quick plunker replacing the Heroes Mock data with the http.get request using the Json you provided. Hopefully this will be of some use to you.

Gabu
  • 388
  • 2
  • 11
  • Thanks, I'd already accepted Thierry's answer before yours appeared, but appreciate the effort and plunker example too. Cheers. – Dave Feb 16 '16 at 11:52
  • No problem, I just wanted to put an example in case others have a similar problem. Cheers~ – Gabu Feb 17 '16 at 23:46