1

I'm using Angular as a component that has Quotes as a resource from a Rails Backend. Angular is loaded in the Dom, But the Query Method does not return any results from the Rails Backend. I get an error that says Quotes.query is not a function. Please let me know if you know what I may be doing wrong.

Quotes Controller

    class QuotesController < ApplicationController
  before_action :set_quote, only: [:show, :edit, :update, :destroy]
  respond_to :html, :json
  # GET /quotes
  # GET /quotes.json
  def index
    @quotes = Quote.all
     respond_with(@quotes) do |format|
      format.json { render :json => @quote.as_json }
      format.html
    end
  end

  # GET /quotes/1
  # GET /quotes/1.json
  def show #shows some material
    respond_with(@quote.as_json)
    # @quote = Quote.find(params[:id])
    #  respond_to do |format|
    #   format.html
      # format.pdf do
      #   pdf = QuotePdf.new(@quote)
      #   send_data pdf.render, filename: "quote_#{@quote.id}",
      #                         type: "application/pdf",
      #                         disposition: "inline"

      # end
    # end
  end
  # GET /quotes/new
  def new
    @quote = Quote.new
  end

  # GET /quotes/1/edit
  def edit
  end

  # POST /quotes
  # POST /quotes.json
  def create
    @quote = Quote.new(quote_params)

    respond_to do |format|
      if @quote.save
        format.html { redirect_to root_path, notice: 'Quote was successfully created.' }
        format.json { render :show, status: :created, location: @quote }
      else
        format.html { render :new }
        format.json { render json: @quote.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /quotes/1
  # PATCH/PUT /quotes/1.json
  def update
    respond_to do |format|
      if @quote.update(quote_params)
        format.html { redirect_to @quote, notice: 'Quote was successfully updated.' }
        format.json { render :show, status: :ok, location: @quote }
      else
        format.html { render :edit }
        format.json { render json: @quote.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /quotes/1
  # DELETE /quotes/1.json
  def destroy
    @quote.destroy
    render json: { status: :ok}
    # respond_to do |format|
    #   format.html { redirect_to quotes_url, notice: 'Quote was successfully destroyed.' }
    #   format.json { head :no_content }
    # end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_quote
      @quote = Quote.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def quote_params
      params.require(:quote).permit(:name, :email, :address, :city, :state, :region, :question1, :question2, :question3, :question4, :question5, :question6, :question7, :question8, :question9, :question10, :question11, :question12, :question13, :question14, :image )
    end
end

AngularJS

    var app = angular.module("QuotesApp", ['ngRoute', 'ngResource']);

app.factory('Quotes', ['$resource',function($resource){
 return $resource('/quotes.json', {},{
 query: { method: 'GET', isArray: true },
 create: { method: 'POST' }
 })
}]);

app.factory('Quote', ['$resource', function($resource){
 return $resource('/quotes/:id.json', {}, {
 show: { method: 'GET' },
 update: { method: 'PUT', params: {id: '@id'} },
 delete: { method: 'DELETE', params: {id: '@id'} }
 });
}]);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when('/quotes',{
            templateUrl: '/views/quotes/index.html',
            controller: 'QuotesCtrl'
        });
        $routeProvider.when('/quotes/:id/show', {
            templateUrl: '/views/quotes/show.html.erb',
            controller: "QuotesCtrl"
        });
        $routeProvider.otherwise({
            redirectTo: '/quotes'
        });
    }
]);

app.controller("QuotesCtrl", ['$scope', '$resource', '$http', 'Quotes', 'Quote', '$location',  function($scope, $http,  Quotes, Quote, $location ) {
        $scope.quotes = Quotes.query();
    }
]);

Quotes Index

  <div ng-app="QuotesApp">
<div class="quotes col-xs-10 col-md-8" ng-controller="QuotesCtrl">
  <li ng-repeat="quote in quotes">
    {{quotes.name}}
  </li>
</div>

1 Answer 1

1

Missed $resource in DI inline array annotation

app.controller("QuotesCtrl", ['$scope', '$resource', '$http', 'Quotes', 'Quote', '$location',  
   function($scope, $resource, $http,  Quotes, Quote, $location ) {

OR You could remove $resource, that seems redundant

app.controller("QuotesCtrl", ['$scope', '$http', 'Quotes', 'Quote', '$location',  
   function($scope, $http,  Quotes, Quote, $location ) {
Sign up to request clarification or add additional context in comments.

2 Comments

Pankaj your a life saver. I really appreciate it. I probably never would have found that. You solved my issue.
@MerlinJackson that happens, glad to know that.. Thanks :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.