AngularJS Ajax

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

AngularJS provides a $http service for reading data and remote servers. It is used to retrieve the desired records from a server.

AngularJS requires data in JSON format. Once the data is ready, $http gets the data form server in the following manner:

  1. function employeeController($scope,$http) {  
  2. r url = "data.txt";  
  3.   
  4.  $http.get(url).success( function(response) {  
  5.     $scope.employees = response;   
  6.  });  

Here the file "data.txt" is employee's records. $http service makes an AJAX call and sets response to its property employees. This model is used to draw tables in HTML.


AngularJS AJAX Example

testAngularJS.htm

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.  <title>Angular JS Includes</title>  
  5.     <style>  
  6.          table, th , td {  
  7.             border: 1px solid grey;  
  8.             border-collapse: collapse;  
  9.             padding: 5px;  
  10.          }  
  11.            
  12.          table tr:nth-child(odd) {  
  13.             background-color: #f2f2f2;  
  14.          }  
  15.            
  16.          table tr:nth-child(even) {  
  17.             background-color: #ffffff;  
  18.          }  
  19.       </style>  
  20.    </head>  
  21.    <body>  
  22.       <h2>AngularJS Sample Application</h2>  
  23.       <div ng-app = "" ng-controller = "employeeController">  
  24.         
  25.          <table>  
  26.             <tr>  
  27.                <th>Name</th>  
  28.                <th>Age</th>  
  29.                <th>Salary</th>  
  30.             </tr>  
  31.            
  32.             <tr ng-repeat = "employee in employees">  
  33.                <td>{{ employee.Name }}</td>  
  34.                <td>{{ employee.Age }}</td>  
  35.                <td>{{ employee.Salary }}</td>  
  36.             </tr>  
  37.          </table>  
  38.       </div>  
  39.         
  40.       <script>  
  41.          function employeeController($scope,$http) {  
  42.             var url = "data.txt";  
  43.            
  44.             $http.get(url).success( function(response) {  
  45.                $scope.employees = response;  
  46.             });  
  47.          }  
  48.       </script>  
  49.         
  50.       <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
  51.         
  52.    </body>  
  53. </html>  

Here the file data.txt contains the employee's record.

"data.txt" (employee's data in JSON format)

  1.  [  
  2. {  
  3.    "Name" : "Mahesh Sharma",  
  4.    "Age" : 25,  
  5.    "Salary" : "20000"  
  6. },  
  7.   
  8. {  
  9.    "Name" : "Rohan Malik",  
  10.    "Age" : 20,  
  11.    "Salary" : "22000"  
  12. },  
  13.   
  14. {  
  15.    "Name" : "Robert Petro",  
  16.    "Age" : 45,  
  17.    "Salary" : "67000"  
  18. },  
  19.   
  20. {  
  21.    "Name" : "Jullia Roberts",  
  22.    "Age" : 21,  
  23.    "Salary" : "55000"  
  24. }  

To execute the above example, you have 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.

Output:

The result would look like this:

angularjs with ajax

Table:

Name Age Salary
Mahesh Sharma 25 20000
Rohan Malik 20 22000
Robert Petro 45 67000
Jullia Roberts 21 55000

HTTP Service Methods

There are several shortcut methods of calling the $http service. In the above example, .get method of the $http service is used. Following are several other shortcut methods:

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

Properties

The response from the server is an object with these properties:

  • .config the object used to generate the request.
  • .data a string, or an object, carrying the response from the server.
  • .headers a function to use to get header information.
  • .status a number defining the HTTP status.
  • .statusText a string defining the HTTP status.