Tutorial 11: AngularJS Navigation

In AngularJS by Hafiz Faraz15 Comments

This tutorial is connected to previous tutorial, you need to have project files(Download) in order to add angularjs navigation in our guitar application. We’ve got all the elements of a fully functional angularJS application with multiple routes. I’m gonna go ahead and enhance it a little bit. I want to add navigation so that we can cycle through different guitars. Now to do that I am gonna go to my details.html file and add some links like this:

Code Explanation:
Added two links with different angularJS variables i.e prevGuitar and nextGuitar, that I am gonna create in just a minute.

Now going to controllers.js file and adding the following lines of code for navigation to work in DetailsController:

Code Explanation:
Previous button: $routeParams is discussed in previous tutorial. GuitarID is guitar’s ID in data.json. Statement says, if routeParams have an ID of greater than 0(means second item or next item in data.json) then perform action in curly brackets. $scope.prevGuitar is variable declaration and prevGuitar is the same as we wrote in details.html file. prevGuitar is setting current routeParam to one less i.e if guitarID is 3, then prevGuitar will route to guitarID 2. $routeParams is in parentheses of number because it returns string and we need to convert that string into number and then subtract from it.

Else says that, if guitarID is zero then take the length of array which in our case is 4 and subtract 1 from it so that we get id of last guitar in data.json.

Next button: if guitarID is lesser than last guitar in array of data.json then add 1 to it and move to next guitar. Else, goto first guitarID in data.json.

Last thing, you need update your styles.css file:

 

Now, if you run this project in firefox browser and click any guitar in the list you will see this details page with working navigation:

AngularJS Navigation

Download Complete Project

Hope you like it. Please share my work.

next-AngularJS MVCPrevious-Chapter-Button

//

  • Shahzad Ashraf

    thanks..nice sharing keep it up…………..will u include the menu(home, about us) in this app??and when the next tutorail is coming..??we anxiously waiting for next???what is title of next??

    • Hafiz Faraz Mukhtar

      thanks… will definitely look forward to cover menu too… next tutorial in 48 hours. next tutorial will be on animations in angularjs.
      Thanks

  • Shahzad Ashraf

    if u update any tutorial from previous ..then also tell us..so that we can also practice that

    • Hafiz Faraz Mukhtar

      sure, I haven’t made major changes in article although I did make readability better.. I shall place an updated keyword next to article if there will be any major update.

  • Shahzad Ashraf

    when we r moving toward database??and CRUD operation???

    • Hafiz Faraz Mukhtar

      I am converting tutorials to videos it may take a week to get to next tutorial.

      • Shahzad Ashraf

        sir plx work on next tutorial.we set free for whole week. we want to learn as soon as possilbe…previous tutorials was simple u can add video later

        • Hafiz Faraz Mukhtar

          ok i am making another tutorial today

  • Shahzad Ashraf

    sir can u explain this lline ….” $scope.prevGuitar = $scope.guitarVariable.length-1;”me not getting this..if we are at detail of 1st guitar in data.jason file…then we have move to on home page that is guitar list….but $scope.prevGuitar = $scope.guitarVariable.length-1 ..is
    subtracting 1 from whole array lenght that 4….4-1=3 …when we hit previous button
    then it will move to 3item detail not to home?????plz help me??

    • Hafiz Faraz Mukhtar

      its getting the list of items in data.json i.e 4, when we click on prev button it subtracts 1 from the id and return 3 and moves to item at 3rd place. It is not moving to home. i have double checked it again.

      • Shahzad Ashraf

        you r not geeting me sir…my point is that ”

        $scope.prevGuitar = $scope.guitarVariable.length-1″ this statemnt is else part and will run when guitaid is zero….means when we r at details of 1 items in data.jason..and if we hit previous button.then where it is going???
        according to me it…it sould go to home page?…but this line
        $scope.prevGuitar = $scope.guitarVariable.length-1″ doing some thing else….means it will return 3 …and it is going to 3 element detail.??
        when this move to home page..??becs its not going home page

        • Hafiz Faraz Mukhtar

          no it should not go to home page. It will remain there in details.html page and keep on looping

  • Mayank Tripathi

    I’m explaining how to create a navigation menu using angular js.

    Step 1: First create an empty asp.net application and add a web form named ”Default.aspx” to it.
    Step 2: Now add “angular.min.js” file to your head section of your page by drag-n-drop from the solution explorer like this:

    Navigation Menu

    Step 3: Next add the ng-app attribute to the body tag.
    Step 4: Now write the code in the body section of the webpage.

    For full implementation refer here:
    http://www.mindstick.com/blog/660/Navigation%20Menu%20in%20Angular%20JS

  • Hi there, nice tutorial!
    Any idea why the previous button works correctly and the next button link is always 0 in every details page for some reason? I’m assuming it’s triggering the else statement since the if isn’t correct?

    My controller:

    app.controller(“DetailsController”, [‘$scope’, ‘$http’, ‘$firebaseArray’, ‘$routeParams’, function($scope, $http, $firebaseArray, $routeParams) {

    var data = new Firebase(“https://emailangular.firebaseio.com/posts”);
    $scope.postVariable = $firebaseArray(data);
    $scope.whichPost = $routeParams.postID;

    /* previous button */

    if($routeParams.postID > 0)
    $scope.prevPost = Number($routeParams.postID)-1;
    else
    $scope.prevPost = $scope.postVariable.length-1;

    /* next button */
    if($routeParams.postID < $scope.postVariable.length-1)
    $scope.nextPost = Number($routeParams.postID)+1;
    else
    $scope.nextPost = 0;

    }]);

    Details View

    {{postVariable[whichPost].title | lowercase }}
    {{postVariable[whichPost].excerpt}}
    {{postVariable[whichPost].body}}

    Previous
    Next

    am using AngularJS v1.4.10
    Thanks in advance!