I wasted a lot of time correctly defining angular modules. Here’s the problem and the solution.
Consider the following angular app:
While creating both myApp and myApp2 is redundant, it is used in this example because eventually MyController and MyController2 will be separated into two separate files.
If you change the line:
var myApp = angular.module('myApp', );
var myApp = angular.module('myApp');
or change the line:
var myApp2 = angular.module('myApp');
var myApp2 = angular.module('myApp', );
The example code will no longer work. If you look at the console, you may see the nomod error. In the description, it says that adding the empty array of dependencies to angular.module defines a new module of name myApp, and calling angular.module without that argument returns a reference to an existing module of name myApp.
In the first change, removing the empty array results in an error due to angular looking up a module that does not exist. In the second change, adding the empty array results in an error due to angular attempting to define a module that already exists.
This implementation means the developer must take care to know which dependencies are needed accross all controllers they wish to use, and also to make sure that the module is created first, and any subsequent controllers get attached to a reference, rather than re-defining the module.