Angularjs role-based routing

Question

Im working on an angular app. So far I have a layout.html file which holds the app main template. There are some other files in partials/ which are routed by this code:

angular.module('appRoutes', []).config(['$routeProvider',             '$locationProvider', '$httpProvider',
  function ($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '/partials/index',
        controller: 'MainController'
      })
      .when('/:category/:action?/:id?', {
        templateUrl: function (params) {
          var allowedParams = ['category', 'action', 'id'];
          var paramVals = [];
          for (var key in params) {
            if (allowedParams.indexOf(key) !== -1) {
              paramVals.push(params[key]);
            }
          }
          console.log(paramVals.join('/'));
          return '/partials/' + paramVals.join('/');
        }
      })
      .otherwise({
        redirectTo: '/'
      });
]);

So far it works well. However it will be more complicated. I want to show role-based views. The main difference between each of the views will be the sidebar nav contents. Stating it with an example: if I type www.domain.com/admin-dashboard or www.domain.com/user-dashboard similar views will be rendered, however the options and menus available for each role will be different. My first attempt is to create an admin-layout.html and an user-layout.html. However I dont know if this is a correct solution and I am having issues on writing the code so it uses one template or the other one.

Any ideas will be appreciated.

UPDATE:

Lets say I have a layout.html

<html lang="en">
<head>
</head>
<body ng-app="todoApp" ng-controller="MainController" class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">


        <!-- ####### Layout 1: IF the user is logged in: (show header and sidebar depending on the role) -->
        <!-- Header: remains the same regardless the role -->
        <header class="main-header"></header>
        <!-- Left side column: changes according to the role -->
        <aside class="main-sidebar"></aside>
        <!-- Content -->
        <div class="content-wrapper">   
            <section ng-view class="content">
            </section>
        </div>
        <!-- ####### !Layout 1: end of Layout 1 -->


        <!-- ####### Layout 2: IF the user is not logged in: (show a simple login form in the middle) -->
        <!-- Content -->
        <div class="content-wrapper">   
            <section ng-view class="content">
            </section>
        </div>
        <!-- ####### !Layout 2: end of Layout 2 -->

        <!-- Footer: remains the same always -->
        <footer class="main-footer"></footer>
    </div>
</body>

I can determine the logged user role, however depending on the role I want to show different information on the sidebar. That can be accomplished using data-ng-include as Ali suggested below. However if Id wanted to render a different template for a login page as an example (where there is no sidebar nor navbar, just a blank canvas with a footer), or if I wanted to render a 3 column template. How can this be accomplished properly? How can I instruct angular to use a different template given a certain condition. Thanks again.

Another example: there is a www.example.com/login view. I just need a plain white template where the login form can be rendered. I dont need the navs nor footers available on the rest of the views. — Jonathan
– Jonathan, Commented Feb 29, 2016 at 7:22

Aren Sade · Accepted Answer · 2016-03-01 07:45:13Z

1

You can use data-ng-include

For example :

 <div class="mainContainer">
 <div data-ng-include="{{navBarType}}" >
 </div>

And in your controller or directive you can set navBarType as you wish, like navBarUser.html.

Also you can read more about ngInclude here: https://docs.angularjs.org/api/ng/directive/ngInclude

edited Mar 1, 2016 at 7:45

answered Feb 29, 2016 at 7:31

Aren Sade

5841 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Over a year ago

Thanks Ali. This would work to render one section of the view (the sidebar in this case) depending of a certain condition. However, will this work if I wanted to render a completely different layout? I added an update to the question to illustrate the idea.

Aren Sade Over a year ago

Actually seperate layouts is more safe and flexable to modify later but you can use data-ng-if to show target div.

Jonathan Over a year ago

Hi Ali. Thats precisely what I want to do. Lets say one layout for the admin views, a second layout for the user view and a third layout for the login page. I believe I should use UI Router github.com/angular-ui/ui-router. But Im not sure. Just checkig out the documentation.

Collectives™ on Stack Overflow

Angularjs role-based routing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related