+ * var list = ['John', 'Paul', 'George', 'Ringo'];
+ *
+ * $urlMatcherFactoryProvider.type('listItem', {
+ * encode: function(item) {
+ * // Represent the list item in the URL using its corresponding index
+ * return list.indexOf(item);
+ * },
+ * decode: function(item) {
+ * // Look up the list item by index
+ * return list[parseInt(item, 10)];
+ * },
+ * is: function(item) {
+ * // Ensure the item is valid by checking to see that it appears
+ * // in the list
+ * return list.indexOf(item) > -1;
+ * }
+ * });
+ *
+ * $stateProvider.state('list', {
+ * url: "/list/{item:listItem}",
+ * controller: function($scope, $stateParams) {
+ * console.log($stateParams.item);
+ * }
+ * });
+ *
+ * // ...
+ *
+ * // Changes URL to '/list/3', logs "Ringo" to the console
+ * $state.go('list', { item: "Ringo" });
+ *
+ *
+ * This is a more complex example of a type that relies on dependency injection to
+ * interact with services, and uses the parameter name from the URL to infer how to
+ * handle encoding and decoding parameter values:
+ *
+ *
+ * // Defines a custom type that gets a value from a service,
+ * // where each service gets different types of values from
+ * // a backend API:
+ * $urlMatcherFactoryProvider.type('dbObject', function(Users, Posts) {
+ *
+ * // Matches up services to URL parameter names
+ * var services = {
+ * user: Users,
+ * post: Posts
+ * };
+ *
+ * return {
+ * encode: function(object) {
+ * // Represent the object in the URL using its unique ID
+ * return object.id;
+ * },
+ * decode: function(value, key) {
+ * // Look up the object by ID, using the parameter
+ * // name (key) to call the correct service
+ * return services[key].findById(value);
+ * },
+ * is: function(object, key) {
+ * // Check that object is a valid dbObject
+ * return angular.isObject(object) && object.id && services[key];
+ * }
+ * equals: function(a, b) {
+ * // Check the equality of decoded objects by comparing
+ * // their unique IDs
+ * return a.id === b.id;
+ * }
+ * };
+ * });
+ *
+ * // In a config() block, you can then attach URLs with
+ * // type-annotated parameters:
+ * $stateProvider.state('users', {
+ * url: "/users",
+ * // ...
+ * }).state('users.item', {
+ * url: "/{user:dbObject}",
+ * controller: function($scope, $stateParams) {
+ * // $stateParams.user will now be an object returned from
+ * // the Users service
+ * },
+ * // ...
+ * });
+ *
+ */
+ this.type = function (name, def) {
+ if (!isDefined(def)) return UrlMatcher.prototype.$types[name];
+ typeQueue.push({ name: name, def: def });
+ if (!enqueue) flushTypeQueue();
return this;
};
+
+ /* No need to document $get, since it returns this */
+ this.$get = ['$injector', function ($injector) {
+ injector = $injector;
+ enqueue = false;
+ UrlMatcher.prototype.$types = {};
+ flushTypeQueue();
+
+ forEach(defaultTypes, function(type, name) {
+ if (!UrlMatcher.prototype.$types[name]) UrlMatcher.prototype.$types[name] = new Type(type);
+ });
+ return this;
+ }];
+
+ // To ensure proper order of operations in object configuration, and to allow internal
+ // types to be overridden, `flushTypeQueue()` waits until `$urlMatcherFactory` is injected
+ // before actually wiring up and assigning type definitions
+ function flushTypeQueue() {
+ forEach(typeQueue, function(type) {
+ if (UrlMatcher.prototype.$types[type.name]) {
+ throw new Error("A type named '" + type.name + "' has already been defined.");
+ }
+ var def = new Type(isInjectable(type.def) ? injector.invoke(type.def) : type.def);
+ UrlMatcher.prototype.$types[type.name] = def;
+ });
+ }
}
// Register as a provider so it's available to other providers
diff --git a/src/urlRouter.js b/src/urlRouter.js
index 0ad472e6f..e4a76524f 100644
--- a/src/urlRouter.js
+++ b/src/urlRouter.js
@@ -16,8 +16,7 @@
*/
$UrlRouterProvider.$inject = ['$locationProvider', '$urlMatcherFactoryProvider'];
function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
- var rules = [],
- otherwise = null;
+ var rules = [], otherwise = null, interceptDeferred = false, listener;
// Returns a string that is a prefix of all strings matching the RegExp
function regExpPrefix(re) {
@@ -38,7 +37,7 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
* @methodOf ui.router.router.$urlRouterProvider
*
* @description
- * Defines rules that are used by `$urlRouterProvider to find matches for
+ * Defines rules that are used by `$urlRouterProvider` to find matches for
* specific URLs.
*
* @example
@@ -61,7 +60,7 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
* @param {object} rule Handler function that takes `$injector` and `$location`
* services as arguments. You can use them to return a valid path as a string.
*
- * @return {object} $urlRouterProvider - $urlRouterProvider instance
+ * @return {object} `$urlRouterProvider` - `$urlRouterProvider` instance
*/
this.rule = function (rule) {
if (!isFunction(rule)) throw new Error("'rule' must be a function");
@@ -75,7 +74,7 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
* @methodOf ui.router.router.$urlRouterProvider
*
* @description
- * Defines a path that is used when an invalied route is requested.
+ * Defines a path that is used when an invalid route is requested.
*
* @example
*
@@ -98,7 +97,7 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
* rule that returns the url path. The function version is passed two params:
* `$injector` and `$location` services.
*
- * @return {object} $urlRouterProvider - $urlRouterProvider instance
+ * @return {object} `$urlRouterProvider` - `$urlRouterProvider` instance
*/
this.otherwise = function (rule) {
if (isString(rule)) {
@@ -124,8 +123,8 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
*
* @description
* Registers a handler for a given url matching. if handle is a string, it is
- * treated as a redirect, and is interpolated according to the syyntax of match
- * (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).
+ * treated as a redirect, and is interpolated according to the syntax of match
+ * (i.e. like `String.replace()` for `RegExp`, or like a `UrlMatcher` pattern otherwise).
*
* If the handler is a function, it is injectable. It gets invoked if `$location`
* matches. You have the option of inject the match object as `$match`.
@@ -197,6 +196,59 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
throw new Error("invalid 'what' in when()");
};
+ /**
+ * @ngdoc function
+ * @name ui.router.router.$urlRouterProvider#deferIntercept
+ * @methodOf ui.router.router.$urlRouterProvider
+ *
+ * @description
+ * Disables (or enables) deferring location change interception.
+ *
+ * If you wish to customize the behavior of syncing the URL (for example, if you wish to
+ * defer a transition but maintain the current URL), call this method at configuration time.
+ * Then, at run time, call `$urlRouter.listen()` after you have configured your own
+ * `$locationChangeSuccess` event handler.
+ *
+ * @example
+ *
+ * var app = angular.module('app', ['ui.router.router']);
+ *
+ * app.config(function ($urlRouterProvider) {
+ *
+ * // Prevent $urlRouter from automatically intercepting URL changes;
+ * // this allows you to configure custom behavior in between
+ * // location changes and route synchronization:
+ * $urlRouterProvider.deferIntercept();
+ *
+ * }).run(function ($rootScope, $urlRouter, UserService) {
+ *
+ * $rootScope.$on('$locationChangeSuccess', function(e) {
+ * // UserService is an example service for managing user state
+ * if (UserService.isLoggedIn()) return;
+ *
+ * // Prevent $urlRouter's default handler from firing
+ * e.preventDefault();
+ *
+ * UserService.handleLogin().then(function() {
+ * // Once the user has logged in, sync the current URL
+ * // to the router:
+ * $urlRouter.sync();
+ * });
+ * });
+ *
+ * // Configures $urlRouter's listener *after* your custom listener
+ * $urlRouter.listen();
+ * });
+ *
+ *
+ * @param {boolean} defer Indicates whether to defer location change interception. Passing
+ no parameter is equivalent to `true`.
+ */
+ this.deferIntercept = function (defer) {
+ if (defer === undefined) defer = true;
+ interceptDeferred = defer;
+ };
+
/**
* @ngdoc object
* @name ui.router.router.$urlRouter
@@ -242,7 +294,12 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
if (otherwise) check(otherwise);
}
- $rootScope.$on('$locationChangeSuccess', update);
+ function listen() {
+ listener = listener || $rootScope.$on('$locationChangeSuccess', update);
+ return listener;
+ }
+
+ if (!interceptDeferred) listen();
return {
/**
@@ -275,6 +332,10 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
update();
},
+ listen: function() {
+ return listen();
+ },
+
update: function(read) {
if (read) {
location = $location.url();
@@ -291,9 +352,37 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
if (options && options.replace) $location.replace();
},
+ /**
+ * @ngdoc function
+ * @name ui.router.router.$urlRouter#href
+ * @methodOf ui.router.router.$urlRouter
+ *
+ * @description
+ * A URL generation method that returns the compiled URL for a given
+ * {@link ui.router.util.type:UrlMatcher `UrlMatcher`}, populated with the provided parameters.
+ *
+ * @example
+ *
+ * $bob = $urlRouter.href(new UrlMatcher("/about/:person"), {
+ * person: "bob"
+ * });
+ * // $bob == "/about/bob";
+ *
+ *
+ * @param {UrlMatcher} urlMatcher The `UrlMatcher` object which is used as the template of the URL to generate.
+ * @param {object=} params An object of parameter values to fill the matcher's required parameters.
+ * @param {object=} options Options object. The options are:
+ *
+ * - **`absolute`** - {boolean=false}, If true will generate an absolute url, e.g. "http://www.example.com/fullurl".
+ *
+ * @returns {string} Returns the fully compiled URL, or `null` if `params` fail validation against `urlMatcher`
+ */
href: function(urlMatcher, params, options) {
+ if (!urlMatcher.validates(params)) return null;
+
var isHtml5 = $locationProvider.html5Mode();
var url = urlMatcher.format(params);
+ options = options || {};
if (!isHtml5 && url) {
url = "#" + $locationProvider.hashPrefix() + url;
@@ -304,8 +393,8 @@ function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
return url;
}
- var slash = (!isHtml5 && url ? '/' : ''),
- port = $location.port() == 80 || $location.port() == 443 ? '' : ':' + $location.port();
+ var slash = (!isHtml5 && url ? '/' : ''), port = $location.port();
+ port = (port === 80 || port === 443 ? '' : ':' + port);
return [$location.protocol(), '://', $location.host(), port, slash, url].join('');
}
diff --git a/test/stateDirectivesSpec.js b/test/stateDirectivesSpec.js
index 244f0a060..da21806b4 100644
--- a/test/stateDirectivesSpec.js
+++ b/test/stateDirectivesSpec.js
@@ -117,7 +117,7 @@ describe('uiStateRef', function() {
expect(el.attr('href')).toBe('#/contacts/3');
}));
- it('should transition states when left-clicked', inject(function($state, $stateParams, $document, $q) {
+ it('should transition states when left-clicked', inject(function($state, $stateParams, $q) {
expect($state.$current.name).toEqual('');
triggerClick(el);
@@ -125,10 +125,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('contacts.item.detail');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should transition when given a click that contains no data (fake-click)', inject(function($state, $stateParams, $document, $q) {
+ it('should transition when given a click that contains no data (fake-click)', inject(function($state, $stateParams, $q) {
expect($state.current.name).toEqual('');
triggerClick(el, {
@@ -142,10 +142,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('contacts.item.detail');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should not transition states when ctrl-clicked', inject(function($state, $stateParams, $document, $q) {
+ it('should not transition states when ctrl-clicked', inject(function($state, $stateParams, $q) {
expect($state.$current.name).toEqual('');
triggerClick(el, { ctrlKey: true });
@@ -153,10 +153,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should not transition states when meta-clicked', inject(function($state, $stateParams, $document, $q) {
+ it('should not transition states when meta-clicked', inject(function($state, $stateParams, $q) {
expect($state.$current.name).toEqual('');
triggerClick(el, { metaKey: true });
@@ -164,10 +164,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should not transition states when shift-clicked', inject(function($state, $stateParams, $document, $q) {
+ it('should not transition states when shift-clicked', inject(function($state, $stateParams, $q) {
expect($state.$current.name).toEqual('');
triggerClick(el, { shiftKey: true });
@@ -175,10 +175,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should not transition states when middle-clicked', inject(function($state, $stateParams, $document, $q) {
+ it('should not transition states when middle-clicked', inject(function($state, $stateParams, $q) {
expect($state.$current.name).toEqual('');
triggerClick(el, { button: 1 });
@@ -186,10 +186,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should not transition states when element has target specified', inject(function($state, $stateParams, $document, $q) {
+ it('should not transition states when element has target specified', inject(function($state, $stateParams, $q) {
el.attr('target', '_blank');
expect($state.$current.name).toEqual('');
@@ -198,10 +198,10 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
- it('should not transition states if preventDefault() is called in click handler', inject(function($state, $stateParams, $document, $q) {
+ it('should not transition states if preventDefault() is called in click handler', inject(function($state, $stateParams, $q) {
expect($state.$current.name).toEqual('');
el.bind('click', function(e) {
e.preventDefault();
@@ -212,7 +212,7 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.current.name).toEqual('');
- expect($stateParams).toEqual({ id: "5" });
+ expect($stateParams).toEqual({ id: 5 });
}));
it('should allow passing params to current state', inject(function($compile, $rootScope, $state) {
@@ -277,7 +277,7 @@ describe('uiStateRef', function() {
$q.flush();
expect($state.$current.name).toBe("contacts.item.detail");
- expect($state.params).toEqual({ id: '5' });
+ expect($state.params).toEqual({ id: 5 });
}));
it('should resolve states from parent uiView', inject(function ($state, $stateParams, $q, $timeout) {
diff --git a/test/stateSpec.js b/test/stateSpec.js
index 7dcae9f3f..3d504f538 100644
--- a/test/stateSpec.js
+++ b/test/stateSpec.js
@@ -20,9 +20,9 @@ describe('state', function () {
var A = { data: {} },
B = {},
C = {},
- D = { params: [ 'x', 'y' ] },
- DD = { parent: D, params: [ 'x', 'y', 'z' ] },
- E = { params: [ 'i' ] },
+ D = { params: { x: {}, y: {} } },
+ DD = { parent: D, params: { x: {}, y: {}, z: {} } },
+ E = { params: { i: {} } },
H = { data: {propA: 'propA', propB: 'propB'} },
HH = { parent: H },
HHH = {parent: HH, data: {propA: 'overriddenA', propC: 'propC'} },
@@ -91,6 +91,9 @@ describe('state', function () {
}
}
})
+ .state('badParam', {
+ url: "/bad/{param:int}"
+ })
.state('first', { url: '^/first/subpath' })
.state('second', { url: '^/second' })
@@ -258,14 +261,14 @@ describe('state', function () {
initStateTo(DD, { x: 1, y: 2, z: 3 });
var called;
$rootScope.$on('$stateNotFound', function (ev, redirect) {
- stateProvider.state(redirect.to, { parent: DD, params: [ 'x', 'y', 'z', 'w' ]});
+ stateProvider.state(redirect.to, { parent: DD, params: { x: {}, y: {}, z: {}, w: {} }});
called = true;
});
var promise = $state.go('DDD', { w: 4 });
$q.flush();
expect(called).toBeTruthy();
expect($state.current.name).toEqual('DDD');
- expect($state.params).toEqual({ x: '1', y: '2', z: '3', w: '4' });
+ expect($state.params).toEqual({ x: 1, y: 2, z: 3, w: 4 });
}));
it('can defer a state transition in $stateNotFound', inject(function ($state, $q, $rootScope) {
@@ -277,12 +280,12 @@ describe('state', function () {
called = true;
});
var promise = $state.go('AA', { a: 1 });
- stateProvider.state('AA', { parent: A, params: [ 'a' ]});
+ stateProvider.state('AA', { parent: A, params: { a: {} }});
deferred.resolve();
$q.flush();
expect(called).toBeTruthy();
expect($state.current.name).toEqual('AA');
- expect($state.params).toEqual({ a: '1' });
+ expect($state.params).toEqual({ a: 1 });
}));
it('can defer and supersede a state transition in $stateNotFound', inject(function ($state, $q, $rootScope) {
@@ -295,7 +298,7 @@ describe('state', function () {
});
var promise = $state.go('AA', { a: 1 });
$state.go(B);
- stateProvider.state('AA', { parent: A, params: [ 'a' ]});
+ stateProvider.state('AA', { parent: A, params: { a: {} }});
deferred.resolve();
$q.flush();
expect(called).toBeTruthy();
@@ -436,7 +439,7 @@ describe('state', function () {
describe('.go()', function () {
it('transitions to a relative state', inject(function ($state, $q) {
- $state.transitionTo('about.person.item', { id: 5 }); $q.flush();
+ $state.transitionTo('about.person.item', { person: "bob", id: 5 }); $q.flush();
$state.go('^.^.sidebar'); $q.flush();
expect($state.$current.name).toBe('about.sidebar');
@@ -475,7 +478,7 @@ describe('state', function () {
$q.flush();
expect($state.$current.name).toBe('about.person.item');
- expect($stateParams).toEqual({ person: 'bob', id: '5' });
+ expect($stateParams).toEqual({ person: 'bob', id: 5 });
$state.go('^.^.sidebar');
$q.flush();
@@ -603,7 +606,7 @@ describe('state', function () {
it('contains the parameter values for the current state', inject(function ($state, $q) {
initStateTo(D, { x: 'x value', z: 'invalid value' });
- expect($state.params).toEqual({ x: 'x value', y: null });
+ expect($state.params).toEqual({ x: 'x value', y: undefined });
}));
});
@@ -712,6 +715,7 @@ describe('state', function () {
'about.person.item',
'about.sidebar',
'about.sidebar.item',
+ 'badParam',
'dynamicController',
'first',
'home',
@@ -779,6 +783,29 @@ describe('state', function () {
expect($state.current.name).toBe('');
}));
+ describe("typed parameter handling", function() {
+
+ it('should initialize parameters without a hacky empty test', inject(function ($urlMatcherFactory, $state) {
+ new UrlMatcher("");
+ }));
+
+ it('should ignore bad url parameters', inject(function ($state, $rootScope, $location, $urlMatcherFactory) {
+ $location.path("/bad/5");
+ $rootScope.$broadcast("$locationChangeSuccess");
+ $rootScope.$apply();
+ expect($state.current.name).toBe("badParam");
+
+ $state.transitionTo("about");
+ $rootScope.$apply();
+ expect($state.current.name).toBe('about');
+
+ $location.path("/bad/foo");
+ $rootScope.$broadcast("$locationChangeSuccess");
+ $rootScope.$apply();
+ expect($state.current.name).toBe("about");
+ }));
+ });
+
it('should revert to last known working url on state change failure', inject(function ($state, $rootScope, $location, $q) {
$state.transitionTo("about");
$q.flush();
@@ -878,16 +905,16 @@ describe('state', function () {
describe('substate and stateParams inheritance', function() {
it('should inherit the parent param', inject(function ($state, $stateParams, $q) {
- initStateTo($state.get('root'), {param1: 1});
- $state.go('root.sub1', {param2: 2});
+ initStateTo($state.get('root'), { param1: 1 });
+ $state.go('root.sub1', { param2: 2 });
$q.flush();
expect($state.current.name).toEqual('root.sub1');
- expect($stateParams).toEqual({param1: '1', param2: '2'});
+ expect($stateParams).toEqual({ param1: 1, param2: 2 });
}));
it('should not inherit siblings\' states', inject(function ($state, $stateParams, $q) {
- initStateTo($state.get('root'), {param1: 1});
- $state.go('root.sub1', {param2: 2});
+ initStateTo($state.get('root'), { param1: 1 });
+ $state.go('root.sub1', { param2: 2 });
$q.flush();
expect($state.current.name).toEqual('root.sub1');
@@ -895,7 +922,7 @@ describe('state', function () {
$q.flush();
expect($state.current.name).toEqual('root.sub2');
- expect($stateParams).toEqual({param1: '1', param2: null});
+ expect($stateParams).toEqual({ param1: 1, param2: undefined });
}));
});
diff --git a/test/urlMatcherFactorySpec.js b/test/urlMatcherFactorySpec.js
index 67dbae3e1..80b500c23 100644
--- a/test/urlMatcherFactorySpec.js
+++ b/test/urlMatcherFactorySpec.js
@@ -1,19 +1,59 @@
describe("UrlMatcher", function () {
- it("matches static URLs", function () {
+
+ describe("provider", function () {
+
+ var provider;
+
+ beforeEach(function() {
+ angular.module('ui.router.router.test', function() {}).config(function ($urlMatcherFactoryProvider) {
+ provider = $urlMatcherFactoryProvider;
+ });
+
+ module('ui.router.router', 'ui.router.router.test');
+
+ inject(function($injector) {
+ $injector.invoke(provider.$get);
+ });
+ });
+
+ it("should factory matchers with correct configuration", function () {
+ provider.caseInsensitive(false);
+ expect(provider.compile('/hello').exec('/HELLO')).toBeNull();
+
+ provider.caseInsensitive(true);
+ expect(provider.compile('/hello').exec('/HELLO')).toEqual({});
+
+ provider.strictMode(true);
+ expect(provider.compile('/hello').exec('/hello/')).toBeNull();
+
+ provider.strictMode(false);
+ expect(provider.compile('/hello').exec('/hello/')).toEqual({});
+ });
+
+ it("should correctly validate UrlMatcher interface", function () {
+ var m = new UrlMatcher("/");
+ expect(provider.isMatcher(m)).toBe(true);
+
+ m.validates = null;
+ expect(provider.isMatcher(m)).toBe(false);
+ });
+ });
+
+ it("should match static URLs", function () {
expect(new UrlMatcher('/hello/world').exec('/hello/world')).toEqual({});
});
- it("matches static case insensitive URLs", function () {
- expect(new UrlMatcher('/hello/world', true).exec('/heLLo/World')).toEqual({});
+ it("should match static case insensitive URLs", function () {
+ expect(new UrlMatcher('/hello/world', { caseInsensitive: true }).exec('/heLLo/World')).toEqual({});
});
- it("matches against the entire path", function () {
+ it("should match against the entire path", function () {
var matcher = new UrlMatcher('/hello/world');
expect(matcher.exec('/hello/world/')).toBeNull();
expect(matcher.exec('/hello/world/suffix')).toBeNull();
});
- it("parses parameter placeholders", function () {
+ it("should parse parameter placeholders", function () {
var matcher = new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from&to');
var params = matcher.parameters();
expect(params.length).toBe(5);
@@ -24,105 +64,107 @@ describe("UrlMatcher", function () {
expect(params).toContain('to');
});
- it("handles proper snake case parameter names", function(){
- var matcher = new UrlMatcher('/users/?from&to&snake-case&snake-case-triple');
- var params = matcher.parameters();
- expect(params.length).toBe(4);
- expect(params).toContain('from');
- expect(params).toContain('to');
- expect(params).toContain('snake-case');
- expect(params).toContain('snake-case-triple');
- });
-
- it("handles invalid snake case parameter names", function(){
- expect(function() { new UrlMatcher('/users/?from&to&-snake'); }).toThrow(
- "Invalid parameter name '-snake' in pattern '/users/?from&to&-snake'"
- );
+ describe("snake-case parameters", function() {
+ it("should match if properly formatted", function() {
+ var matcher = new UrlMatcher('/users/?from&to&snake-case&snake-case-triple');
+ var params = matcher.parameters();
- expect(function() { new UrlMatcher('/users/?from&to&snake-'); }).toThrow(
- "Invalid parameter name 'snake-' in pattern '/users/?from&to&snake-'"
- );
+ expect(params.length).toBe(4);
+ expect(params).toContain('from');
+ expect(params).toContain('to');
+ expect(params).toContain('snake-case');
+ expect(params).toContain('snake-case-triple');
});
- it(".exec() captures parameter values", function () {
- expect(
- new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from&to')
- .exec('/users/123/details//0', {}))
- .toEqual({ id:'123', type:'', repeat:'0' });
- });
+ it("should not match if invalid", function() {
+ var err = "Invalid parameter name '-snake' in pattern '/users/?from&to&-snake'";
+ expect(function() { new UrlMatcher('/users/?from&to&-snake'); }).toThrow(err);
- it(".exec() captures catch-all parameters", function () {
- var m = new UrlMatcher('/document/*path');
- expect(m.exec('/document/a/b/c', {})).toEqual({ path: 'a/b/c' });
- expect(m.exec('/document/', {})).toEqual({ path: '' });
+ err = "Invalid parameter name 'snake-' in pattern '/users/?from&to&snake-'";
+ expect(function() { new UrlMatcher('/users/?from&to&snake-'); }).toThrow(err);
+ });
});
- it(".exec() uses the optional regexp with curly brace placeholders", function () {
- expect(
- new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from&to')
- .exec('/users/123/details/what/thisShouldBeDigits', {}))
- .toBeNull();
- });
+ describe(".exec()", function() {
+ it("should capture parameter values", function () {
+ var m = new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from&to');
+ expect(m.exec('/users/123/details//0', {})).toEqual({ id:'123', type:'', repeat:'0' });
+ });
- it(".exec() treats the URL as already decoded and does not decode it further", function () {
- expect(new UrlMatcher('/users/:id').exec('/users/100%25', {})).toEqual({ id: '100%25'});
- });
+ it("should capture catch-all parameters", function () {
+ var m = new UrlMatcher('/document/*path');
+ expect(m.exec('/document/a/b/c', {})).toEqual({ path: 'a/b/c' });
+ expect(m.exec('/document/', {})).toEqual({ path: '' });
+ });
- it('.exec() throws on unbalanced capture list', function () {
- var shouldThrow = {
- "/url/{matchedParam:([a-z]+)}/child/{childParam}": '/url/someword/child/childParam',
- "/url/{matchedParam:([a-z]+)}/child/{childParam}?foo": '/url/someword/child/childParam'
- };
+ it("should use the optional regexp with curly brace placeholders", function () {
+ var m = new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from&to');
+ expect(m.exec('/users/123/details/what/thisShouldBeDigits', {})).toBeNull();
+ });
- angular.forEach(shouldThrow, function(url, route) {
- expect(function() { new UrlMatcher(route).exec(url, {}); }).toThrow(
- "Unbalanced capture group in route '" + route + "'"
- );
+ it("should treat the URL as already decoded and does not decode it further", function () {
+ expect(new UrlMatcher('/users/:id').exec('/users/100%25', {})).toEqual({ id: '100%25'});
});
- var shouldPass = {
- "/url/{matchedParam:[a-z]+}/child/{childParam}": '/url/someword/child/childParam',
- "/url/{matchedParam:[a-z]+}/child/{childParam}?foo": '/url/someword/child/childParam'
- };
+ it('should throw on unbalanced capture list', function () {
+ var shouldThrow = {
+ "/url/{matchedParam:([a-z]+)}/child/{childParam}": '/url/someword/child/childParam',
+ "/url/{matchedParam:([a-z]+)}/child/{childParam}?foo": '/url/someword/child/childParam'
+ };
+
+ angular.forEach(shouldThrow, function(url, route) {
+ expect(function() { new UrlMatcher(route).exec(url, {}); }).toThrow(
+ "Unbalanced capture group in route '" + route + "'"
+ );
+ });
- angular.forEach(shouldPass, function(url, route) {
- expect(function() { new UrlMatcher(route).exec(url, {}); }).not.toThrow();
+ var shouldPass = {
+ "/url/{matchedParam:[a-z]+}/child/{childParam}": '/url/someword/child/childParam',
+ "/url/{matchedParam:[a-z]+}/child/{childParam}?foo": '/url/someword/child/childParam'
+ };
+
+ angular.forEach(shouldPass, function(url, route) {
+ expect(function() { new UrlMatcher(route).exec(url, {}); }).not.toThrow();
+ });
});
});
- it(".format() reconstitutes the URL", function () {
- expect(
- new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from')
- .format({ id:'123', type:'default', repeat:444, ignored:'value', from:'1970' }))
- .toEqual('/users/123/details/default/444?from=1970');
- });
+ describe(".format()", function() {
+ it("should reconstitute the URL", function () {
+ var m = new UrlMatcher('/users/:id/details/{type}/{repeat:[0-9]+}?from'),
+ params = { id:'123', type:'default', repeat:444, ignored:'value', from:'1970' };
- it(".format() encodes URL parameters", function () {
- expect(new UrlMatcher('/users/:id').format({ id:'100%'})).toEqual('/users/100%25');
- });
+ expect(m.format(params)).toEqual('/users/123/details/default/444?from=1970');
+ });
- it(".format() encodes URL parameters with hashes", function () {
- expect(
- new UrlMatcher('/users/:id#:section')
- .format({ id: 'bob', section: 'contact-details' }))
- .toEqual('/users/bob#contact-details');
- });
+ it("should encode URL parameters", function () {
+ expect(new UrlMatcher('/users/:id').format({ id:'100%'})).toEqual('/users/100%25');
+ });
- it(".concat() concatenates matchers", function () {
- var matcher = new UrlMatcher('/users/:id/details/{type}?from').concat('/{repeat:[0-9]+}?to');
- var params = matcher.parameters();
- expect(params.length).toBe(5);
- expect(params).toContain('id');
- expect(params).toContain('type');
- expect(params).toContain('repeat');
- expect(params).toContain('from');
- expect(params).toContain('to');
+ it("encodes URL parameters with hashes", function () {
+ var m = new UrlMatcher('/users/:id#:section'),
+ params = { id: 'bob', section: 'contact-details' };
+ expect(m.format(params)).toEqual('/users/bob#contact-details');
+ });
});
- it(".concat() returns a new matcher", function () {
- var base = new UrlMatcher('/users/:id/details/{type}?from');
- var matcher = base.concat('/{repeat:[0-9]+}?to');
- expect(matcher).toNotBe(base);
+ describe(".concat()", function() {
+ it("should concatenate matchers", function () {
+ var matcher = new UrlMatcher('/users/:id/details/{type}?from').concat('/{repeat:[0-9]+}?to');
+ var params = matcher.parameters();
+ expect(params.length).toBe(5);
+ expect(params).toContain('id');
+ expect(params).toContain('type');
+ expect(params).toContain('repeat');
+ expect(params).toContain('from');
+ expect(params).toContain('to');
+ });
+
+ it("should return a new matcher", function () {
+ var base = new UrlMatcher('/users/:id/details/{type}?from');
+ var matcher = base.concat('/{repeat:[0-9]+}?to');
+ expect(matcher).toNotBe(base);
+ });
});
});
@@ -142,14 +184,216 @@ describe("urlMatcherFactory", function () {
it("recognizes matchers", function () {
expect($umf.isMatcher(new UrlMatcher('/'))).toBe(true);
+
+ var custom = {
+ format: angular.noop,
+ exec: angular.noop,
+ concat: angular.noop,
+ validates: angular.noop,
+ parameters: angular.noop
+ };
+ expect($umf.isMatcher(custom)).toBe(true);
});
- it("should handle case sensistive URL by default", function () {
+ it("should handle case sensitive URL by default", function () {
expect($umf.compile('/hello/world').exec('/heLLo/WORLD')).toBeNull();
});
it("should handle case insensistive URL", function () {
- $umf.caseInsensitiveMatch(true);
+ $umf.caseInsensitive(true);
expect($umf.compile('/hello/world').exec('/heLLo/WORLD')).toEqual({});
});
+
+ describe("typed parameters", function() {
+ it("should accept object definitions", function () {
+ var type = { encode: function() {}, decode: function() {} };
+ $umf.type("myType", type);
+ expect($umf.type("myType").encode).toBe(type.encode);
+ });
+
+ it("should reject duplicate definitions", function () {
+ $umf.type("myType", { encode: function () {}, decode: function () {} });
+ expect(function() { $umf.type("myType", {}); }).toThrow("A type named 'myType' has already been defined.");
+ });
+
+ it("should accept injected function definitions", inject(function ($stateParams) {
+ $umf.type("myType", function($stateParams) {
+ return {
+ decode: function() {
+ return $stateParams;
+ }
+ };
+ });
+ expect($umf.type("myType").decode()).toBe($stateParams);
+ }));
+
+ it("should accept annotated function definitions", inject(function ($stateParams) {
+ $umf.type("myAnnotatedType", ['$stateParams', function(s) {
+ return {
+ decode: function() {
+ return s;
+ }
+ };
+ }]);
+ expect($umf.type("myAnnotatedType").decode()).toBe($stateParams);
+ }));
+
+ it("should match built-in types", function () {
+ var m = new UrlMatcher("/{foo:int}/{flag:bool}");
+ expect(m.exec("/1138/1")).toEqual({ foo: 1138, flag: true });
+ expect(m.format({ foo: 5, flag: true })).toBe("/5/1");
+ });
+
+ it("should encode/decode dates", function () {
+ var m = new UrlMatcher("/calendar/{date:date}"),
+ result = m.exec("/calendar/2014-03-26");
+
+ expect(result.date instanceof Date).toBe(true);
+ expect(result.date.toUTCString()).toEqual('Wed, 26 Mar 2014 00:00:00 GMT');
+ expect(m.format({ date: new Date(2014, 2, 26) })).toBe("/calendar/2014-03-26");
+ });
+
+ it("should not match invalid typed parameter values", function() {
+ var m = new UrlMatcher('/users/{id:int}');
+
+ expect(m.exec('/users/1138').id).toBe(1138);
+ expect(m.exec('/users/alpha')).toBeNull();
+
+ expect(m.format({ id: 1138 })).toBe("/users/1138");
+ expect(m.format({ id: "alpha" })).toBeNull();
+ });
+ });
+
+ describe("optional parameters", function() {
+ it("should match with or without values", function () {
+ var m = new UrlMatcher('/users/{id:int}', {
+ params: { id: { value: null } }
+ });
+ expect(m.exec('/users/1138')).toEqual({ id: 1138 });
+ expect(m.exec('/users/').id).toBeNull();
+ expect(m.exec('/users').id).toBeNull();
+ });
+
+ it("should correctly match multiple", function() {
+ var m = new UrlMatcher('/users/{id:int}/{state:[A-Z]+}', {
+ params: { id: { value: null }, state: { value: null } }
+ });
+ expect(m.exec('/users/1138')).toEqual({ id: 1138, state: null });
+ expect(m.exec('/users/1138/NY')).toEqual({ id: 1138, state: "NY" });
+
+ expect(m.exec('/users/').id).toBeNull();
+ expect(m.exec('/users/').state).toBeNull();
+
+ expect(m.exec('/users').id).toBeNull();
+ expect(m.exec('/users').state).toBeNull();
+
+ expect(m.exec('/users/NY').state).toBe("NY");
+ expect(m.exec('/users/NY').id).toBeNull();
+ });
+
+ it("should correctly format with or without values", function() {
+ var m = new UrlMatcher('/users/{id:int}', {
+ params: { id: { value: null } }
+ });
+ expect(m.format()).toBe('/users/');
+ expect(m.format({ id: 1138 })).toBe('/users/1138');
+ });
+
+ it("should correctly format multiple", function() {
+ var m = new UrlMatcher('/users/{id:int}/{state:[A-Z]+}', {
+ params: { id: { value: null }, state: { value: null } }
+ });
+
+ expect(m.format()).toBe("/users/");
+ expect(m.format({ id: 1138 })).toBe("/users/1138/");
+ expect(m.format({ state: "NY" })).toBe("/users/NY");
+ expect(m.format({ id: 1138, state: "NY" })).toBe("/users/1138/NY");
+ });
+
+ it("should match in between static segments", function() {
+ var m = new UrlMatcher('/users/{user:int}/photos', {
+ params: { user: 5 }
+ });
+ expect(m.exec('/users/photos').user).toBe(5);
+ expect(m.exec('/users/6/photos').user).toBe(6);
+ expect(m.format()).toBe("/users/photos");
+ expect(m.format({ user: 1138 })).toBe("/users/1138/photos");
+ });
+
+ describe("default values", function() {
+ it("should populate if not supplied in URL", function() {
+ var m = new UrlMatcher('/users/{id:int}/{test}', {
+ params: { id: { value: 0 }, test: { value: "foo" } }
+ });
+ expect(m.exec('/users')).toEqual({ id: 0, test: "foo" });
+ expect(m.exec('/users/2')).toEqual({ id: 2, test: "foo" });
+ expect(m.exec('/users/bar')).toEqual({ id: 0, test: "bar" });
+ expect(m.exec('/users/2/bar')).toEqual({ id: 2, test: "bar" });
+ expect(m.exec('/users/bar/2')).toBeNull();
+ });
+
+ it("should allow shorthand definitions", function() {
+ var m = new UrlMatcher('/foo/:foo', {
+ params: { foo: "bar" }
+ });
+ expect(m.exec("/foo")).toEqual({ foo: "bar" });
+ });
+
+ it("should populate query params", function() {
+ var defaults = { order: "name", limit: 25, page: 1 };
+ var m = new UrlMatcher('/foo?order&limit&page', {
+ params: defaults
+ });
+ expect(m.exec("/foo")).toEqual(defaults);
+ });
+
+ it("should allow function-calculated values", function() {
+ var m = new UrlMatcher('/foo/:bar', {
+ params: {
+ bar: function() {
+ return "Value from bar()";
+ }
+ }
+ });
+ expect(m.exec('/foo').bar).toBe("Value from bar()");
+ });
+
+ it("should allow injectable functions", inject(function($stateParams) {
+ var m = new UrlMatcher('/users/:user', {
+ params: {
+ user: function($stateParams) {
+ return $stateParams.user;
+ }
+ }
+ });
+ var user = { name: "Bob" };
+
+ $stateParams.user = user;
+ expect(m.exec('/users').user).toBe(user);
+ }));
+ });
+ });
+
+ describe("strict matching", function() {
+ it("should match with or without trailing slash", function() {
+ var m = new UrlMatcher('/users', { strict: false });
+ expect(m.exec('/users')).toEqual({});
+ expect(m.exec('/users/')).toEqual({});
+ });
+
+ it("should not match multiple trailing slashes", function() {
+ var m = new UrlMatcher('/users', { strict: false });
+ expect(m.exec('/users//')).toBeNull();
+ });
+
+ it("should match when defined with parameters", function() {
+ var m = new UrlMatcher('/users/{name}', { strict: false, params: {
+ name: { value: null }
+ }});
+ expect(m.exec('/users/')).toEqual({ name: null });
+ expect(m.exec('/users/bob')).toEqual({ name: "bob" });
+ expect(m.exec('/users/bob/')).toEqual({ name: "bob" });
+ expect(m.exec('/users/bob//')).toBeNull();
+ });
+ });
});
diff --git a/test/urlRouterSpec.js b/test/urlRouterSpec.js
index 9cd7de370..8cc41698f 100644
--- a/test/urlRouterSpec.js
+++ b/test/urlRouterSpec.js
@@ -2,40 +2,73 @@ describe("UrlRouter", function () {
var $urp, $ur, location, match, scope;
- beforeEach(function() {
- angular.module('ui.router.router.test', function() {}).config(function ($urlRouterProvider) {
- $urp = $urlRouterProvider;
+ describe("provider", function () {
- $urp.rule(function ($injector, $location) {
- var path = $location.path();
- if (!/baz/.test(path)) return false;
- return path.replace('baz', 'b4z');
- }).when('/foo/:param', function($match) {
- match = ['/foo/:param', $match];
- }).when('/bar', function($match) {
- match = ['/bar', $match];
+ beforeEach(function() {
+ angular.module('ui.router.router.test', function() {}).config(function ($urlRouterProvider) {
+ $urlRouterProvider.deferIntercept();
+ $urp = $urlRouterProvider;
});
- });
- module('ui.router.router', 'ui.router.router.test');
+ module('ui.router.router', 'ui.router.router.test');
- inject(function($rootScope, $location, $injector) {
- scope = $rootScope.$new();
- location = $location;
- $ur = $injector.invoke($urp.$get);
+ inject(function($rootScope, $location, $injector) {
+ scope = $rootScope.$new();
+ location = $location;
+ $ur = $injector.invoke($urp.$get);
+ });
});
- });
-
- describe("provider", function () {
it("should throw on non-function rules", function () {
expect(function() { $urp.rule(null); }).toThrow("'rule' must be a function")
expect(function() { $urp.otherwise(null); }).toThrow("'rule' must be a function")
});
+ it("should allow location changes to be deferred", inject(function ($urlRouter, $location, $rootScope) {
+ var log = [];
+
+ $urp.rule(function ($injector, $location) {
+ log.push($location.path());
+ });
+
+ $location.path("/foo");
+ $rootScope.$broadcast("$locationChangeSuccess");
+
+ expect(log).toEqual([]);
+
+ $urlRouter.listen();
+ $rootScope.$broadcast("$locationChangeSuccess");
+
+ expect(log).toEqual(["/foo"]);
+ }));
});
describe("service", function() {
+
+ beforeEach(function() {
+ angular.module('ui.router.router.test', function() {}).config(function ($urlRouterProvider) {
+ $urp = $urlRouterProvider;
+
+ $urp.rule(function ($injector, $location) {
+ var path = $location.path();
+ if (!/baz/.test(path)) return false;
+ return path.replace('baz', 'b4z');
+ }).when('/foo/:param', function($match) {
+ match = ['/foo/:param', $match];
+ }).when('/bar', function($match) {
+ match = ['/bar', $match];
+ });
+ });
+
+ module('ui.router.router', 'ui.router.router.test');
+
+ inject(function($rootScope, $location, $injector) {
+ scope = $rootScope.$new();
+ location = $location;
+ $ur = $injector.invoke($urp.$get);
+ });
+ });
+
it("should execute rewrite rules", function () {
location.path("/foo");
scope.$emit("$locationChangeSuccess");
@@ -64,7 +97,13 @@ describe("UrlRouter", function () {
it("should allow custom URL matchers", function () {
var custom = {
- url: { exec: function() {}, format: function() {}, concat: function() {} },
+ url: {
+ exec: function() {},
+ format: function() {},
+ concat: function() {},
+ validates: function() {},
+ parameters: function() {}
+ },
handler: function() {}
};
@@ -146,6 +185,20 @@ describe("UrlRouter", function () {
expect($location.url()).toBe('/old');
}));
});
+
+ describe("URL generation", function() {
+ it("should return null when UrlMatcher rejects parameters", inject(function($urlRouter, $urlMatcherFactory) {
+ $urlMatcherFactory.type("custom", {
+ is: function(val) {
+ return val === 1138;
+ }
+ });
+ var matcher = new UrlMatcher("/foo/{param:custom}");
+
+ expect($urlRouter.href(matcher, { param: 1138 })).toBe('#/foo/1138');
+ expect($urlRouter.href(matcher, { param: 5 })).toBeNull();
+ }));
+ });
});
});
\ No newline at end of file