是否可以从一个 $routeProvider 有条件地提供多个部分？

Question

我的 Angular 应用程序有一个 index.html，正文中只有一个 <div ng-view></div>。在加载时，用户会看到来自单个局部视图的登录屏幕，通过 $routeProvider 提供服务，并且在登录成功时，路由将更改为已登录的局部视图：

$routeProvider.
    when('/login', {templateUrl: 'partials/login.html',   controller: 'LoginCtrl'}).
    when('/loggedin', {templateUrl: 'partials/loggedin_part.html', controller: 'UserCtrl'}).
    otherwise({redirectTo: '/login'});

登录后，我希望同时显示三个单独的部分：信息栏、导航和主项（主项可以与当前正在查看的任何导航项互换）。目前在我的 login_part.html 我有：

<ng-include src="'partials/infobar_part.html'"></ng-include>
<ng-include src="'partials/nav_part.html'"></ng-include>
<ng-include src="'partials/main_part.html'"></ng-include>

我的问题是，有没有更有效的方式通过 $routeProvider 提供不同的子视图？使用我当前的方法，我将为每个导航项/路线创建“持有人”部分，例如上面的 loggedin_part.html，即（假设的）：

loggedin_admin_part.html

<ng-include src="'partials/infobar_part.html'"></ng-include>
<ng-include src="'partials/nav_part.html'"></ng-include>
<ng-include src="'partials/admin_part.html'"></ng-include>

路线

$routeProvider.
    when('/login', {templateUrl: 'partials/login.html',   controller: 'LoginCtrl'}).
    when('/loggedin', {templateUrl: 'partials/loggedin_part.html', controller: 'UserCtrl'}).
    when('/admin', {templateUrl: 'partials/loggedin_admin_part.html', controller: 'AdminCtrl'}).
    otherwise({redirectTo: '/login'});

对每个导航组以此类推。是否可以跳过“持有人”部分并在有条件的情况下为每条路线提供多个部分？类似的东西（注意，我知道语法是错误的，这是我试图说明的想法）：

$routeProvider.
    when('/login', {templateUrl: 'partials/login.html',   controller: 'LoginCtrl'}).
    when('/loggedin', {templateUrl: 'partials/infobar_part.html', 'partials/nav_part.html', 'partials/main_part.html', controller: 'UserCtrl'}).
    when('/admin', {templateUrl: 'partials/infobar_part.html', 'partials/nav_part.html', 'partials/admin_part.html', controller: 'AdminCtrl'}).
    otherwise({redirectTo: '/login'});

Answer 1

我会通过改变你认为的部分来解决这个问题。

例如：不要将“登录”和“登录”视为两个不同的部分。例如，您可以使用称为 loginStatus_bar 的部分。这部分有两个（或更多）可能的状态（登录、登录等）

在您的“loginStatus_bar”部分中，您写下所有可能的栏，并使用ng-show、ng-hide 有条件地显示必要的栏。

类似这样的东西（其中 'isLoggedIn' 是范围内的布尔值）：

<div ng-show="isLoggedIn" ng-controller="loggedInBar" >
</div>
<div ng-hide="isLoggedIn" ng-controller="loginBar" >
</div>

通过这种方式，您甚至不需要路由，因为“loginStatus_bar”部分可能会在您的应用程序中以一种或其他状态始终可见。