CODEWITHSUNDEEP
angularjsroutes
Jonathan
Jonathan

Reputation: 522

Angularjs role-based routing

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.

Upvotes: 0

Views: 714

Answers (1)

Aren Sade
Aren Sade

Reputation: 566

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

Upvotes: 1

Related Questions