AngularJS Http Delete Method ($http.delete) Example with Parameters

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

AngularJS Http Delete ($http.delete()) Service Method

The $http.DELETE() method in angularjs is used to delete a resource on the server based on given specific URL. Its short cut method of $http services in angularjs.

 

Generally $http.delete method rarely allowed to delete a resources on the server due to security reasons.

Syntax of AngularJS $http.delete Method

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

 

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

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

// Simple Delete request example:

var url = 'deleteurl', data = 'parameters';

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

// This function handles success

}, function (response) {

// this function handles error

});

});

If you observe syntax of angularjs $http.delete method we have different properties like url, data 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.

After execution of our $http.delete 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 parameter.

 

The response object which we will get after execution of $http.delete 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.delete service in angularjs with example.

AngularJS $http.delete() Service Example

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

 

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $http.delete() Service Request 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('deleteserviceApp', []);

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

$scope.name = null;

$scope.age = null;

$scope.deletedata = function (name, age) {

var data = {

name: name,

age: age

};

//Call the service to delete data

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

if (response.data)

$scope.msg = "Data Deleted 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="deleteserviceApp" ng-controller="deleteserviceCtrl">

<div>

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

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

<input type="button" value="Send" ng-click="deletedata(name, age)" /> <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.delete method that would be like as shown following.

Output of AngularJS $http.delete Service Example

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

 

Angularjs $http.delete service method example output or result

 

If you observe above output we got message like "Service not Exists" that means the url which we defined in angularjs $http.delete() 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 "Data Deleted Successfully".

 

This is how we can use angularjs $http.delete method to delete data in remote http servers by sending parameters.