how to have multiple $routeParams on angularjs

Question

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: '/' } )

    ;



});

Boris Charpentier · Accepted Answer · 2015-03-14 18:28:21Z

18

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

edited Mar 14, 2015 at 18:28

answered Mar 14, 2015 at 13:41

Boris Charpentier

3,55328 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jayswager Over a year ago

I dont know maybe i asked the question wrong. I have json file which I'm getting the data from and for each routeparam I need a different template.

Jayswager Over a year ago

I dont know maybe i asked the question wrong. I have json file which I'm getting the data from and for each routeparam I need a different template. so like when you go /newApp/NA it shows all the countrys in northamerica then the person clicks and takes them to newApp/NA/Mexico then shows all the major cities and then after u click on a city newApp/NA/Mexico/Cancun so all the info showing up on the pages will be taken from the json and each is related to eachother. Do you understand now? @Boris Charpentier

Boris Charpentier Over a year ago

Ok you could say that some params are optional ?

Collectives™ on Stack Overflow

how to have multiple $routeParams on angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related