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

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.