Variances in angular.module(....) function calls - angularjs

Question

I'm new to AngularJS. Sometimes I see:
angular.module(...)....
Sometimes
var app = angular.module(...)...
Sometimes the latter is wrapped in an IIFE.
When is it appropriate to use either one of the first 2? What real difference do they make?

Answer 1

Most style guides regarding angular recommends the first variant since you never really need to define a variable to reference the module.
You can access a module with angular.module('moduleName') like so:
angular
.module('app')
.controller('SomeController' , SomeController);
function SomeController() { }
I recommend this style guide by John Papa

Answer 2

1st Approach : with
var app = angular.module(...)...
you are saving a reference to the returned module instance and reuse it to register multiple service/configs/providers etc
so you will call methods on this like
app.config();
app.controller();
etc
2nd Approach : with this
angular.module(...)
you are chaining methods with dot in between them because angular.module(...) , contollers, providers returns module instance that can be chained
like
angular.module("sm",[]).config(function(){}).controller()... so on
Comparison/drawbacks/Advantages :
With first approach drawback is that we declare an "app" intermediate variable that could end up in global namespace if we dont use IIFE
(function() {
var app = angular.module(...)...
} )()
So we can use angular.module("...") with each controller/factory etc but that could be much of the repetition
luckily, we can use the second approcach to chain,because angular.module(...) , contollers, providers returns module instance

Answer 3

There is no difference but style you write your project.
Consider following example that demonstrate both cases you mentioned:
angular.module(...)
angular.module('myApp.', [])
.value('version', '0.1')
.service('apiFrontendService', ['$http', function($http) { /* */ }
.factory('localFactory', ['$http', function($http) { /* */ }
.controller('MyController', ['$http', function($http) { /* */ }
and so on. Here we chain our services one after another.
var app = angular.module(...)...
var app = angular.module('myApp.', []);
app.value('version', '0.1');
app.service('apiFrontendService', ['$http', function($http) { /* */ };
app.factory('localFactory', ['$http', function($http) { /* */ };
app.controller('MyController', ['$http', function($http) { /* */ };
Here you define once app and you can use it over all your project

Answer 4

Latter is used to define a global variable to store application's main Angular module. So, code can be splitted into files.
// app.js
var app = angular.module('testApp');
// aController.js
app.controller('aController', ...);
// bController.js
app.controller('bController', ...);
// someService.js
app.service('seriousService', ...);