Unknown provider: $routeParamsProvider <- $routeParams

Question

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:

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 1

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)