ui-router issue with stateParams and routing - angularjs

Question

So i have 2 routes set up:
$stateProvider.state('accounts', {
abstract: 'true',
url: "/accounts",
template: '<div ui-view></div>'
}).state('accounts.view', {
url: "/:accountNumber",
views: {
'#': {
templateUrl: 'tpl/account/index.html',
controller: 'AccountController',
controllerAs: 'controller'
}
},
resolve: {
today: ['today', function (today) {
// Return todays date
return today();
}],
tomorrow: ['tomorrow', function (tomorrow) {
// Return tomorrows date
return tomorrow();
}],
lastMonth: ['lastMonth', function (lastMonth) {
// Return lastMonths date
return lastMonth();
}],
account: ['$stateParams', 'AccountService', function ($stateParams, accountService) {
console.log('hi');
return accountService.get($stateParams.accountNumber);
}]
},
data: {
requireLogin: true,
pageTitle: 'Account details'
}
}).state('accounts.create', {
url: '/create',
views: {
'#': {
templateUrl: 'tpl/account/save.html',
controller: 'AccountSaveController',
controllerAs: 'controller'
}
},
resolve: {
account: function () {
return {};
}
},
data: {
requireLogin: true,
pageTitle: 'Create account'
}
}).state('accounts.view.edit', {
url: '/edit',
views: {
'#': {
templateUrl: 'tpl/account/save.html',
controller: 'AccountSaveController',
controllerAs: 'controller'
}
},
data: {
requireLogin: true,
pageTitle: 'Edit account'
}
})
If I click a button decorated with ui-sref='accounts.create' it will navigate to the correct view, but it tries to do the resolve in accounts.view. It seems that the :accountNumber is being confused with /create.
If I refresh my page, it doesn't load the view and still tries to resolve the account.
I have tried a number of ways to solve this.
I would like to have the urls like this:
accounts/:accountNumber - for viewing an account
accounts/create - for creating an account and
accounts/:accountNumber/edit - For editing an account
Is it possible to set up the routes like that?

Answer 1

If your accountNumber is a number indeed, you can define your account.view state as url: "/{accountNumber:int}". That will prevent accounts/create from matching it. Otherwise, you can use some custom regex see docs to achieve the same.
You may also find GitHub issue useful.