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'});

登录后，我希望同时显示三个单独的部分：信息栏，导航和主要（主要可以与当前正在查看的任何导航项目互换）。目前在我的loggedin_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

我会解决这个问题，改变你认为是偏的。

例如：不要将'login'和'logedIn'视为两个不同的部分。您可以使用部分调用，例如loginStatus_bar。这部分有两个（或更多）可能的状态（login，loggedIn等等）

在“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”部分可能始终在您的应用程序中以一种状态或其他状态显示。

是否有可能从一个$ routeProvider条件服务多个部分？

1 个答案: