Calling a Rails function from an Angular service

Question

If have a simple Rails controller defined like so:

class ProductsController < ApplicationController

  respond_to :json

  def index
  end

  def new
  end

  def create
    @product = Product.new(product_params)
    @product.save
    redirect_to @product

    # this can be used if there is no view already created 
    # render plain: params[:products].inspect
  end

  def show
    @product = Product.find(params[:id])
    respond_with @product
  end

  def show_all
    # @products = Product.all
    # respond_with @products
    respond_to do |format|
      @products = Product.all

      format.html 
      format.json { render json: @products }
    end
  end

  private
      def product_params
        params.require(:product).permit(:name, :description)
      end
end

I have attempted to use this in my Angular service by doing the following:

function HomeService($resource) {
    function exposeTest() {
        /*
        {
            'create':  { method: 'POST' },
            'index':   { method: 'GET', isArray: true },
            'show':    { method: 'GET', isArray: false },
            'update':  { method: 'PUT' },
            'destroy': { method: 'DELETE' }
        }
        */
        return $resource('/products/show_all', {}, {
            'show_all':     { method: 'GET', isArray: false }
        });
    }
    return {
        exposeTest: exposeTest
    };
}

And I call this in my home.controller.js like so:

console.log('Expose Test: '+JSON.stringify(HomeService.exposeTest().show_all()));

It's my understanding that you can define a $resource object to interact with the controller - i.e. I have defined a GET type method which can be called with show_all but all I get back is an empty object.

What am I doing wrong?

Thanks

an ajax request is asynchronous, your console.log is executed right away (synchronous) — apneadiving
– apneadiving, Commented Nov 11, 2015 at 9:48

Katana24 · Accepted Answer · 2015-11-11 11:37:51Z

So as is the nature of questions asked I managed to solve it after a-bit more digging and tweaking. Below I'll post two ways of getting the same data - one goes over basic $http, the other over $resource. First the service calls:

    HomeService.httpShowAll().then(function(data) {
        vm.httpProducts = data;
    });
    HomeService.resourceShowAll().index().$promise.then(function(success) {
        vm.resourceProducts = success;
    });

And in the services themselves:

    function httpShowAll() {
        return $http.get('/products/index.json',{}).success(function(data) {});
    }
    function resourceShowAll() {
        return $resource('/products/index.json', {} , {
            index: {isArray: true}
        });
    }

The above index part in the resourceShowAll() function acts as a key for the controller to call on the resource object. And finally the Rails controller index function:

  respond_to :json
  def index
    @products = Product.all
    respond_to do |format|
      format.json { render json: @products }
      format.html 
    end
  end

I hope this helps anyone who is coming from a pure Angular background to working with both Angular and Rails.

Note: I'll update this answer with the basic CRUD functions as soon as I work them out:

CREATE
READ (above)
UPDATE
DELETE

Collectives™ on Stack Overflow

Calling a Rails function from an Angular service

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