AngularJS - Ajax

AngularJS provides $http control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner −

function studentController($scope,$http) {

var url = "data.txt";

 

   $http.get(url).success( function(response) {

      $scope.students = response;

   });

}

Here, the file data.txt contains student records. $http service makes an ajax call and sets response to its property students. students model can be used to draw tables in HTML.

Examples

data.txt

[

   {

      "Name" : "Mahesh Parashar",

      "RollNo" : 101,

      "Percentage" : "80%"

   },

           

   {

      "Name" : "Dinkar Kad",

      "RollNo" : 201,

      "Percentage" : "70%"

   },

           

   {

      "Name" : "Robert",

      "RollNo" : 191,

      "Percentage" : "75%"

   },

           

   {

      "Name" : "Julian Joe",

      "RollNo" : 111,

      "Percentage" : "77%"

   }

]

testAngularJS.htm

<html>

   <head>

      <title>Angular JS Includes</title>

     

      <style>

         table, th , td {

            border: 1px solid grey;

            border-collapse: collapse;

            padding: 5px;

         }

        

         table tr:nth-child(odd) {

            background-color: #f2f2f2;

         }

        

         table tr:nth-child(even) {

            background-color: #ffffff;

         }

      </style>

     

   </head>

   <body>

      <h2>AngularJS Sample Application</h2>

      <div ng-app = "" ng-controller = "studentController">

     

         <table>

            <tr>

               <th>Name</th>

               <th>Roll No</th>

               <th>Percentage</th>

            </tr>

        

            <tr ng-repeat = "student in students">

               <td>{{ student.Name }}</td>

               <td>{{ student.RollNo }}</td>

               <td>{{ student.Percentage }}</td>

            </tr>

         </table>

      </div>

     

      <script>

         function studentController($scope,$http) {

            var url = "data.txt";

        

            $http.get(url).success( function(response) {

               $scope.students = response;

            });

         }

      </script>

     

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

     

   </body>

</html>

Output

To execute this example, you need to deploy testAngularJS.htm and data.txt file to a web server. Open the file testAngularJS.htm using the URL of your server in a web browser and see the result.