Detailed explanation of AngularJS Ajax examples-JS Tutorial-php.cn

Detailed explanation of AngularJS Ajax examples

怪我咯

Release： 2017-06-27 11:51:19

Original

1362 people have browsed it

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; 
            });
}

Copy after login

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%"
}
]

Copy after login

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>

Copy after login

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!