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.
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.
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.
Property | Description |
---|---|
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
We will see how to use $http.put service in angularjs with 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.
Following is the result of using $http.put service in angularjs application.
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.