Rectangle 27 3

I managed to make it work using the gem rack-cors https://github.com/cyu/rack-cors. After you install the gem you must update your config/application.rb:

config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end

and you still need the following methods in application.rb :

before_filter :cors_preflight_check
  after_filter :cors_set_access_control_headers

  def cors_set_access_control_headers
     headers['Access-Control-Allow-Origin'] = '*'
     headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
     headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, Accept, Authorization, Token'
     headers['Access-Control-Max-Age'] = "1728000"
   end

   def cors_preflight_check
    binding.pry
     if request.method == 'OPTIONS'
       headers['Access-Control-Allow-Origin'] = '*'
       headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
       headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version, Token'
       headers['Access-Control-Max-Age'] = '1728000'
       render :text => '', :content_type => 'text/plain'
     end
   end

angularjs - Angular post request doesnt pass preflight check even thou...

ruby-on-rails angularjs post cross-domain preflight
Rectangle 27 18

I will explain all my config in Angular and Rails 4 as I would have liked to read it.

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"];
  • In my view: <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>

Note: You can define as many fields as you need and with data bingind assign the values to an object.

$scope.createBusiness = function() {

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

Note: All the attributes you need to send in the post request. Apart from the form, you can assign some new attributes to the object before sending to Rails API. We will use a service with a resource object to send the POST request.

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;           
  }

Note: I have a GET request to get the business from DB through Rails API and the POST one.

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

Note: New entry to match the OPTIONS request the Angular server will send to pre-negociate the start of sending the POST request.

  • application_controller.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
  • My Rails controller 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

There's a cleaner way to do this, using the rack-cors gem rather than hardcoding the headers. Check out the newer answer from @matthew-coarr

I love you guys, @Rober you made me understand more about CORS with your solution. I applied and it works. .@david-tresner-kirsch, thanks for share that gem I applied too and I'm keeping that solution.

angularjs - Sending an Angular post request with parameter to Rails AP...

angularjs ruby-on-rails-4
Rectangle 27 41

Notice that compile returns an object containing both the pre-link and post-link functions; in Angular lingo we say the compile function returns a template function.

If pre-link isn't necessary, the compile function can simply return the post-link function instead of a definition object, like so:

Sometimes, one wishes to add a compile method, after the (post) link method was defined. For this, one can use:

If no compile function is needed, one can skip its declaration altogether and provide the post-link function under the link property of the directive's configuration object:

In any of the examples above, one can simply remove the controller function if not needed. So for instance, if only post-link function is needed, one can use:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

angularjs - Angular directives - when and how to use compile, controll...

angularjs angularjs-directive
Rectangle 27 40

Notice that compile returns an object containing both the pre-link and post-link functions; in Angular lingo we say the compile function returns a template function.

If pre-link isn't necessary, the compile function can simply return the post-link function instead of a definition object, like so:

Sometimes, one wishes to add a compile method, after the (post) link method was defined. For this, one can use:

If no compile function is needed, one can skip its declaration altogether and provide the post-link function under the link property of the directive's configuration object:

In any of the examples above, one can simply remove the controller function if not needed. So for instance, if only post-link function is needed, one can use:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

angularjs - Angular directives - when and how to use compile, controll...

angularjs angularjs-directive
Rectangle 27 40

Notice that compile returns an object containing both the pre-link and post-link functions; in Angular lingo we say the compile function returns a template function.

If pre-link isn't necessary, the compile function can simply return the post-link function instead of a definition object, like so:

Sometimes, one wishes to add a compile method, after the (post) link method was defined. For this, one can use:

If no compile function is needed, one can skip its declaration altogether and provide the post-link function under the link property of the directive's configuration object:

In any of the examples above, one can simply remove the controller function if not needed. So for instance, if only post-link function is needed, one can use:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

angularjs - Angular directives - when and how to use compile, controll...

angularjs angularjs-directive
Rectangle 27 26

