AngularJS + Rails Post Request

0

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

edit Я сделал немного прогресса. Глядя на журналы героику, я понял, что сделал глупую ошибку и забыл учитывать токен аутентичности. Теперь я получаю сообщение об ошибке: 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("/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>
Теги:
ruby-on-rails-4

2 ответа

0

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

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

   @order = Order.create(:order_params)

должно быть

   @order = Order.create(order_params)
0

Попробуйте это вместо этого

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

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

  • 0
    Спасибо за советы, имеет смысл. Я не получаю сообщение об ошибке, POST localhost: 3000 / api / orders.json 404 (не найдено), тогда как раньше я получал ошибку 500.
  • 0
    Мне удалось добиться некоторого прогресса, просматривая логи герою. Я редактировал основной пост.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню