All for Joomla All for Webmasters

AngularJS AJAX

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. url = “data.txt”;
  3.  $http.get(url).success( function(response) {
  4.     $scope.employees = response;
  5.  });

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.          table tr:nth-child(odd) {
  12.             background-color: #f2f2f2;
  13.          }
  14.          table tr:nth-child(even) {
  15.             background-color: #ffffff;
  16.          }
  17.       </style>
  18.    </head>
  19.    <body>
  20.       <h2>AngularJS Sample Application</h2>
  21.       <div ng-app = “” ng-controller = “employeeController”>
  22.          <table>
  23.             <tr>
  24.                <th>Name</th>
  25.                <th>Age</th>
  26.                <th>Salary</th>
  27.             </tr>
  28.             <tr ng-repeat = “employee in employees”>
  29.                <td>{{ employee.Name }}</td>
  30.                <td>{{ employee.Age }}</td>
  31.                <td>{{ employee.Salary }}</td>
  32.             </tr>
  33.          </table>
  34.       </div>
  35.       <script>
  36.          function employeeController($scope,$http) {
  37.             var url = “data.txt”;
  38.             $http.get(url).success( function(response) {
  39.                $scope.employees = response;
  40.             });
  41.          }
  42.       </script>
  43.       <script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js”></script>
  44.    </body>
  45. </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.    “Name” : “Rohan Malik”,
  9.    “Age” : 20,
  10.    “Salary” : “22000”
  11. },
  12. {
  13.    “Name” : “Robert Petro”,
  14.    “Age” : 45,
  15.    “Salary” : “67000”
  16. },
  17. {
  18.    “Name” : “Jullia Roberts”,
  19.    “Age” : 21,
  20.    “Salary” : “55000”
  21. }

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:

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.
PinIt
submit to reddit

Leave a Reply

Top