$routeParams is a service of angularjs that can be used to get the current set of route parameters i.e. URL parameters. ngRoute module is used to work on it.
The route parameters consist of  $location’s search() and path(). The path parameters will be extracted when the route path is matches.
When a route change completes, $routeParams are updated. $route.current.params can be used to access the new route's parameters.

Example:
In app.js we create an app module and passes the parameters ngRoute and controller name.
 

var myApp = angular.module(myApp', ['ngRoute,appControllers']);
 
myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/list', {
    templateUrl: 'partials/list.html',
    controller: 'ListController'
  }).
  when('/details/:userID', {
    templateUrl: 'partials/details.html',
    controller: detailsController'
  }).
  otherwise({
    redirectTo: '/list'
  });
}]);

Next we will define detailsController in a separate file details.html.
 

var appControllers = angular.module("appControllers", []);
 
appControllers.controller("ListController", ['$scope','$http',
function($scope, $http)
{   
$http.get('js/data.json').success (function(data){
$scope.nameVariable = data;
$scope.ordervalue = 'price';
});
}]
);
 
appControllers.controller(detailsController", ['$scope','$http','$routeParams',
function($scope, $http, $routeParams)
{   
$http.get('js/data.json').success (function(data){
$scope.nameVariable = data;
$scope.whichuser = $routeParams.userID;
});
}]
);

We have used $routeParams so that we can get userID in URL and in the routed page also. The link will look like this
sitename.com/index.html#/details/2

Next, We will make the links clickable on guitar from where user will go to the details.html page. we will add code in list.html page like this:

<ul>
   <li class="itemHolder" ng-repeat="item in nameVariable | filter:query1 | orderBy:ordervalue:direction">
      <a href="#/details/{{nameVariable.indexOf(item)}}">
<img ng-src="img/{{item.image}}.jpg">
<div>
   <h3> {{item.name }}</h3>
   <p class="rightDate">Price Revised on: {{item.dateAdded | date:'MM/yy'}}</p>
           <p class="rightPrice">${{item.price | number:0 }}</p>
   <p> {{item.description}}</p>
   </div>
     </a>
   </li>
</ul>

Now, we will create details page i.e details.html inside partials folder as we have given its path in app.js file.

<div class="details" ng-model="nameVariable">
    <img class="magnifyImg" ng-src="img/{{nameVariable[whichuser].image}}.jpg">
    <div>
        <h2> <strong>{{nameVariable[whichuser].name | lowercase }}</h2>
        <p class="rightDate magnifyDate">Price Revised on: {{nameVariable[whichuser].dateAdded | date:'MM/yy'}}</p>
        <p class="rightPrice magnifyPrice">${{nameVariable[whichuser].price | number:0 }}</p>
        <p> {{nameVariable[whichname].description}}</p>
        <p class="longDescription">{{nameVariable[whichuser].longDescription}}</p>
        <br><hr><br>
        <a href="index.html" class="link"> Go back to Search</a>
    </div>
</div>