[AngularJS] Phần 10: Dịch vụ trong AngularJS

285 lượt xem

Trong AngularJS, chúng ta có thể tạo dịch vụ riêng hay dùng các dịch vụ được tích hợp sẵn.

Dịch vụ
Dịch vụ là 1 hàm hay đối tượng, có sẵn và chỉ áp dụng giới hạn cho ứng dụng AngularJS. AngularJS có khoảng 30 dịch vụ tích hợp. Ví dụ như dịch vụ $location chứa các phương thức để trả về thông tin về địa chỉ (location) của 1 trang web hiện tại.

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

Kết quả trả về của đoạn mã trên là đường dẫn địa chỉ của trang web mà đoạn code đó thực thi. Lưu ý, dịch vụ $location đẩy đến controller như là 1 đối số. Để dùng dịch vụ ở controller, dịch vụ đó phải được định nghĩa phụ thuộc.

Lý do dùng các dịch vụ
Với nhiều dịch vụ, chẳng hạn dịch vụ $location, chúng ta có thể dùng các đối tượng có sẵn trong DOM, như đối tượng window.location, tuy nhiên có 1 số giới hạn với ứng dụng AngularJS. Chúng ta nên dùng dịch vụ $location thay vì đối tượng window.location bởi vì Angular sẽ quản lý các thay đổi và sự kiện trong chương trình ứng dụng hiệu quả hơn.

Dịch vụ $http
Dịch vụ $http là 1 trong các dịch vụ được dùng phổ biến trong các ứng dụng AngularJS. Dịch vụ này tạo 1 kết nối tới server, và cho phép ứng dụng xử lý các phản hồi. Trong ví dụ sau, chúng ta sử dụng dịch vụ $http để lấy dữ liệu trang dammio.html từ server.

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

<p>Nội dung của trang dammio.html là:</p>

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

</div>

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

Dịch vụ $timeout
Dịch vụ này tương tự như hàm window.setTimeout trong JavaScript. Ví dụ sau hiển thị thông điệp mới sau 3 giây.

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

<p>Thông điệp sẽ thay đổi sau 3 giây:</p>

<h1>{{myHeader}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Xin chào các bạn!";
  $timeout(function () {
      $scope.myHeader = "dammio.com";
  }, 2000);
});
</script>

Dịch vụ $interval
Dịch vụ $interval tương tự như hàm window.setInterval. Ví dụ sau hiển thị thời gian sau mỗi giây.

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

<p>Thời gian:</p>

<h1>{{theTime}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>

Tự tạo dịch vụ
Để tạo dịch vụ riêng, chúng ta phải kết nối dịch vụ của mình với module. Tạo 1 dịch vụ tên là ‘dammio’.

app.service('dammio', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

Sau đó, thêm dịch vụ vừa tạo là 1 phụ thuộc khi định nghĩa bộ lọc (filter). Ví dụ sau dùng 1 dịch vụ tự tạo tên là ‘dammio’ để chuyển 1 số sang số hexa.

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

<p>Giá trị hexa của 255 là:</p>

<h1>{{hex}}</h1>

</div>
<script>
var app = angular.module('myApp', []);

app.service('dammio', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, dammio) {
  $scope.hex = dammio.myFunc(255);
});
</script>

Sử dụng dịch vụ tự tạo bên trong 1 bộ lọc
Khi bạn đã tạo được 1 dịch vụ, hãy kết nối nó với ứng dụng để có thể dùng dịch vụ đó ở controller, chỉ thị, bộ lọc (filter) hoặc ngay cả bên trong các dịch vụ khác. Để sử dụng dịch vụ bên trong 1 bộ lọc, thêm dịch vụ đó như là 1 phần phụ thuộc khi định nghĩa bộ lọc. Ví dụ dùng dịch vụ ‘dammio’ ở bộ lọc myFormat.

app.filter('myFormat',['dammio', function(dammio) {
    return function(x) {
        return dammio.myFunc(x);
    };
}]);

Bạn có thể dùng bộ lọc khi hiển thị các giá trị từ 1 đối tượng hay 1 mảng.

<div ng-app="myApp" ng-controller="myCtrl">
<p>Dùng bộ lọc khi hiển thị mảng [255, 251, 200]:</p>

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.service('dammio', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['dammio', function(dammio) {
    return function(x) {
        return dammio.myFunc(x);
    };
}]);
app.controller('myCtrl', function($scope) {
    $scope.counts = [255, 251, 200];
});
</script>

Kết luận: như vậy bài này giúp các bạn hiểu được các dịch vụ cũng như cách tạo dịch vụ riêng cho AngularJS.

Bình luận Facebook

Để lại bình luận

1 Comment on "[AngularJS] Phần 10: Dịch vụ trong AngularJS"

Notify of
avatar
1000
Sort by:   newest | oldest | most voted
wpDiscuz