使用Typescript在AngularJS中注入工厂

Question

所以在普通的老Angular中，你会像这样注入一个工厂：

(function(angular){
    "use strict";

    var app = angular.module('app', []);
    app.factory('MyFactory', ['$http', function($http) {
    ....
    });
}());

现在使用Typescript，我试图像这样使用$inject ：

module Services {
    export class MyFactory {
        static $inject = ['$http'];
        constructor(private $http: ng.IHttpService) {
        }
    }
}

var app = angular.module('app', []);

app.factory('MyFactory', Services.MyFactory) //<-- This does not work, never is instantiated.

app.factory('MyFactory', ['$http', Services.MyFactory]); //<-- No deal, it has constructor dependencies

// Seems you have to do this
app.factory('MyFactory', ['$http', ($http) => new Services.MyFactory($http)]);

使用Typescript在Angular中注入工厂的正确方法是什么？

Answer 1

在这个todoMvc示例项目中，他们将工厂函数声明为函数而不是类。

module Services {
  export function MyFactory($http: ng.IHttpService): string{
     var stuff = "foo";
     return stuff;
  }
  MyFactory.$inject = ["$http"];
}

app.factory("myFactory", Services.MyFactory);

由于指令是工厂函数，因此这是我们（在我的项目中）用于指令的语法。 然后函数的返回类型是ng.IDirective 。

我也同意basarat使用.service在你的情况下更好。 这仅供参考，如何在打字稿中编写角度工厂。

Answer 2

app.factory（'MyFactory'，Services.MyFactory）这不起作用，永远不会被实例化。

真正。 这是因为从未使用new运算符调用作为第二个参数（ MyFactory ）传递的函数。 如果要使用TypeScript类，则必须使用service而不是factory 。

new运算符的使用是服务和工厂之间的唯一区别，因此您没有理由使用factory 。 两者都是AngularJS中的单身人士。

Answer 3

以我创建了一个httpget包装器为例

module portal.services {


export class apiService {


    public getData<T>(url?:string): ng.IPromise<T> {

        var def = this.$q.defer();
        this.$http.defaults.headers.common.token = window.sessionStorage[localStorageNames.bearerToken] || 'UA';
        this.$http.get(this.config.apiBaseUrl + url).then((successResponse) => {

            if(successResponse)
                def.resolve(successResponse.data);
            else
                def.reject('server error');

        }, (errorRes) => {

            def.reject(errorRes.statusText);
        });

        return def.promise;
    }


    static $inject = ['$q','$http', 'config'];

    constructor(public $q:ng.IQService,public $http:ng.IHttpService, public config:interfaces.IPortalConfig) {


    }

}



}


module portal {
   export var app:ng.IModule =angular.module('portal',[]);
    app.service(services);

}