使用Typescript在AngularJS中注入工厂

时间:2014-09-30 04:05:30

标签: angularjs typescript

所以在普通的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中注入工厂的正确方法是什么?

3 个答案:

答案 0 :(得分:16)

在这个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在你的情况下更好。这仅供参考,您可以在打字稿中编写角度工厂。

答案 1 :(得分:13)

  

app.factory(&#39; MyFactory&#39;,Services.MyFactory)这不起作用,永远不会被实例化。

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

new运算符的使用是服务和工厂之间仅差异,因此没有原因使用{{ 1}}。两者都是AngularJS中的单身人士。

答案 2 :(得分: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);

}