使用 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

以这个例子为例，因为我已经创建了一个 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);

}

Answer 3

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

没错。这是因为作为第二个参数 (MyFactory) 传递的函数永远不会使用 new 运算符调用。如果你想使用 TypeScript 类，你必须使用service 而不是factory。

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