Angularjs ролевая маршрутизация

Im работает на угловых приложений. Пока у меня есть файл layout.html, который содержит основной шаблон приложения. Есть и другие файлы в частях /, которые направляются этим кодом:Angularjs ролевая маршрутизация

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: '/' 
     }); 
]);

Пока это хорошо работает. Однако это будет сложнее. Я хочу показать ролевые представления. Основное различие между каждым из видов будет состоять из навигационного содержимого боковой панели. Сформулируем это с примером: если я наберу www.domain.com/admin-dashboard или www.domain.com/user-dashboard, будут показаны похожие взгляды, однако варианты и меню, доступные для каждой роли, будут разными. Моя первая попытка - создать admin-layout.html и user-layout.html. Однако я не знаю, является ли это правильным решением, и у меня возникают проблемы с написанием кода, поэтому он использует один шаблон или другой.

Любые идеи будут оценены.

UPDATE:

Допустим, у меня есть 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>

Я могу определить роль пользователя регистрируется, однако в зависимости от роли, которую я хочу показать различную информацию по боковая панель. Это может быть достигнуто с использованием data-ng-include, как описано Али. Однако, если Id хотел отобразить другой шаблон для страницы входа в качестве примера (там, где нет боковой панели или навигационной панели, просто пустой холст с нижним колонтитулом), или если бы я хотел отобразить шаблон из 3 столбцов. Как это можно сделать правильно? Как я могу указать угловое использование другого шаблона при определенном условии. Еще раз спасибо.

источник

2016-02-29 Jonathan

Другой пример: есть вид www.example.com/login. Мне просто нужен простой белый шаблон, в котором может быть отображена форма входа. Мне не нужны навигаторы и нижние колонтитулы, доступные для остальных видов. – Jonathan

Вы можете использовать данные-нг-включают

Например:

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

И в контроллере или директивы вы можете установить navBarType, как вы хотите, как navBarUser.html.

Также вы можете прочитать больше о ngInclude здесь: https://docs.angularjs.org/api/ng/directive/ngInclude

источник

2016-02-29 07:31:39

Спасибо Али. Это будет работать, чтобы сделать один раздел представления (боковая панель в этом случае) в зависимости от определенного условия. Однако будет ли это работать, если я захочу сделать совершенно другой макет? Я добавил обновление к вопросу, чтобы проиллюстрировать эту идею. – Jonathan

На самом деле отдельные макеты более безопасны и гибки для изменения позже, но вы можете использовать data-ng-if для отображения целевого div. –

Hi Ali. Это именно то, что я хочу сделать. Предположим, что один макет для просмотров admin, второй макет для пользовательского представления и третий макет для страницы входа. Я считаю, что должен использовать UI Router https://github.com/angular-ui/ui-router. Но я не уверен. Просто проверьте документацию. – Jonathan

Angularjs ролевая маршрутизация

ответ

Смежные вопросы