angularjs - 是否可以从一个 $routeProvider 条件提供多个部分服务？

Question

我的 Angular 应用程序有一个 index.html，其中只有一个 <div ng-view></div>体内。加载时，用户会看到一个来自单个局部 View 的登录屏幕，通过 $routeProvider 提供服务，登录成功后，路由将更改为登录的局部 View :

$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 提供不同的 subview ？使用我当前的方法，我将创建“holder”部分，例如上面每个导航项/路线的login_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

我会解决这个问题，改变你认为的部分是什么。

例如:不要将“login”和“logedIn”视为两个不同的部分。您可以使用一个名为 loginStatus_bar 的部分。该部分有两种(或更多)可能的状态(登录、登录等...)

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

类似这样的东西(其中“isLoggedIn”是范围内的 bool 值):

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

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