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

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

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 2

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.

Answer 3

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 :)