$resource relations in AngularJS

Question

The usual way of defining an isolated resource in AngularJS is:

angular.service('TheService', function($resource){
  return $resource('api/url');
});

I'm trying to figure out the best way to write a model that relates to other models, such as an Order that has 1 or more OrderItems. My first idea is this:

1. Create the OrderService and OrderItemService as independent resource models
2. Write a controller that queries the OrderService and watches the result array
3. When the result array changes, query the OrderItemService for all of the item IDs and decorate the order object with extended information as it comes in

That seems a bit messy. Is there a more elegant way?

Answer 1

angular.service('OrderItem', function($resource) {
  return $resource('api/url/orderItem');
});

angular.service('Order', function($resource, OrderItem) {
  var Order = $resource('api/url/order');

  Order.prototype.items = function(callback) {
    return order.query({orderId: this.id}, callback);
  }
  return Order
});

Would something like above solve your problem? You would then use it as

var order, items;

Order.get({id: 123}, function(o) {
  order = o;
  o.items(function(is) { items = is; });
});

Angular's $resource does not understand relationships. It is something we would like to change in post 1.0.

I don't think you should put the data on the order directly, since it is not part of it, and you will have issues persisting the order since it will now have the items object as well.