$http({
    url: 'http://localhost:8080/example/teste',
    dataType: 'json',
    method: 'POST',
    data: '',
    headers: {
        "Content-Type": "application/json"
    }

}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

I am afraid it doesn't work in Angular 1.3.14, Content-Type is removed if there is no data. Empty data parameter solves the issue though...

Very Strange ! even for GET request also I had to provide the data: '' field. though we all know GET should not have a body ! any idea why angularjs is stripping off the content-type application/header when no data is provided ?

angularjs - Angular, content type is not being sent with $http - Stack...

angularjs
Rectangle 27 14

AngularJS is meant to work as a client-side framework coupled with (mostly) RESTfull APIs. Your login API isn't supposed to return a HTML, it is supposed to return the instruction to redirect. So in your case you should simply call $location.url('/') in your $http success callback, which would use the Angular router to "redirect" to '/' (the root URL).

How does one detect the 'instruction to redirect' in Angular? In the op's example using Express, does Angular expose some way of detecting res.redirect('/') coming from the server?

It's up to the developer, but in most cases you want to return status code 200 (success) or 201 (created), in which case you simply put the $location.url('/') call in $http success callback.

how can i mimic the traditional <form action='/auth/signin' method='POST'> way of posting data where res.redirect works?

javascript - Handle an express redirect from Angular POST - Stack Over...

javascript redirect angularjs express
Rectangle 27 88

The various directive functions are executed from within two other angular functions called $compile (where the directive's compile is executed) and an internal function called nodeLinkFn (where the directive's controller, preLink and postLink are executed). Various things happen within the angular function before and after the directive functions are called. Perhaps most notably is the child recursion. The following simplified illustration shows key steps within the compile and link phases:

To demonstrate the these steps, let's use the following HTML markup:

<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>

With the following directive:

myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});
compile
compile: function compile( tElement, tAttributes ) { ... }

Often the parameters are prefixed with t to signify the elements and attributes provided are those of the source template, rather than that of the instance.

Prior to the call to compile transcluded content (if any) is removed, and the template is applied to the markup. Thus, the element provided to the compile function will look like so:

<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>

Notice that the transcluded content is not re-inserted at this point.

Following the call to the directive's .compile, Angular will traverse all child elements, including those that may have just been introduced by the directive (the template elements, for instance).

In our case, three instances of the source template above will be created (by ng-repeat). Thus, the following sequence will execute three times, once per instance.

controller
controller: function( $scope, $element, $attrs, $transclude ) { ... }

Entering the link phase, the link function returned via $compile is now provided with a scope.

First, the link function create a child scope (scope: true) or an isolated scope (scope: {...}) if requested.

The controller is then executed, provided with the scope of the instance element.

pre-link
function preLink( scope, element, attributes, controller ) { ... }

Virtually nothing happens between the call to the directive's .controller and the .preLink function. Angular still provide recommendation as to how each should be used.

Following the .preLink call, the link function will traverse each child element - calling the correct link function and attaching to it the current scope (which serves as the parent scope for child elements).

The post-link API is similar to that of the pre-link function:

function postLink( scope, element, attributes, controller ) { ... }

Perhaps worth noticing that once a directive's .postLink function is called, the link process of all its children elements has completed, including all the children's .postLink functions.

This means that by the time .postLink is called, the children are 'live' are ready. This includes:

<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>

angularjs - Angular directives - when and how to use compile, controll...

angularjs angularjs-directive
Rectangle 27 88

The various directive functions are executed from within two other angular functions called $compile (where the directive's compile is executed) and an internal function called nodeLinkFn (where the directive's controller, preLink and postLink are executed). Various things happen within the angular function before and after the directive functions are called. Perhaps most notably is the child recursion. The following simplified illustration shows key steps within the compile and link phases:

To demonstrate the these steps, let's use the following HTML markup:

<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>

With the following directive:

myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});
compile
compile: function compile( tElement, tAttributes ) { ... }

Often the parameters are prefixed with t to signify the elements and attributes provided are those of the source template, rather than that of the instance.

Prior to the call to compile transcluded content (if any) is removed, and the template is applied to the markup. Thus, the element provided to the compile function will look like so:

<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>

Notice that the transcluded content is not re-inserted at this point.

Following the call to the directive's .compile, Angular will traverse all child elements, including those that may have just been introduced by the directive (the template elements, for instance).

