$http là một đối tượng của AngularJS service dùng để lấy dữ liệu từ máy chủ bằng kỹ thuật AJAX.
Ví dụ ta có tệp tin HTML cung cấp dữ liệu như sau:
{
"danhsach": [
{ ho: 'Tổng Thống Mỹ', ten: 'Barack Obama' },
{ ho: 'Phó Tổng thống Mỹ', ten: 'Joe Biden' },
{ ho: 'Chủ tịch nước Việt Nam', ten: 'Trần Đại Quang' },
{ ho: 'Thủ tướng nước Việt Nam', ten: 'Nguyễn Xuân Phúc' },
{ ho: 'Tổng thống Nga', ten: 'Vladimir Vladimirovich Putin' }
]
}
$http đọc dữ liệu trên bằng phương thức get với url cho trước.
<div ng-app="myApp" ng-controller="danhsachCtrl">
<ul>
<li ng-repeat="x in danhsach">
{{ x.ho + ' ' + x.ten }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('danhsachCtrl', function ($scope, $http) {
$http.get('/../Upload/DanhSach.htm')
.success(function (response) {
$scope.danhsach = response.danhsach;
});
});
</script>
$http đọc dữ liệu từ /../Upload/DanhSach.htm
Nếu thành công, controller sẽ tạo thuộc tính danhsach trong biến $scope trong hàm success, bạn cũng có thể xử lý lỗi trong hàm error như sau:
$http.get('/../Upload/DanhSach.htm')
.success(function (response) {
$scope.danhsach = response.danhsach;
})
.error(function(response) {
// To do.
});