Using jshint with AngularJS and Controllers

Question

I am trying to incorporate JSHint into my build process. The app that I'm building uses AngularJS. Currently, I have a conflict that I'm not sure how to resolve. When I build my app, I get a JSHint error that says:

   src\app\app.js
      3 |var myApp = angular.module('myApp', []);
             ^ Redefinition of 'myApp'.

>> 1 error in 2 files
Warning: Task "jshint:source" failed. Use --force to continue.

I get this error because in my .jshintrc file, I have the following:

"predef": ["angular", "myApp"],

If I remove "myApp", I get a different error that says:

src\app\account\welcome.html.js
   3 |myApp.controller('WelcomeController', ['$scope', function($scope) {
      ^ 'myApp' is not defined.

1 error in 2 files

The reason I am defining a controller like that is because according to the AngularJS documentation, you should not define controllers in the global scope. As you can see, its like I'm damned if I do, and damned if I don't. How do I follow the AngularJS best recommendations while still including JSHint in my build process?

Thank you!

Answer 1

I think you can fix this with a globals key in the .jshintrc file

{
    "node": true,
    "browser": true,
    "esnext": true,
    "bitwise": true,
    "camelcase": true,
    "curly": true,
    "eqeqeq": true,
    "immed": true,
    "indent": 4,
    "latedef": true,
    "newcap": true,
    "noarg": true,
    "quotmark": "single",
    "undef": true,
    "unused": true,
    "strict": true,
    "trailing": true,
    "smarttabs": true,
    "multistr": true,
    "globals": {
        "myApp": false
    }
}