Dynamic routeProvider parameters for angular router - angularjs

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!

Answer 1

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.

Answer 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

Answer 3

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