Rewriting angularJS services to angular2

Question

I am working on this project in which I need to rewrite services from angular1 to angular2.

for ex.

pm.service.js(angularJS)

angular.module('projects').factory('ProjectsService', ['$resource', function ($resource) {
    var data = $resource('/pm/projects/:id/:action', {id: '@id', action: '@action'}, {
        getAllProjects: {method: 'GET', isArray: true, interceptor: {response: function (response) {
                    return response.data;
                }}},
        getProjectById: {method: 'GET', params: {id: '@id'}, isArray: true, interceptor: {response: function (response) {
                    return response.data;
                }}},
        saveProject: {method: 'POST', interceptor: {response: function (response) {
                    return response.data;
                }}},
        updateProject: {method: 'PUT', interceptor: {response: function (response) {
                    return response;
                }}},
        deleteProject: {method: 'DELETE', interceptor: {response: function (response) {
                    return response;
                }}},
        exportProject: {method: 'POST', params: {id: '@id', action:'@action'} , interceptor: {response: function (response) {
                    return response.data;
                }}}
    });
    return data;
}]);

I wrote its equivalent in angular2 Like this:

pm.service.ts(angular2)

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class ProjectsService {
    constructor(private http: Http) { }    
    getAllProjects(baseUrl:string) {
        return this.http.get(baseUrl+'/pm/projects/')
                        .map((res: Response) => res.json()).catch(this.handleError);
    }

    getProjectById(id:string,baseUrl:string){
        return this.http.get(baseUrl+'/pm/projects/'+id)
                        .map((res: Response) => res.json()).catch(this.handleError);
    }

    handleError(error: any) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

But I cant figure out how to make PUT,DELETE and POST requests using http_providers in angular2 i.e. I dont know how to write remaining functions in angular2 which will perform the required operations.

I tried multiple blogs but couldn't find the solution.

I would just like to know How to write equivalent services in angular2.

Picci · Accepted Answer · 2016-05-05 05:55:10Z

2

Angular2 http client in addition to the get method (which you are using in your code) exposes also post, put and delete methods. You need to use such methods to implement the other operations.

I hope it helps

MORE DETAILS AS PER COMMENT

This is a fragment of code that shows ho to use http PUT.

let myUrl = this._environment.baseRestServicesUrl + serviceIdentifier;
    let options = this.getOpionsForPost();
    let jsonString = JSON.stringify(inProduct);
    return this._http.post(myUrl, jsonString, options)
                    .catch(this.handleError);

and

private handleError (error: Response) {
    return Observable.throw(JSON.stringify(error));
}

private getOpionsForPost() {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new RequestOptions({headers: headers});
}

edited May 5, 2016 at 5:55

answered May 5, 2016 at 4:39

Picci

17.8k16 gold badges80 silver badges125 bronze badges

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

2 Comments

Bhushan Gadekar Over a year ago

@i have used fet,post,delete but for put I also need to pass the object.but its not accepting object as parameter for eg.

updateWorkspace(workspace_id:string,workspace:Object,baseUrl:string){         return this.http.put(baseUrl+'/pm/workspaces/'+workspace_id,workspace)                         .map((res: Response) => res.json()).catch(this.handleError);     }

Picci Over a year ago

Some more details added in the answer

mayur · Accepted Answer · 2016-05-05 05:42:07Z

1

   import {Headers, Http, Response} from 'angular2/http';


   public Foo(params: Object, data: string) {
   let url: string = 'String Url path'

    // Eg for post
    return this.http.post(url, data, {headers: this.jsonHeaders}).map((res: Response) => res.json());

   // Eg for delete
   return this.http.delete(url, {headers: this.jsonHeaders});
   }

answered May 5, 2016 at 5:42

mayur

3,62826 silver badges38 bronze badges

Collectives™ on Stack Overflow

Rewriting angularJS services to angular2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related