Raddy Raddy - 5 months ago 27
AngularJS Question

Unknown provider: $routeParamsProvider <- $routeParams

I am currently learning AngularJS & Ionic by creating a simple podcast app.
I am trying to use routeParams to get the "itemId" but I am getting the following error:



Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams <- DetailsController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams%20%3C-%20DetailsController
minErr/





Now this is how I pass the "itemId"



.state('ted', {
url: '/ted/:itemId',
templateUrl: 'templates/ted-talks.html',
controller: 'DetailsController'
})





and here is my controller:



starter.controller("DetailsController", ["$scope", "$routeParams", "$http", function ($scope, $routeParams, $http) {
$http.get('http://api.npr.org/query?id=57&apiKey={I've taken the ID off})
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);

$scope.stories = jsonOutput.nprml.list.story;

if($routeParams.itemId) {
console.log('Single page id' + $routeParams.itemId);
}


})
.error(function(data, status, headers, config){
alert('There is a problem');
})
}]);





Any ideas what causes this error? I belive that the routeParams is already included in the ionic framework as the demos they provide seem to work, bu I can't figure out how.

Any help is much appreceated :)

Answer

As you are using Angular-ui-router you should use $stateParams dependency instead of $routeParams which are meant to use for ui-router(Angular ui-router $stateProvider)

if($stateParams.itemId) {
    console.log('Single page id' + $stateParams.itemId);
}

$routeParams is available there for ngRoute module(AngularJS routing $routerProvider)