I\'m using UI router in my project. The home page of my application consists of 4 tabs, each routing to a different template. This is my current routing code, im using a forEach
If the link of the default state is same for each role e.g /user/home for both admin and user. One thing we can do is to show different html templates in the default state of the app based on roles. ui-router provides @stateProvider service which has properties templateProvider and ControllerProvider properties. We can use them to figure out which template and controller we want to use for same default state. Here is the documentation link.
I already have had to solve that :
I've registered a state that was used only to handle the default page based on the role.
$urlRouterProvider.otherwise("/");
$stateProvider.state("default", {
url:"/",
templateUrl: "app/core/home/default.html",
controller: "DefaultController"
});
The the controller was simply :
(function () {
"use strict";
angular.module("core").controller("DefaultController", [
"$rootScope",
"$state",
"roles",
function ($rootScope, $state, roles) {
if ($rootScope.hasPermission(roles.SomeRoleName)) {
$state.go("someStateName");
} else if ($rootScope.hasPermission(roles.SomeRoleName)) {
$state.go("someStateName");
}
}
]);
})();