How can I successfully implement nested views, where after logging in the user is redirected to in.html
, and all links within in.html
are directed to a ui-view
? Currently, all links redirect to a new page.
index.html
<!-- more HTML -->
<body ng-controller="MainController as main">
<!--<div id="loading"><span>Loading</span></div>-->
<div ui-view="default"></div>
</body>
<!-- more HTML -->
in.html
<a ui-sref="online">Online Users</a>
<div ui-view="main"></div>
app.js routes
var $td = $config.TPL_DIR;
$stateProvider
.state('auth', {
url: '/auth',
views: {
"default": {
controller: 'AuthController as auth',
templateUrl: $td + 'login.html'
}
}
})
.state('loggedin', {
url: '/in',
views: {
"default": {
templateUrl: $td + 'in.html'
}
}
})
.state('online', {
url: '/online',
views: {
"main": {
controller: 'OnlineController as online',
templateUrl: $td + 'online.html'
}
}
});