AngularJS + Rails Post Request

Question

Я пытаюсь научиться использовать AngularJS в качестве front-end framework в приложениях Rails. Пока что я могу отобразить список ресурсов из приложения Rails, используя Angular, и я могу отправить запрос на удаление с помощью Angular. Однако мне трудно создавать новые ресурсы. Если кто-то может сказать мне, что я могу делать неправильно, это было бы действительно оценено.

Редактировать Я немного продвинулся вперед. Глядя на журналы героику, я понял, что сделал глупую ошибку и забыл учитывать токен аутентичности. Сейчас я получаю сообщение об ошибке: 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' } 
    }); 
}]); 

а затем что-то подобное в угловом.

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 поэтому, когда вы вызываете сохранить на нем, что не работает. Предполагая, что у вас есть некоторые ошибки консоли в вашем браузере, а также вдоль этих строк.

Вам также потребуется обновление: patch custom method на ngResource, потому что Rails ищет обновления как патч и не ставится, иначе вы будете задавать этот вопрос после того, как вы это выясните :).

Answer 2

Ага, я, наконец, работаю. Я сделал глупую опечатку:

В создании действия контроллера заказов

@order = Order.create(:order_params) 

должен быть

@order = Order.create(order_params)