如何使用 Angular UI Router 解析所有状态的数据？答案

【问题标题】：How can I resolve data for all states with Angular UI Router?如何使用 Angular UI Router 解析所有状态的数据？
【发布时间】：2015-02-19 22:22:47
【问题描述】：

在我的应用程序中，每个路由都要求在渲染之前从我的 API 中检索帐户数据。为此，我使用 ngRoute 执行以下操作：

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

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

因此，在每条路由之前，必须解析返回承诺的 authorizationCheck 解析。这非常有效。

我现在切换到使用 UI 路由器，我需要保留此功能。有哪些方法可以实现这一目标？

我能想到的一个选项是使用嵌套状态并让所有路由都从父状态继承解析。虽然如果可能的话，我宁愿不筑巢。还有其他选择吗？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

您可以为父状态中的多个 ui-router 状态解析所需的数据。子状态也将拥有这些数据。

$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) {

  }
})

不过，在 Service 中进行授权检查会更有意义，因此您可能希望在主控制器中注入 Auth 服务，并以此为基础状态和可用性。

【讨论】：

酷，那时我可能不得不使用子状态。至于授权检查，我想这是一个不好的例子。我真正想做的是检索用户的帐户信息。因此，假设他们登录，创建 cookie，关闭浏览器，稍后再回来。他们仍然在技术上登录，但我们必须再次检索他们的帐户数据。该检索是我想使用解析的东西，我需要确保在解析数据之前不会呈现任何请求的视图。你还会说功能应该存在于服务中吗？
啊，对了，根据经验，我将所有类似 API 的调用都放在一个服务中。路由器应该只做路由。我之前使用的是这样的： .state('home', { url: '/', controller: function($state, $cookieStore) { if($cookieStore.get('token')) { $state.go ('app.substate-of-app'); } else { $state.go('pub.home'); // 或登录屏幕 } } })
啊，是的！具有提供与 API 对话的良好 JavaScript 接口的方法的服务...是的，我正在使用这些方法：)
对 Hydra 示例的一个建议是使基本应用程序状态（或任何名称）abstract，这样很明显它并不意味着直接输入。

【解决方案2】：

这最终取决于你如何组织你的路线，因为你可以继承路线并为每个孩子和父母提供解决子句，但你也有 stateChangestart stateChangeSuccess 事件，可以让你做类似的事情。如需进一步帮助，请提供路线示例

【讨论】：

是的，我现在正在使用$stateChangestart 。但问题是，我实际上需要延迟视图的渲染，直到数据请求解决，而我能想到的唯一方法是对每条路由使用解析。
您可以发布路线示例吗？