Tutorials for web designers and developers
Tutorials for Developers_
Search
Close this search box.

Tutorial 10: Angularjs routeParams Example | Angularjs $routeParams

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar is an expert Web Developer, SEO specialist, and Graphic Designer. Hafiz Faraz is an expert in WordPress design and development. Hire on Upwork | Hire on Fiverr

Angularjs routeParams is a service that allows you to retrieve the current set of route parameters(URL Parameters). In previous tutorial, we had the basic structure so that our application can handle routing but we were only using a single partial. All it does is show a list of guitars. It would be great to make list elements click through more detailed view of the guitar information i.e jump to another page that holds detail of clicked guitar. We can do this by wiring up a second partial using $routeParams service.

If you are following along previous tutorial you will have project files otherwise you can simply download last tutorial files here

First

In app.js document we gonna put second parameter for second partial because we are going to make multiple files linked. code like this:

var GuitarApp = angular.module('GuitarApp', ['ngRoute','GuitarControllers']);

GuitarApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/list', {
    templateUrl: 'partials/list.html',
    controller: 'ListController'
  }).
  when('/details/:guitarID', {
    templateUrl: 'partials/details.html',
    controller: 'DetailsController'
  }).
  otherwise({
    redirectTo: '/list'
  });
}]);

Code Explanation:
Its the same code we added in previous tutorial which tells that when somebody goes to /details and asks for a :guitarID (will get to it later) then goto template URL partials/details.html in project folder and get details.html file(get to it later). Finally, DetailsController is controller handling details.html file. Easy enough.

Second

Lets make DetailsController in controllers.js file which will handle detail.html page like this:

var GuitarControllers = angular.module("GuitarControllers", []);

GuitarControllers.controller("ListController", ['$scope','$http', 
	function($scope, $http)
		{    
			$http.get('js/data.json').success (function(data){
				$scope.guitarVariable = data;
				$scope.orderGuitar = 'price';
			}); 
		}]
);

GuitarControllers.controller("DetailsController", ['$scope','$http','$routeParams',
	 function($scope, $http, $routeParams)
		{    
			$http.get('js/data.json').success (function(data){
				$scope.guitarVariable = data;
				$scope.whichGuitar = $routeParams.guitarID;
			}); 
		}]
);

Code Explanation:

What I did is to copy the existing controller and paste it right below it and then change the new controller name to DetailsController (it is matching with controller name specified in app.js)and use $routeParams which is responsible for route tracking, you can say it as route manager. We use $routeParams because we need guitarID in our URL as well with routed page of details.html. Here is how link looks like when clicked on guitar: 

sitename.com/index.html#/details/2

Third

We need to make clickable links on guitar from which user can navigate to details.html page. To do this, goto list.html (this is where our guitar list is) and add the following code just after li to enclose the whole guitar in anchor tag like this:

<ul> 
   <li class="itemHolder" ng-repeat="item in guitarVariable | filter:query1 | orderBy:orderGuitar:direction">
      <a href="#/details/{{guitarVariable.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>

Code Explanation:

What we are going to pass here? I mean in the link? answer is simple, we are going to details.html page with item id on which we clicked. #/details tells that you need to JUMP to details section which is handled by angular in app.js file. Next guitarVariable is the variable you will find in controllers.js file which holds the data from data.json file. Next indexOf will get the position of guitar coming from data.json file and tells that for example violin is at fourth place in data.json file so it will return 3 because its an array, it starts from zero, remember that? I am sure you do. item is an item in guitarVariable. Okay and then after guitar details we closed the anchor tag.

You may be wondering how it gonna show us different id for different guitar? this is because above anchor tag we are using ng-repeat that iterates through data.json file.

Fourth

Ok now we need to create our details page i.e details.html file in partials folder because we gave its path in app.js file. Lets copy the following code to details.html file and place this file in partials folder of your project:

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

Code explanation:

We know that guitarVariable is the variable in controllers.js file holding data coming from data.json file. So we created a model named as guitarVariable.  Then we used guitarVariable and asked for whichGuitar, whichGuitar is the itemID or guitarID coming from list.html file along with details.html file like this sitename.com/index.html#/details/2 so we in other words we are specifiing the details of that guitar whose id is coming in whichGuitar. Remember that whichGuitar is already defined in controllers.js file. Rest of the code is just about placing guitar detail(name, dateAdded, price, longDescription etc) in some good way.  Finally we need to add some styling in style.css, add some data in data.json file and an image. You can download these three files from here Download (it has 3 files.

