Nona Nona - 2 months ago 14
AngularJS Question

Why am I getting "Incorrect injection token!" in this angular application code?

I'm trying to setup a restful API interface via AngularJS with the following code:

'use strict';

(function(angular) {

function ApiAction($resource, ResourceParameters) {
return $resource(ResourceParameters.route,
{ },
{ api_index: {
method: ResourceParameters.method,
isArray: true
}
});

return $resource(ResourceParameters.route,
{ },
{ create: {
method: ResourceParameters.method,
isArray: true
}
}
);
}

function ResourceParameters($scope) {
var factory = {};
factory.method = '';
factory.route = '';
factory.SetMethod = function(method) {
factory.method = method;
}
factory.SetRoute = function(route) {
factory.route = route;
}
return factory;
}

function superheroCtr($scope, ApiAction, ResourceParameters) {
$scope.superheroSubmit = function() {
// ApiAction.create({}, { superhero_name: $scope.superheroName, age: $scope.superheroAge });
angular.forEach($scope.superheroes, function(hero) {
// ApiAction.create({}, { superhero_name: hero.superhero_name, age: hero.age });
});
};
var heroesResources = ResourceParameters($scope).SetRoute('/api/');
var heroes = ApiAction.api_index({}, heroesResources);
$scope.superheroes = [];
heroes.$promise.then(function(data) {
angular.forEach(data, function(item) {
$scope.superheroes.push(item);
});
}, function(data) {
//if error then...
});

$scope.appendSuperheroFields = function() {
var i = $scope.superheroes.length + 1;
$scope.superheroes.push({"id": i, age: "", superhero_name: "" })
}

}

var superheroApp = angular.module('superheroApp', ['ngResource']);
superheroApp.controller('superheroCtr', ['$scope', 'ApiAction', 'ResourceParameters', superheroCtr]);
superheroApp.factory('ResourceParameters', ['$scope', ResourceParameters]);
superheroApp.factory('ApiAction', ['$resource', ResourceParameters, ApiAction]);

})(angular);


Yet, when I run it I get the following error:

Error: [$injector:itkn] Incorrect injection token! Expected service name as string, got function ResourceParameters($scope)

Why is this?

Answer

Simply you can not inject $scope OR you can not have access to $scope inside a factory

Your problem is at this line

superheroApp.factory('ResourceParameters', ['$scope', ResourceParameters]);

You need to replace that line with

superheroApp.factory('ResourceParameters', [ResourceParameters]);

Factory

function ResourceParameters() { //<--removed $scope from here
    var factory = {};
    factory.method = '';
    factory.route = '';
    factory.SetMethod = function(method) {
      factory.method = method;
    }
    factory.SetRoute = function(route) {
      factory.route = route;
    }
    return factory;
}

Update

Additionally you should correct the declaration of ApiAction where ResourceParameters should be placed inside ' single qoutes

superheroApp.factory('ApiAction', ['$resource', 'ResourceParameters', ApiAction]);