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!

Just ignore the app variable to jshint.

Amir Savand
– Amir Savand

2016-10-20 16:49:07 +00:00
Commented Oct 20, 2016 at 16:49 — Amir Savand
– Amir Savand, Commented Oct 20, 2016 at 16:49

Sten Muchow · Accepted Answer · 2014-04-22 10:25:24Z

11

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

answered Apr 22, 2014 at 10:25

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ronnie Over a year ago

is there a difference in the globals value of true/false? I don't notice anything

doldt Over a year ago

@Ronnie the difference is whether you allow it to be reassigned. (false means "read-only")

Chris Krycho · Accepted Answer · 2014-12-08 17:18:57Z

3

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: '[email protected]',
    };
});

edited Dec 8, 2014 at 17:18

Chris Krycho

3,1651 gold badge26 silver badges35 bronze badges

answered Jul 31, 2014 at 12:02

John Deighan

4,6414 gold badges22 silver badges22 bronze badges

4 Comments

Splaktar Over a year ago

The empty array argument at the end isn't needed. You can just do angular.module('myApp').

doldt Over a year ago

@Splaktar, angular.module('myApp') fetches an existing module by that name, angular.module('myApp',[]) redefines the myApp module with an empty list of dependencies. This is an important distinction, and a common cause of accidentally redefined modules.

Splaktar Over a year ago

Right. This example looks like it will lead to a lot of redefining of modules. Perhaps it could be expanded to include both cases for clarity.

Miral Over a year ago

The usage in the answer is fine as long as you repeat .controller(...) etc but never repeat the angular.module line itself. You can chain any number of controller/directive/factory/whatever calls onto a single module call.

babaorum · Accepted Answer · 2015-04-06 00:27:11Z

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: '[email protected]',
    };
});

answered Apr 6, 2015 at 0:27

babaorum

3161 silver badge2 bronze badges

Comments

Dawnb · Accepted Answer · 2016-04-24 09:31:23Z

2

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',

answered Apr 24, 2016 at 9:31

Dawnb

1161 silver badge4 bronze badges

Collectives™ on Stack Overflow

Using jshint with AngularJS and Controllers

4 Answers 4

2 Comments

4 Comments

Comments

Reasons:

Why redefinition?

Why undefined?

Solution:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Reasons:

Why redefinition?

Why undefined?

Solution:

Comments

Your Answer

Sign up or log in

Post as a guest

Related