Struggling with organizing my routing code using UI router.
In the index file, I include the menu template and 2 sidebar templates like this: index.html
<!-- head code above here -->
<body ng-app="ICP_App" ng-cloak>
<div layout-fill layout="row" ng-controller="AppController as AppCtrl">
<div ui-view="left-nav"></div>
<div ui-view="right-nav"></div>
<div ui-view="toolbar"></div>
<!-- expecting dashboard template to load here (& others at correct url)-->
<div class="page-content view" ui-view></div>
<!-- footer code below -->
Routes:
$urlRouterProvider.otherwise('dashboard');
$stateProvider
.state('root', {
abstract: true,
templateUrl: '../partials/icp_index.html',
controller: 'AppController as AppCtrl',
url: '',
views: {
'left-nav': {
templateUrl: '../partials/left-nav.html'
},
'right-nav': {
templateUrl: '../partials/right-nav.html'
},
'toolbar': {
templateUrl: '../partials/toolbar.html'
}
}
})
.state('root.dashboard', {
url: '/dashboard',
templateUrl: '../partials/agency-dashboard.html',
controller: 'AppController as AppCtrl'
})
Currently, the menu and sidebars load but the main content area remains empty. Could it be related to the '.otherwise' statement?
The index file should have the menu and sidebars, with content specific to that state loaded where indicated - in this case, the dashboard template. The '.otherwise' is meant to display the dashboard when the URL is incorrect or incomplete.
Appreciate any insight on this.