angularjs - Injicera beroenden i statisk fabrik i Typescript

Jag har en tjänst skriven i TypeScript som en klass. I den här klassen definierar jag en statisk fabrik där jag injicerar beroenden.

När jag komprimerar min applikation komprimeras beroendena och jag får ett fel med odefinierad leverantör.

Här är min tjänst:

export class TInterceptor {    
public static $inject = ['$q', '$rootScope'];
public static Factory($q:ng.IQService, $rootScope:ng.IRootScopeService)
{
  return new TInterceptor($q, $rootScope);
}
constructor(private $q:ng.IQService, private $rootScope:ng.IRootScopeService){}...}

Tjänst som kallas här:

  angular
    .module('t')
    .config(config);

  function config($httpProvider:ng.IHttpProvider)
  {
    $httpProvider.interceptors.push(TInterceptor.Factory);
  }

Min fråga är, hur säkerställer jag att beroenden skyddas från att skrivas över när jag komprimerar min kod?

Svar #1

Registrera fabriken. t.ex,

angular.module('myapp').factory('interceptorFactory', ['$q','$rootScope',TInterceptor.Factory]);

och i konfigurationsblocket ange fabriksnamn:

$httpProvider.interceptors.push('interceptorFactory');

Eller tillhandahåll array också (gissningsvis borde det fungera lika bra eftersom det internt använder $injector.invoke, det är inte en sträng)

 $httpProvider.interceptors.push(['$q','$rootScope', TInterceptor.Factory]);

Du glömde även den explicita annoteringen på config-blocket.

.config(['$httpProvider', config]);

Svar #2

REDIGERA: Uppdatering för Typescript 1.6

Nu när Typescript 1.6 är ute, med stöd för klassexpressioner, kan du använda direkt en klassexpression med en closure för att använda dina injektioner:

angular.module('myApp')
    .factory('MyFactory', function($q, $http) {

        return class {

            constructor(data) {
                // Here you have access to $q and $http
            }
        }
    })

Typescript 1.5

Typescript tillåter inte klassexpressioner för tillfället fram till version 1.6, jag använder personligen den här syntaxen för tillfället:

class MyClass {

    constructor(
        private $q: ng.IQService,
        private $http: ng.IHttpService
        data) {

    }
}

Sedan använder jag den standard Angular-factorydefinition som tillåter att använda ng-annotate under byggprocessen, och jag currifyar klassen med factory-injektioner innan jag returnerar den:

angular.module('myApp')
    .factory('MyFactory', function($q, $http) {

        var factory = MyClass

        // Return curried MyClass
        return Function.prototype.bind.apply(factory,
            Array.prototype.concat.apply([factory], arguments))
    });

Returlinjen är motsvarande:

return MyClass.bind(MyClass, $q, $http)

Det är mindre läsbart, men kommer att förhindra att du skriver dina beroenden två gånger varje gång du ändrar dem.

Eller om du har Lodash eller Underscore, kan du göra det på ett mer elegant sätt:

return _.curry(MyClass).apply(this, arguments)

Jag kan då instansiera min klass endast genom att tillhandahålla väsentliga data:

new MyFactory(data)

Relaterade artiklar