AngularJS provides a $http service for read the data from the server. It is used to retrieve the desired data from a server. AngularJS requires data in JSON format. Once the data is ready, $http gets the data form server in the following manner:

var app = angular.module('myApp', []);
        app.controller("TeacherController", function ($scope, $http) {
            var url = "data.txt";     
                    $http.get(url).then(successCallback, errorCallback);
 
            function successCallback(response) {
            $scope.Teachers = response.data;
            }
            function errorCallback(error) {
                //error code
            }
        });

Here we have a file "data.txt" contains Teachers' records. $http service makes an AJAX call and sets response to its property Teachers. This model is used to draw tables in HTML.

Here the file data.txt contains the Teachers record.

"data.txt" (Teachers data in JSON format)

[
   {
      "Name" : "Manoj Parashar",
      "Age" : 24,
      "Salary" : "90000"
   },
      
   {
      "Name" : "Raju Kad",
      "Age" : 23,
      "Salary" : "40000"
   },
      
   {
      "Name" : "Komar Singh",
      "Age" : 22,
      "Salary" : "50000"
   },
      
   {
      "Name" : "Mahesh Joe",
      "Age" : 24,
      "Salary" : "80000"
   }
]
  • AngularJS AJAX Example 

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>index</title>
    <script src="/Scripts/jquery-3.1.1.js"></script>
    <script src="/Scripts/angular.js"></script>   
    <link href="/Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="myApp" ng-controller="TeacherController">
 
    <div class="col-sm-2"></div>
 
    <div class="col-sm-6">
        <div class="table-responsive">
            <table class="table">
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Salary</th>
                </tr>
 
                <tr ng-repeat="Teacher in Teachers">
                    <td>{{ Teacher.Name }}</td>
                    <td>{{ Teacher.Age }}</td>
                    <td>{{ Teacher.Salary }}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-sm-2"></div>
    <script>
        var app = angular.module('myApp', []);
        app.controller("TeacherController", function ($scope, $http) {
            var url = "data.txt";     
                        $http.get(url).then(successCallback, errorCallback);
 
            function successCallback(response) {
            $scope.Teachers = response.data;
            }
            function errorCallback(error) {
                //error code
            }
        });
 
    </script>
</body>
 
</html>

Now execute the above example and see the result.


Use AngularJS  AJAX


I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like