AngularJS – Ajax calling with demo and Example

AngularJS – Ajax calling with demo and Example

AngularJS provides $http request control which works as a service to read data from server. The server makes a database call to get the records. AngularJS accept data in JSON format. Once the data is ready, $http can be used to get the data from server in thefollowing manner:Here, the file data.html contains user records. $http service makes an ajax call and sets response to its property users. users model can be used to draw tables in HTML.

    function userController($scope,$http) {
    var url="data.txt";
       $http.get(url).success( function(response) {
                               $scope.user = response; 
                            });
    }

Create a file name data.html

   [
    {
    "Name" : "Pramod",
    "last" : 'kumar',
    "email" : "pramod@gmail.com"
    },
    {
    "Name" : "Banwari",
    "last" : 'raj',
    "email" : "banwari@123"
    },
    {
    "Name" : "Ajay",
    "last" : 'bhabi',
    "email" : "ajaybhabi@gmail.com"
    },
    {
    "Name" : "Sunny",
    "last" : 'kumar',
    "email" : "Sunny@gmail.com"
    }
    ]

Calling Ajax Example in Angular js

<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: #FF99FF;
}
table tr:nth-child(even) {
  background-color: #FF6666;
}
</style>
</head>
<body>
<h2>AngularJs Ajax Call Example</h2>
<div ng-app="" ng-controller="userController">
<table>
   <tr>
      <th>Name</th>
      <th>Last</th>
      <th>Email</th>
   </tr>
   <tr ng-repeat="user in user">
      <td>{{ user.Name }}</td>
      <td>{{ user.last }}</td>
      <td>{{ user.email }}</td>
   </tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="friends.html";
   $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>

angularajaxcall

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates