AngularJS | AJAX – $http

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.

Syntax:

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>AngularJS AJAX - $http</title>
        <style>
            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;
                     }
        </style>
        <script src=
        </script>
    </head>
    <body>
       <center>
          <h1 style="color:green">GeeksforGeeks</h1>
          <h3>AJAX - $http</h>
          <div ng-app="" ng-controller="studentController">
             <table>
                 <tr>
                    <th>Name</th>
                    <th>Goals</th>
                    <th>Ratio</th>
                 </tr>
                 <tr ng-repeat="student in students">
                    <td>{{ Player.Name }}</td>
                    <td>{{ Player.Goals}}</td>
                    <td>{{ Player.Ratio}}</td>
                 </tr>
             </table>
          </div>
          <script>
                function studentController($scope, $http) {
                            var url = "/data.txt";
                  
                            $http.get(url).then( function(response) {
                               $scope.students = response.data;
                            });
                         }
          </script>
       </center>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:
    ngcut


  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    2


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.