Home > Article > Web Front-end > Detailed explanation of AngularJS Ajax examples

Detailed explanation of AngularJS Ajax examples

怪我咯Original: 2017-06-27 11:51:191299browse

This article mainly explains the knowledge of AngularJS Ajax. Detailed information and code examples are provided here to help friends who learn AngularJS. Friends in need can refer to

AngularJS provides $http control , 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 records 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

[
{
"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>
<p 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>
</p>
<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 following results:

The above is the detailed content of Detailed explanation of AngularJS Ajax examples. For more information, please follow other related articles on the PHP Chinese website!

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 AngularJS’s ng-options directiveNext article：Detailed explanation of AngularJS’s ng-options directive

See more

Detailed explanation of AngularJS Ajax examples

Related articles