how to use custom actions in angular $resource

Question

according to the docs i can define custom actions for each resource. This is the REST API resource I was interested in configuring (see postman import link):

http://0.0.0.0:9000/api/properties_by_address
method: POST
post data: raw json:
{
  "address" : "%address%"
}

setting up the resource in my services (i called it search, see js equivalent):

window.API_HOST ="http://localhost:9000/api/";
angular.module("app.services", [])
.factory("Properties", [
    "$resource"
    ($resource) ->
      $resource API_HOST + "properties/:id", null,
        search:
          method: 'POST'
          url: API_HOST + 'properties_by_address'
          params:
            hello: 'good world'
            address: 'good address'
])

I try to call this in a directive like so (see this for js conversion):

.directive('homeSearch', ['Properties', (properties) ->
    restrict: 'AEC'
    replace: false
    templateUrl: '/partials/home_search.html'
    link: (scope, elem, attrs) ->
      button = elem.find('.button')
      button.bind "click", ->
        console.log "address searched" + scope.address
        properties.search {}, address: scope.address
      return
])

weird stuff happens here.. first of all instead of making the mothod call 'POST' it uses 'OPTIONS' instead.. further.. it only uses the parameters set up in the default definition (ie good world, good address.. instead of the scope.address value.. which i tested to be valid) see the summary of the request/response in this chrome devtools screenshot:

enter image description here

questions: - how do i make the service use the parameters that I use when i call it? - how do i specify that it takes the parameters as post JSON data.. rather than appending it to the query string?

Community · Accepted Answer · 2017-05-23 10:26:22Z

1

First, for resource, you can't default the post body as it would go against the Angular paradigm for a Resource object. Here's a better answer than I could give. Basically, the params attribute will always and only default your query string parameters.

Also, you should define your resource like this:

// Tell $resource that the 'id' property resides within the resource by using '@id'
$resource(API_HOST+ '/properties/:id', {id: '@id'}, {
  search: {
    url: API_HOST + 'properties_by_address',
    method: 'POST'
  }
});

To change the request body of your post, you're going to have to call the search function like this:

Properties.search({address: $scope.address, hello: 'good world'}, function(result){
  // Do something with the response here
}, function(error) {/* handle error here if you want*/});

As far as the OPTIONS method being used, I have not seen that before. Might it be because of the API that you're requesting from? Although that may be a stretch. You may want to confer with the people that manage your server.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jun 5, 2014 at 17:25

Mike Quinlan

2,88219 silver badges26 bronze badges

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

2 Comments

abbood Over a year ago

Hum.. It seems there is a lot of conventions and red zones and and.. I thought the whole point was the simplify the whole thing.. Doing this with raw jquery was simpler! I was advised by some to use restangular or the lower level $http object and save the hassle

Mike Quinlan Over a year ago

IMO it makes things a lot simpler. The convention is there to keep you from setting default parameters in the resource you're trying to post to the server. It also gets rid of a lot of boiler plate code that you would otherwise have to create while using $http. Also, have you considered the fact that issuing a POST request for search functionality is not very RESTful? If you have control of the server, couldn't you search by address within your /properties endpoint: Issuing a search like Properties.query({address: $scope.address})?, generating a GET '/properties?address=[param]?

Collectives™ on Stack Overflow

how to use custom actions in angular $resource

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related