Have parent state default to child state using ui-router

Question

I have this state structure:

.state('places',
{
    url:'/places',
    controller:'PlacesController',
    templateUrl:'views/places.html'
})
.state('places.city',
{
    url:'/:city',
    templateUrl:function(stateParams)
    {
        return 'views/places/'+stateParams.city+'.html';
    }
});

It works nicely except when the URL is simply /places without a city after it.
How can I have a default value for templateUrl in the child state?

I'm thinking the best way would be to set the ui-view from PlacesController, however that doesn't seem to be possible.

Answer 1

Try defining another child state with the URL set to an empty string:

.state('places.default', {
    url: '',
    templateUrl: '...'
}

Then add abstract: true to the parent state.

Answer 2

Without needing any change in your states configuration, you can put your default template directly between the ui-view tags in your HTML:

<!-- places.html -->
<div ui-view>
  <h1>Please choose a place</h1>
</div>

<!-- london.html -->
<h1>London is amazing!</h1>

Now when you navigate to /places, you will see the "Please choose a place" message, and when you navigate to /places/london, you will see "London is amazing!".