AngularJS: Service in different file

Question

I'm learning AngularJS following an organization inspired by ng-boilerplate. I create different Angular modules for the different parts of my site.

However, I want to create all common elements (services and directives) under the main module, while having them all be in separate source files.

This code works, but is the module in sessionService.js referencing the same module than app.js, or is it creating a new one with the same name?

app.js

var app = angular.module('myApp', [...])
.config(...)
.controller(...);

sessionService.js

angular.module('myApp', [])
.service('SessionService', function() { ... });

Answer 1

If you call angular.module('myApp', []) multiple times on the same page, you will likely run into errors or conflicts. I never tried that.

However, if you already run angular.module('myApp', []) once. Then you can run angular.module('myApp') (note: without []) to retrieve (refer to) the myApp module you defined earlier.

Answer 2

in controller.js file :

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

in service.js :

angular.module('newService',[])

.service('someService',function(){

    return {
         // return something
         return null
         }
    }

});

Do not forget to include both the js files in your HTML:

<script src="controllers/controller.js" type="text/javascript"></script>
<script src="services/service.js" type="text/javascript"></script>