Question

我正在构建一个角度应用程序并遇到了几个我希望将用户重定向到某个页面的实例。但是，通常在服务器端请求之后接收关于是否应该重定向用户的信息。

在执行服务器请求所花费的时间内，原始页面开始呈现，因此会产生糟糕的用户体验。

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

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

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

{{user.name}}

和控制器有以下代码：

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

使用路由的resolve属性。我假设你正在使用ngRoutes或ui-router。两者都包含其路由上的resolve属性。

要在等待它们解析时添加微调器或类似的东西，请在shell视图控制器中监听视图更改事件（假设您有一个）并相应地添加/删除微调器。

通过shell控制器，我只是指其他嵌套的最高级别视图。它可能有也可能没有控制器，但通常都有。您可能在该范围内拥有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。还有一些比你要求的更多（抽象状态等），但你会很快看到如何使用resolve属性以及如何转移状态。

在角度SPA中重定向的好方法是什么？

1 个答案: