2014-09-30 140 views
4

所以在注射在AngularJS一廠普通的老角,你會注入一個廠,像這樣:使用打字稿

(function(angular){ 
    "use strict"; 

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

現在使用打字稿,我試圖用$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中注入工廠的正確方法是什麼?

回答

12

app.factory('MyFactory',Services.MyFactory)這不起作用,永遠不會實例化。

是的。這是因爲作爲第二個參數傳遞的函數(MyFactory)決不會用new運算符調用。如果你想使用TypeScript類,你必須必須使用service而不是factory

new操作者的使用是服務和工廠之間的唯一區別,所以你沒有理由使用factory。兩者都是AngularJS中的單身人士。

+1

OK,我想這一點。感謝你及時的答覆。 – Sam 2014-09-30 04:08:57

+0

控制器是否像服務一樣注入?用「new」運算符調用嗎? – Sam 2014-09-30 04:10:58

+0

另外,$注入是否僅用於縮小目的? – Sam 2014-09-30 04:15:51

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

雖然接受的答案有幫助,但實際上這是問題的正確答案。 – crimbo 2015-11-02 14:03:52

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

}