In our case, three instances of the source template above will be created (by ng-repeat). Thus, the following sequence will execute three times, once per instance.

controller
controller: function( $scope, $element, $attrs, $transclude ) { ... }

Entering the link phase, the link function returned via $compile is now provided with a scope.

First, the link function create a child scope (scope: true) or an isolated scope (scope: {...}) if requested.

The controller is then executed, provided with the scope of the instance element.

pre-link
function preLink( scope, element, attributes, controller ) { ... }

Virtually nothing happens between the call to the directive's .controller and the .preLink function. Angular still provide recommendation as to how each should be used.

Following the .preLink call, the link function will traverse each child element - calling the correct link function and attaching to it the current scope (which serves as the parent scope for child elements).

The post-link API is similar to that of the pre-link function:

function postLink( scope, element, attributes, controller ) { ... }

Perhaps worth noticing that once a directive's .postLink function is called, the link process of all its children elements has completed, including all the children's .postLink functions.

This means that by the time .postLink is called, the children are 'live' are ready. This includes:

<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>

angularjs - Angular directives - when and how to use compile, controll...

angularjs angularjs-directive
Rectangle 27 2

It turned out removing WebDAV handler and WebDAVModule took care of the problem:

<handlers>
  <remove name="WebDAV" />
</handlers>
<modules runAllManagedModulesForAllRequests="true">
  <remove name="WebDAVModule" />
</modules>

angularjs - Angular $resource POST/PUT to WebAPI 405 Method Not Allowe...

angularjs iis web asp.net-web-api angular-resource
Rectangle 27 31

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

the function ObjecttoParams works like charm ! Thanks a lot.

Simplest solution in my opinion!

Worked like a charm.. +1

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 31

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

the function ObjecttoParams works like charm ! Thanks a lot.

Simplest solution in my opinion!

Worked like a charm.. +1

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 88

The various directive functions are executed from within two other angular functions called $compile (where the directive's compile is executed) and an internal function called nodeLinkFn (where the directive's controller, preLink and postLink are executed). Various things happen within the angular function before and after the directive functions are called. Perhaps most notably is the child recursion. The following simplified illustration shows key steps within the compile and link phases:

To demonstrate the these steps, let's use the following HTML markup:

<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>

With the following directive:

myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});
compile
compile: function compile( tElement, tAttributes ) { ... }

Often the parameters are prefixed with t to signify the elements and attributes provided are those of the source template, rather than that of the instance.

Prior to the call to compile transcluded content (if any) is removed, and the template is applied to the markup. Thus, the element provided to the compile function will look like so:

<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>

Notice that the transcluded content is not re-inserted at this point.

Following the call to the directive's .compile, Angular will traverse all child elements, including those that may have just been introduced by the directive (the template elements, for instance).

In our case, three instances of the source template above will be created (by ng-repeat). Thus, the following sequence will execute three times, once per instance.

controller
controller: function( $scope, $element, $attrs, $transclude ) { ... }

Entering the link phase, the link function returned via $compile is now provided with a scope.

First, the link function create a child scope (scope: true) or an isolated scope (scope: {...}) if requested.

The controller is then executed, provided with the scope of the instance element.

pre-link
function preLink( scope, element, attributes, controller ) { ... }

Virtually nothing happens between the call to the directive's .controller and the .preLink function. Angular still provide recommendation as to how each should be used.

Following the .preLink call, the link function will traverse each child element - calling the correct link function and attaching to it the current scope (which serves as the parent scope for child elements).

The post-link API is similar to that of the pre-link function:

function postLink( scope, element, attributes, controller ) { ... }

Perhaps worth noticing that once a directive's .postLink function is called, the link process of all its children elements has completed, including all the children's .postLink functions.

This means that by the time .postLink is called, the children are 'live' are ready. This includes:

<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>

angularjs - Angular directives - when and how to use compile, controll...

angularjs angularjs-directive
Rectangle 27 27

This has finally been addressed in angular 1.4 using $httpParamSerializerJQLike

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"wahxxx@gmail.com",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 27

This has finally been addressed in angular 1.4 using $httpParamSerializerJQLike

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"wahxxx@gmail.com",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 321

