Description
For option 1, you can add a default child state by making the parent state abstract and adding a url to the parent state and allowing the default child state an empty url so it can inherit the parent url and match the parent state's url.
The option 2 is redirection.
$stateProvider.state(
'parentState',
{
abstract: true,
url: '/parent/child',
template: '<p>Parent <ui-view /></p>',
controller: function() {}
}
).state(
'parentState.childState',
{
url: '',
template: '<span>Child</span>',
controller: function(){}
}
);
However when you go about trying to transition to it such as using ui-sref, it can no longer transition to the parent state anymore. (This is because the parent state is an abstract state).
These things don't work:
<a ui-sref="parentState></a>
OR
$state.go("parentState");
These however work:
<a ui-sref="parentState.childState></a>
$state.go("parentState.childState");
It seems non-intuitive to go about setting up a default childstate and then in the process lose the ability to transition to the parent state. If I could just setup a default childstate, and then transition to the parent state, ui-router should be able to just fallback onto the default child state. I shouldn't need to explicitly set the childstate that I want to go to. What if I want to change what my default child state is? Now all my state declarations need to change!
The option 2 of this child state setup opens up possibility of duplicate content. If you combine option 2 with removing abstract:true from the parent state, and have the child state have its own url segment, then it is a possible solution to the above problem. But surely hardcoding redirection should not be required.