AngularJS: How to have different Services/Controllers in same Module?

Question

I have a Service and a controller in my AngularJS App, that should be in the same module, but are two different files:

// File 1 (Service)
angular.module('myService', ['ngRoute'])
.service('myService', // ... 


// File 2 (Controller)
angular.module('myController', ['ngRoute'])
.controller('myController', // ..

This works fine. Now I want to have Service & Controller in one Module so I can load just one instead of two Modules. So I change the first line (of both files) to:

// Change in both files:
angular.module('myModule', ['ngRoute'])

But now I get an error:

Error: [$injector:unpr] ...

Maybe somebody knows, what could be wrong here. Thank you very much!

Answer 1

You can do the following:

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

myApp.controller("myService"

myApp.service("myApp")

Or

angular.module("myModule").controller

angular.module("myModule").service

If you use angular.module('myService', []) twice, you are initializing the same module twice. If you just use angular.module("myModule"), without the dependencies, you are just calling it.

Answer 2

You have two options -

1. use a variable as mentioned by Michael

OR

2. Use it like -

// Initialize myService Module in any JS file 
   (make sure this file is included before File 1 and File 2
angular.module('myService', ['ngRoute']);

// File 1 (Service)
angular.module('myService').service('myService', // ... 

// File 2 (Controller)
angular.module('myService').controller('myController', // ..