I need to construct permission based admin dashboard. Header of html consists of some main havs and the last nav is for Settings. I use angular-ui-router for states. and when user goes to the Settings link I need to upload from server tabs that user has access to.
My state provider
$stateProvider
.state('home', {
url: "/",
templateUrl: "templates/home/index.html"
})
.state('settings', {
url: "/settings",
controller: "SettingsController",
templateUrl: "templates/home/settings.html",
})
.state('settings.users', {
url: "/users",
controller: "SettingsUsersController",
templateUrl: "templates/home/settings/users.html",
})
.state('settings.roles', {
url: "/roles",
controller: "SettingsRolesController",
templateUrl: "templates/home/settings/roles.html",
});
SettingsController looks like this:
app.controller('SettingsController', ['$scope', '$http',
function($scope, $http) {
$scope.tabs = [];
$http({
method: 'GET',
url: '/api/menu/get'
}).
success(function(data, status, headers, config) {
$scope.tabs = data;
}).
error(function(data, status, headers, config) {
window.location = '/auth/login';
});
}
]);
Sample server answer
[{
"url": "settings.users",
"title": "Users"
}, {
"url": "settings.roles",
"title": "Roles"
}]
My settings.html
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li ng-repeat="tab in tabs" ng-class="{active: $first}">
<a href="{{tab.url}}">{{tab.title}}</a>
</li>
</ul>
</div>
How to load first tab on $http end in SettingsController, also to connect it to corresponding Controller? And how to switch active tab on different states?
