Whether to use: var app = angular.module... or simply: angular.module(

Question

I'm new to Angular and am working through various tutorials (Codecademy, thinkster.io and so on) and have seen two ways of declaring the app container. Firstly:

var app = angular.module('myApp', [])

Or simply like this:

angular.module('myApp', [])

Is one better practice over the other or is it simply a different style without any major effect?

Answer 1

There'n no difference in how both the approach works except following

var app = angular.module('myApp', []) will add an extra global variable(If you're hyper conscious about global variables), however this will shorten your code, don't have to repeat angular.module('myApp') multiple times. You can use app instead of angular.module('myApp').xxx at many times.

You can chain the methods as follow, instead of adding a variable

angular.module('myApp', [])
    .controller(.....)
    .directive(.....)
    .factory(.....);

Answer 2

angular.module supports a third parameter, config function. If you chain you can do more than one config, which may be useful if you have a lot of configurations.

angular.module('myModule', [])
    .config(function(injectables) {
        //config block 1
    })
    .config(function(injectables) {
        //config block 2
    });

Instead of:

angular.module('myModule', [], function(){
    //only config
});

Also it eliminates risk of creating global variables when creating providers.

Answer 3

There is no difference, only the style and whatever you prefer, see this

angular.module('myApp', [])
  .controller("xCtrl", ['$scope', function($scope){
   }])
   .controller("yCtrl", ['$scope', function($scope){
   }])
  .controller("zCtrl", ['$scope', function($scope){
   }]);

In this case if you put the ; after y controll, z controller will not work. Means all will be treated as a single function. On the other way:

var app = angular.module('myApp', []);

app.controller("xCtrl", ['$scope', function($scope){
}]);

app.controller("yCtrl", ['$scope', function($scope){
}]);

app.controller("zCtrl", ['$scope', function($scope){
}]);

In it every function is independent.

Answer 4

The only reason for setting a global variable referring to your module, is if you want to separate it in to multiple files.

for example:

main.js:

var app = angular.module('myApp', [])
.controller('controller1',.....)
.controller('controller2',.....);

directives.js

app
.directive('directive1',.....)
.directive('directive2',.....);

although,you should know it is not so good to relay on global variables (app is global in this example), because they could get overridden by other librarys, and there are other ways to refer to your module in other files, like in this example:

main.js:

angular.module('myApp', [])
.controller('controller1',.....)
.controller('controller2',.....);

directives.js

angular.module('myApp')
.directive('directive1',.....)
.directive('directive2',.....);

and if it is a big and complex angular application, you might even want to separate it to multiple modules:

main.js:

angular.module('myApp', ['myApp.directives'])
.controller('controller1',.....)
.controller('controller2',.....);

directives.js

angular.module('myApp.directives', [])
.directive('directive1',.....)
.directive('directive2',.....);