パラメータ付きのAngular POSTリクエストをRails APIに送信する質問する

Question

ついにうまくいきました。

私が読みたかった Angular と Rails 4 のすべての設定について説明します。

角度

アプリ.js:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.i18n', 'demo']).
config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];

}]);

注: もちろん、すべてのモジュールを含める必要はありません。

私からしてみれば：

<form novalidate="" name="createBusinessForm" ng-submit="setBusinessInformation()" class="css-form">            
        <label>* {{'BUSINESS_NAME' | translate}}</label>
        <input type="text" name="name" ng-model="business.name" class="input-xxlarge input-height-large" placeholder="{{'BUSINESS_NAME_PLACEHOLDER' | translate}}" required maxlength="80">
        <span ng-show="createBusinessForm.name.$dirty && createBusinessForm.name.$error.required" class="text-error">Mandatory field.</span>
        <label>* {{'ID' | translate}}</label>    
        <input type="text" ng-model="business.cif_nif" class="input-xlarge input-height-large" placeholder="{{'BUSINESS_ID_PLACEHOLDER' | translate}}" required maxlength="60">        
        <label>* {{'ADDRESS' | translate}}</label>

注: 必要な数のフィールドを定義し、データバインディングを使用してオブジェクトに値を割り当てることができます。

私のコントローラーでは:

$scope.createBusiness = function() {

        $scope.business.type = $scope.type; 
        $scope.business.plan = $scope.plan;     
        $scope.business = Business.save($scope.business);           
        $location.path('/user-dashboard');                              
    };

注: すべての属性は、POST リクエストで送信する必要があります。フォームとは別に、Rails API に送信する前にオブジェクトにいくつかの新しい属性を割り当てることができます。リソースオブジェクトを持つサービスを使用して、POST リクエストを送信します。

私のサービスでは：

.factory('ビジネス',

  function($resource){          
    var businesses =
     $resource('http://127.0.0.1\\:3000/:business', {business:'businesses'}, {      
        query: {method:'GET', isArray: true},
        save: {method:'POST', isArray: false}
     });        
     return businesses;           
  }

);

注: Rails API を介して DB からビジネスを取得するための GET リクエストと POST リクエストがあります。

レール4

重要

ルート.rb

match "/businesses" => "application#index", via: :options

注: Angular サーバーが POST 要求の送信開始を事前にネゴシエートするために送信する OPTIONS 要求に一致する新しいエントリ。

アプリケーションコントローラ.rb

class ApplicationController < ActionController::Base


before_filter :set_headers

def index
  puts "Do nothing."
  render nothing: true
end

def set_headers
  puts 'ApplicationController.set_headers'
  if request.headers["HTTP_ORIGIN"]     
  # better way check origin
  # if request.headers["HTTP_ORIGIN"] && /^https?:\/\/(.*)\.some\.site\.com$/i.match(request.headers["HTTP_ORIGIN"])
    headers['Access-Control-Allow-Origin'] = request.headers["HTTP_ORIGIN"]
    headers['Access-Control-Expose-Headers'] = 'ETag'
    headers['Access-Control-Allow-Methods'] = 'GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD'
    headers['Access-Control-Allow-Headers'] = '*,x-requested-with,Content-Type,If-Modified-Since,If-None-Match,Auth-User-Token'
    headers['Access-Control-Max-Age'] = '86400'
    headers['Access-Control-Allow-Credentials'] = 'true'
  end
end               
end

私のRailsコントローラ

def create
  puts 'Businesses_controller.create!!!!!'
  puts business_params.inspect

  # business_type object is recovered from db
  businessTypeName = params[:type]    
  businessType = BusinessType.where(:name => businessTypeName).first
  ...
end

注: ここで必要なことはすべて行ってください...

Answer 1