Parameter Typing -- URL Only

sample/states.js

@@ -27,6 +27,21 @@ angular.module('uiRouterSample')
         // Use $stateProvider to configure your states.
         $stateProvider
 
+          /////////////////////
+          // Parameter Types //
+          /////////////////////
+          .type("date", {
+            equals: function (typeObj, otherObj) {
+              return typeObj.toISOString() === otherObj.toISOString();
+            },
+            decode: function (typeObj) {
+              return typeObj.toISOString();
+            },
+            encode: function (value) {
+              return new Date(value);
+            }
+          })
+
           //////////
           // Home //
           //////////
@@ -139,7 +154,7 @@ angular.module('uiRouterSample')
             // So its url will end up being '/contacts/{contactId:[0-9]{1,8}}'. When the
             // url becomes something like '/contacts/42' then this state becomes active
             // and the $stateParams object becomes { contactId: 42 }.
-            url: '/{contactId:[0-9]{1,4}}',
+            url: '/{contactId:integer}',
 
             // If there is more than a single ui-view in the parent template, or you would
             // like to target a ui-view from even higher up the state tree, you can use the

src/state.js

@@ -107,6 +107,13 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
     $delegates: {}
   };
 
+  // Create a proxy through to the Type registration on the UrlMatcherFactory
+  this.isTypeRegistered = $urlMatcherFactory.isTypeRegistered;
+  this.type = function (name, handler) {
+    $urlMatcherFactory.type(name, handler);
+    return this;
+  };
+
   function isRelative(stateName) {
     return stateName.indexOf(".") === 0 || stateName.indexOf("^") === 0;
   }
@@ -456,7 +463,8 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
 
     forEach(keys, function (name) {
       var value = values[name];
-      normalized[name] = (value != null) ? String(value) : null;
+      //normalized[name] = (value != null) ? String(value) : null;
+      normalized[name] = (value != null) ? value : null;
     });
     return normalized;
   }

src/urlMatcherFactory.js

