pTutorial

New way to learn Programming

AngularJS Ajax

AngularJS provides the $http service that is basically used to communicate with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

In other word $http service is used to send the ajax call to remote server. Ajax call must be in the same server.

Important point about $http

  • AngularJS $http is a Angular service for reading data from servers.
  • $http.get(url) is a function that is used to read the data from server.

Example

<!DOCTYPE html>
<html>
<script src= "angular.min.js"></script>
<body>
 
<div ng-app="ukApp" ng-controller="ukController"> 
{{data}}
</div>

<script>
var app = angular.module('ukApp', []);
app.controller('ukController', function($scope, $http) {
    $http.get("http://freeonlinecompiler.ptutorial.com/data3.php")
    .success(function(response) {$scope.data = response;});
});
</script> 

 
</body>
</html>

Explanation

You can simply execute this example by deploying the angularjshttp.html and the data3.php file on the server.

AngularJS will invoke ukController with a $scope and $http object.

$scope is the application object.

$http is an XMLHttpRequest object for requesting external server data.

$http.get() method is used to get the data from server ().

If success, the controller assign the response data to the data property.

"http://freeonlinecompiler.ptutorial.com/data3.php" file data

See Also


QUOTES OF THE DAY

Everything flows, nothing stays still.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER