I am trying to implement a nested abstract states with multiple views but the pages content is not showing:
My app.js is the following
$stateProvider
.state('home', {
templateUrl: 'home.html',
controller: 'Home',
abstract: true
})
.state('home.maintenance',{
url: '/maintenance',
templateUrl: 'maintenance.html',
abstract: true
})
.state('home.maintenance.content',{
views: {
main: {
templateUrl: 'main.html'
},
part1: {
templateUrl : 'part1.html'
}
}
})
mainetenance.html is the following
<div class="row">
<div class="col-md-2" ui-view="part1"></div>
<div class="col-md-10" ui-view="main"></div>
</div>
I am uploading the maintenance content as follows :
<ul class="dropdown-menu">
<li><a ui-sref="home.maintenance.content">Maintain</a></li>
<li ..>..</a></li>
</ul>