Consuming a REST API with Angular2 Http-Service in Typescript

An example dataservice to call your favourite API.

Configuration

Its always a good thing if you have your configuration seperated stored anywhere in your application. I always go for a file like “app.constants.ts” where I store all my values. If anything changes there, like a version of the api which is stored in the url or the endpoint/server whatever, I can do those changes immediatelly at one point.

1 2 3 4 5 6 7 8

import { Injectable } from 'angular2/core';   @Injectable() export class Configuration {     public Server: string = "http://localhost:5000/";     public ApiUrl: string = "api/";     public ServerWithApiUrl = this.Server + this.ApiUrl; }

Notice the injectable attribute to generate the metadata to make the service available through DI in other modules.

You can read more about DI in anuglar 2 in this blog post Dependency Injection in Angular 2

Now we have this going we can generate our service:

The Service

First of all you have to create a module which only contains a service which is only responsible for calling an API with a specific endpoint.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

import { Injectable } from 'angular2/core'; import { Http, Response, Headers } from 'angular2/http'; import 'rxjs/add/operator/map' import { Observable } from 'rxjs/Observable'; import { MyTypedItem } from '../models/MyTypedItem'; import { Configuration } from '../app.constants';   @Injectable() export class DataService {       private actionUrl: string;     private headers: Headers;       constructor(private _http: Http, private _configuration: Configuration) {                  this.actionUrl = _configuration.ServerWithApiUrl + 'myItem/';                  this.headers = new Headers();         this.headers.append('Content-Type', 'application/json');         this.headers.append('Accept', 'application/json');     }       public GetAll = (): Observable<Response> => {         return this._http.get(this.actionUrl).map(res => res.json());     }       public GetSingle = (id: number): Observable<Response> => {         return this._http.get(this.actionUrl + id).map(res => res.json());     }       public Add = (itemName: string): Observable<Response> => {         var toAdd = JSON.stringify({ ItemName: itemName });           return this._http.post(this.actionUrl, toAdd, { headers: this.headers }).map(res => res.json());     }       public Update = (id: number, itemToUpdate: MyTypedItem): Observable<Response> => {         return this._http.put(this.actionUrl + id, JSON.stringify(itemToUpdate), { headers: this.headers }).map(res => res.json());     }       public Delete = (id: number): Observable<Response> => {         return this._http.delete(this.actionUrl + id);     } }

This dataservice gets the configuration we just did and the HTTP-Service via DI. We included it over the new module-loading-syntax. Also notice the typed items we included and the configuration we have to pull in to make it available.

It is also important to tell the http-calls which header to use. “Application/Json” in this case.

Now you can include, inject and use this service to make http-calls to your API like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import { Component, OnInit } from 'angular2/core'; import { CORE_DIRECTIVES } from 'angular2/common'; import { DataService } from '../services/dataService'; import { MyTypedItem } from '../models/MyTypedItem ';   @Component({     selector: 'my-item-component',     providers: [DataService],     templateUrl: 'app/myItem/myItem.component.html',     directives: [CORE_DIRECTIVES] })   export class MyItemComponent implements OnInit {     public myItems: MyTypedItem [];       constructor(private _dataService: DataService) { }       ngOnInit() {         this.getAllItems();     }          //...       private getAllItems(): void {         this._dataService             .GetAll()             .subscribe((data:MyTypedItem[]) => this.myItems = data,                 error => console.log(error),                 () => console.log('Get all Items complete'));     } }

I think this should be basically it. Pay attention to the typed answer you get from the service

1	(data:MyTypedItem[]) =>

and to the subsribe after calling the “GetAll”-Method from the service.

Angular 2 / ASP.NET CORE 1.0 Template With SignalR