Angular module needs to be defined twice

Question

I have been playing around with some angular code and I found that it has app.controllers twice on the page. Once in the module of app towards the top and once at the bottom. But when I remove one or the other the code breaks. I don't know why you need both since the app.services doesn't need that or the directives or filters. Any insights on why?

(function () {
  angular
    .module('app',
      [
        'app.controllers',
        'app.services',
        'app.directives',
        'app.filters'
      ]
    )
    .config(['$sceDelegateProvider','$routeProvider',
      function ($sceDelegateProvider, $routeProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([
           'self',
           'https://maps.google.com/**']);
        $routeProvider

          // Home
          .when('/',
            {
            templateUrl: 'partials/home.html'
            }
          )
        // Default
          .otherwise('/');
        }
      ]
    );
    angular.module('app.controllers', []);
}());

app.controllers is a separate module that gets imported into the main module at the top and then defined at the bottom. fancy if it works. also look at the end of the invoked function.. should be like this: ( function(){} )(); — irth
– irth, Commented Jun 18, 2015 at 20:03

eroak · Accepted Answer · 2016-03-06 10:33:42Z

6

This code :

.module('app', [
   'app.controllers',
   'app.services',
   'app.directives',
   'app.filters'
 ]);

is creating a new module named app. Inside [] you will find the list of dependencies modules. app.controllers is one of your app dependencie.

Whereas this code :

angular.module('app.controllers', []);

is creating a new module called app.controllers with no dependencies => [] (empty array).

To summarize

To create a new module angular.module('MODULE_NAME', []); (Note there are [])
To access the module previously created angular.module('MODULE_NAME');
Convention name xx.yy (like app.controllers) helps to know that the module xx.yy depends of xx (app.controllers is a dependency of app)

edited Mar 6, 2016 at 10:33

answered Jun 18, 2015 at 20:02

eroak

1,04510 silver badges18 bronze badges

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

4 Comments

Chad Watkins Over a year ago

Ok that makes sense, but why don't app.filters, services, and directives need to have a new module created?

eroak Over a year ago

I assume they are defined in an another file ?! It's common to separate AngularJS modules in separate files

Claies Over a year ago

they do, it's just probably done at the top of their file rather than in this file, which makes it less obvious that it's happening.

Chad Watkins Over a year ago

Yep, I just foun them in their respective files. Thanks

Collectives™ on Stack Overflow

Angular module needs to be defined twice

1 Answer 1

To summarize

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

To summarize

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related