Why is $http.get() undefined in my Angular service?

Question

I'm trying to load some JSON and store it using $rootScope so that it persists between controllers. When I run my app I get the following error:

TypeError: Cannot call method 'get' of undefined

The get method was working perfectly until I tried to introduce $rootScope... any ideas?

My service looks like this:

  1 /**
  2  * Service to get the quiz data from a JSON source
  3  */
  4 app.factory('quizService', ['$rootScope', function ($scope, $rootScope, $http) {
  5     var promise;
  6     var service = {
  7         getQuiz: function($scope, $http) {
  8             if ( !promise ) {
  9                 promise = $http.get('QuizFileName.quiz').then(function (response) {
 10                     return response.data;
 11                 });
 12             }
 13             return promise;
 14         }
 15     };
 16     return service;
 17 }]);

My controller looks like this:

  7     // Get Quiz data from service
  8     quizService.getQuiz().then(function(data) {
  9         $scope.quiz = data;
 10
 11         // Redirect to scores if already completed this
 12         if($scope.quiz.complete === true) {
 13             $location.path('scores');
 14         }
 15     });

Answer 1

OK, Reboog711 put me on the right track, I needed to modify my factory definition to include $http, I had previously tried to do this, but mistakenly put it together like this:

'$rootScope, $http'

Don't do this, it's bad and wrong! But Reboog711's answer also gave me errors because I think you can't use $scope in the way we both thought.

The correct (or working) solution was:

app.factory('quizService', ['$rootScope', '$http', function ($rootScope, $http) {

I hope this helps other newcomers to Angular. Many thanks to all who replied with their comments. I really respect this community for its great attitude to helping others :)

Answer 2

You are using the 'array pattern' in defining your factory. You should have a string for each of the services you use in your function, but you only have one.

That is, what you do is

app.factory('quizService', ['$rootScope', function ($scope, $rootScope, $http) {
    //insert code
}]);

but what you should do is

app.factory('quizService', ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {
    //insert code
}]);

AngularJS will map the functions named with the strings to the parameters. Try that and see if it fixes your issue.

EDIT: Ah,the answer from Reboog711 makes more sense in solving the issue, I somehow missed the latter part of the code. But I'm leaving this answer in since you should also fix the factory definition.

Answer 3

getQuiz is a function inside a factory:

getQuiz: function($scope, $http) {

When you call the getQuiz, you do not pass any arguments into it:

quizService.getQuiz()

$http is undefined because you call it without passing any arguments into it. Angular will not inject items into a function that you call manually. It will only do so with functions that AngularJS calls itself--such as controller or factory functions.

So, you have a few options. One is to pass the $scope and $http arguments into the function, like this:

quizService.getQuiz($scope, $http)

I'm sure this would solve the issue, but it would be a weird approach for sure.

I would probably remove the $scope and $http functions out of the function definition:

 getQuiz: function() {

Then make sure that you modify your factory definition:

app.factory('quizService', ['$scope','$rootScope','$http', function ($scope, $rootScope, $http) {

Without this modification, the Angular services will not be passed into your function.

Then, when you access $http inside the function, it should access the value passed into the factory which should not be undefined.