angular-ui-router Custom parameter types Page number parameter

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

Similar to int but accepts only positive integers (useful for pagination when there is a page parameter.

Define:

module.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {
  $urlMatcherFactory.type('page', {
    decode: function(val) { return +val; },
    encode: function(val) { return Math.floor(val); },
    equals: function(a, b) { return this.is(a) && +a == +b; },
    is: function(val) { return angular.isNumber(val) && val >= 1; },
    pattern: /\d+/
  })
}]);

And use:

$stateProvider.state({
  url: '/my-route/{page:page}'
  template: '<my-page></my-page>'
});

Plunker and related SO answer.



Got any angular-ui-router Question?