Angular throws an error when I have my service at a different file

Question

I have a service like the folowing one:

var app = angular.module('app');
app.service('messagingService', function($http){

this.getMessages = function(offset, limit, successCallback, errorCallback){
// some stuff goes here
};

});

I include this file and afterwards I include my controller file.

My controller starts like this

function Inbox($scope, $http, messagingService) {

}

But when I load my page I get the following error:

Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=messagingServiceProvider%20%3C-%20messagingService at Error () at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453 at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:32:320 at Object.c [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:29:461) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:32:388 at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:29:461) at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:130) at Object.Xb.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:31:284) at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:61:304) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:48:476

When I use my service code in same file as the controller it works well. What am I missing here? Thanks

Answer 1

you need to attach your controller to your module.

var app = angular.module('app');
app.service('messagingService', function($http){

this.getMessages = function(offset, limit, successCallback, errorCallback){
   // some stuff goes here
 };

});
app.controller('Inbox',['$scope', '$http', 'messagingService',function($scope, $http, messagingService){}])

Answer 2

Good way is to inject the service as dependency for eg:

var app = angular.module('ur_app_name')
app.service('messagingService', function($http){

this.getMessages = function(offset, limit, successCallback, errorCallback){
 //some stuff goes here
};

app.controller('GreetingController', ['$scope','messagingService' function($scope,messagingService) {
 //something here
})

Answer 3

Try the following:

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

in your app.js

and then in your services.js

var services = angular.module('app.services');

services('messagingService', function($http){....