UI-Router abstract state child doesnt render

Question

I'm having some difficulties to understand how UI-Router abstract state work. Here's the thing : I have an index.html with only a <ui-view> tag inside its <body>.

There is two main states : Landing and App ( /landing and /app ).

No problem with the landing state for now, because its only a static file ( no child view etc ).

But for my /app state, I need an abstract parent state that cover the whole application ( need to resolve User Profile for each child states ).

The thing is that child of this abstract state also have sub-view. And I can't make those render.

My $stateProvider config (simplified) :

//landing state, no problem here
.state('landing', {
    url: '/landing',
    templateUrl: 'landing.html'
})
// my abstract parent state, with the resolve
.state('root', {
    url: '',
    abstract: true,
    template: "<div ui-view></div>",
    resolve: {
        current_user: function (UserFactory) {
            return UserFactory.initCurrentUserProfile();
        }
    }
})

// the child which cannot render the view headerAndSearchbar
.state('root.app', {
    url: '/app',
    templateUrl: 'app.html',
    views: {
        'headerAndSearchbar': {
            templateUrl: './partials/header/headerAndSearchbar.html'
        }
    }
})

app.html :

<div ui-view="headerAndSearchbar">     
</div>
<div>
    This is app.html     
</div>

Note that if i remove views declaration in the state root.app, i can see the text "This is app.html". headerAndSearchbar.html only contains simple html & css

Any ideas ? I'm bashing my head on this- What am I missing?

score 1 · Accepted Answer · edited May 23 '17 at 12:31

There are two issues.

Firstly, There are in fact two views, inside of the child 'root.app'.

Unnamed (the one, which is related to templateUrl 'app.html')
named view 'headerAndSearchbar'

And that means, that both most be declared inside of the views : {} setting:

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        'headerAndSearchbar': { ... n
    }...

But that is not enough.

Secondly, we need absolute naming for the second (named) because it is not related to its parent, but to itself:

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        // this is the same as a path to parent view 'headerAndSearchbar@root'
        // 'headerAndSearchbar': { ...
        // this means ... search in this state, inside of app.html
        'headerAndSearchbar@root.app': { ... 
    }...

Check these for more details:

UI-Router abstract state child doesnt render

1 Answers1