AngularJS inject service into multiple controllers

Question

I have defined a service in its own module:

angular.module('foteDatasetsService', [])
  .factory('foteAPIservice', function($http) {

    var foteAPI = {};

    foteAPI.getDatasets = function() {
      return $http({
        method: 'JSONP',
        url: 'http://localhost:8080/datasets?callback=JSON_CALLBACK'
      });
    }

    return foteAPI;
  });

In another module, (in another file) I have a controller where I'd like to use it:

angular.module('foteRequests').controller('foteRequestsController',
  ['$scope', function foteRequestsController($scope, foteAPIservice) {

    //snip other stuff

    $scope.datasets = [];

    foteAPIservice.getDatasets().success(function (response) {
      //Digging into the response to get the relevant data
      $scope.datasets = response;
      console.log(response);
    });

]);

I have an init for this module in a file called init.js that includes the dependency like this:

'use strict';

angular.module('foteRequests', ['foteDatasetsService']);

It doesn't look like it's actually injecting the foteDatasetsService INTO the controller though. If I run the app, I get an error:

Cannot call method 'getDatasets' of undefined

So if I force the issue by including the foteDatasetsService in in the controller like this:

angular.module('foteRequests').controller('foteRequestsController', ['$scope',
'foteDatasetsService', function foteRequestsController($scope, foteAPIservice) {
...
}]);

it gives me this error:

Error: [$injector:unpr] Unknown provider: foteDatasetsServiceProvider <- foteDatasetsService

EDIT: I want to be able to inject this service into 3 controllers that will need to get this same info.

Any ideas why the factory is not creating the provider? I'm lost on that one...

It's so extremely modularized due to our build system. Most of these snippets are in different files. Creating a plunkr would not be feesible. I apologize. Most examples from the Angular docs show creating the controller in the SAME module as the service. That is not what I want to do. — Jim Wharton
– Jim Wharton, Commented Nov 29, 2013 at 20:55
but, I threw the project on GitHub. I don't think there's anything in there that I'd get in trouble for posting: github.com/nobleach/fote-data-download in the branch called dataset-service — Jim Wharton
– Jim Wharton, Commented Nov 29, 2013 at 20:57

artur grzesiak · Accepted Answer · 2013-11-29 21:31:37Z

8

Instead of this:

angular.module('foteRequests').controller('foteRequestsController',
['$scope', 'foteDatasetsService', function foteRequestsController($scope, foteAPIservice)
{ ... }]);

Try this:

angular.module('foteRequests').controller('foteRequestsController',
['$scope', 'foteAPIservice', function foteRequestsController($scope, foteAPIservice)
{ ... }]);

You already have injected the foteDatasetsService, now you just want to inject the service foteAPIservice.

UPDATE as @dtabuenc remarked it would be better not to append Service in a module name.

edited Nov 29, 2013 at 21:31

answered Nov 29, 2013 at 20:59

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

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

2 Comments

Daniel Tabuenca Over a year ago

Naming your module foteDatasetsService is confusing because it's a module not a service.

artur grzesiak Over a year ago

@JimWharton it is my pleasure:-)

Collectives™ on Stack Overflow

AngularJS inject service into multiple controllers

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related