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 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);
                }]
            }
        }
    }
})

Add the url to child state and empty the url property to parent state. then try — Asik
– Asik, Commented Nov 27, 2014 at 11:05
That doesn't work. The $stateParams.username ends up undefined on the abstract state. — codephobia
– codephobia, Commented Nov 27, 2014 at 11:09

Community · Accepted Answer · 2017-05-23 12:09:33Z

13

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Nov 27, 2014 at 11:10

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

codephobia Over a year ago

It looks like I would have to create seperate controllers as well since I only want to inject the data that I am grabbing, correct?

Radim Köhler Over a year ago

I would say, different controllers for different states is good practice. Mostly if parent should handle different stuff than child... Does it help ?

Radim Köhler Over a year ago

Great to see that! ;) Enjoy amazing UI-Router ;)

Collectives™ on Stack Overflow

Angularjs ui-router abstract state with resolve

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related