[AngularJS] Phần 11: AngularJS http

AngularJS $http
$http là 1 dịch vụ AngularJS dùng để đọc dữ liệu từ server từ xa. Dịch vụ $http tạo 1 kết nối đến server và trả về 1 phản hồi. Ví dụ sau tạo 1 kết nối đơn giản đến server và trả về kết quả ở 1 header:

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Thông điệp trả về từ server là: </p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("dammio.html")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>

Phương thức
Ví dụ trên sử dụng phương thức .get của dịch vụ $http. Phương thức .get là 1 phương thức tắt của dịch vụ $http. Có vài phương thức tắt là:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

Các phương thức trên đều là cách vắn tắt để gọi dịch vụ $http. Ví dụ sau thực thi dịch vụ $http với 1 đối tượng là 1 đối số. Đối tượng đặc tả phương thức HTTP cần làm gì khi kết nối thành công, làm gì khi kết nối thất bại.

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Thông điệp chào mừng - dammio.com:</p>

<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "dammio.html"
  }).then(function mySucces(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
  });
});
</script>

Thuộc tính
Phản hồi từ server là 1 đối tượng với các thuộc tính sau:

• .config là đối tượng dùng để phát sinh một yêu cầu kết nối.
• .data là 1 chuỗi hay 1 đối tượng mang theo phản hồi từ server.
• .headers là 1 hàm dùng để lấy thông tin header.
• .status là 1 số định nghĩa trạng thái HTTP.
• .statusText là 1 chuỗi định nghĩa trạng thái HTTP.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("dammio.html")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statustext; 
    });
});

Để quản lý lỗi, thêm 1 hàm vào phương thức .then

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("trangwebsaiten.htm")
    .then(function(response) {
        //Hàm đầu tiên thực thi khi thành công
        $scope.content = response.data;
    }, function(response) {
        //Hàm thứ hai xử lý lỗi
        $scope.content = "Something went wrong";
    });
});

JSON
Dữ liệu lấy từ server nên ở định dạng JSON. JSON là cách hay để chuyển dữ liệu, và dễ dùng bên trong AngularJS, hoặc bất kỳ đoạn JavaScript nào. Ví dụ ở server, chúng ta có 1 tập tin trả về 1 đối tượng JSON chứa 15 khách hàng, tất cả được bao quanh trong 1 mảng gọi là customers.

Tập tin dammio.html ở client như sau:

{
  "customers": [
    {
      "Name": "Dammio Ta",
      "City": "Paris",
      "Country": "France"
    },
    {
      "Name": "Alonso Deprie",
      "City": "New York",
      "Country": "USA"
    },
    {
      "Name": "Kamanoto Yikoa",
      "City": "Tokyo",
      "Country": "Japan"
    }
  ]
}

Sau đó, chúng ta dùng chỉ thị ng-repeat để lặp qua mảng và xuất dữ liệu:

<div ng-app="myApp" ng-controller="dammioCtrl"> 

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('dammioCtrl', function($scope, $http) {
    $http.get("dammio.php").then(function(response) {
        $scope.myData = response.data.customers;
    });
});
</script>

Trong ví dụ trên, ứng dụng định nghĩa điều khiển tên là dammioCtrl, với đối tượng $scope và $http. $http là 1 đối tượng XMLHttpRequest để lấy dữ liệu bên ngoài. $http.get() đọc dữ liệu JSON từ server (chẳng hạn như tập tin dammio.html). Khi nhận dữ liệu trả về thành công, controller tạo 1 thuộc tính tên là myData với dữ liệu JSON từ server.