Http is in a seperate module
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
// app.component.ts
import { Component } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import { Vehicle, VehicleService } from './vehicle.service';
import { VehicleListComponent } from '.vehicle-list.component';
@Component({
'selector': 'my-app',
'template': '<my-vehicle-list></my-vehicle-list>',
'directives': [ VehicleListComponent ],
'providers': [
HTTP_PROVIDERS,
VehicleService
]
})
export class AppComponent() {
}
// vehicle.service.ts
@Injectable()
export class VehicleService() {
constructor(private _http: Http) { }
getVehicles() {
return this._http.get('api/vehicles.json') // Make and return the async GET call
.map((response: Response) => <Vehicle[]>response.json().data) // Map the response
.catch(this.handleError);
}
/**
* Method tracking http error responses.
*/
private handleError(error: Response) {
console.log(error);
return Observable.throw(error.json().error || 'Server error');
}
}
// vehicle-list.component.ts
constructor(private _vehicleService: VehicleService) { }
ngOnInit() { this.getHeroes(); }
getHeroes() {
this._vehicleService.getVehicles()
.subscribe(
vehicles => this.vehicles = vehicles,
error = this.errorMessage = <any>error
);
}