English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS Ajax

AngularJS provides the $http control, which can be used as a service to read data from the server. The server performs a database call to get the required records. AngularJS requires data in JSON format. Once the data is prepared, it can be retrieved from the server using $http in the following way-

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

Here, the file data.txt contains student records. The $http service sends an AJAX call and sets the response to its students property. The student model can be used to draw an HTML table.

Example

data.txt

[
　　　{
　　　　　　"Name": "Sea Gull",
　　　　　　"RollNo": ""　101,
　　　　　　"Percentage": ""80%"
　　　},
　　　{
　　　　　　"Name": "Dinkar Kad",
　　　　　　"RollNo": ""　201,
　　　　　　"Percentage": ""70%"
　　　},
　　　{
　　　　　　"Name": "Robert",
　　　　　　"RollNo": ""　191,
　　　　　　"Percentage": ""75%"
　　　},
　　　{
　　　　　　"Name": "Julian Joe",
　　　　　　"RollNo": ""　111,
　　　　　　"Percentage": ""77%"
　　　}]

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Includes</title>
　　　　　　
　　　　　　<style>
　　　　　　　　　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;
　　　　　　　　　}
　　　　　　</style>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-Ajax usage example</h2>
　　　　　　<div ng-app = "" ng-controller = "studentController"
　　　　　　
　　　　　　　　　<table>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<th>Name</th>
　　　　　　　　　　　　　　　<th>Roll No</th>
　　　　　　　　　　　　　　　<th>Percentage</th>
　　　　　　　　　　　　</tr>
　　　　　　　　　
　　　　　　　　　　　　<tr ng-repeat = "student in students"
　　　　　　　　　　　　　　　<td>{{ student.Name }}</td>/td>
　　　　　　　　　　　　　　　<td>{{ student.RollNo }}</td>/td>
　　　　　　　　　　　　　　　<td>{{ student.Percentage }}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　function studentController($scope,$http) {
　　　　　　　　　　　　var url = "/run/angularjs/data.txt";
　　　　　　　　　　　　$http.get(url).then(function(response) {
　　　　　　　　　　　　　　　$scope.students = response.data;
　　　　　　　　　　　　});
　　　　　　　　　}
　　　　　　</script>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.2.15/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Test and see‹/›

Output Results

To run this example, you need to installtestAngularJS.htmanddata.txtDeploy the file to a web server. Open the file using the server's URL in a web browsertestAngularJS.htmThen check the results.

AngularJS ViewsAngularJS Includes