如何使用 Angular UI 路由器解析所有状态的数据?

How can I resolve data for all states with Angular UI Router?

在我的应用程序中,每条路线都要求在呈现之前从我的 API 中检索帐户数据。为此,我使用 ngRoute 执行以下操作:

$rootScope.$on('$routeChangeStart', function(event, next, current) {
    next.$$route.resolve = next.$$route.resolve || {};

    next.$$route.resolve.authorizationCheck = function() {
        return deferredAccountData.promise;
    };
});

因此,在每条路由之前,authorizationCheck 解析,returns 一个承诺,必须解析。这非常有效。

我现在改用 UI 路由器,我需要保留此功能。有哪些选择可以实现这一目标?

我能想到的一个选择是使用嵌套状态并让所有路由继承父状态的解析。尽管如果可能的话我宁愿不要嵌套。还有其他选择吗?

这最终取决于您如何组织路由,因为您可以继承路由并为每个 child 和 parents 提供解析子句,但您也有 stateChangestart stateChangeSuccess 事件将允许你做类似的事情。如需进一步帮助,请提供您的路线示例

您可以在父状态中解析多个 ui-路由器状态所需的数据。然后子状态也会有这些数据。

$stateProvider
.state('app', {
  url: "/",
  resolve: {
    authorizationCheck: function() {
       // Do your API checks or whatever
    }
  }
})
.state('app.somepage', {
  url: "/somepage",
  templateUrl: "partials/some.page.html",
  controller: function($scope) {

  }
})

虽然在服务中进行授权检查会更有意义,因此您可能希望在主控制器中注入授权服务,并在其上添加基本状态和可用性。