【发布时间】：2016-06-12 03:39:58
【问题描述】：
我正在开发一个 Angular 应用程序。到目前为止，我有一个包含应用程序主模板的 layout.html 文件。 partials/ 中还有一些其他文件是通过此代码路由的：
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>
我可以确定登录的用户角色，但是根据角色我想在侧边栏上显示不同的信息。这可以使用如下阿里建议的 data-ng-include 来完成。但是，如果 Id 想为登录页面呈现不同的模板作为示例（没有侧边栏或导航栏，只有带页脚的空白画布），或者如果我想呈现 3 列模板。这如何才能正确完成？在给定特定条件的情况下，如何指示 angular 使用不同的模板。再次感谢。
【问题讨论】：
-
另一个例子：有一个 www.example.com/login 视图。我只需要一个可以呈现登录表单的纯白色模板。我不需要其余视图中可用的导航或页脚。