Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to have multiple $routeParams on angularjs

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

    ;



});
like image 463
Jayswager Avatar asked Mar 14 '15 01:03

Jayswager


People also ask

How do you pass multiple parameters in router navigate?

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.

What is $routeParams in AngularJS?

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.

How does AngularJS routing work?

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.

Which module is required to configure route details in an angular js application?

AngularJS ngRoute module provides routing, deep linking services and directives for angular applications.


1 Answers

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

like image 182
Boris Charpentier Avatar answered Oct 23 '22 15:10

Boris Charpentier