You can achieve something like http://www.springest.co.uk/agriculture-horticulture/animal-care using filtering by matching url segments to unique regexp patterns. For example they use daytime
for Daytime filter because it doesn't match any other filter, and for Vocational Level filter they use vocational-level-[2-4] ...
So the idea is to determine patterns that only match a unique filter then do the matching and activate each filter. In your case, if we make the following assumptions:
- Hours is the only filter with a numeric value
- Type is either
course
or other
and are reserved values no filter can match them.
- Language starts with
language-
We know that filters match a single pattern, if a segment is numeric it's hours, if starts with language it's language and if course or other it's type. Then your logic can look like this:
var App = angular.module('App', ['ngRoute']);
var patterns = {
type: /(course|other)/,
hours: /([0-9]+)/,
language: /language-(.*)/,
};
App.config(function ($routeProvider) {
$routeProvider
.when('/filter/:filter*', {templateUrl: 'aa.html', controller: 'FilterCtrl'})
.otherwise({redirectTo: '/'});
});
App.controller('FilterCtrl', function ($routeParams, $location) {
var segments = $routeParams.filter.split('/');
segments.forEach(function (el) {
for (var filter in patterns) {
var res = el.match(patterns[filter]);
if (res !== null) {
console.log("Activate filter ", filter, " with params", res[1]);
}
}
});
});
This approach makes filtering very flexible so you can change filters order, also you can remove or add new filters easily like the case of the website.
You should pay attention to changes that may occur in future, if a modification in business logic or naming convention will break the filter, so choose patterns wisely, hope I helped.