Home > DeveloperSection > Blogs > Working with Ajax in AngularJs

Working with Ajax in AngularJs

Angular JS AJAX  Angularjs Directive  Angularjs Controller 
0 Comment(s)
 1100  View(s)
Rate this:

Working with Ajax in AngularJs

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. 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 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.

Don't want to miss updates? Please click the below button!

Follow MindStick