Angular - nested resource without multiple api calls

Question

I'm working on an Ionic app that uses Angular UI Router with a Rails api backend. I've got a User model that has many Items.

When showing the User page, i'm calling Rails and returning the User along with all it's Items (so I can show them on the user's page)

Then, when I want to go to a specific Item's page, do I have to make another call to the API? I mean, I already have the item in hand. Is there a good clean way to pass the Item without having to make an api call for the specific Item?

Got any good solution for my problem?

Million thanks! Uri

Answer 1

Yes there is a perfect solution for this. Make the item page a child of your user page. When you fetch the user and items in the resolve of your state, it will be available also to all child states.

States:

$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'
});

Controllers:

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;
  }
]);

Here the resolved items from state user can also be injected in the controller of state items.

Here's a working example on Plunker: http://plnkr.co/edit/s13BHHtVLt1sd6tFLfNW?p=preview

Nested state reference: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

State resolve reference: https://github.com/angular-ui/ui-router/wiki#resolve