@@ -59,7 +59,8 @@ function UrlMatcher(pattern) {
   var placeholder = /([:*])(\w+)|\{(\w+)(?:\:((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g,
       names = {}, compiled = '^', last = 0, m,
       segments = this.segments = [],
-      params = this.params = [];
+      params = this.params = [],
+      typeMap = this.typeMap = {};
 
   function addParameter(id) {
     if (!/^\w+(-+\w+)*$/.test(id)) throw new Error("Invalid parameter name '" + id + "' in pattern '" + pattern + "'");
@@ -80,6 +81,10 @@ function UrlMatcher(pattern) {
   while ((m = placeholder.exec(pattern))) {
     id = m[2] || m[3]; // IE[78] returns '' for unmatched groups instead of null
     regexp = m[4] || (m[1] == '*' ? '.*' : '[^/]*');
+    if (isDefined(this.types[regexp])) {
+      this.typeMap[id] = regexp;
+      regexp = '[^/]*';
+    } 
     segment = pattern.substring(last, m.index);
     if (segment.indexOf('?') >= 0) break; // we're into the search part
     compiled += quoteRegExp(segment) + '(' + regexp + ')';
@@ -154,7 +159,10 @@ UrlMatcher.prototype.toString = function () {
  * @return {Object}  The captured parameter values.
  */
 UrlMatcher.prototype.exec = function (path, searchParams) {
-  var m = this.regexp.exec(path);
+  var m = this.regexp.exec(path),
+      types = this.types,
+      typeMap = this.typeMap;
+
   if (!m) return null;
 
   var params = this.params, nTotal = params.length,
@@ -166,7 +174,17 @@ UrlMatcher.prototype.exec = function (path, searchParams) {
   for (i=0; i<nPath; i++) values[params[i]] = m[i+1];
   for (/**/; i<nTotal; i++) values[params[i]] = searchParams[params[i]];
 
-  return values;
+  var decodedValues = {};
+  forEach(values, function (value, key) {
+    if (isDefined(typeMap[key])) {
+      decodedValues[key] = types[typeMap[key]].decode(value);
+    }
+    else {
+      decodedValues[key] = value;
+    }
+  });
+
+  return decodedValues;
 };
 
 /**
@@ -193,20 +211,33 @@ UrlMatcher.prototype.parameters = function () {
  * @return {string}  the formatted URL (path and optionally search part).
  */
 UrlMatcher.prototype.format = function (values) {
-  var segments = this.segments, params = this.params;
+  var segments = this.segments, 
+      params = this.params,
+      types = this.types,
+      typeMap = this.typeMap;
   if (!values) return segments.join('');
 
   var nPath = segments.length-1, nTotal = params.length,
     result = segments[0], i, search, value;
 
+  var encodedValues = {};
+  forEach(values, function (value, key) {
+    if (isDefined(typeMap[key])) {
+      encodedValues[key] = types[typeMap[key]].encode(value);
+    }
+    else {
+      encodedValues[key] = value;
+    }
+  });
+
   for (i=0; i<nPath; i++) {
-    value = values[params[i]];
+    value = encodedValues[params[i]];
     // TODO: Maybe we should throw on null here? It's not really good style to use '' and null interchangeabley
     if (value != null) result += encodeURIComponent(value);
     result += segments[i+1];
   }
   for (/**/; i<nTotal; i++) {
-    value = values[params[i]];
+    value = encodedValues[params[i]];
     if (value != null) {
       result += (search ? '&' : '?') + params[i] + '=' + encodeURIComponent(value);
       search = true;
@@ -216,6 +247,43 @@ UrlMatcher.prototype.format = function (values) {
   return result;
 };
 
+UrlMatcher.prototype.types = {
+  'boolean': {
+    equals: function (typeObj, otherObj) {
+      return typeObj === otherObj;
+    },
+    encode: function (typeObj) {
+      return typeObj.toString();
+    },
+    decode: function (value) {
+      if (value && value.toLowerCase() === 'true') return true;
+      if (value && value.toLowerCase() === 'false') return false;
+      return undefined;
+    }
+  },
+  'integer': {
+    equals: function (typeObj, otherObj) {
+      return typeObj === otherObj;
+    },
+    encode: function (typeObj) {
+      return typeObj.toString();
+    },
+    decode: function (value) {
+      return parseInt(value, 10);
+    }
+  }
+};
+
+/**
+TODO
+ */
+UrlMatcher.prototype.type = function (name, handler) {
+  if (!isString(name) || !isObject(handler) || !isFunction(handler.equals) || !isFunction(handler.decode) || !isFunction(handler.encode)) {
+    throw new Error("Invalid type '" + name + "'");
+  }
+  UrlMatcher.prototype.types[name] = handler;
+};
+
 /**
  * Service. Factory for {@link UrlMatcher} instances. The factory is also available to providers
  * under the name `$urlMatcherFactoryProvider`.
@@ -247,6 +315,10 @@ function $UrlMatcherFactory() {
     return isObject(o) && isFunction(o.exec) && isFunction(o.format) && isFunction(o.concat);
   };
 
+  this.type = function (name, handler) {
+    return UrlMatcher.prototype.type(name, handler);
+  };
+
   this.$get = function () {
     return this;
   };

test/stateDirectivesSpec.js

@@ -97,7 +97,7 @@ 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) {
@@ -106,7 +106,7 @@ 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) {
@@ -116,7 +116,7 @@ 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) {
@@ -126,7 +126,7 @@ 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) {
@@ -136,7 +136,7 @@ describe('uiStateRef', function() {
       $q.flush();
 
       expect($state.current.name).toEqual('');
-      expect($stateParams).toEqual({ id: "5" });
+      expect($stateParams).toEqual({ id: 5 });
     }));
   });
 
@@ -176,7 +176,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) {

test/stateSpec.js

@@ -114,13 +114,13 @@ describe('state', function () {
         expect(from).toBe(E);
         expect(fromParams).toEqual({ i: 'iii' });
         expect(to).toBe(D);
-        expect(toParams).toEqual({ x: '1', y: '2' });
+        expect(toParams).toEqual({ x: 1, y: 2 });
 
         expect($state.current).toBe(from); // $state not updated yet
         expect($state.params).toEqual(fromParams);
         called = true;
       });
-      $state.transitionTo(D, { x: '1', y: '2' });
+      $state.transitionTo(D, { x: 1, y: 2 });
       $q.flush();
       expect(called).toBeTruthy();
       expect($state.current).toBe(D);
@@ -205,7 +205,7 @@ describe('state', function () {
       $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) {
@@ -222,7 +222,7 @@ describe('state', function () {
       $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) {
@@ -374,7 +374,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();

test/urlMatcherFactorySpec.js

@@ -1,4 +1,18 @@
 describe("UrlMatcher", function () {
+  beforeEach(function () {
+    UrlMatcher.prototype.type("test", {
+      equals: function (typeObj, otherObj) {
+        return typeObj === otherObj;
+      },
+      encode: function (typeObj) {
+        return "encoded";
+      },
+      decode: function (value) {
+        return "decoded";
+      }
+    })
+  });
+
   it("matches static URLs", function () {
     expect(new UrlMatcher('/hello/world').exec('/hello/world')).toEqual({});
   });
@@ -20,6 +34,12 @@ describe("UrlMatcher", function () {
     expect(params).toContain('to');
   });
 
+  it("parses parameters with types", function () {
+    var matcher = new UrlMatcher('/users/{id:type}');
+    var params = matcher.parameters();
+    expect(params).toContain('id');
+  });
+
   it("handles proper snake case parameter names", function(){
     var matcher = new UrlMatcher('/users/?from&to&snake-case&snake-case-triple');
     var params = matcher.parameters();
@@ -47,6 +67,13 @@ describe("UrlMatcher", function () {
       .toEqual({ id:'123', type:'', repeat:'0' });
   });
 
+  it(".exec() captures typed parameter values", function () {
+    expect(
+      new UrlMatcher('/users/{id:test}')
+        .exec('/users/22', {}))
+      .toEqual({ id: 'decoded' });
+  });
+
   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' });
@@ -97,6 +124,10 @@ describe("UrlMatcher", function () {
     expect(new UrlMatcher('/users/:id').format({ id:'100%'})).toEqual('/users/100%25');
   });
 
+  it(".format() encode typed URL parameters", function () {
+    expect(new UrlMatcher('/users/{id:test}').format({ id:55})).toEqual('/users/encoded');
+  });
+
   it(".concat() concatenates matchers", function () {
     var matcher = new UrlMatcher('/users/:id/details/{type}?from').concat('/{repeat:[0-9]+}?to');
     var params = matcher.parameters();
@@ -132,4 +163,13 @@ describe("urlMatcherFactory", function () {
   it("recognizes matchers", function () {
     expect($umf.isMatcher(new UrlMatcher('/'))).toBe(true);
   });
+
+  it("registers types", function () {
+    $umf.type("test", {
+      equals: function (typeObj, otherObj) {},
+      decode: function (typeObj) {},
+      encode: function (value) {}
+    });
+    expect($umf.compile('/').types["test"]).toBeDefined();
+  });
 });