AngularJS injecting service into a controller

Question

I am getting Unknown Provider

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20RfcDataService

with the code below. Can someone guide me what's wrong here?

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

    RFC.service('RfcDataService', function($scope, $http) {
      this.getUserData = function($http) {
          $http.get("http://myserver:8080/UserPrefs?jid=fcc").then(function(response) {
            return response.data;
          });
      };
      this.getHomeData = function($scope) {
        angular.forEach($scope.rfcData, function(singleItem) {
            if (singleItem.dataFor === 'Home') {
              $scope.homeTabs = (singleItem.tabs);
            }
        });
      };
    }

    RFC.controller('RfcMainController', ['$scope', '$http', '$sce', 'RfcDataService', function($scope, $http, $sce, RfcDataService) {
      $scope.rfcData = RfcDataService.getUserData($http);
      RfcDataService.getHomeData($scope);
    }

Michael Kang · Accepted Answer · 2015-12-16 07:46:31Z

2

First:

Remove $http from your getUserData function - it's already in scope, and your service function is not injectible anyway.
if you are calling $http with query string parameters, then pass it as a second parameter

Your getUserData function should return a promise:

  this.getUserData = function() {
      return $http.get("http://myserver:8080/UserPrefs", {jid:'fcc'}).then(function(response) {
        return response.data;
      });
  };

Which you can simplify like this:

  this.getUserData = function() {
      return $http.get("http://myserver:8080/UserPrefs", {jid:'fcc'});
  };

Then use the result like this:

  RfcDataService.getUserData().success(function(result) {
      $scope.rfcData = result;
  });

edited Dec 16, 2015 at 7:46

answered Dec 16, 2015 at 7:35

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

Comments

dfsq · Accepted Answer · 2015-12-16 07:53:50Z

You are trying to inject $scope into service. You can't do it hence the error. Correct code for the service:

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

RFC.service('RfcDataService', function($http) {
    this.getUserData = function() {
        $http.get("http://myserver:8080/UserPrefs?jid=fcc").then(function(response) {
            return response.data;
        });
    };
});

RFC.controller('RfcMainController', ['$scope', '$http', '$sce', 'RfcDataService', function($scope, $http, $sce, RfcDataService) {
    $scope.rfcData = RfcDataService.getUserData($http).then(function() {
        angular.forEach(data, function(singleItem) {
            if (singleItem.dataFor === 'Home') {
                $scope.homeTabs = singleItem.tabs;
            }
        });    
    }); 
}]);

Note, how you work with promise object returned by getUserData method. You also don't need $http parameter in getUserData method.

Collectives™ on Stack Overflow

AngularJS injecting service into a controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related