How to make Ajax call with $http service in AngularJs?

In AngularJS you can send AJAX requests in several different ways.Following are the ways :

1. AJAX calls via the $http service

2. JSONP calls via the $http service

3. REST type calls

The $http service:

The $http service is the easiest way to send AJAX calls.

$http functions:

  • $http.get(url, config)
  • $, data, config)
  • $http.put(url, data, config)
  • $http.delete(url, config)
  • $http.head(url, config)

Parameter ‘data’ is send to server.The data parameter will be converted to a JSON string.


To make AJAX call you can use ng-click ,

<button ng-click=”myData.doClick(item, $event)”>Send AJAX Request</button>

write your method in <script> tag.

angular.module(“myapp”, [])
.controller(“MyController”, function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {

var responsePromise = $http.get(“/angularjs-examples/json-test-data.jsp”);

responsePromise.success(function(data, status, headers, config) {
$scope.myData.fromServer = data.title;
responsePromise.error(function(data, status, headers, config) {
alert(“AJAX failed!”);

} );

The the $http.get() function returns a “promise” object. This promise object has a success() and an error() function. By calling these functions and pass a function to them as parameter you can control what happens when the AJAX call finishes.

ProsperaSoft offers AngularJs development solutions. You can email at to get in touch with ProsperaSoft AngularJs experts and consultants.


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>