angularjs ui-router parent state with parameter loads after child state

Question

I have a parent and a child state. The parent state is used to View/Edit customers, the child state is to create. Without a parameter on the parent state, they both load fine:

.state('crm.customer', {
    url: 'crm/customers/',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})
.state('crm.customer.create', {
    url: 'crm/customers/create',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})

When I add the customerId parameter to the parent state, and I load the child state, first the child state loads, and then immediately it switches to the parent state:

.state('crm.customer', {
    url: 'crm/customers/:customerId',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})
.state('crm.customer.create', {
    url: 'crm/customers/create',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})

How can I prevent the parent state from loading after the child state loads?

Answer 1

This happens because when you access /crm/customers/create , both state urls matches. In order to solve this problem, define the type of the param. According to the documentation , there are several ways to define the params within a url, one of which is using curly braces: '/user/{id:int}' .

In your case, use

.state('crm.customer', {
  url: 'crm/customers/{customerId:int}',
  templateUrl: 'src/modules/crm/views/customer.html',
  controller: 'customersController'
})

so that /crm/customers/create will match only the child's state.