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
    }
}

Answer 2

Why define a myApp variable at all? I define my app, controller, etc. this way. You can chain multiple controllers, factories, etc.:

angular.module('myApp',[])

.controller("MainCtrl", function($scope) {
    $scope.person = {
        nfname: 'John',
        lname: 'Deighan',
        email: 'john.deighan@gmail.com',
    };
});

Answer 3

The last given example is good, but as said if you call .module() with an empty array as a second argument you will redifine your module dependencies. To avoid that, only pass the module name to .module()

angular.module('myApp')

.controller("MainCtrl", function($scope) {
    $scope.person = {
        nfname: 'John',
        lname: 'Deighan',
        email: 'john.deighan@gmail.com',
    };
});

Answer 4

Reasons:

Why redefinition?

Because you set myApp as predef in the .jshintrc file, jshint thinks myApp is already be defined in all the files in this project directory. So when you define myApp, error redefinition.

Why undefined?

Because there're not myApp's definition in the same file. I guess you define it in app.js file. As you noticed, in the Angularjs documentation, their controller is all defined after the myApp, they are in the same file.

Solution:

Don't need set myApp as predef or global in .jshint, I recommend that when you defined a controller or config, do it like this:

angular.module('myApp')
.controller('myController',