Tutorial 10: Angularjs routeParams Example | Angularjs $routeParams

In AngularJS by Administrator30 Comments

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:

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:

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:

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:

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:

multiple routes in angularjs

and link looks like this:

RouteParams URL

 

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

//

  • Shahzad Ashraf

    thanks ..

  • Shahzad Ashraf

    can u also cover the integration with server??

    • Hafiz Faraz Mukhtar

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

  • ds1982

    You should really look at $routeProvider’s resolve option.
    => https://code.angularjs.org/1.2.19/docs/api/ngRoute/provider/$routeProvider

    • Hafiz Faraz Mukhtar

      Thanks that is helpful 🙂 will write an article on it too.

  • Shahzad Ashraf

    when the next is coming??

    • Hafiz Faraz Mukhtar

      within 11 hours

    • Hafiz Faraz Mukhtar

      within 11 hours

  • meatlover

    Why don’t you made a video from your’s tutorial?

    • Hafiz Faraz Mukhtar

      Nice idea. I shall definitely do this. Thanks 🙂

      • meatlover

        You are Welcome and that sounds good. I am a beginner too in JS.

      • meatlover

        You are Welcome and that sounds good. I am a beginner too in JS.

      • meatlover

        You are Welcome and that sounds good. I am a beginner too in JS.

        • Shahzad Ashraf

          nice idea..

        • Hafiz Faraz Mukhtar

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

          • Shahzad Ashraf

            thank u very much sir God bless u..

  • Shahzad Ashraf

    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???

    • Hafiz Faraz Mukhtar

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

      • Shahzad Ashraf

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

  • Shahzad Ashraf

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

  • 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.

    • Yeah, confirmed: I can’t get the Details view to work with IE8. The actual links aren’t populated with the guitarID.

  • Bharat Bhushan

    use UI-Router for better routing and multiple view on single page app

  • Harry Martin

    Great blog. I would also recommend to make use of FREE AngularJS tutorials for Beginners mentioned here http://learnsauce.com/angularjstutorial/ where they also includes 100% source code. I hope you would find it interesting.

  • John Peter

    Do you have any article how to retrieve the data in Node.js the route parameter

    javascripttrainingcourses.com/JS/AngularJS-Training

  • Rajkumar

    Sir Great tutorial .Thank you. How to Develop $routeParam use to Custom name in URL . For example http://localhost/Rajkumar/#/Blog/0 , next post is http://localhost/Rajkumar/#/Blog/1 next post is http://localhost/Rajkumar/#/Blog/3 this is normal way. http://localhost/Rajkumar/#/Blog/1st_post , http://localhost/Rajkumar/#/Blog/2nd_post Now i am putting some custom names. how to develop this kind of task ? Thank you