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:

<!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= 

"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> 

    </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>

Output:

Article Tags :

AngularJS