Accessing parameter from Angular route

Question

I am working on my very first production Angular application. I know that I can set up routing so that I can grab a parameter and use it to, for instance, get data from my database.

For instance, in my application we have a list of cases. Each case has a case number. I then have a partial that displays the documents related to a case. Here is my routing:

JBenchApp.config(['$routeProvider', '$locationProvider', 
  function($routeProvider, $locationProvider) {
      $routeProvider.
        when('/dashboard', {
            templateUrl: 'partials/dashboard.html',
            controller: 'JBenchCtrl'
        }).
        when('/calendar', {
            templateUrl: 'partials/calendar.html',
            controller: 'JBenchCtrl'
        }).
        when('/', {
            templateUrl: 'partials/calendar.html',
            controller: 'JBenchCtrl'
        }).
        when('/case/:number', {
            templateUrl: 'partials/case.html',
            controller: 'CaseDetailCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });

      $locationProvider.html5Mode(true);
  }]);

If I want to get the documents for Case #11151 and I craft a URL "/case/11151" how do I grab the 11151 and pass it to a function that can get the data? As an example, I believe I need a controller:

JBenchApp.controller('CaseDetailCtrl', ['$scope',
  function ($scope) {
      // Call to a service that returns JSON
      $scope.casedocs = data;
  }]);

Can someone point me in the right direction?

Answer 1

You need to inject routeParams in your controller. Update your controller to following

JBenchApp.controller('CaseDetailCtrl', ['$scope', '$routeParams',
  function ($scope, $routeParams) {
      console.log($routeParams.number); // retrieve route parameters
      // Call to a service that returns JSON
      $scope.casedocs = data;
  }]);