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() { ... });

Only declare it with the dependencies once, then just use angular.module('myApp'); — tymeJV
– tymeJV, Commented Dec 29, 2013 at 0:29
since app is the module, simpler to just do app.service('SessionService'.... And yes...it would be creating a new module as written, overwriting original — charlietfl
– charlietfl, Commented Dec 29, 2013 at 1:07

Daiwei · Accepted Answer · 2013-12-29 03:59:09Z

37

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.

answered Dec 29, 2013 at 3:59

Daiwei

44.3k4 gold badges41 silver badges49 bronze badges

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

2 Comments

Kevin Stone Over a year ago

Bingo. Declaring a module without dependencies reopens it for further definitions.

Luis Sieira Over a year ago

How do I add new dependencies from the callees?

Ajay V · Accepted Answer · 2017-05-04 18:50:46Z

7

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>

answered May 4, 2017 at 18:50

Ajay V

5595 silver badges12 bronze badges

Comments

Foo L · Accepted Answer · 2013-12-29 04:24:36Z

3

Naming & namespacing is important in any project. Try:

app.js:

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

sessionService.js:

angular.module('sessionService', [])
.service('SessionService', ...);

Notice that the module name is in lower camel case while the service object itself is upper camel case. This will help you avoid namespace clashing. Hope that helps.

answered Dec 29, 2013 at 4:24

Foo L

11.1k8 gold badges43 silver badges53 bronze badges

Collectives™ on Stack Overflow

AngularJS: Service in different file

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related