javascript - Angular module needs to be defined twice -

i have been playing around angular code , found has app.controllers twice on page. once in module of app towards top , once @ bottom. when remove 1 or other code breaks. don't know why need both since app.services doesn't need or directives or filters. 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', []); }()); 

this code :

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

is creating new module named app. inside [] find list of dependencies modules. app.controllers 1 of app dependencie.

whereas code :

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

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

---

to summarize

1. to create new module angular.module('module_name', []); (note there [])

2. to access module created angular.module('module_name');

3. convention name xx.yy (like app.controllers) helps know module xx.yy depends of xx (app.controllers dependency of app)