Skip to content

Commit 88bba84

Browse files
lrlopezlrlopez
committed
feat(routeProvider): Add support to catch-all parameters in routes
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
1 parent 69be39f commit 88bba84

2 files changed

Lines changed: 76 additions & 23 deletions

File tree

‎src/ng/route.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,10 @@ function $RouteProvider(){
2020
*
2121
* @param {string} path Route path (matched against `$location.path`). If `$location.path`
2222
* contains redundant trailing slash or is missing one, the route will still match and the
23-
* `$location.path` will be updated to add or drop the trailing slash to exactly match the
24-
* route definition.
25-
*
26-
* `path` can contain named groups starting with a colon (`:name`). All characters up to the
27-
* next slash are matched and stored in `$routeParams` under the given `name` when the route
28-
* matches.
29-
*
23+
* `$location.path` will be updated to add or drop the trailing slash to exacly match the
24+
* route definition. A path can contain single parameters prefixed with a colon or catch-all
25+
* partials (multiple levels including slashes) if they are prefixed with an asterisk.
26+
*
3027
* @param {Object} route Mapping information to be assigned to `$route.current` on route
3128
* match.
3229
*
@@ -339,28 +336,33 @@ function $RouteProvider(){
339336
function switchRouteMatcher(on, when) {
340337
// TODO(i): this code is convoluted and inefficient, we should construct the route matching
341338
// regex only once and then reuse it
342-
339+
343340
// Escape regexp special characters.
344-
when = '^' + when.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&") + '$';
341+
when = '^' + when.replace(/[-\/\\^$+?.()|[\]{}]/g, "\\$&") + '$';
345342
var regex = '',
346343
params = [],
347344
dst = {};
348345

349-
var re = /:(\w+)/g,
346+
var re = /[:\*](\w+)/g,
350347
paramMatch,
351348
lastMatchedIndex = 0;
352349

353350
while ((paramMatch = re.exec(when)) !== null) {
354-
// Find each :param in `when` and replace it with a capturing group.
351+
// Find each :param or *param in `when` and replace it with a capturing group.
355352
// Append all other sections of when unchanged.
356353
regex += when.slice(lastMatchedIndex, paramMatch.index);
357-
regex += '([^\\/]*)';
354+
if (paramMatch[0].charAt(0) == '*') {
355+
regex += '(.*)';
356+
}
357+
else {
358+
regex += '([^\\/]*)';
359+
}
358360
params.push(paramMatch[1]);
359361
lastMatchedIndex = re.lastIndex;
360362
}
361363
// Append trailing path part.
362364
regex += when.substr(lastMatchedIndex);
363-
365+
364366
var match = on.match(new RegExp(regex));
365367
if (match) {
366368
forEach(params, function(name, index) {

‎test/ng/routeSpec.js‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,63 @@ describe('$route', function() {
5959
});
6060
});
6161

62+
it('should route and fire change event when catch-all params are used', function() {
63+
var log = '',
64+
lastRoute,
65+
nextRoute;
66+
67+
module(function($routeProvider) {
68+
$routeProvider.when('/Book1/:book/Chapter/:chapter/*highlight',
69+
{controller: noop, templateUrl: 'Chapter.html'});
70+
$routeProvider.when('/Book2/:book/*highlight/Chapter/:chapter',
71+
{controller: noop, templateUrl: 'Chapter.html'});
72+
$routeProvider.when('/Blank', {});
73+
});
74+
inject(function($route, $location, $rootScope) {
75+
$rootScope.$on('$routeChangeStart', function(event, next, current) {
76+
log += 'before();';
77+
expect(current).toBe($route.current);
78+
lastRoute = current;
79+
nextRoute = next;
80+
});
81+
$rootScope.$on('$routeChangeSuccess', function(event, current, last) {
82+
log += 'after();';
83+
expect(current).toBe($route.current);
84+
expect(lastRoute).toBe(last);
85+
expect(nextRoute).toBe(current);
86+
});
87+
88+
$location.path('/Book1/Moby/Chapter/Intro/one').search('p=123');
89+
$rootScope.$digest();
90+
$httpBackend.flush();
91+
expect(log).toEqual('before();after();');
92+
expect($route.current.params).toEqual({book:'Moby', chapter:'Intro', highlight:'one', p:'123'});
93+
94+
log = '';
95+
$location.path('/Blank').search('ignore');
96+
$rootScope.$digest();
97+
expect(log).toEqual('before();after();');
98+
expect($route.current.params).toEqual({ignore:true});
99+
100+
log = '';
101+
$location.path('/Book1/Moby/Chapter/Intro/one/two').search('p=123');
102+
$rootScope.$digest();
103+
expect(log).toEqual('before();after();');
104+
expect($route.current.params).toEqual({book:'Moby', chapter:'Intro', highlight:'one/two', p:'123'});
105+
106+
log = '';
107+
$location.path('/Book2/Moby/one/two/Chapter/Intro').search('p=123');
108+
$rootScope.$digest();
109+
expect(log).toEqual('before();after();');
110+
expect($route.current.params).toEqual({book:'Moby', chapter:'Intro', highlight:'one/two', p:'123'});
111+
112+
log = '';
113+
$location.path('/NONE');
114+
$rootScope.$digest();
115+
expect(log).toEqual('before();after();');
116+
expect($route.current).toEqual(null);
117+
});
118+
});
62119

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

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

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

96153
it('matches literal .', inject(function($route, $location, $rootScope) {
97-
$location.path('/$testX23/foo*(bar)/222');
98-
$rootScope.$digest();
99-
expect($route.current).toBeUndefined();
100-
}));
101-
102-
it('matches literal *', inject(function($route, $location, $rootScope) {
103-
$location.path('/$test.23/foooo(bar)/222');
154+
$location.path('/$testX23/foo(bar)/222');
104155
$rootScope.$digest();
105156
expect($route.current).toBeUndefined();
106157
}));
107158

108159
it('treats backslashes normally', inject(function($route, $location, $rootScope) {
109-
$location.path('/$test.23/foo*\\(bar)/222');
160+
$location.path('/$test.23/foo\\(bar)/222');
110161
$rootScope.$digest();
111162
expect($route.current).toBeUndefined();
112163
}));
113164

114165
it('matches a URL with special chars', inject(function($route, $location, $rootScope) {
115-
$location.path('/$test.23/foo*(bar)/222');
166+
$location.path('/$test.23/foo(bar)/222');
116167
$rootScope.$digest();
117168
expect($route.current).toBeDefined();
118169
}));

0 commit comments

Comments
 (0)