I had the same problem using asp.net MVC and found the solution here

There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) dont appear to be swappable with the jQuery equivalents (jQuery.post(), etc.)

The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJSs transmission natively ... By default, jQuery transmits data using

Content-Type: x-www-form-urlencoded

and the familiar foo=bar&baz=moe serialization.

Content-Type: application/json
{ "foo": "bar", "baz": "moe" }

Works like a charm.

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});
bower install angular-post-fix --save-dev

so is there a way to change php's transmits data method. Because that is the issue I am having currently.

This code works great on the most part, but I've had issues with it when submitting a hierarchy of empty objects or even flat empty values. For example, { a: 1, b: { c: { d: { } } }, e: undefined, f: null, g: 2 } will not be encoded properly, and PHP will get it as [ "a" => "1", "g" => "2" ]. The entire structure under "b", as well as "e" and "f", including the keys themselves - would be lost. I posted alternative code below, with which the above structure gets decoded as: [ "a" => "1", "b" => [ "c" => [ "d" => "" ] ], "e" => "", "f" => "", "g" => "2" ].

Amazing. I faced a lot of problem but this solved it. :)

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 321

I had the same problem using asp.net MVC and found the solution here

There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) dont appear to be swappable with the jQuery equivalents (jQuery.post(), etc.)

The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJSs transmission natively ... By default, jQuery transmits data using

Content-Type: x-www-form-urlencoded

and the familiar foo=bar&baz=moe serialization.

Content-Type: application/json
{ "foo": "bar", "baz": "moe" }

Works like a charm.

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});
bower install angular-post-fix --save-dev

so is there a way to change php's transmits data method. Because that is the issue I am having currently.

This code works great on the most part, but I've had issues with it when submitting a hierarchy of empty objects or even flat empty values. For example, { a: 1, b: { c: { d: { } } }, e: undefined, f: null, g: 2 } will not be encoded properly, and PHP will get it as [ "a" => "1", "g" => "2" ]. The entire structure under "b", as well as "e" and "f", including the keys themselves - would be lost. I posted alternative code below, with which the above structure gets decoded as: [ "a" => "1", "b" => [ "c" => [ "d" => "" ] ], "e" => "", "f" => "", "g" => "2" ].

Amazing. I faced a lot of problem but this solved it. :)

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 19

If using Angular >= 1.4, here's the cleanest solution I've found that doesn't rely on anything custom or external:

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

And then you can do this anywhere in your app:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

And it will correctly serialize the data as param1=value1&param2=value2 and send it to /requesturl with the application/x-www-form-urlencoded; charset=utf-8 Content-Type header as it's normally expected with POST requests on endpoints.

This should be the correct answer.

javascript - AngularJS - Any way for $http.post to send request parame...

javascript jquery post angularjs
Rectangle 27 106

I needed to add true to force it to an array when overwriting the $_POST array with it. json_decode(file_get_contents('php://input'), true);

hacky, should not be used as a universal solution

@Zalaboza, I would agree that it is tough to have any solution considered 'universal' but I don't agree that it is 'hacky'--- php.net states: "file_get_contents() is the preferred way to read the contents of a file into a string. It will use memory mapping techniques if supported by your OS to enhance performance." Granted we're not reading a file in this situation but we are nonetheless reading posted json data. It would be great if you could contribute a new answer or provide new information to help readers (including myself) make a better decision about this.

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http
Rectangle 27 105

I needed to add true to force it to an array when overwriting the $_POST array with it. json_decode(file_get_contents('php://input'), true);

hacky, should not be used as a universal solution

@Zalaboza, I would agree that it is tough to have any solution considered 'universal' but I don't agree that it is 'hacky'--- php.net states: "file_get_contents() is the preferred way to read the contents of a file into a string. It will use memory mapping techniques if supported by your OS to enhance performance." Granted we're not reading a file in this situation but we are nonetheless reading posted json data. It would be great if you could contribute a new answer or provide new information to help readers (including myself) make a better decision about this.

AngularJs $http.post() does not send data - Stack Overflow

angularjs post angular-http