I'm struggling to understand the functionality of nested views in Angular UI Router.
My configuration for $stateProvider is as follows:
$stateProvider
.state('login', {
url: "/login",
views: {
'main': {
templateUrl: "static/templates/login.html",
controller: 'LoginCtrl'
}
}
})
.state('dashboard', {
url: "/dashboard",
controller: 'DashboardCtrl',
views: {
'main': {
templateUrl: "static/templates/dashboard.html",
},
'content' : {
templateUrl: 'static/templates/partials/dashboard-content.html',
controller: 'DashboardContentCtrl'
}
}
});
The objective here is to dynamically load the 'dashboard.html' template, followed by populating the 'content' ui-view with 'dashboard-content.html'.
dashboard.html
<div class="span3">
<!-- Some regular html -->
</div>
<div class="span9" ui-view='content'></div>
Within my index file that initializes the entire application, I have a ui-view named "main", which appears to be functioning properly. This setup is necessary because 'dashboard-content.html' contains menu items that should remain accessible throughout the logged-in portion of the site. Only the content within the 'content' ui-view will undergo significant changes. Other elements may simple have minor modifications, like adding an 'active' class to a link.