I've set up the following configuration in my JS app under the $stateProvider section using angular ui-router:
.state('login', {
url: '/login',
templateUrl: 'app/login/login.tmpl.html',
controller: 'LoginCtrl as login'
})
.state('app', {
abstract: true,
url: '/',
views: {
'main': { templateUrl: 'app/main/main.html' }
}
})
.state('app.reports', {
url: 'reports',
views: {
'': {templateUrl: 'app/templates/reports.tmpl.html'},
'email-placeholder-1': {
templateUrl: 'app/templates/devices.tmpl.html',
controller: 'DevicesCtrl as devicesCtrl'
},
'email-placeholder-2': {...}
}
})
Within index.html, I have the following structure:
<body ng-controller="MainCtrl as main" >
<section ui-view>
<div ui-view="main"></div>
</section>
....
</body>
This setup only functions properly when I have a nested ui-view="main" within the ui-view.
My question is whether this is the correct approach to use with ui-router?
In main.html, I have a header, footer, and common information for certain pages.
However, I also have another state called 'login' that will have its own templates. These will be loaded into ui-view in index.html, not ui-view="main".
How can I refactor my index.html and JavaScript code to avoid nesting ui-view in index.html?
Or am I on the right track?