angularjs - 在 Angular SPA 中进行重定向的良好做法是什么

Question

我正在构建一个有 Angular 的应用程序，并且遇到了一些我想将用户重定向到某个页面的情况。但有关用户是否应该重定向的信息通常是在服务器端请求之后收到的。

在执行服务器请求时，原始页面开始渲染，从而产生糟糕的用户体验。

一个恰当的例子是当用户未经授权时重定向到登录页面。

问题 1 我知道如何单独处理这些案例。但想知道是否有一些标准模式可以遵循来解决这个问题。

问题 2 是否有一个标准模式来控制从服务器获取信息时何时开始呈现页面。例如我的观点是

{{user.name}} 

Controller 有以下代码:

userService.load_user().then(function(user) {
    $scope.user = user;
});

我不希望在用户加载之前显示任何内容，也许只是一个加载标志。目前我可以这样做:

//controller
userService.load_user().then(function(user) {
    $scope.user = user;
    $scope.loaded = true;
});

和

<!-- view -->
<div ng-show="!loaded">
    <img src="loading.gif"/>
</div>
<div ng-show="loaded">
    real code here.
</div>

当我想等待多个请求时，这会变得复杂。

Answer 1

使用路由的解析属性。假设您正在使用 ngRoutes 或 ui-router。两者都在其路线上包含解析属性。

要在等待旋转器解析时添加旋转器或类似的东西，请监听 shell View Controller 中的 View 更改事件(假设您有一个)并相应地添加/删除旋转器。

我所说的 shell Controller 只是指嵌套其他 View 的最高级别 View 。它可能有也可能没有 Controller ，但通常有。您可能在该范围上有一个 showSpinner 属性:

myApp.controller('mainCtrl', function($scope){
   $scope.showSpinner = false;

    $scope.$on('$stateChangeStart', function(){
        $scope.showSpinner = true;
    });
    $scope.$on('$stateChangeSuccess', function(){
        $scope.showSpinner = false;
    });
});

然后您可以分别在 spinner html 元素和 View 元素上使用 ng-show='showSpinner' 或 ng-show='!showSpinner' 。

这是基本思想。您最终可能会得到更复杂的东西。

Here is a Plunker 。那里发生的事情(抽象状态等)比您要求的要多一些，但您很快就会看到如何使用解析属性以及如何转移状态。