AngularJS: Correct minify-able syntax when using resolve with controllers

Question

I'm using the resolve functionality with a couple of controllers to fetch some data before the rendering of a new view kicks in like this:

HomeCtrl.resolve = {
    pictures: function(Picture) {
        return Picture.getall();
    } 
};

How do I write this so the Picture-service, that is passed as an argument, doesn't get overwritten when minified?

Arun P Johny · Accepted Answer · 2013-04-02T11:25:34.287

54

You can inject the dependencies using the following pattern, it is minification proof

HomeCtrl.resolve = {
    pictures : ['Picture', function(Picture) {
                return Picture.getall();
            }]
};

edited Apr 02 '13 at 11:25

answered Apr 02 '13 at 11:20

Arun P Johny

7

any place where angular uses DI, you can use this syntax – Arun P Johny Apr 02 '13 at 11:54
1

Sadly, It's not working for me. HomeCtrl.resolve = { pictures : ['$q', function(a) {}] }; will report Unknown provider: aProvider <- a – wukong Aug 19 '14 at 04:09
1

@wukong If you need to inject the `$q` service you should do it like this `HomeCtrl.resolve = {pictures: ['$q', function($q) {}]}`, if you need to inject the `$q` service AND an `a` service, you should do it like this `HomeCtrl.resolve = {pictures: ['$q', 'a', function($q, a) {}]}` . – acrmuui Aug 19 '14 at 10:43
1

@acrmuui sry, it's my fault. The solution works. My code is something like `HomeCtrl.resolve = ['$q', function($q) {}]`. I expect angular is smart enough to handle this situation because I only have one dependency to resolve. It turns out that since `resolve` is array and aslo an object. Angular will treat it as a regular object! It is hard to find out the problem because the code will work without minify. From angular's perspective, the object is `{"0":"$q","1":function ($q){}}`. We need to wrap the function with `{something: ["$q", function ($q){}]}`. – wukong Aug 19 '14 at 14:00
why do the tuts not say this?! i completely forgot about DI issues! – DrogoNevets Oct 14 '14 at 08:55

score 2 · Answer 2 · answered Nov 19 '15 at 20:29

Another way to make resolve function minification safe:

HomeCtrl.resolve = {
    pictures: getPictures
};

getPictures.$inject = ['Picture'];
function getPictures(Picture){
    return Picture.getall();
}

This technique takes advantage of the fact that in javascript functions are also objects and, therefore, can have properties.

For more information, go to https://docs.angularjs.org/guide/di and search for "$inject".

2 Answers2