Does jshint understand Angular?

Question

jshint is throwing an error when defining an angular module (or directive, or factory) as recommended by the Angular style guides (by John Papa or Todd Motto). For example, for a controller like this:

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);

    function theController() {...}

})();

... jshint throws this error:

'theController' was used before it was defined.

The angular app works perfectly despite these errors. However I don't know why jshint protests...

What am I missing? I wonder if jshint is a good evaluator of the quality of the angular code (despite it is included with popular packages as generator-angular) or it's me that I am doing something wrong (although my app works).

Thanks in advance!

Answer 1

Use the latedef property and set it to false. This allows hoisting of functions, which IMO is fine. But still reports hoisting of vars, which is bad IMO

Answer 2

well first of include angular in your "globals variables", for example:

"globals": { // Global variables.
        "jasmine": true,
        "angular": true,
        "browser": true,
        "element": true,
        "by":true,
        "io":true,
        "_":false,
        "$":false
    }

then move your function definition before you reference it from angular.

(function () {
    'use strict';

    function theController() {...}

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);
})();

Answer 3

So another option, that makes every linter happy, is to declare the variable that'll hold the function first, use it as a param, and then define it.

But personally I'm not sure I love the flow here. I think I like jack's answer better, but this is a little closer to what Papa seems to prefer, if you're down with his style guide. Actually, I'm not sure why this isn't what he recommends, if he really wants functions to appear after they're used (and he does). Otherwise, you can't use his style with latedef set to true in JSHint -- or JSLint at all.

(function () {
    'use strict';
    var theController;

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);


    theController = function () {
        return "so jslint doesn't complain about empty blocks";
    };
}());