AngularJS Http Put Method ($http.put) with Parameters Example

Here we will learn about $http.put service in angularjs, use of $http.put service and how to use $http.put service method in angularjs applications with example.

AngularJS Http Put ($http.put()) Service

In angularjs $http.put is a shortcut method of $http service. The $http.put() service in angularjs is used to upload a files to server and update existing data in server based on given URL. Generally $http.put method not allowed by many servers due to security reasons.

Syntax of AngularJS $http.put Method

Following is the syntax of using $http.put method in angularjs applications.

 

var app = angular.module('putserviceApp', []);

app.controller('putserviceCtrl', function ($scope, $http) {

// Simple Put request example:

var url = 'puturl', data = 'parameters',config='contenttype';

$http.put(url, data, config).then(function (response) {

// This function handles success

}, function (response) {

// this function handles error

});

});

If you observe syntax of angularjs $http.put method we have different properties like url, data, config and then success and error functions. We will learn each property in detail.

 

PropertyDescription
url Used to send url of http server to perform required operations.
data This property to send required parameters to requested url.
config By using this property we can change content-type.

After execution of our $http.put request we will get response based on that response status our success and failure methods will execute.

 

Note: In above syntax we passed $http as argument to the controller. To use service in controller we need to pass $http as a parameter.

 

The response object which we will get after execution of $http.put method has following properties

 

  1. config  - The configuration object is used to generate the request.
  2. data - It’s either string or an object.
  3. headers - We can get header information.
  4. status - We can get HTTP status code of the response.
  5. statusText - Get HTTP status text of the response.

We will see how to use $http.put service in angularjs with example.

AngularJS $http.put() Service Example

Following is the example of using angularjs $http.put service in application.

 

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $http.put() Service Response Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('putserviceApp', []);

app.controller('putserviceCtrl'function ($scope, $http) {

$scope.name = null;

$scope.age = null;

$scope.adress = null;

$scope.lblMsg = null;

$scope.putdata = function (name, age, adress) {

var data = {

name: name,

age: age,

adress: adress

};

//Call the services

$http.put('/api/users/putmethod', JSON.stringify(data)).then(function (response) {

if (response.data)

$scope.msg = "Put Data Method Executed Successfully!";

}, function (response) {

$scope.msg = "Service not Exists";

$scope.statusval = response.status;

$scope.statustext = response.statusText;

$scope.headers = response.headers();

});

};

});

</script>

</head>

<body>

<div ng-app="putserviceApp" ng-controller="putserviceCtrl">

<div>

Name : <input ng-model="name" /><br/><br/>

Age : <input ng-model="age" /><br/><br/>

Adress : <input ng-model="adress" /><br/><br/>

<input type="button" value="Send" ng-click="putdata(name, age, adress)" /> <br/><br/>

</div>

<p>Output Message : {{msg}}</p>

<p>StatusCode: {{statusval}}</p>

<p>Status: {{statustext}}</p>

<p>Response Headers: {{headers}}</p>

</div>

</body>

</html>

Now we will run and see the output of above angularjs $http.put method that would be like as shown following.

Output of AngularJS $http.put Service Example

Following is the result of using $http.put service in angularjs application.

 

Angularjs $http post service example result or output

 

If you observe above output we got message like "Service not Exists" that means the url which we defined in angularjs $http.put() method not exists that's why it's showing error message. In case if service exists with that url it will execute and show message like "Put Data Method Executed Successfully".

 

This is how we can use angularjs $http.put method to send files or update data in remote http servers.