javascript - http Action 工厂 AngularJS 和 typescript

Question

我在使用 Typescript 时遇到一些困难。

如果我用 Javascript 在 AngularJS 中创建一个工厂，如下所示:

;(function () { 'use strict';

angular.module('mercuryServices')
    .factory('Ride', RideModelFactory);

RideModelFactory.$inject = [
    '$http',
    '$resource'
];

function RideModelFactory(
    $http,
    $filter,
    $resource
) {
    return {
        get : function() {
            return $http.get('/api/rides/');
        },
        save : function(
            rideData
        ) {
            //rideData.ridedate = $filter('date')(rideData.ridedate, "dd-MM-yyyy HH:mm:ss");
            console.log(rideData);
            return $http({
                method: 'POST',
                url: '/api/rides/',
                headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                data: $.param(rideData)
            });
        },
        delete : function(
            id
        )
        {
            return $http.delete("/api/rides/" + id);
        },
        update : function(
            id,
            rideEdit
        )
        {
            return $http({
                method: 'PATCH',
                url: '/api/rides/' + id,
                headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                data: $.param(rideEdit)
            });
        },
        show : function(
            id
        )
        {
            return $http.get('/api/rides/' + id);
        }
    }
}

})();

这将如何转换为 Typescript？这是我到目前为止所拥有的，但我收到错误:“Provider 'RideModelFactory' 必须从 $get 工厂方法返回一个值。”

module mercuryServices {
'use strict';

export interface IRideModelFactory
{
    Store(rideData: string[]);
}

export class RideModelFactory {

    public static $inject = [
        '$http'
    ];

    http: ng.IHttpService;

    constructor($http: angular.IHttpService) {
        this.http = $http;
    }

    Store(rideData: string[])
        {
            return{
                save: function(
                    rideData
                ){
                    console.log(rideData);
                    return this.http({
                        method: 'POST',
                        url: '/api/rides/',
                        headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                        data: $.param(rideData)
                    });
                }
            }
        }
}

angular.module('mercuryServices')
    .factory('RideModelFactory', RideModelFactory);

}

Answer 1

如果您只想构建一个公开一些方法而没有任何其他功能的“服务”，我的建议是仅使用 Angular 服务。使用 TypeScript 时，只需声明一个类 SampleService 并在 Angular 模块中注册此构造函数即可，如下所示:

class SampleService {
  constructor(...) {}
  someMethod() {}
}
angular.module("sampleapp", [])
  .service("SampleService", SampleService)

然后，Angular 通过new您传递的函数来创建服务的实例。当使用factory方法注册工厂时，情况并非如此。传递给 factory 的方法在调用时必须返回一个对象，如下所示:

function SomeFactoryFunction() {
  return {
    someMethod: function() {...}
  }
}

所以如果你想使用工厂，你必须编写一个正确的工厂函数或者自己实例化给定的类。这种方法的缺点是您必须重复依赖项列表。

angular.module("sampleapp", [])
  .factory("SampleFactory", ($http) => new SampleFactory($http))

但是，除非您对工厂有特定的原因，否则只需使用 service 并让 Angular 实例化您的服务类。

我构建了一个小 jsbin，展示了如何将 TypeScript 与 Angular 工厂一起使用的不同方法:http://jsbin.com/walati/71/edit?html,js,output

如果您对使用工厂比常规服务有优势的更多细节感兴趣，请参阅 Todd Motto 的这篇精彩文章:https://toddmotto.com/factory-versus-service

我的建议是在适当的地方使用类，而不是试图将所有内容都放入一个类中。您可以轻松编写一些类型良好的函数，该函数返回一个实现您在项目中定义的接口(interface)的对象。