AngularJS | AJAX - $http - GeeksforGeeks

27 Jun, 2019
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%"
   }
]

[
   {
      "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>
<!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:My Personal Notes
arrow_drop_upSave
Picked
AngularJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Angular File Upload
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
Angular | keyup event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
How to make a multi-select dropdown using Angular 11/10 ?