[AngularJS] Phần 11: AngularJS http

718 lượt xem 
 Cập nhật lần cuối: 11/04/2017 lúc 12:30:48
Thể loại: AngularJS, Thiết kế Web 

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

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Tùng TN Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Tùng TN
Guest
Tùng TN

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