Angularjs ajax tutorial

by

In AngularJS, we can send Ajax request in several ways:

1. AJAX calls via the $http service.
2. JSONP calls via the http service.
3. REST type calls.
 
We are explaining here ajax call via the $http service. AngularJS provides the $http service for reading data from remote servers. Let us discuss $http service and its method in brief.

AngularJS $http service:

In AngularJS, $http service makes a request to the server and returns a response.

AngularJS $http service methods:

$http.get(url, config): Used to perform Http GET request.
$http.post(url, data, config): Used to perform Http POST request.
$http.put(url, data, config): Used to perform Http PUT request.
$http.delete(url, config): Used to perform Http DELETE request.
$http.head(url, config): Used to perform Http HEAD request.

AngularJS $http service response object’s properties:

config: It is the object used to generate the request.
data: It is a string, or an object, carrying the response from the server.
headers: It is a function used to get header information.
status: It is a number which defines the HTTP status.
statusText: It is a string which defines the HTTP status.

Config Parameter:

method: Used to set the HTTP method for the request.
url: Used to set the URL of the AJAX call.
params: Used to set any additional request parameters to be appended to the URL query string.
headers: Used to set any additional HTTP headers.
timeout: Used to set the timeout for the AJAX call.
cache: Used to enable XHR GET request caching.
transformRequest: Used to set a function which can transform the request object before it is sent to the server.
transformResponse: used to set a function which can transform the response sent back from the server, before it is passed to application.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. In appCtrl controller we pass one more parameter $http, to make an ajax call. The $http service makes an ajax call using get() method and sets response to message property.

Example:

welcome.txt:

Hello AngularJS Students

test.htm:

<!DOCTYPE html>
<html>
<script 
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<h2>AngularJS Ajax $http service example.</h2>
<div ng-app="testApp" ng-controller="appCtrl"> 
<h3>{{message}}</h3>
</div>
 
<script>
var app = angular.module('testApp', []);
app.controller('appCtrl', function($scope, $http) {
  $http.get("welcome.txt")
  .then(function(response) {
      $scope.message= response.data;
  });
});
</script>
 
</body>
</html>

Output:

angularjsajax1