Tuesday, 25 October 2016

Create a Angular2 service and send a HTTP Request using Typescript

In this post we are going to see how to make an http request from inside the angular2 service, For this first we have to inject the HTTP in the service layer using dependency injection. we are using the Observable API for catch the response of HTTP request. Observable is a Lazy API

























First we have to create a interface based on the data response , then we have to create a service which will invoke the Http call.


export interface IUser{
    id:number;
    name:string;
    username:string;
    email:string;
    address:IAddress;
    phone:string;
    website:string;
    company:ICompany;
    albums:IAlbum[];    
}

export interface ICompany{
    name:string;
    catchPharse:string;
    bs:string;
}

export interface IAddress{
    street:string;
    suite:string;
    city:string;
    zipcode:string;
    geo:IGeo;
}

export interface IGeo{
    lat:string;
    lon:string;
}

export interface IAlbum{
    albumId:number;
    id:number;
    title:string;
    url:string;
    thumbnailUrl:string;
}

then we have to create a service with HTTP as a dependency, the instance of the HTTP will be passed in constructor.



    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/observable';
    import { IUser,IAlbum } from './user';
    import 'rxjs/add/operator/catch'
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/do';

    @Injectable()
    export class DataService{

    private data:string[]=["Rajesh","suresh","ramu"];
    private url:string = "http://jsonplaceholder.typicode.com/users";

    constructor(private _http:Http){

    }

    getEmployees(): Observable<IUser[]>{
    return this._http.get(this.url)
    .map((response:Response)=><IUser[]>response.json())
    .do(data=>console.log("All : "+JSON.stringify(data)))
    .catch(this.HandleError);
    }

    getAlbums(id):Observable<any>{

    return this._http.get("http://jsonplaceholder.typicode.com/photos?albumId="+id)
    .map((response:Response)=><IAlbum[]>response.json())
    .do(data=>console.log("album "+JSON.stringify(data)))
    .catch(this.HandleError);       

    }


    private HandleError(error:Response){
        console.log(error);
        return Observable.throw(error.json().error || "server error");
    }

    addEmployee(name){
        this.data.push(name);
    }

    }



Next we have to invoke the call from inside the component , here we have to subscribe the request because return type of the method is a observable of particular type, in observable to get the response we have to subscribe , in subscribe we have three parameter, success, error, complete.



import { Component } from '@angular/core';
import { DataService } from './data.service';
import { IUser } from './user'

@Component({
    selector:'employee',
    template:`
    <div style="display:inline-block;width:400px;vertical-align:top">
        <h1>Employee </h1>
        <div>
            <input type="text" #emp />
            <button (click)="addEmployee(emp.value)" 
                class="btn btn-sm btn-primary">Add Emp</button>
            <button (click)="getEmployee()" 
                class="btn btn-sm btn-primary">Get Employees</button>
            <div style="margin-top:20px">
            <ul class="list-group" style="display:-webkit-box;overflow-x:scroll">
                <li class="panel list-group-item-primary" 
                *ngFor="let e of employees" style="list-style:none;">
                <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{e.username}}</h3>
                </div>
                <div class=""panel-body>
                    <div class="text-info" style="padding:5px;">{{e.name}} 
                    <span class="btn btn-sm btn-primary" 
                        (click)="getAlbum(e.id)">Get Album</span></div>
                    <div class="text-primary" style="padding:5px;"> 
                        {{e.address.city}},{{e.address.zipcode}}</div>
                    <div *ngIf="e.albums">
                    <ul class="list-group">
                    <li class="list-group-item" *ngFor="let alb of e.albums">
                        <div class="panel panel-default">
                            <div class="panel-heading">{{alb.title}}</div>
                            <div class=""panel-body>                       
                                <img [src]="alb.thumbnailUrl" />
                            </div>
                        </div>
                    </li>
                    </ul>
                    </div>
                </div>
                </div>
                </li>
            </ul>
            </div>
        </div>
    </div>
    `   
})
export class EmployeeComponent
{
    employees:IUser[];
  
    constructor(private dataservice:DataService){
        
    }

    addEmployee(employeeName)
    {
        this.dataservice.addEmployee(employeeName);
    }

    getEmployee(){
        this.dataservice.getEmployees()
        .subscribe(
            customer=>this.employees=customer,
            error=>console.log("error"+error)
            );
       
    }

    getAlbum(id){
        this.dataservice.getAlbums(id)
        .subscribe(
            albums=>this.employees.find(emp=>emp.id==id).albums = albums
            );
    }
}



Next thing we have to inject the module in to root module then start the app to run



    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    
    import { BaseRequestOptions, Http, Headers } from '@angular/http';
    import { webformComponent } from './Component/web.component'
    import { PrintComponent } from './Component/print.component';
   
    import { EmployeeComponent,StudentComponent } from './employee.component'
    import { DataService } from './data.service';

    @NgModule({
        imports: [BrowserModule,
                  FormsModule,
                  HttpModule],
        exports: [],
        declarations: [webformComponent,
                       PrintComponent,        
                       EmployeeComponent],
        providers:[DataService],
        bootstrap:[webformComponent]
    })
    export class AppModule { 

    }




    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    import { HelloModule } from './hello.module'

    const platform = platformBrowserDynamic();

    let moduleref = platform.bootstrapModule(AppModule);



Output:
********************










When you click on the Get Employees, it will fetch the information














When user click on the Get Album for each user this will fetch the album info










From this post you can learn how to invoke a Http call from the angular2 service







1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete