Dynamic Role Based Layout

Question

I am creating a website where a user can log in. I use materialization-css and Angularjs for front-end and java-hibernate interface (using spring in my case is not an option)

The user can be an administrator, manager or employee. I need different views for different login roles, as shown below.

For admin

For manager

and employee

My question is:

3 index.html, . , ? ng-show ng-if. , . , , . . .

Answer 1

, , , , .

angular, , , - ui-router. ui-router . (... , , , , )

, : ( , , , , )

• app (index.html, app.js)
  • /admin (admin.view.html, admin.controller.js)
  • /manager (manager.view.html, manager.controller.js)
  • /employee (employee.view.html, employee.controller.js)
    • /task_type/id (employeeTask.view.html, employeeTask.controller.js)

, . angular, angular-permission , , ui-router, .

$stateProvider
    .state('app', {
        abstract: true, // an abstract state is one you can navigate to directly. its a container for child views such as a "master" page
        url: '/foo',
        template: '<ui-view/>'
    })
    .state('app.admin', {
        // url will become '/foo/admin'
        url: '/admin',
        data: {
          permissions: {
            only: ['isAdmin']
          }
        }
    })
    .state('app.manager', {
        // url will become '/foo/manager'
        url: '/manager',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager']
          }
        }
    })
    .state('app.employee', {
        // url will become '/foo/employee'
        url: '/employee',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager', 'isEmployee']
          }
        }
    })
    .state('app.employee.task', {
        // url will become '/foo/employee/sometask/1'
        url: '/:task/:id',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager', 'isEmployee']
          }
        },
        controller: function($scope, $stateParams){
          $scope.taskType = $scope.contacts[$stateParams.task];
          $scope.taskId = $scope.contacts[$stateParams.id];
        }
    })

, , . , app.employee.task , . ( , html )