[AngularJS] Phần 11: AngularJS http

468 lượt xem

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.

Bình luận Facebook

Để lại bình luận

1 Comment on "[AngularJS] Phần 11: AngularJS http"

avatar
1000
  Subscribe  
mới nhất cũ nhất nhiều bình chọn nhất
Thông báo khi có
Tùng TN
Khách

Dùng http để kết nối với server ngoài không có được là sao vậy admin?