AngularJS Ajax - how to make ajax calls in Angular

Published August 13, 2022

An Ajax helps store other files' data into a database without user interaction. Here we need to know Ajax Json format and database. This file and AngularJS variable automatically update and display the required data. 

How to operate Ajax In AngularJS  

The following steps show the Ajax data in the AngularJS file.

Step1: Create the HTML or htm file in the web application and create a table to show file information.

<table>

            <tr ng-repeat = "student in students">  

               <td>{{ student.Name }}</td>  

            </tr>  

</table>

 

Step2: Use script tag with file reference in the htm file.

<script>

function studentController($scope,$http) {

var url = "info.txt";

$http.get(url).success( function(response) {

$scope.students = response;

});

}

</script>

 

Step3: Create an info.txt file with required information in JSON format. 

{  

   "Name" : "Ajay Sharma",  

},  

{  

   "Name" : "Sandeep Diwan",  

}

 

 

Example 

The following example shows the Ajax file with AngularJS.

File name: user.htm

<!DOCTYPE html>

<html>

<head>

<title>Angular JS Includes</title>

<style>

table, th , td {

border: 1px solid black;

border-collapse: collapse;

padding: 6px;

}

table tr:nth-child(even) {

background-color: white;

}

table tr:nth-child(odd) {

background-color: lightgrey;

}

</style>

</head>

<body>

<h2> AngularJS Ajax Application</h2>

<div ng-app = "" ng-controller = "studentController">

<table>

<tr>

<th> Student Roll_No</th>

<th> Student AGR</th>

<th> Marks</th>

</tr>

<tr ng-repeat = "student in students">

<td>{{ student.Name }}</td>

<td>{{ student.Roll}}</td>

<td>{{ student.Marks }}</td>

</tr>

</table>

</div>

<script>

function studentController($scope,$http) {

var url = "info.txt";

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

 

File name: info.txt(JSON FORMAT)

[

{  

   "Name" : "Ajay Sharma",  

   "Roll" : 01,  

   " Marks " : "80"  

},  

{  

   "Name" : "Sandeep Diwan",  

   "Roll" : 02,  

   " Marks " : "84"  

}, 

{  

   "Name" : "Mia Sen",  

   "Roll" : 03,  

   " Marks " : "78"  

}  

]

 

Output 

How to make ajax calls in Agular

 

Summary

The AngularJS Ajax helps to update, store, and display data in the database without user interaction. It helps to store extensive size data or array format data

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

156 Views