Dynamic routeProvider parameters for angular router

Question

I am trying to take advantage of the back button's history, and so I am using the traditional $routeProvider and a url of
.../arg1/something/arg2/something,else/arg3/another/arg4/yet,another/arg5/final
However, if one argument is missing, the following route provider will fail to pass the remaining arguments to the $routeParams:

angular.module('myApp', [ … ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/arg1/:args1/arg2/:args2/arg3/:args3/arg4/:args4/arg5/:args5', {
        templateUrl: 'views/main.html',
        controller: 'MainController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

How do I configure the $routeProvider to pass the arguments that are present, (in any order if possible, if not at least in the order that but account for absence of an argument), to the controller without having to declare all 720 (6!) different scenarios of different arguments in different order or not at all?

I then plan to use these values to populate the filters in the controller via the following:

    function filterRouteParams (rp){
  if(rp.args1){
    $scope.args1 = rp.args1;
  }
  if(rp.args2){
    $scope.args2 = rp.args2.split(',');
  }
  if(rp.args3){
    $scope.args3 = rp.args3.split(',');
  }
  …
}

I am a little familiar with using the ? query on the URL, but to my knowledge, I don't know how to bind that to the history when I want to update it and also allow for using the back button and maintain the query, but am open to being schooled!

Do you have to store this information in the route? I think you could store this information somewhere else that would be more scalable. — Malkus
– Malkus, Commented Jul 29, 2014 at 18:50

allenhwkim · Accepted Answer · 2014-07-30 20:26:48Z

Do I not understand ur question, or it just got complicated?

You just SIMPLY use query string for this purpose. It works perfectly fine with back and forward buttons, history push/state.

  angular.module('myApp', ['ngRoute'])
   .controller('MainController', function($scope, $route, $routeParams, $location) {
       $scope.$route = $route;
       $scope.$location = $location;
       $scope.$routeParams = $routeParams;
   })
   .controller('FilterController', function($scope, $routeParams) {
   })
  .config(function($routeProvider) {
    $routeProvider
     .when('/filter', {
      template: 'inside filter',
      controller: 'FilterController'
    })
    .otherwise({
      redirectTo: '/filter'
    });
  });

This is the running example of the above code, http://run.plnkr.co/plunks/OS38E38J11FeDS1hyHde/#/filter?c=3&d=4

and Here is the plnkr.

How would you use $routeProvider if you changed the path with <form action="search">...<input name="query">....?

craigb · Accepted Answer · 2014-07-30 21:31:24Z

2

I think the best way of handling this is through query string parameters, so your route is defined like this:

.when('/filter', {
    controller: 'MainController'
})

And you just use a URL like /filter?foo=44&bar=123&baz=true, or in code:

$location.path('/filter').search('foo', $scope.fooValue).search('bar', $scope.barValue);

Parameters are optional and be specified in any order as ngRoute does not do any validation of param names or values.

To access the values in your controller:

.controller('MainController', function($scope, $routeParams) {

    if ($routeParams.foo) {
        // do argument processing
    }

})

docs for $routeParams: https://docs.angularjs.org/api/ngRoute/service/$routeParams

edited Jul 30, 2014 at 21:31

answered Jul 29, 2014 at 23:43

craigb

16.9k7 gold badges54 silver badges63 bronze badges

2 Comments

chris Frisina Over a year ago

So i get you are suggesting use the filter query, but how do I get this to be incorporated with the history/push state that an actual route would provide natively. Isn't the query lost when changing states back and forth?

craigb Over a year ago

Oops, been a while since ive used ngRoute — no need to define parameters in url pattern as required by ui-router... updated answer, and yes query params are preserved going forward and backwards thru history

chris Frisina · Accepted Answer · 2014-07-30 14:06:25Z

I'm not sure to really understand, but could you use '?' inside your routes ? for example

  $routeProvider
  .when('/arg1/:args1?/arg2/:args2?/arg3/:args3?/arg4/:args4?/arg5/:args5?', {
    templateUrl: 'views/main.html',
    controller: 'MainController'
  })
  .otherwise({
    redirectTo: '/'
  });

Any of the following URL would be valid

/arg1/arg2/arg3/arg4/arg5
/arg1/value1/arg2/arg3/arg4/arg5/value5
....
/arg1/value1/arg2/value2/arg3/value3/arg4/value4/arg5/value5

Is that what you were looking for?

Unfortunately I couldn't find a way to remove an argument like this
/arg1/arg2/arg4/value4/arg5/value5

Collectives™ on Stack Overflow

Dynamic routeProvider parameters for angular router

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related