Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

AngularJS | AJAX – $http

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The AngularJS provides a control service named as AJAX – $http, which serves the task for reading all the data that is available on the remote servers. The demand for the requirement of desired records gets met when the server makes the database call by using the browser. The data is mostly needed in JSON format. This is primarily because for transporting the data, JSON is an amazon method and also it is straightforward & effortless to use within AngularJS, JavaScript, etc.


function studentController($scope,$https:) {
   var url = "data.txt";

   $https:.get(url).success( function(response) {
      $scope.students = response; 

    Method: There are lots of methods that can be used to call $http service, this are also shortcut methods to call $http service.

  • .post()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .delete()
  • .put()

    Properties: With the help of these properties, the response from the server is an object.

  • .headers : To get the header information (A Function).
  • .statusText: To define the HTTP status (A String).
  • .status: To define the HTTP status (A Number).
  • .data: To carry the response from the server (A string/ An Object).
  • .config: To generate the request (An Object).

Example: First of all, we will have a file which is going to contain our data. For this example, we have the file data.txt, which will include the records of the student. An ajax call will be made by the $http service. It is going to divert & set the response to the students having priority. After this extraction, the tables will be drawn up in the HTML, which will be based on the students model.

  • The data.txt file:
          "Name" : "Ronaldo",
          "Goals" : 128,
          "Ratio" : "69%"
          "Name" : "James",
          "Goals" : 007,
          "Ratio" : "70%"
          "Name" : "Ali",
          "Goals" : 786,
          "Ratio" : "99%"
          "Name" : "Lionel ",
          "Goals" : 210,
          "Ratio" : "100%"
  • Code:

    <!DOCTYPE html>
        <title>AngularJS AJAX - $http</title>
            table, th, td {
                        border: 1px #2E0854;
                        border-collapse: collapse;
                        padding: 5px;
                     table tr:nth-child(odd) {
                        background-color: #F6ADCD;
                     table tr:nth-child(even) {
                        background-color: #42C0FB;
        <script src=
          <h1 style="color:green">GeeksforGeeks</h1>
          <h3>AJAX - $http</h>
          <div ng-app="" ng-controller="studentController">
                 <tr ng-repeat="student in students">
                    <td>{{ Player.Name }}</td>
                    <td>{{ Player.Goals}}</td>
                    <td>{{ Player.Ratio}}</td>
                function studentController($scope, $http) {
                            var url = "/data.txt";
                            $http.get(url).then( function(response) {
                               $scope.students =;

  • Output:

  • My Personal Notes arrow_drop_up
    Last Updated : 27 Jun, 2019
    Like Article
    Save Article
    Similar Reads