Hi everyone in this blog I’m explaining about Ajax in AngularJs


AngularJs provides $http control which works as a service to read data from the server. The server can make a database call to get the records. AngularJs needs data in JSON format. Once data is ready, $http can be used to get the data from the server in the following manager.

function studentController($scope, $http) {
        var url = "data.txt";
        $http.get(url).success(function (response) {
            $scope.students = response;

Here data.txt contains the student records. $http service makes an Ajax call and set response to its property student. “Students” model can be used to be used to draw tables in the html.


"Name" : "Kamlakar Singh",
"RollNo" : 1027,
"Percentage" : "73%"
"Name" : "Pawan Shukla",
"RollNo" : 1024,
"Percentage" : "70%"
"Name" : "Rohit",
"RollNo" : 1006,
"Percentage" : "75%"
"Name" : "Haider",
"RollNo" : 1002,
"Percentage" : "75%"


<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
table tr:nth-child(odd) {
  background-color: #f2f2f2;
table tr:nth-child(even) {
  background-color: #ffffff;
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
      <th>Roll No</th>
   <tr ng-repeat="student in students">
      <td>{{ student.Name }}</td>
      <td>{{ student.RollNo }}</td>
      <td>{{ student.Percentage }}</td>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('studentController', function ($scope) {
        var url = "data.txt";
        $http.get(url).success(function (response) {
            $scope.students = response;



To run this example, you need to deploy textAngularJS.htm, data.txt to a webserver. Open textAngularJS.htm using URL of your server in a web browser. See the result.

Working with Ajax in AngularJs

  Modified On Feb-22-2018 02:25:33 AM

Leave Comment