Angularjs ui-router abstract state with resolve

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 loa

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...