Nested sates and views in Angular UI Route - angularjs

Question

Sorry if similar questions have been asked before but I have been strugling to get a certain setup working for a while. I took a working plunker from from an existing question and am trying to tweak it just a little to my needs.
Orginal Plunker: http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW
My (slightly) edited fork: http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi
What I am trying to achieve is a base layout containing a header, footer and unnamed view for the page content. I can do this fine with the original plunker. But when I try to get more fancy and have a structure more like this:
$urlRouterProvider.otherwise('/home/list');
$stateProvider
.state('root', {
abstract: true,
views: {
'#': {
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
'header#': {
templateUrl: 'header.html',
controller: 'HeaderCtrl',
controllerAs: 'headerCtrl'
},
'footer#': {
templateUrl: 'footer.html',
controller: 'FooterCtrl',
controllerAs: 'footerCtrl'
}
}
})
And here is the adjusted state definition:
.state('root.home', {
parent: 'root',
url: '/home',
views: {
'#': {
template: '<ui-view></ui-view>',
controller: 'HomeController',
controllerAs: 'homeCtrl'
},
'list#root.home': {
url: '/list',
template: 'homeList.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
});
What I am trying to do here is make it so that 'root.home' state is just a base state for prepending the URL 'home' or whatever the url is in my real application. I have tried ready though the ui-route sample app but it's a lot to take in and am going in circles. I'm sure this is simple...

Answer 1

There is a working updated plunker. There is one state definition adjustment.
This was original piece of code:
.state('root.home', {
parent: 'root',
url: '/home',
views: {
'#': {
template: '<ui-view></ui-view>',
controller: 'HomeController',
controllerAs: 'homeCtrl'
},
'list#root.home': {
url: '/list',
template: 'homeList.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
});
What was wrong there? Firstly a note - we do not need to define parent: 'root', because our parent is in our name 'root.home'. So, to make it more clear, I decided to keep parent setting, while change the state name into 'home'.
Secondly, we have two views in play for our state, but the second one, is ordered to be injected into the first one.
// this line is instructing UI-Router: inject this into
// the other view definition of the current state
// search for ui-view="list"
'list#root.home'
but there was no ui-view="list" defined.
Finally, we cannot declare url for views. Url belongs just to states:
// this is wrong. The view cannot have url
// url is for state
'list#root.home': {
url: '/list',
So, we should introduce the child of our state... 'home.list'
This is the adjusted state(s) definition (from the new working plunker):
.state('home', {
parent: 'root',
url: '/home',
views: {
'#': {
template: '<div ui-view="list"></div>',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
})
.state('home.list', {
url: '/list',
views: {
'list': {
templateUrl: 'homeList.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}
},
});