Automatically redirect to child state - angularjs

Question

I'm using UI-Router in my AngularJS app and I have routes like this:
angular.module('app.messages').config(function($stateProvider, ACCESSLEVELS) {
$stateProvider.state('messages', {
url: '/messages',
templateUrl: 'messages/list.html',
controller: 'MessagesListCtrl as controller',
resolve: {
'conversations': function(Restangular) {
return Restangular.all('conversations').getList();
}
}
});
$stateProvider.state('messages.detail', {
url: '/{conversationId:[0-9]{1,8}}',
templateUrl: 'messages/conversation.html',
controller: 'MessagesDetailCtrl as controller',
resolve: {
'conversation': function(conversations, $stateParams) {
return conversations.get($stateParams.conversationId);
}
}
});
});
So if you go to /messages it'll show a list of your conversations (and it contains a ui-view for the details view). If you go go /messages/1 you view a single conversation.
When you go to /messages you should automatically be redirected to the most recent conversation, because just showing the list and a message like "Select a conversation from the list" is just stupid :)
The problem is that I don't know how to do this. If I have some redirect logic in the MessagesListCtrl then you'll always have a delay where you see the empty landing page and are then redirected. I can't do it a resolve function since those are also used by the child state. Surely others have had this same problem, how did they solve this?

Answer 1

Make messages an abstract state, keep the resolve, and move the templateUrl and controller to a new state, messages.list. Then, create a parent <ui-view /> for your messages state, and give it a templateUrl with whatever you want the user to see while the message is loading. Should work.

Answer 2

Solved with the help of Nate's answer above:
angular.module('app.messages').config(function($stateProvider) {
$stateProvider.state('messages', {
abstract: true,
templateUrl: 'messages/list.html',
controller: 'MessagesListCtrl as controller',
resolve: {
'conversations': function(Restangular) {
return Restangular.all('conversations').getList();
}
}
});
$stateProvider.state('messages.list', {
url: '/messages',
templateUrl: 'messages/conversation.html',
controller: 'MessagesDetailCtrl as controller',
resolve: {
'conversation': function(conversations) {
var lastId = _.last(_.sortBy(conversations, 'lastwrite')).id;
conversations.selectedId = lastId;
return conversations.get(lastId);
}
}
});
$stateProvider.state('messages.detail', {
url: '/messages/{conversationId:[0-9]{1,8}}',
templateUrl: 'messages/conversation.html',
controller: 'MessagesDetailCtrl as controller',
resolve: {
'conversation': function(conversations) {
conversations.selectedId = $stateParams.conversationId;
return conversations.get($stateParams.conversationId);
}
}
});
});
Basically messages.list and messages.detail show the exact same template and use the same controller. The resolve is just a bit different. I'm keeping track of the selectedId on conversations so I can mark the active conversation in the list.