将 angularJS 服务重写为 angular2

Question

我正在做这个项目，我需要将服务从 angular1 重写为 angular2。

例如

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;
}]);

我在 angular2 中这样写了它的等价物：

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');
    }
}

但我不知道如何在 angular2 中使用 http_providers 发出 PUT、DELETE 和 POST 请求，即我不知道如何在 angular2 中编写将执行所需操作的剩余函数。

我尝试了多个博客，但找不到解决方案。

我只想知道如何在angular2中编写等效服务。

Answer 1

Angular2 http 客户端除了 get 方法（您在代码中使用的方法）外，还公开了 post、put 和 delete 方法。您需要使用此类方法来实现其他操作。

希望对你有帮助

根据评论提供更多详细信息

这是一段代码，显示如何使用 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);

和

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});
}

Answer 2

   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});
   }

将 angularJS 服务重写为 angular2

Rewriting angularJS services to angular2

angularjs

angular

crud

angular2-services