I wanted to know how can i have multiple route params and if any of you guys might know a tutorial to it or the answer i would appreciate it so much at this point.
here's what im working on http://jaysg.com/newApp/#/
I want it to be #/:region/:country/:city
so this is the controller
angular.module('NoteWrangler').controller('NotesShowController', function ($scope, $routeParams, $http){
$scope.title = $routeParams.title;
$http.get('js/data/notes.json').success(function(data) {
$scope.note = data.filter(function(entry){
return entry.title === $scope.title;
})[0];
});
});
routes.js
angular.module('NoteWrangler')
.config(function($routeProvider){
$routeProvider.when('/notes', {
templateUrl: 'templates/pages/notes/index.html',
controller: 'NotesIndexController',
controllerAs: 'indexController'
})
.when('/users', {
templateUrl: 'templates/pages/users/index.html',
})
.when('/', {
templateUrl: 'templates/pages/notes/index.html',
controller: 'NotesIndexController',
controllerAs: 'indexController'
})
.when('/:countryName', {
templateUrl: 'templates/pages/notes/country-detail.html',
controller: 'CountryDetailCtrl'
})
.when('/notes/:title', {
templateUrl: 'templates/pages/notes/show.html',
controller: 'NotesShowController',
controllerAs: 'showController'
})
.otherwise( { redirectTo: '/' } )
;
});
Set path as component2. Call router to naviagte to MyComp2 with multiple params id1 and id2. Set path as component2. Call router to naviagte to MyComp2 with multiple params id1 and id2.
The $routeParams service allows you to retrieve the current set of route parameters. Requires the ngRoute module to be installed. The route parameters are a combination of $location 's search() and path() . The path parameters are extracted when the $route path is matched.
Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application.
AngularJS ngRoute module provides routing, deep linking services and directives for angular applications.
$routeProvider.when('/:region/:country/:city', ...
And in controller :
$routeParams.region
$routeParams.country
$routeParams.city
Beware, that every 3 parameters road are true with this wording, meaning :
If you have 2 roads in that order:
$routeProvider.when('/:region/:country/:city', ...
$routeProvider.when('/:user/:name/:birthdate', ...
/one/two/three => /:region/:country/:city
/12/john/1987 => /:region/:country/:city
If you inverse it :
$routeProvider.when('/:user/:name/:birthdate', ...
$routeProvider.when('/:region/:country/:city', ...
/one/two/three => /:user/:name/:birthdate
/12/john/1987 => /:user/:name/:birthdate
So I think it's best to put a fixed starting route :
$routeProvider.when('/geo/:region/:country/:city', ...
/geo/IDF/France/Paris => /geo/:region/:country/:city
[EDIT] In order to do what you explain in comment :
What I would do is :
$routeProvider.when(':region/:country?/:city?', ...
note the ?, it means that the param is optional.
It will resolve :
NA
NA/Mexico
NA/Mexico/Cancun
And in you controller check with your $routeParams if the param is null to know if you have one two or three params.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With