Skip to content

Commit

Permalink
feat(routeProvider): Add support to catch-all parameters in routes
Browse files Browse the repository at this point in the history
This allows routeProvider to accept parameters that matches substrings even
when they contain slashes if they are prefixed with an asterisk instead of
a colon.

This PR introduces a new syntax for route params, so we would have:

:param for a single param
*param for catch-all params

For example, routes like edit/color/:color/largecode/*largecode will match
with something like this:
http://appdomain.com/edit/color/brown/largecode/code/with/slashs

It also matches catch-all routes in the middle of the path.

BREAKING CHANGE: Asterisk is not allowed anymore as part of the route
definition
  • Loading branch information
lrlopez committed Jan 25, 2013
1 parent 69be39f commit 88bba84
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 23 deletions.
28 changes: 15 additions & 13 deletions src/ng/route.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,10 @@ function $RouteProvider(){
*
* @param {string} path Route path (matched against `$location.path`). If `$location.path`
* contains redundant trailing slash or is missing one, the route will still match and the
* `$location.path` will be updated to add or drop the trailing slash to exactly match the
* route definition.
*
* `path` can contain named groups starting with a colon (`:name`). All characters up to the
* next slash are matched and stored in `$routeParams` under the given `name` when the route
* matches.
*
* `$location.path` will be updated to add or drop the trailing slash to exacly match the
* route definition. A path can contain single parameters prefixed with a colon or catch-all
* partials (multiple levels including slashes) if they are prefixed with an asterisk.
*
* @param {Object} route Mapping information to be assigned to `$route.current` on route
* match.
*
Expand Down Expand Up @@ -339,28 +336,33 @@ function $RouteProvider(){
function switchRouteMatcher(on, when) {
// TODO(i): this code is convoluted and inefficient, we should construct the route matching
// regex only once and then reuse it

// Escape regexp special characters.
when = '^' + when.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&") + '$';
when = '^' + when.replace(/[-\/\\^$+?.()|[\]{}]/g, "\\$&") + '$';
var regex = '',
params = [],
dst = {};

var re = /:(\w+)/g,
var re = /[:\*](\w+)/g,
paramMatch,
lastMatchedIndex = 0;

while ((paramMatch = re.exec(when)) !== null) {
// Find each :param in `when` and replace it with a capturing group.
// Find each :param or *param in `when` and replace it with a capturing group.
// Append all other sections of when unchanged.
regex += when.slice(lastMatchedIndex, paramMatch.index);
regex += '([^\\/]*)';
if (paramMatch[0].charAt(0) == '*') {
regex += '(.*)';
}
else {
regex += '([^\\/]*)';
}
params.push(paramMatch[1]);
lastMatchedIndex = re.lastIndex;
}
// Append trailing path part.
regex += when.substr(lastMatchedIndex);

var match = on.match(new RegExp(regex));
if (match) {
forEach(params, function(name, index) {
Expand Down
71 changes: 61 additions & 10 deletions test/ng/routeSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,63 @@ describe('$route', function() {
});
});

it('should route and fire change event when catch-all params are used', function() {
var log = '',
lastRoute,
nextRoute;

module(function($routeProvider) {
$routeProvider.when('/Book1/:book/Chapter/:chapter/*highlight',
{controller: noop, templateUrl: 'Chapter.html'});
$routeProvider.when('/Book2/:book/*highlight/Chapter/:chapter',
{controller: noop, templateUrl: 'Chapter.html'});
$routeProvider.when('/Blank', {});
});
inject(function($route, $location, $rootScope) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
log += 'before();';
expect(current).toBe($route.current);
lastRoute = current;
nextRoute = next;
});
$rootScope.$on('$routeChangeSuccess', function(event, current, last) {
log += 'after();';
expect(current).toBe($route.current);
expect(lastRoute).toBe(last);
expect(nextRoute).toBe(current);
});

$location.path('/Book1/Moby/Chapter/Intro/one').search('p=123');
$rootScope.$digest();
$httpBackend.flush();
expect(log).toEqual('before();after();');
expect($route.current.params).toEqual({book:'Moby', chapter:'Intro', highlight:'one', p:'123'});

log = '';
$location.path('/Blank').search('ignore');
$rootScope.$digest();
expect(log).toEqual('before();after();');
expect($route.current.params).toEqual({ignore:true});

log = '';
$location.path('/Book1/Moby/Chapter/Intro/one/two').search('p=123');
$rootScope.$digest();
expect(log).toEqual('before();after();');
expect($route.current.params).toEqual({book:'Moby', chapter:'Intro', highlight:'one/two', p:'123'});

log = '';
$location.path('/Book2/Moby/one/two/Chapter/Intro').search('p=123');
$rootScope.$digest();
expect(log).toEqual('before();after();');
expect($route.current.params).toEqual({book:'Moby', chapter:'Intro', highlight:'one/two', p:'123'});

log = '';
$location.path('/NONE');
$rootScope.$digest();
expect(log).toEqual('before();after();');
expect($route.current).toEqual(null);
});
});

it('should not change route when location is canceled', function() {
module(function($routeProvider) {
Expand All @@ -84,7 +141,7 @@ describe('$route', function() {

describe('should match a route that contains special chars in the path', function() {
beforeEach(module(function($routeProvider) {
$routeProvider.when('/$test.23/foo*(bar)/:baz', {templateUrl: 'test.html'});
$routeProvider.when('/$test.23/foo(bar)/:baz', {templateUrl: 'test.html'});
}));

it('matches the full path', inject(function($route, $location, $rootScope) {
Expand All @@ -94,25 +151,19 @@ describe('$route', function() {
}));

it('matches literal .', inject(function($route, $location, $rootScope) {
$location.path('/$testX23/foo*(bar)/222');
$rootScope.$digest();
expect($route.current).toBeUndefined();
}));

it('matches literal *', inject(function($route, $location, $rootScope) {
$location.path('/$test.23/foooo(bar)/222');
$location.path('/$testX23/foo(bar)/222');
$rootScope.$digest();
expect($route.current).toBeUndefined();
}));

it('treats backslashes normally', inject(function($route, $location, $rootScope) {
$location.path('/$test.23/foo*\\(bar)/222');
$location.path('/$test.23/foo\\(bar)/222');
$rootScope.$digest();
expect($route.current).toBeUndefined();
}));

it('matches a URL with special chars', inject(function($route, $location, $rootScope) {
$location.path('/$test.23/foo*(bar)/222');
$location.path('/$test.23/foo(bar)/222');
$rootScope.$digest();
expect($route.current).toBeDefined();
}));
Expand Down

0 comments on commit 88bba84

Please sign in to comment.