Make angular provider written in typescript minification safe

Question

I have written an angular provider that needs $injector service to be injected in the $get function but I do not know how to write this in typescript and make it minification safe. Something like static $injector = ['']; notation that works for services and controllers.

Typescript:

export class ApiProvider implements IApiProvider {
    private baseRoute: string = '';
    private endpoints: { [name: string]: IApiEndPointConfig };

    static $inject = ['$injector']; //THIS DOES NOT WORK FOR PROVIDERS
    constructor() {
        this.baseRoute = '';
        this.endpoints = {};
    }

            // MORE CODE

    $get = ($injector: ng.auto.IInjectorService): { [name: string]: ApiEndpoint } => {
        var api: { [name: string]: ApiEndpoint } = {};
        var self:ApiProvider = this;
        angular.forEach(this.endpoints, (endpointConfig, name) => {
            api[name] = $injector.instantiate(ApiEndpoint, {
                baseRoute: self.baseRoute,
                endpointConfig: endpointConfig
            });
        });

        return api;
    };
}

The generated javascript for the $get function is:

this.$get = function ($injector) {
    var api = {};
    var self = _this;
    angular.forEach(_this.endpoints, function (endpointConfig, name) {
        api[name] = $injector.instantiate(Model.ApiEndpoint, {
            baseRoute: self.baseRoute,
            endpointConfig: endpointConfig
        });
    });

    return api;
};

And what I want it to be is something like:

this.$get = ['$injector', function ($injector) {
    var api = {};
    var self = _this;
    angular.forEach(_this.endpoints, function (endpointConfig, name) {
        api[name] = $injector.instantiate(Model.ApiEndpoint, {
            baseRoute: self.baseRoute,
            endpointConfig: endpointConfig
        });
    });

    return api;
}];

masimplo · Accepted Answer · 2014-05-27 09:27:09Z

16

I think I got it. After reading the $injector documentation more closely I found that the $inject string array notation can be used on any function. Thus I did something like:

constructor(){
   this.$get.$inject = ['$injector'];
}

$get = ($injector: ng.auto.IInjectorService): { [name: string]: ApiEndpoint } => {
    //using $injector
};

which produces:

this.$get = function ($injector) {
   //using $injector                    
};

this.$get.$inject = ['$injector'];

answered May 27, 2014 at 9:27

masimplo

3,8042 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

basarat Over a year ago

+1 This is the correct way to do this and the reason why github.com/borisyankov/DefinitelyTyped/blob/master/angularjs/… exists in the definition ;)

masimplo Over a year ago

Great find @basarat. I will have to start looking in the def files more.

basarat Over a year ago

I actually added that github.com/borisyankov/DefinitelyTyped/commit/… ;)

masimplo Over a year ago

Talk about access to the "source". Your Typescript+Angular contributions are much appreciated (I've seen you answer almost all related questions in SO). Nice typescript videos on youtube also.

gonzofish Over a year ago

it's so funny, when you see what you did here, it's like, duh, of course that's how you should do it

Collectives™ on Stack Overflow

Make angular provider written in typescript minification safe

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related