[AngularJS toàn tập] Phần 9: Ajax trong AngularJS

Bài đăng này đã không được cập nhật trong 7 năm

Ajax trong AngularJS

AngularJS cung cấp điều khiển $http mà làm như là service để đọc dữ liệu từ server.

Server có thể tạo các lời gọi tới cơ sở dữ liệu để nhận các bản ghi.

AngularJS cần dữ liệu dưới định dạng JSON. Khi dữ liệu sẵn sàng,$http có thể được sử dụng để nhận dữ liệu từ server theo cách sau đây:

function sinhvienController($scope,$http) {
var url="employeeData.txt";
   $http.get(url).success( function(response) {
                           $scope.framgiaEmplyee = response;
                        });
}

Ở đây tệp employeeData.txt chứa các bản ghi về nhân viên của Framgia.

$http service tạo một ajax call và lấy kết quả trả về cho đối tượng nhân viên.

"employee" model có thể dùng để vẽ bảng với HTML.

[
{
"HovaTen" : "Nguyen Thanh Linh",
"MNV" : B001,
"Rank" : "8.0"
},
{
"HovaTen" : "Nguyen Dinh Huan",
"MNV" : B222,
"Rank" : "7.0"
},
{
"HovaTen" : "Nguyen Dang Khanh",
"MNV" : B123,
"Rank" : "6.8"
},
{
"HovaTen" : "Hoang Van Quan",
"MNV" : 20150459,
"Rank" : "6.6"
}
]

exampleAJAX.html

<html>
<head>
<title>Vi du AJAX trong AngularJS</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>Ung dung AngularJS</h2>
<div ng-app="" ng-controller="nhanvienController">
<table>
   <tr>
      <th>Ho va Ten</th>
      <th>MNV</th>
	  <th>Rank</th>
   </tr>
   <tr ng-repeat="nhanvien in framgiaEmplyee">
      <td>{{ nhanvien.HovaTen }}</td>
      <td>{{ nhanvien.MNV }}</td>
	  <td>{{ nhanvien.Rank }}</td>
   </tr>
</table>
</div>
<script>
function nhanvienController($scope,$http) {
var url="employeeData.txt";
   $http.get(url).success( function(response) {
                           $scope.framgiaEmplyee = response;
                        });
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

AngularJS

Ajax trong AngularJS

Mục lục