CodesJava

Easy learning with example program codes

Angularjs ajax tutorial


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
 



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki