How to handle 3-level nested resources using ngResource?

Question

I am working on my first AngularJS application to learn the structure.

I am currently clicking on a wall looking for an idiomatic way to handle embedded resources.

I have plots containing buildings containing apartments. One apartment is located only inside one building, which rotates only inside one area.

In my database model, I do not need to store the area identifier with a flat object, its parent ( building identifier ) is enough.

The following is a minimal example that I wrote to illustrate the concept. I based this on what I saw on a video from Google I / O: http://www.youtube.com/watch?v=HCR7i5F5L8c

My question is: how can I create a specific resource Flat ? I have all the information needed in the url, but it does not match my model (area identifier is missing).

var app = angular.module('neighborhoodApp', [
  'ngResource',
  'ngRoute'
]);

angular.module('neighborhoodApp')
  .factory('Area', function ($resource) {
    return $resource('/areas/:id', {
      'id': '@_id'
    });
  });

angular.module('neighborhoodApp')
  .factory('Building', function ($resource) {
    return $resource('/areas/:aid/buildings/:id', {
      'id': '@_id',
      'aid': '@area_id'
    });
  });

angular.module('neighborhoodApp')
  .factory('Flat', function ($resource) {
    return $resource('/areas/:aid/buildings/:id/flats/:id', {
      'id': '@_id',
      'bid': '@building_id'
      // 'aid': '@area_id' => my model doesn't have an area id, having a building id attached to a flat is enough to find the area
    });
  });

angular.module('neighborhoodApp')
  .controller('AreaListCtrl', function (Area) {
    this.areas = Area.query();
  });

angular.module('neighborhoodApp')
  .controller('AreaShowCtrl', function ($routeParams, Area) {
    this.area = Area.get({
      id: $routeParams.aid
    });
  });

angular.module('neighborhoodApp')
  .controller('BuildingListCtrl', function (Building) {
    this.buildings = Building.query();
  });

angular.module('neighborhoodApp')
  .controller('BuildingShowCtrl', function ($routeParams, Building) {
    this.building = Building.get({
      aid: $routeParams.aid,
      id: $routeParams.rid
    });
  });

angular.module('neighborhoodApp')
  .controller('FlatShowCtrl', function (Flat) {
    this.flats = Flat.query();
  });

// What is the idiomatic way to pass the area id (from $routeParams.aid)
// so that the server can be queried successfully
angular.module('neighborhoodApp')
  .controller('FlatListCtrl', function ($routeParams, Flat) {
    this.flat = Flat.get({
      bid: $routeParams.bid,
      id: $routeParams.rid
    });
  });

app.config(function ($routeProvider) {
  $routeProvider
    .when('/areas', {
      templateUrl: 'views/area/list.html',
      controller: 'AreaListCtrl',
      controllerAs: 'list'
    })
    .when('/areas/:aid', {
      templateUrl: 'views/area/show.html',
      controller: 'AreaShowCtrl',
      controllerAs: 'show'
    })
    .when('/areas/:aid/buildings', {
      templateUrl: 'views/building/list.html',
      controller: 'BuildingListCtrl',
      controllerAs: 'list'
    })
    .when('/areas/:aid/buildings/:bid', {
      templateUrl: 'views/building/show.html',
      controller: 'BuildingShowCtrl',
      controllerAs: 'show'
    })
    .when('/areas/:aid/buildings/:bid/flats', {
      templateUrl: 'views/flat/list.html',
      controller: 'FlatShowCtrl',
      controllerAs: 'list'
    })
    .when('/areas/:aid/buildings/:bid/flats/:fid', {
      templateUrl: 'views/flat/show.html',
      controller: 'FlatListCtrl',
      controllerAs: 'show'
    })
    .otherwise({
      redirectTo: '/areas'
    });
});

Answer 1

I don’t think you need an AreaId at all, when you get an apartment, all you need is a flatId.

However, when saving a new apartment, you can add buildId as part of the apartment details (in the model)

.factory('Flat', function ($resource) {
    return $resource('/flats/:id', {

but when you request apartments, for example. all apartments in area 1

Flat.query({aid=1})

which will be translated into

www.yourapp.com/flat?aid=1

You do not need to add it to your model, because it is not part of the model.