Prev Page
Next Page  
AngularJS Ajax
AngularJS provides a $http control which works as a service for reading data from the remote servers. It makes a database call to get the desired records from a server.
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 educationController($scope,$http) {
    var url = "data.txt";
 
    $http.get(url).then( function(response) {
        $scope.education = response.data;
    });
}

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

Here the file data.txt contains the book's record.
data.txt (Book's data in JSON format)
[
   {
      "Name" : "HTML",
      "Programs" : 36,
      "Completed" : "65%"
   },
 
   {
      "Name" : "CSS",
      "Programs" : 45,
      "Completed" : "59%"
   },
 
   {
      "Name" : "JavaScript",
      "Programs" : 57,
      "Completed" : "72%"
   },
 
   {
      "Name" : "Bootstrap",
      "Programs" : 63,
      "Completed" : "81%"
   },
   
   {
      "Name" : "JQuery",
      "Programs" : 79,
      "Completed" : "86%"
   }
]
AngularJS Ajax Example (angularjs-ajsx.php)
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS AJAX</title>
 
<style type="text/css">
 table, th , td {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
border: 1px solid #0099da;
border-collapse: collapse;
padding: 7px 20px 7px 7px;
 }
 
 table tr:nth-child(odd) {
background-color: #EEE;
 }
 
 table tr:nth-child(even) {
background-color: #F69F9F9;
 }
</style>
      
</head>
<body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "" ng-controller = "educationController">
      
         <table>
            <tr>
               <th>Name</th>
               <th>Programs</th>
               <th>Completed</th>
            </tr>
         
            <tr ng-repeat = "education in educations">
               <td>{{ education.Name }}</td>
               <td>{{ education.Programs }}</td>
               <td>{{ education.Completed }}</td>
            </tr>
         </table>
      </div>
      
      <script>
         function educationController($scope,$http) {
            var url = "data.txt";
 
            $http.get(url).then( function(response) {
               $scope.educations = response.data;
            });
         }
      </script>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
      
   </body>
</html>
Output :

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

AngularJS $http and Methods
The AngularJS $http service makes a request to the server, and returns a response. There are several shortcut methods of calling the $http service. In the above example, .get method of the $http service is used.
  • .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.
  Prev Page
Next Page