Ahatius Ahatius - 1 year ago 57
AngularJS Question

ui-router: Default value for param not shown in URL

I have a state that is the entry point for my application. However, the entry page requires a date parameter in order to show a list. It is configured to use the current date if no date was provided in the URL.

Technically, everything works. The default value is passed to the controller and the controller is able to use it to load some data, but it won't show the date in the URL.

This is the state configuration:

$stateProvider.state('openJobs', {
controller: 'openJobsCtrl as openJobs',
params: {
shippingDate: {
value: getFormattedCurrentDate(),
squash: false
templateUrl: 'openJobs.html',
url: '/openJobs/:shippingDate'

I have created a working plunkr to demonstrate the behaviour (run in new window to see URL changes). The default value will show in the URL if I create an
link to
. However, if someone were to open the page directly by entering
the default value will be used in the background, but not shown in the URL.

How can I achieve that, no matter how the state was opened, the default value will show in the URL?

Answer Source

You can redirect the incoming path using urlRouterProvider with default date appended to it. urlRouterProvider will update the browser location.

    $urlRouterProvider.when("/openJobs/", function() {
        return "/openJobs/" + getFormattedCurrentDate();

If a state is matched against state name (through ui-sref or $state.go()), browser location will be updated with url path.

Whereas, if a state is matched against url path, the browser location will not be updated because it already matched the url. That's why you need to use $urlRouterProvider in your case to append the date.