search

Home >Web Front-end >JS Tutorial >How to use AJAX in AngularJS_AngularJS

How to use AJAX in AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:361380browse

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

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

Here, the student record contained in data.txt. The $http service makes Ajax calls and sets properties specific to its students. The "student" model can be used to draw HTML tables.
Example
data.txt

Copy code The code is as follows:
[
{
"Name" : "Mahesh Parashar",
"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.html

<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 Sample Application</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>{{ student.RollNo }}</td>
  <td>{{ student.Percentage }}</td>
  </tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="data.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>

Output

To run this example, you need to deploy textAngularJS.html, data.txt to a web server. Open textAngularJS.html in a web browser using the URL to request the server. See the results as follows:

2015617102629588.jpg (560×399)

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of table usage in AngularJS_AngularJSNext article：Detailed explanation of table usage in AngularJS_AngularJS

Related articles

See more