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,

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

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";
    };
}());

Answer 3

Your code should work, but jshint is going to try and get you to code in a very strict manner. At the very least it's a "good practice" to have your functions defined before you use them. As I mentioned in the comment above, I think older javascript engines execute from top to bottom (can't remember for sure though and can't test) - so if you're going for wide-as-possible support you will want to listen to jshint.

Something worth noting here is that if you use the var keyword to define your function, you will get an error - best explained by example:

This works (http://jsfiddle.net/ryanwheale/kr8L825p/)

(function() {
    try {
        foo();
    } catch(ex) {
        alert("ahhhhh, what's going on?!?!?\n\n" + ex.message);
    }

    function foo() {
        alert("I was hoisted to the top of this scope before execution :)");
    }
})();

... but this doesn't (http://jsfiddle.net/ryanwheale/kr8L825p/4/)

(function() {
    try {
        foo();
    } catch(ex) {
        alert("ahhhhh, what's going on?!?!?\n\n" + ex.message);
    }

    var foo = function() {
        alert("I was hoisted to the top of this scope before execution :)");
    }
})();

Answer 4

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