After spending several hours searching for a solution, I feel a bit sheepish asking this question. The two main methods for setting up default child states are either using an empty URL configuration or using $urlRouterProvider.when('/route', '/newroute').
url: '',
or
$urlRouterProvider.when('/route', '/newroute');
I've decided to go with the empty URL configuration as using rerouting causes some unwanted issues when the parent state is set to abstract: true. All templates in my project contain a ui-view element.
Currently, my code looks something like this:
.state('data', {
url: "/data",
templateUrl: "views/data.php",
})
.state('data.overview', {
url: "",
templateUrl: "views/subviews/data.overview.php",
})
.state('data.overview.view', {
url: "",
templateUrl: "views/subviews/subviews/data.overview.view.php"
})
.state('data.overview.view.msgfav', {
url: "",
views: {
msg: {
templateUrl: "views/subviews/subviews/data.overview.view.msg.php"
},
fav: {
templateUrl: "views/subviews/subviews/data.overview.view.fav.php"
}
}
})
In addition to some more child states (which I have omitted as they are not meant to be default), I have experimented with different configurations such as setting the parent state as abstract: true and without setting it, leaving the URL empty, and omitting URL settings altogether, and including only the closest child state without all nested children. Using ng-include as the default state can work, but it doesn't feel clean. Directly targeting each child works well. I'm uncertain about what detail I might be missing here, but I'm sure it's a small thing that will probably make me feel silly once I figure it out.