Table of Contents
List of angularjs tutorials
- Introduction
- Basic App
- MVC Architecture
- Modules
- Complex Models
- Reading JSON
- Filters
- Data Binding
- Routing
- $routeParams
- Navigation
- Animation (Video)
- Tabs (Video)
- Form Validation (Video)
- Custom Directives
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:
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.
//
71 Responses
thanks ..
can u also cover the integration with server??
can u also cover the integration with server??
You should really look at $routeProvider’s resolve option.
=> https://code.angularjs.org/1.2.19/docs/api/ngRoute/provider/$routeProvider
Thanks that is helpful 🙂 will write an article on it too.
thanks ..
thanks ..
can u also cover the integration with server??
yes will write an article on it too.. after 2 tutorials I am gonna switch to such topics.
can u also cover the integration with server??
yes will write an article on it too.. after 2 tutorials I am gonna switch to such topics.
You should really look at $routeProvider’s resolve option.
=> https://code.angularjs.org/1.2.19/docs/api/ngRoute/provider/$routeProvider
Thanks that is helpful 🙂 will write an article on it too.
You should really look at $routeProvider’s resolve option.
=> https://code.angularjs.org/1.2.19/docs/api/ngRoute/provider/$routeProvider
Thanks that is helpful 🙂 will write an article on it too.
when the next is coming??
within 11 hours
when the next is coming??
within 11 hours
within 11 hours
when the next is coming??
within 11 hours
Why don’t you made a video from your’s tutorial?
Nice idea. I shall definitely do this. Thanks 🙂
You are Welcome and that sounds good. I am a beginner too in JS.
You are Welcome and that sounds good. I am a beginner too in JS.
You are Welcome and that sounds good. I am a beginner too in JS.
Why don’t you made a video from your’s tutorial?
Nice idea. I shall definitely do this. Thanks 🙂
You are Welcome and that sounds good. I am a beginner too in JS.
You are Welcome and that sounds good. I am a beginner too in JS.
You are Welcome and that sounds good. I am a beginner too in JS.
nice idea..
Thanks for suggestion. blog is undergoing maintenance today. will get to it video tutorials soon.
thank u very much sir God bless u..
Why don’t you made a video from your’s tutorial?
Nice idea. I shall definitely do this. Thanks 🙂
You are Welcome and that sounds good. I am a beginner too in JS.
nice idea..
Thanks for suggestion. blog is undergoing maintenance today. will get to it video tutorials soon.
thank u very much sir God bless u..
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???
A lot of difference. in 1 you are dealing REST and location provider but in 2 you are dealing with routeProvider
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???
A lot of difference. in 1 you are dealing REST and location provider but in 2 you are dealing with routeProvider
REST mean?? what it does???? what does the location provider do??will u share tutorail realated to REST and location provider??
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???
A lot of difference. in 1 you are dealing REST and location provider but in 2 you are dealing with routeProvider
REST mean?? what it does???? what does the location provider do??will u share tutorail realated to REST and location provider??
sir i am not getting the $routeparams??why is it not used in guitarcontroller??and only used in 2nd controller???
sir i am not getting the $routeparams??why is it not used in guitarcontroller??and only used in 2nd controller???
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.
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 the tutorials !!
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.
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 the tutorials !!
wow thats wonderful. I’m updating this tutorial with your solution and putting your name next to it. Thanks for pointing it out.
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.
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 the tutorials !!
wow thats wonderful. I’m updating this tutorial with your solution and putting your name next to it. Thanks for pointing it out.
use UI-Router for better routing and multiple view on single page app
yeah will update tutorial. thanks
use UI-Router for better routing and multiple view on single page app
yeah will update tutorial. thanks
i also want to use ui-routing in my next project. if you have any project or need any help. feel free to contact me. bharat9728897555@gmail.com
use UI-Router for better routing and multiple view on single page app
yeah will update tutorial. thanks
i also want to use ui-routing in my next project. if you have any project or need any help. feel free to contact me. bharat9728897555@gmail.com