Angularjs ui-router abstract state with resolve - angularjs

Question

Is it possible to make an abstract state with ui-router that needs to resolve data? I need to load the top half of a page with profile info, and then have a sub-nav that loads other details at the bottom of the page. The idea is that the abstract state would load the profile info every time regardless of which child state I am on. It doesn't seem to work.
Example:
.state('app.profile', {
abstract: true,
url: 'user/:username',
views: {
content: {
templateUrl: 'views/frontend/profile.html',
controller: 'ProfileCtrl',
resolve: {
data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfile(username);
}]
}
}
}
})
.state('app.profile.something', {
url: '',
views: {
profile: {
templateUrl: 'views/frontend/profile.something.html',
controller: 'ProfileCtrl',
resolve: {
data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfileSomething(username);
}]
}
}
}
})

Answer 1

Solution here is to distinguish the names of the resolved data. Check this answer:
angular ui-route state parent and resolve (nested resolves)
And its plunker
So in our case we would need this change in parent
resolve: {
dataParent: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfile(username);
}]
}
and this in child
resolve: {
dataChild: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfileSomething(username);
}]
}
so, instead of working with resolve : { data: ... } in parent and child we would have these:
// parent state
resolve : { dataParent: ... }
// child state
resolve : { dataChild: ... }
One working example should be better than other words...