AngularJS Ajax - how to make ajax calls in Angular
Published August 13, 2022An 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
![]() |
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 :
|
|
|
|
156 Views |