How to get AngularJS to use $resource to return mult

Question

I have the following skeleton of an Angular front end reading from a backend ruby API (written in padrino).

'use strict';

(function(angular) {
  function ApiAction($resource) {
    return $resource('/api/',
      { },
      { api_index: {
        method: "GET",
        isArray: true 
        }
      }
                    );
  }

  function whaleCtr($scope, ApiAction) {
    $scope.whaleSubmit = function() {
     // ApiAction.create({}, { whale_name: $scope.whaleName, age: $scope.whaleAge });
      angular.forEach($scope.whales, function(d) {
        ApiAction.create({}, { whale_name: d.whale_name, age: d.age }); 
      });
    };
    var dolphins = ApiAction.api_index({}, {});
    $scope.whales = [];
    dolphins.$promise.then(function(data) {
      angular.forEach(data, function(item) {
        $scope.whales.push(item);
      });
    }, function(data) {
      //if error then...
    });

    $scope.appendwhaleFields = function() {
      var i = $scope.whales.length + 1;
      $scope.whales.push({"id": i, age: "", whale_name: "" })
    }

  }

  var whaleApp = angular.module('whaleApp', ['ngResource']);
  whaleApp.controller('whaleCtr', ['$scope', 'ApiAction', whaleCtr]);
  whaleApp.factory('ApiAction', ['$resource', ApiAction]);
})(angular);

I want to be able to have the ApiAction factory do a basic create one object / update one object / destroy one object in addition to being able to read all objects from the api via the '/api/' route. Is it possible to create a solution with the below structure? (obviously you can'have multiple returns as far as I know, but I want to put all the CRUD actions in the ApiAction function).

dummy code for a proposed solution (obviously you can'have multiple returns)

function ApiAction($resource) {
        return $resource('/api/',
          { },
          { api_index: {
            method: "GET",
            isArray: true 
            }
          }

          return $resource('/api/create',
          { },
          { create: {
            method: "POST",
            isArray: true 
            }
          }

                        );
      }

PartyGodTroy · Accepted Answer · 2015-08-08 23:55:17Z

1

You may want to simply add functions to your factory that handle different routes / request methods. But to put simply it is quite possible, to keep a similar structure to the example you provided, simply create another factory to store the details of your resource request. Try

whaleApp.factory('ResourceParams', function(){ // We make a new factory call ResourceParams
  var factory= {};
  factory.method ='';
  factory.route = '';
//Add some methods to set it properties
  factory.SetMethod = function(method){
   factory.method = method;
  }
  factory.SetRoute = function(route){
    factory.method = route;
  }
});

Next inject the ResourceParams factory into your ApiAction Factory

 whaleApp.factory('ApiAction', ['$resource',ResourceParams, ApiAction]);

And finally we use the ResourceParams factory to configure how we want to interact with the service

function ApiAction($resource,ResourceParams) {
        return $resource(ResourceParams.route,
          { },
          { api_index: {
            method: ResourceParams.method,
            isArray: true 
            }
          }

          return $resource(ResourceParams.route,
          { },
          { create: {
            method: ResourceParams.method,
            isArray: true 
            }
          }
      }

                        );
      }

I Hope that helps.

edited Aug 8, 2015 at 23:55

answered Jul 29, 2015 at 7:10

PartyGodTroy

763 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nona Over a year ago

Thanks, I think there's a missing parenthesis in your ApiAction?

Nona Over a year ago

so you're saying you can have multiple returns in ApiAction? I've never seen that in Javascript

PartyGodTroy Over a year ago

@nona just realized I forgot to create factory properties for api_index and create

Collectives™ on Stack Overflow

How to get AngularJS to use $resource to return mult

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related