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?
