Angularjs基於角色的路由

我正在開發一個角度應用。到目前爲止，我有一個包含應用程序主模板的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來完成，如下面的Ali所示。但是，如果Id想要爲登錄頁面呈現不同的模板（例如沒有側欄或導航欄，只是帶有頁腳的空白畫布），或者我想呈現3列模板。這怎麼能夠正確完成？我如何指示角度在給定條件下使用不同的模板。再次感謝。

來源

2016-02-29 Jonathan

又如：有一個www.example.com/login視圖。我只需要一個簡單的白色模板，可以呈現登錄表單。我不需要其他視圖上的導航和頁腳。 – Jonathan

您可以使用數據-NG-包括

例如：

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

而在你的控制器或指令，如你所願，就像navBarUser.html可以設置navBarType。

你也可以閱讀更多有關ngInclude 這裏： https://docs.angularjs.org/api/ng/directive/ngInclude

來源

2016-02-29 07:31:39

謝謝阿里。這將根據特定條件呈現視圖的一部分（在這種情況下是側邊欄）。然而，如果我想渲染一個完全不同的佈局，這會工作嗎？我添加了一個更新來解釋這個問題。 – Jonathan

事實上，單獨的佈局更安全，更靈活，以後可以修改，但是您可以使用data-ng-if來顯示目標div。 –

嗨阿里。那正是我想要做的。可以爲管理視圖指定一個佈局，爲用戶視圖指定第二個佈局，爲登錄頁指定第三個佈局。我相信我應該使用UI路由器https://github.com/angular-ui/ui-router。但我不確定。只需查看文檔。 – Jonathan

Angularjs基於角色的路由

回答

相關問題