Tutorial 11: AngularJS Navigation

In AngularJS by hfarazm41 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

//