Angular resource service does not consume rest ful service in rails (Json format)

Question

I´m developing a web application where I have a front-end built with AngularJS that consumes Rest Services provided by a back-end API Rails application.

I would like to use the Angular $resource to get the Json objects in the backend API.

Client and Server applications run in different servers so far. So, angular client is in server-path:1234/app and backend api application runs in another-server-path:3000/.

Where server-path and another-server-path are localhost.

Both sides are developed, and works independently. I mean:

When I run another-server-path:3000/boats in a browser I get the list of boats, so the Restful service looks to be working.
I did a simulation in the client side, so, in my service I replaced the real url with a simulated url to a json data source. This code works too.

Now, I want to call the backend restful service in another-server-path:3000/boats from the angular service, but it´s now showing any data, neither I can see any get request in servers logs.

This is my angular service code:

angular.module('myApp.services', ['ngResource']).
//  value('version', '0.1');

factory('Boat', function($resource){
    return $resource('another-server-path:3000/:boatId', {}, {
    query: {method:'GET', params:{boatId:'boats'}, isArray:true}
  });

});

and this is my backend rails controller:

def index
  @boats = Boat.all

  respond_to do |format|
    format.html
    format.xml { render :xml => @boats}
    format.json { render :json => @boats}
  end
end

What am I missing? Please help.

UPDATE: In Angular app, I changed my service file with:

return $resource('another-server-path\\:3000/:boatId', {}, {
query: {method:'GET', params:{boatId:'boats'}, isArray:true}

I also added this line to my app.js file:

delete $httpProvider.defaults.headers.common["X-Requested-With"];

and now I got the request in the api server. The controller is also executed. I got the boats from the DB. However I´m not able to send them back in JSON to Angular.

This is my api Controller:

def index
  @boats = Boat.all
  puts @boats
  render :json => @boats          
end

and this is the log I got when it´s called:

    Started GET "/boats" for 127.0.0.1 at 2013-09-26 17:05:49 +0200
Processing by BoatsController#index as HTML
  Boat Load (2.0ms)  SELECT `boats`.* FROM `boats`
#<Boat:0x0000000675d9f0>
#<Boat:0x000000089e74a8>
#<Boat:0x000000089e71b0>
#<Boat:0x000000089e6e40>
Completed 200 OK in 66ms (Views: 3.0ms | ActiveRecord: 7.0ms)

As you can see, first, it says it is been processed as HTML instead of JSON. An second it is not sent to Angular back.

This could be a cross domain request issue. If the site which is making the request is different from the server then it is a cross domain call. Google for how to achieve it using angularjs. — Chandermani
– Chandermani, Commented Sep 25, 2013 at 12:00
Are you using version 1.0.x of angularJS? In that case you need to escape the port on url: $resource('another-server-path\\:3000/:boatId' — Matti Lehtinen
– Matti Lehtinen, Commented Sep 25, 2013 at 13:26
I changed the url to return $resource('http\\://localhost\\:3000/:boatId', {}, { query: {method:'GET', params:{boatId:'boats'}, isArray:true} . Now, It looks like I reached the api server, I can see a new trace, trying to request something, however it´s an error trace: Started OPTIONS "/boats" for 127.0.0.1 at 2013-09-26 08:40:21 +0200 ActionController::RoutingError (No route matches [OPTIONS] "/boats"): — Rober
– Rober, Commented Sep 26, 2013 at 6:43

user229044 · Accepted Answer · 2013-09-30 18:35:58Z

2

I got it working!

I configure my Rails api to accept cross-domain request by putting this configuration in config/application.rb

config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => '*',
  'Access-Control-Request-Method' => '*'
}

my service file with the resource call:

factory('Boat', function($resource){    
    return $resource('http://127.0.0.1\\:3000/:boatId', {}, {       
    query: {method:'GET', params:{boatId:'boats'}, isArray:true}
  });
}).

and my Rails API controller:

def index

  @boats = Boat.all
  puts @boats
  render :json => @boats          
end

It looks easy, but this combination took me three days.

edited Sep 30, 2013 at 18:35

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered Sep 27, 2013 at 12:15

Rober

6,15818 gold badges62 silver badges118 bronze badges

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

Collectives™ on Stack Overflow

Angular resource service does not consume rest ful service in rails (Json format)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related