Angular HTTP POST method request & response

Today, We want to share with you Angular HTTP POST method request & response.
In this post we will show you http POST method request and response in angularjs, hear for AngularJS Http Post Method ($http.post) with Parameters Example we will give you demo and example for implement.
In this post, we will learn about $http.post server request in AngularJS with an example.

what is AngularJS $http?

The $http is an AngularJS one type of service for reading data from remote servers(Server side send data).
Other words The AngularJS $http service create a request to the server(send data), and The returns a response(JSON).

The $http.POST() services area unit accustomed send knowledge|the info|the information} to a selected computer address and expects the resource at that computer address to handle the request which means we will say that POST methodology is employed to Insert new data supported given computer address and it’s one in all the route methodology in $http service.

READ : Angular get post Method in php MySQLi

This example demonstrates the code that’s accustomed post the JSON knowledge to the server exploitation AngularJS $http service supported Ajax POST protocol. It conjointly demonstrates the potential of AngularJS dependency injection that is employed to inject $http service to the controller because it is initiated.

The $http service could be a core Angular service that facilitates communication with the remote communications protocol servers via the browser’s XMLHttpRequest object or via JSONP. The elaborate article on $http service may well be found on AngularJS $http page.

AngularJS $http List of Methods

1).delete() //delete record
2).get() //
3).head()
4).jsonp()
5).patch()
6).post()
7).put()

There are following two things need to happen in Angulajs $http POST method send data:

1) The content-type need a “application/x-www-form-urlencoded”.//header pass data
2) The data needs to be serialized using “key=value” pairs (generate a query string).

READ : Angular Modal popup Box

AngularJS $http List of Properties.

1).config when a send the request.the object used to generate the request.
return {string|Object}.
2).data a string,response and store data or an object, carrying the response(and store object array) from the server(backend side).
3).headers a function (return {function([headerName])} ) to use to get header information.
4).status a number (return {number}) defining the HTTP status. response – number ex.200 ok
5).statusText a string defining the HTTP status.(return {string})

AngularJS $http – Syntax of AngularJS $http.post Method

var app_login_module = angular.module('mysalesorder_app', []);

app_login_module.controller('salesorderCtrl', function ($scope, $http) {

// Simple basic Post mehod request example:

	var url = 'www.infinityknow.com/app/v1', data = 'parameters List',config='write contenttype here';

	$http.post(pass url, pass data, header pass config).then(function (response) {

	// This function all handles success response

	}, function (response) {

	// generate error this function handles error

	});

});

Example – angularjs http post request json

File name : controller.js

var app_order = angular.module("myApp_order", []);

app_order.controller("my_appcontroller", ['$scope','$http', function($scope, $http)
		{    
			$http.get('js/data.json').success (function(data){
				//alert(JSON.stringify(data.orders));
				$scope.jsondata = data.orders;
			}); 

		}]
);

File name : data.json

{ "orders":[ {"orderID":"1234","orderName":"Phone","orderStatus":"Active","orderDate":"12/15/2000","orderedBy":"[email protected]"},
{"orderID":"4555","orderName":"iOS","orderStatus":"Active","orderDate":"12/12/2013", "orderedBy":"[email protected]"},
{"orderID":"8941","orderName":"TelePhone","orderStatus":"Inactive","orderDate":"08/06/2000", "orderedBy":"[email protected]"},
{"orderID":"7784699","orderName":"PhoneCase","orderStatus":"Active","orderDate":"11/08/2019", "orderedBy":"[email protected]"},
{"orderID":"654211","orderName":"PhoneScreen","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"[email protected]"},
{"orderID":"1289","orderName":"Table","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"[email protected]"},
{"orderID":"1278","orderName":"Webex","orderStatus":"Pending","orderDate":"12/13/2014", "orderedBy":"[email protected]"},
{"orderID":"0004","orderName":"Jabber","orderStatus":"Cancelled","orderDate":"11/06/2013", "orderedBy":"[email protected]"},
{"orderID":"7777","orderName":"Cell","orderStatus":"Processing","orderDate":"09/12/2016", "orderedBy":"[email protected]"},
{"orderID":"1000","orderName":"CellPhone","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"[email protected]"},
{"orderID":"1234","orderName":"Vision","orderStatus":"Initiated","orderDate":"12/06/2019", "orderedBy":"[email protected]"},
{"orderID":"0000","orderName":"Windows","orderStatus":"InActive","orderDate":"12/15/2012", "orderedBy":"[email protected]"},
{"orderID":"1004","orderName":"Apple","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"[email protected]"},
{"orderID":"1239999","orderName":"MacBook","orderStatus":"InActive","orderDate":"12/15/1999", "orderedBy":"[email protected]"},
{"orderID":"13334","orderName":"IpadPro","orderStatus":"InActive","orderDate":"12/12/2000", "orderedBy":"[email protected]co.com"},
{"orderID":"6893","orderName":"IpadMin","orderStatus":"Active","orderDate":"12/15/2012", "orderedBy":"[email protected]"},
{"orderID":"1234578","orderName":"IpadAir","orderStatus":"Success","orderDate":"12/15/2010", "orderedBy":"[email protected]"},
{"orderID":"1234567","orderName":"SurfacePro","orderStatus":"NotFound","orderDate":"12/15/2121", "orderedBy":"[email protected]"},
{"orderID":"4444","orderName":"Mac","orderStatus":"Pending","orderDate":"08/08/2018", "orderedBy":"[email protected]"}

 ] }

index.html



	
	<title>POST REQUEST - Angular Application</title>
	
	
	



<div>
<div class="container">
<div class="row well">

<div class="col-md-3">

<h3>Search</h3>

	</div>
<div class="col-md-6">
			
	</div>
</div>
<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0">

<thead>
<tr>
<th>orderID</th>

<th>orderName</th>

<th>orderStatus</th>

<th>orderDate</th>

<th>orderedBy</th>
	   
				</tr>

			</thead>
<tbody>
<tr>
<td>#{{item.orderID}}</td>
<td>{{item.orderName}}</td>
<td>{{item.orderStatus}}</td>
<td>{{item.orderDate}}</td>
<td>{{item.orderedBy}}</td>
				</tr>
			 </tbody>
	</table>	
</div>
</div>

angularjs http GET METHOD request parameters Example

$http.get('http://api-*****-.com/dev/Document/listoforders?format=json')
    .success(function(data) {
      $scope.gridOptions.data = data.Records;
    });

We hope you get an idea about Angular HTTP POST method request & response
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

READ : Vuejs Form Input Bindings - vuejs form component-Vuejs-Form

We hope This Post can help you…….Good Luck!.