Angular: defining a module or not

Question

Simple Angular question.

Should I define an angular module or not? What's the difference if I do it one way or the other?

For example, what's the difference between saying var myApp = angular.module('myFirstApp', []); and angular.module('myFirstApp', []) ?

If I use the 2nd option, I understand all my factories etc have to be dot chained, correct? As in .factory('myFactory', function() {}). But if I use the 1st option and define the angular module, I have to define my factories etc too? as in myApp.factory('myFactory', function() { }); ?

And if I dot chain (as in the 2nd option), am I then adding everything to the global namespace of the application? But what's the difference between that and defining the module and adding everything to in this case myApp?

Please clarify and explain, sorry for the super simple question, I think the answer to this can tie a lot together for me.

Thank you.

Edit: I think some of my question above can be paraphrased in the following way: What's the difference between using the full angular.module() as getter each time and a global variable? Why should a global variable be avoided?

Answer 1

You do not need to assign your angular module to a variable. But you do need to define it like this.

angular.module('myModule', []);

Your factories do not have to be dot chained one after another. You can add a factory to a module like this.

angular.module('myModule').factory('myFactory', function() {});

You can use angular.module('myModule') to get the module and add controllers, factories, ect... to the module.

This allows you to put you controllers, factories, ect... in different files.

I hope this guides you in the right direction.

Answer 2

Here is all you've wanted to know about angularjs, but was afraid to ask. :D

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

There is good practices and explanation why you should do one thing and not the other.

Your answer is in single responsibility, Definitions (aka Setters) section.

Answer 3

No they don't have to be chained. It's very simple

angular.module() is both setter and getter. You provide second argument, dependency array, to set (declare) new module

Without the second argument it is a reference to a previously declared module.

So without chaining you can do:

// declare new module
angular.module('myFirstApp', []);

// add features of module
angular.module('myFirstApp').controller(...;    
angular.module('myFirstApp').directive(...;

This is the same as doing:

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

app.controller(....
app.directive(....

However best practices are to avoid using a global variable and use the full angular.module() as getter each time

it is also the same as using chaining

angular.module('myFirstApp', [])
     .controller(....
     .directive(....