AngularJS $http Services (Get, Post, Put, Delete,JSONP, Head, Patch) with Example

We will learn what is $http services in angularjs, different type of $http service methods $http.get, $http.post, $http.put, $http.delete, $http,jsonp, $http.patch and how to use $http service methods in angularjs with example.

What is $http Service in AngularJS?

In angularjs $http is a service which is used to send, read or get data from http remote servers using XMLHttpRequest object.

Syntax of $http Service in AngularJS

Following is the syntax of using $http service in angularjs applications

 

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

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

// Simple GET request example:

$http({

method: 'GET',

url: '/sampleUrl'

}).then(function success(response) {

// this function will be called when the request is success

}, function error(response) {

// this function will be called when the request returned error status

});

});

If you observe above syntax we have different properties in $http service.

 

PropertyDescription
method It is used to define a required operator like get or send data. In angularjs we have different methods available.
url We need to send url of http server to perform required operations.

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

AngularJS $http Service Methods

In $http service following are the different type of shortcut methods available 

 

ServiceDescription
$http.get This method is used to get data from requested url
$http.post This method is used to send data to request url
$http.head This method is used to get data from requested url with headers
$http.put This method is used to send data to specified url
$http.delete This method is used to delete resource from specified url
$http.jsonp This method is used to get data from specified url in json format
$http.patch This method is used to perform patch request from specified url

We will see how to use $http service with simple example.

Example of AngularJS $http Service

Following is the example of using angularjs $http service.

 

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $http Service 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('serviceApp', []);

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

$http({

method: 'GET',

url: 'sample.html'

}).then(function success(response) {

$scope.myWelcome = response.data;

}, function error(response) {

});

});

</script>

</head>

<body>

<div ng-app="serviceApp" ng-controller="serviceCtrl">

<p>Hi, Guest</p>

<h1>{{myWelcome}}</h1>

</div>

</body>

</html>

If you observe above code we mentioned ‘sample.html’ as url in $http service. For that create one html file in your application and give name as ‘sample.html’. 

 

Now open ‘sample.html’ file and remove complete default code from the file and write the code like as shown below.

 

Welcome to Tutlane.com

Now we will run the application and verify the output that will be like as shown following.

Output of AngularJS $http Service Example

Following is the result of $http service example in angularjs.

 

Hi, Guest

Welcome to Tutlane.com

If you observe above example we used $http.get method to get data from “sample.html” file.

AngularJS Response Object Properties

In angularjs once $http service operation finished then we will receive response object. The response object is having different properties those are

 

PropertyDescription
config The configuration object is used to generate the request.
data It’s string or an object which is used to carry response from the server.
headers This function is used to get header information.
status This property is used to get HTTP status code of the response.
statusText This property is used to get HTTP status text of the response.

We will see how to use these properties in angularjs with example.

Example of AngularJS $http Service Response Object

Following is the example of using angularjs $http service with different object properties.

 

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $http Service 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('serviceApp', []);

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

$http({

method: 'GET',

url: 'sample.html'

}).then(function success(response) {

$scope.myWelcome = response.data;

$scope.statusval = response.status;

$scope.statustext = response.statusText;

$scope.headers = response.headers();

}, function error(response) {

});

});

</script>

</head>

<body>

<div ng-app="serviceApp" ng-controller="serviceCtrl">

<p>Hi, Guest</p>

<h1>{{myWelcome}}</h1>

<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 application that will be like as shown following.

Output of AngularJS $http Service Response Object Example

Following is the result of using $http service with different response statuses properties

Angularjs $http Service Response Object Example