[英]AngularJS + Rails Post Request
我正在嘗試學習將AngularJS用作Rails應用程序中的前端框架。 到目前為止,我可以使用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("/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
orders / 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>
試試這個
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
對象不是newOrder
的實例,因此當您在其上調用save時,它將無法正常工作。 假設您在瀏覽器中以及在這些方面都存在一些控制台錯誤。
您還需要ngResource上的update:patch自定義方法,因為Rails會將更新作為補丁而不是put進行查找,否則您會在發現一個問題后問這個問題:)。
啊哈,終於可以了。 我做了一個愚蠢的錯字:
在訂單控制器的創建動作中
@order = Order.create(:order_params)
應該
@order = Order.create(order_params)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.