Question

我正在开发一个角度应用程序。到目前为止，我有一个layout.html文件，其中包含应用程序主模板。部分中还有一些其他文件/由此代码路由：

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。但是，我不知道这是否是一个正确的解决方案，我在编写代码时遇到问题，因此它使用一个模板或另一个模板。

任何想法将不胜感激。

更新：

假设我有一个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>

我可以确定已记录的用户角色，但是根据我想在侧栏上显示不同信息的角色。这可以使用数据-ng-include完成，如下面的Ali所述。但是，如果Id想要为登录页面呈现不同的模板作为示例（没有侧边栏或导航栏，只有带有页脚的空白画布），或者如果我想渲染3列模板。如何正确完成？如何在特定条件下指示角度使用不同的模板。再次感谢。

Answer 1

您可以使用data-ng-include

例如：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

在您的控制器或指令中，您可以根据需要设置navBarType，例如navBarUser.html。

您还可以阅读有关ngInclude的更多信息这里： https://docs.angularjs.org/api/ng/directive/ngInclude

Angularjs基于角色的路由

1 个答案: