Currently, I am working on an application using AngularJS UI routes and despite hours of searching online, I am still struggling to resolve my issue. Here is the code I am working with. Any help would be greatly appreciated.
I am trying to figure out how to define a state for ui-view="sidebar" similar to how I have defined states for header and footer inside my defaultLayout state. I have tried some options but nothing seems to be working. Any ideas?
HTML:
//====index.html=====//
<body ui-view="layout"></body>
//========default.html (nested view inside layout)=============//
<header ui-view="header"></header>
<div class="wrap">
<div id="container">
<div ui-view="alert"></div>
<div ui-view></div>
</div>
</div>
<footer ui-view="footer"></footer>
//=======products.html (another nested view inside empty ui-view in default.html file)========//
<div class="row"><div ui-view="sidebar"></div></div>
JS code:
//=====states I have defined in my route files are=====//
$stateProvider.
state('defaultLayout', {
abstract: true,
views: {
'layout': {
templateUrl: 'views/layouts/default.html'
},
'header@defaultLayout': {
templateUrl: 'views/elements/header.html',
controller: 'HeaderCtrl'
},
'footer@defaultLayout': {
templateUrl: 'views/elements/footer.html',
controller: 'FooterCtrl'
},
'sidebar@defaultLayout': {
templateUrl: 'views/elements/sidebar.html',
controller: 'SidebarCtrl'
},
'alert@defaultLayout': {
templateUrl: 'views/layouts/alert.html',
controller: 'AlertCtrl'
}
}
})
.state('home', {
url: '/',
templateUrl: 'views/pages/home.html',
controller: 'HomeCtrl',
parent: 'defaultLayout'
})
.state('checkout', {
url: '/pages/checkout',
templateUrl: 'views/pages/checkout.html',
controller: 'HomeCtrl',
parent: 'defaultLayout'
});