Angular - 没有多次 api 调用的嵌套资源

Question

我正在开发一个使用 Angular UI 路由器和 Rails api 后端的 Ionic 应用程序。我有一个 User 模型，它有很多 Items。

显示用户页面时，我调用 Rails 并返回用户及其所有项目（以便我可以在用户页面上显示它们）

那么，当我想转到特定项目的页面时，是否必须再次调用API？我的意思是，我已经拿到了物品。是否有一种无需为特定项目调用 api 即可传递项目的好方法？

我的问题有好的解决方案吗？

万分感谢！乌里

Answer 1

一旦您保存了所有项目的用户，并且您知道这些项目不会更改，您可以为用户将数据保存在工厂中，然后相应地查询项目而无需其他请求。您应该再次请求这些项目，而不是这些项目可能会发生变化。

Answer 2

是的，有一个完美的解决方案。使项目页面成为您的用户页面的子页面。当您在状态的解析中获取用户和项目时，它也将对所有子状态可用。

州：

$stateProvider.state('user', {
  'url': '/user',
  'controller': 'userController',
  'templateUrl': 'user.html',
  'resolve': {
    'items': [
      '$http',
      function ($http) {
        return $http.get('data.json');
      }
    ]
  }
});

$stateProvider.state('items', {
  'parent': 'user',
  'url': '/items',
  'controller': 'itemsController',
  'templateUrl': 'items.html'
});

控制器：

angular.module('app').controller('userController', [
  '$scope',
  'items',
  function ($scope, items) {
    $scope.items = items.data;
  }
]);

angular.module('app').controller('itemsController', [
  '$scope',
  'items',
  function ($scope, items) {
    $scope.items = items.data;
  }
]);

这里从状态user解析出来的items也可以注入到状态items的控制器中。

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/s13BHHtVLt1sd6tFLfNW?p=preview

嵌套状态引用：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

状态解析参考：https://github.com/angular-ui/ui-router/wiki#resolve

Angular - 没有多次 api 调用的嵌套资源

Angular - nested resource without multiple api calls

rest

angularjs

restangular

angular-ui-router