AngularJS - $resource different URL for Get and Post

Question

$resource is awesome providing very convenient way to handle web services. What if GET and POST have to be performed on different URLs?

For example, GET URL is http://localhost/pleaseGethere/:id and POST URL is http://localhost/pleasePosthere without any parameter

score 55 · Answer 1 · edited Sep 30 '15 at 09:58

55

Use 'url' property of [actions] to override the default url.

$resource(url, [paramDefaults], [actions], options);

for example:

$resource('http://localhost/pleaseGethere/:id',{},{
    getMethod:{
        method:'GET',
        isArray:true
    }
    postMethod:{
        url:'http://localhost/pleasePosthere',
        method:'POST',
        isArray:false
    }
}

Usage of Angular $resource: http://docs.angularjs.org/api/ngResource/service/$resource

edited Sep 30 '15 at 09:58

David Fregoli

3,377
1
19
40

answered Apr 17 '14 at 06:13

Iris Wong

576
4
3

1

That `:id` used in the "base" url is also available in the postMethod url. +1! – Jacob Valenta Nov 12 '15 at 02:01

score 32 · Accepted Answer · edited Sep 26 '15 at 19:50

32

You should be able to expose the URL as a parameter. I was able to do this:

$provide.factory('twitterResource', [
    '$resource',
    function($resource) {
        return $resource(
            'https://:url/:action',
            {
                url: 'search.twitter.com',
                action: 'search.json',
                q: '#ThingsYouSayToYourBestFriend',
                callback: 'JSON_CALLBACK'
            },
            {
                get: {
                    method: 'JSONP'
                }
            }
        );
    }
]);

Then you can overwrite the URL on your GET call.

The one caveat I found during my REALLY brief testing was that if I included http:// in the URL string, it didn't work. I didn't get an error message. It just did nothing.

edited Sep 26 '15 at 19:50

Andris

5,853
3
28
34

answered Oct 01 '12 at 19:50

Todd

1,674
13
13

2

The problem is that the url paramenter gets encoded, that's why 'http://' or anything with a '/' will fail. Any ideas? – Zymotik Mar 24 '14 at 16:21
@Zymotik http://stackoverflow.com/questions/22944932/angularjs-resource-how-to-disable-url-entity-encoding – Cameron Oct 23 '14 at 18:25
2

This answer is a bit too convoluted for what the asker was looking for - Iris's answer is on point. – btk Jun 05 '15 at 20:24

Petr Bela · Answer 3 · 2013-02-05T19:00:50.730

If you add the hash with param names into the $resource call:

$resource('localhost/pleaseGethere/:id', {id: '@id'});

Then the :id will be mapped to id param when invoking the function (this will call GET localhost/pleaseGethere/123):

Resource.get({id: 123});

For POST, you simply don't assign the id param:

Resource.post({}, {name: "Joe"});

The proper URL will be called, which is in this case POST localhost/pleaseGethere (the trailing slash is stripped by ngResource).

See http://docs.angularjs.org/api/ngResource.$resource -> Examples -> Credit card resource for more details.

jmunsch · Answer 4 · 2016-02-17T20:15:25.240

In addition to Iris Wong's answer, I wanted to give an example of having multiple params with multiple methods and actions:

angular
  .module('thingApp')
  .factory('ThingResource', ['$resource', '$state',  returnThing]);

And the resource:

function returnThing($resource, $state) {
  var mainUrl = '/api/stuffs/:stuffId/thing'
  var params = {stuffId: '@_id', thingMongoId: '@_id', thingNumber: '@_id'}
  return $resource(mainUrl, params, {
    'save': {
      url: '/api/stuffs/:stuffId/thing/:thingMongoId',
      method: 'POST',
      interceptor: {
        responseError: function(e) {
          console.warn('Problem making request to backend: ', e)
          $state.go('oops')
        }
      }
    },
    'get': {
      url: '/api/stuffs/:stuffId/thing/:thingMongoId',
      method: 'GET',
      interceptor: {
        responseError: function(e) {
          console.warn('Problem making request to backend: ', e)
          $state.go('oops')
        }
      }
    },
    'assignThing':{
      method: 'POST',
      url: '/api/stuffs/:stuffId/thing/assign/:thingNumber'
    }
  });
}

Which gives 3 separate methods:

// POST to http://currnt_base_url/api/stuffs/:stuffId/thing/:thingMongoId
ThingResource.save({
    stuffId:'56c3d1c47fe68be29e0f7652', 
    thingMongoId: '56c3d1c47fe6agwbe29e0f11111'})

// GET to current http://currnt_base_url/api/stuffs/:stuffId/thing/:thingMongoId
ThingResource.get({
    stuffId:'56c3d1c47fe68be29e0f7652', 
    thingMongoId: '56c3d1c47fe6agwbe29e0f11111'})

// POST to http://currnt_base_url/api/stuffs/:stuffId/thing/assign/:thingNumber
ThingResource.assignThing({
    stuffId:'56c3d1c47fe68be29e0f7652', 
    thingNumber: '999998'})

comprehensive and valuable. +1 – Bartek Wójcik Apr 25 '17 at 10:49 — Bartek Wójcik, Apr 25 '17 at 10:49

score 1 · Answer 5 · answered Jan 09 '16 at 19:38

Follow this way:

(function () {
    'use strict';

    angular
        .module("app")
        .factory("SomeFactory", SomeFactory);

    function SomeFactory($resource) {
        var provider = "http://stackoverflow.com/:action/:id";
        var params = {"id":"@id"};
        var actions = {
            "create":   {"method": "POST",  "params": {"action": "CreateAwesomePost"}},
            "read":     {"method": "POST",  "params": {"action": "ReadSomethingInteresting"}},
            "update":   {"method": "POST",  "params": {"action": "UpdateSomePost"}},
            "delete":   {"method": "GET",   "params": {"action": "DeleteJustForFun"}}
        };

        return $resource(provider, params, actions);
    }
})();

I hope it help! Enjoy!

AngularJS - $resource different URL for Get and Post

5 Answers5

Linked