1. Place style.css in root directory of your project and replace existing style.css file

2. Place data.json file inside js folder and replace the existing file

3. put violin.jpg file inside img folder)

All done. Now open index.html file in FIREFOX browser. You will see guitar list and when you click on a guitar, its detail will show up like this:

and link looks like this:

Download complete project

Important Update

David Raasch figured out issue and solution in this tutorial:

Problem:  Hmmm… IE8 doesn’t seem to want to click through to the Details. I’ve confirmed I’m in “Browser Mode: IE8”, “Document Mode: IE8 Standards”. (If I switch to “Quirks Mode”, then everything other than the “Developer’s Blog” banner vanishes.) I’ll keep playing with it.

Solution: Figured it out. IE 8 and lower do not know what .indexOf is. I found the fix here: http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8  Applied it to your demo and now it’s pulling in the guitarID’s just fine.

Thanks for help David Raasch.

Hope you like it. Please share my work.

next-AngularJS MVCPrevious-Chapter-Button

//

71 Responses

    1. yes will write an article on it too.. after 2 tutorials I am gonna switch to such topics.

      1. Thanks for suggestion. blog is undergoing maintenance today. will get to it video tutorials soon.

  1. 1.
    var firstApp=angular.module(“firstApp”,[‘ngRoute’, ‘ngResource’])
    .config(function ($routeProvider,$locationProvider)
    { …….}
    2.
    var GuitarApp = angular.module(‘GuitarApp’, [‘ngRoute’,’GuitarControllers’]);

    GuitarApp.config([‘$routeProvider’, function($routeProvider)
    {}
    in 1 and 2 is there just syntx change or something else???

    1. A lot of difference. in 1 you are dealing REST and location provider but in 2 you are dealing with routeProvider

  2. 1.
    var firstApp=angular.module(“firstApp”,[‘ngRoute’, ‘ngResource’])
    .config(function ($routeProvider,$locationProvider)
    { …….}
    2.
    var GuitarApp = angular.module(‘GuitarApp’, [‘ngRoute’,’GuitarControllers’]);

    GuitarApp.config([‘$routeProvider’, function($routeProvider)
    {}
    in 1 and 2 is there just syntx change or something else???

    1. A lot of difference. in 1 you are dealing REST and location provider but in 2 you are dealing with routeProvider

      1. REST mean?? what it does???? what does the location provider do??will u share tutorail realated to REST and location provider??

  3. 1.
    var firstApp=angular.module(“firstApp”,[‘ngRoute’, ‘ngResource’])
    .config(function ($routeProvider,$locationProvider)
    { …….}
    2.
    var GuitarApp = angular.module(‘GuitarApp’, [‘ngRoute’,’GuitarControllers’]);

    GuitarApp.config([‘$routeProvider’, function($routeProvider)
    {}
    in 1 and 2 is there just syntx change or something else???

      1. REST mean?? what it does???? what does the location provider do??will u share tutorail realated to REST and location provider??

  4. sir i am not getting the $routeparams??why is it not used in guitarcontroller??and only used in 2nd controller???

  5. sir i am not getting the $routeparams??why is it not used in guitarcontroller??and only used in 2nd controller???

  6. sir i am not getting the $routeparams??why is it not used in guitarcontroller??and only used in 2nd controller???

  7. Hmmm… IE8 doesn’t seem to want to click through to the Details. I’ve confirmed I’m in “Browser Mode: IE8”, “Document Mode: IE8 Standards”. (If I switch to “Quirks Mode”, then everything other than the “Developer’s Blog” banner vanishes.)

    I’ll keep playing with it.

  8. Hmmm… IE8 doesn’t seem to want to click through to the Details. I’ve confirmed I’m in “Browser Mode: IE8”, “Document Mode: IE8 Standards”. (If I switch to “Quirks Mode”, then everything other than the “Developer’s Blog” banner vanishes.)

    I’ll keep playing with it.

      1. wow thats wonderful. I’m updating this tutorial with your solution and putting your name next to it. Thanks for pointing it out.

  9. Hmmm… IE8 doesn’t seem to want to click through to the Details. I’ve confirmed I’m in “Browser Mode: IE8”, “Document Mode: IE8 Standards”. (If I switch to “Quirks Mode”, then everything other than the “Developer’s Blog” banner vanishes.)

    I’ll keep playing with it.

Leave a Reply

Your email address will not be published. Required fields are marked *