Ajax

AJAX, also known as Asynchronous JavaScript and XML, is a technology that allows the applications to send and retrieve data from the server asynchronously, without refreshing the page.

The AngularJS $http service makes a request to the server and returns a response.
The $http service wraps the low-level interaction with the XMLHttpRequest object, providing an easy way to perform calls. This service could be called by just passing a configuration object, used to set a lot of important information such as the method, the URL of the requested resource, the data to be sent, and many others:

$http({method: “GET”, url: “/resource”});

It also returns a promise that we can attach the success and error behavior to this promise:

$http.get(url: "/resource"}) 
.then( function(payload){
  //Success code
  }, function(mg) {

To make it easier to use, the following shortcut methods are available for this service. In this case, the configuration object is optional:

$http.get(url, [config]) 
$http.post(url, data, [config]) 
$http.put(url, data, [config]) 
$http.head(url, [config]) 
$http.delete(url, [config]) 
$http.jsonp(url, [config])

Note: The $http service is the easiest way to send AJAX calls to your web server. Remember, that AJAX calls cannot be sent to a different domain than the domain from which the HTML page making the AJAX calls is loaded.

In Example below, we are getting student data from a remote file through $https service. AngularJS needs data in JSON format.
Screenshot of our application on Ajax call. 

Step 1: First create a file called students.json in data folder in our root application and add following code. 

[
  {
    "Name" : "Vikash Sharma",
    "RollNo" : 201,
    "Percentage" : "80%"
  },{
    "Name" : "Arjun Singh",
    "RollNo" : 202,
    "Percentage" : "90%"
  },{
    "Name" : "Anu Malik",
    "RollNo" : 203,
    "Percentage" : "50%"
  }, {
      "Name" : "Anil Tingtong",
      "RollNo" : 204,
      "Percentage" : "60%"
    }
]

Step 2: Create a file containing our template and AngularJS application with a single $http AJAX example: 

<html ng-app="ajaxApp">
<script src="js/angular.min.js"></script>
<body ng-controller="myCtrl">
 <button ng-click="getStudents()">Get Students</button>
 <hr>
 <table border=1>
   <tr>
     <th>Roll No</th> <th>Name </th> <th>Precentage</th>
   </tr>
   <tr ng-repeat="s in students">
      <td>{{ s.RollNo}}</td>  <td> {{ s.Name }}</td> <td> {{ s.Percentage }}</td>
   </tr>
 </table>
  <script>
  var app = angular.module("ajaxApp", [])
  .controller("myCtrl", function($scope, $http){
    $scope.students = [];
    $scope.getStudents = function() {
      var url = "data/students.json";
      $http.get(url)
      .then( function(payload){
        $scope.students = payload.data;
      }, function(msg) {
        alert("Sorry we can't access the ajax data");
      });
    };
  });

</script>
</body>
</html>