javascript - Angular 不从 Rails 数据库查询资源

Question

我使用 Angular 作为组件，将 Quotes 作为来自 Rails 后端的资源。 Angular 已加载到 Dom 中，但查询方法不会从 Rails 后端返回任何结果。我收到一条错误消息，指出 Quotes.query 不是函数。如果您知道我可能做错了什么，请告诉我。

报价 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();
    }
]);

行情索引

  <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>

Answer 1

DI 内联数组注释中缺少 $resource

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

或者您可以删除$resource，这似乎是多余的

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