AngularJS + Rails發佈請求

Question

我正在嘗試學習如何在Rails應用程序中使用AngularJS作爲前端框架。到目前爲止，我可以使用Angular在視圖中顯示Rails應用程序中的資源列表，並且可以使用Angular發送刪除請求。但是，我很難創建新資源。如果有人能告訴我我可能做錯了什麼，那將會非常感激。

編輯 我已經取得了一些進展。看着Heroku的日誌，我意識到我犯了一個愚蠢的錯誤，忘記了解釋真實性標記。現在我得到的錯誤：引發ArgumentError（在分配屬性，你必須通過一個哈希作爲參數。）：

資產/ JavaScript的/ angular_app.js

var app = angular.module('shop', ['ngResource']); 

app.factory('models', ['$resource', function($resource){ 
    var orders_model = $resource("/orders/:id.json", {id: "@id"}); 
    var products_model = $resource("/products/:id.json", {id: "@id"}); 
    var users_model = $resource("https://stackoverflow.com/users/:id.json", {id: "@id"}); 
    var x = { 
     orders: orders_model, 
     products: products_model, 
     users: users_model 
    }; 
    return x; 
}]); 

app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){ 
    $scope.orders = models.orders.query(); 
    $scope.products = models.products.query(); 
    $scope.users = models.users.query(); 
    $scope.addOrder = function(){ 
     order = models.orders.save($scope.newOrder, function(){ 
      recent_order = models.orders.get({id: order.id}); 
      $scope.orders.push(recent_order); 
      $scope.newOrder = ''; 
     }); 
    } 
    $scope.deleteOrder = function(order){ 
     models.orders.delete(order); 
     $scope.orders.splice($scope.orders.indexOf(order), 1); 
    } 
}]); 

orders_controller.rb

class OrdersController < ApplicationController   
    protect_from_forgery 
    skip_before_action :verify_authenticity_token, if: :json_request?ion 
    respond_to :json, :html 

    def index 
     @orders = Order.all.to_json(:include => [{:product => {:only => :name}}, 
               {:user => {:only => :email}}]) 
     respond_with @orders 
    end 

    def show 
     @order = Order.find(params[:id]).to_json(:include => [{:product => {:only => :name}}, 
                   {:user => {:only => :email}}]) 
     respond_with @order 
    end 

    def new 
    end 

    def create 
     @order = Order.create(:order_params) 
     @order.product = Product.find(params[:product_id]) 
     @order.user = User.find(params[:user_id]) 

     OrderMailer.order_confirmation(@order.product, @order.user.email, @order.user.first_name) 

     respond_with @order 
    end 

    def destroy 
     respond_with Order.destroy(params[:id]) 
    end 

    protected 

    def json_request? 
     request.format.json? 
    end 

    private 

    def order_params 
     params.require(:order).permit(:product_id, :user_id, :total) 
    end 
end 

訂單/ index.html.erb

<div ng-controller="OrdersCtrl"> 
    <table class="table table-hover"> 
     <thead> 
      <td>Order ID</td> 
      <td>Total</td> 
      <td>Product</td> 
      <td></td> 
     </thead> 
     <tr> 
      <form ng-submit="addOrder()"> 
       <td> 
        <span class="form-control" disabled> 
         <%= Order.last.id + 1 %> 
        </span> 
       </td> 
       <td> 
        <input type="number" step="0.01" class="form-control" ng-model="newOrder.total"> 
       </td> 
       <td> 
        <select ng-model="newOrder.product_id" class="form-control"> 
         <option value="" disabled selected>Select a product</option> 
         <option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option> 
        </select> 
       </td> 
       <td> 
        <select ng-model="newOrder.user_id" class="form-control"> 
         <option value="" disabled selected>Select a user</option> 
         <option ng-repeat="user in users" value="{{user.id}}">{{user.id}}</option> 
        </select> 
       </td> 
       <td> 
        <input type="submit" value="+" class="btn btn-success"> 
       </td> 
      </form> 
     </tr> 
     <tr ng-repeat="order in orders | orderBy: '-id':reverse"> 
      <td> 
       {{order.id}} 
      </td> 
      <td> 
       <strong>{{order.total | currency}}</strong> 
      </td> 
      <td> 
       {{order.product.name}} 
      </td> 
      <td> 
       {{order.user.email}} 
      </td> 
      <td> 
       <button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button> 
      </td> 
     </tr> 
    </table> 
</div> 

Answer 1

試試這個

app.factory('Order', ['$resource', function($resource) { 
    return $resource('/api/orders/:id.json', null, 
    { 
     'update': { method:'PATCH' } 
    }); 
}]); 

然後在Angular中這樣做。

app.controller('OrdersCtrl', ['$scope', 'models' 'Order', function($scope, models, Order){ 
... 

    $scope.addOrder = function(){ 
     var order = new Order($scope.newOrder); 
     Order.save(order, function(res){ 
      $scope.orders.push(res); 
      $scope.newOrder = ''; 
     }); 
    } 
}) 

你newOrder對象不是那麼當你調用保存就可以ngResource的實例，這是行不通的。假設您的瀏覽器中出現了一些控制檯錯誤，並且還有這些行。

您還需要在ngResource上進行更新：patch自定義方法，因爲Rails會將修補程序查找爲修補程序而不是放置，否則在找出這個之後您會問這個問題:)。

Answer 2

啊哈，我終於有了它的工作。我犯了一個愚蠢的錯字：

在單控制器

@order = Order.create(:order_params) 

的創建動作要

@order = Order.create(order_params)