Dịch vụ AngularJS
Trong AngularJS, bạn có thể tạo dịch vụ của riêng mình hoặc sử dụng một trong nhiều dịch vụ tích hợp.
Dịch vụ là gì?
Trong AngularJS, dịch vụ là một chức năng hoặc đối tượng có sẵn và giới hạn ở ứng dụng AngularJS của bạn.
AngularJS có khoảng 30 dịch vụ tích hợp. Một trong số đó là dịch vụ $location .
Dịch vụ $location có các phương thức trả về thông tin về vị trí của trang web hiện tại:
Ví dụ
Sử dụng dịch vụ $location trong bộ điều khiển:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Hãy tự mình thử » Lưu ý rằng dịch vụ $location được chuyển đến bộ điều khiển dưới dạng đối số. Để sử dụng dịch vụ trong bộ điều khiển, nó phải được xác định là một phần phụ thuộc.
Tại sao nên sử dụng Dịch vụ?
Đối với nhiều dịch vụ, như dịch vụ $location , có vẻ như bạn có thể sử dụng các đối tượng đã có trong DOM, như đối tượng window.location và bạn có thể, nhưng nó sẽ có một số hạn chế, ít nhất là đối với ứng dụng AngularJS của bạn.
AngularJS liên tục giám sát ứng dụng của bạn và để ứng dụng xử lý các thay đổi và sự kiện một cách chính xác, AngularJS ưu tiên bạn sử dụng dịch vụ $location thay vì đối tượng window.location .
Dịch vụ $http
Dịch vụ $http là một trong những dịch vụ được sử dụng phổ biến nhất trong các ứng dụng AngularJS. Dịch vụ đưa ra yêu cầu tới máy chủ và cho phép ứng dụng của bạn xử lý phản hồi.
Ví dụ
Sử dụng dịch vụ $http để yêu cầu dữ liệu từ máy chủ:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); Hãy tự mình thử » Ví dụ này minh họa cách sử dụng dịch vụ $http rất đơn giản. Tìm hiểu thêm về dịch vụ $http trong Hướng dẫn về AngularJS Http .
Dịch vụ $timeout
Dịch vụ $timeout là phiên bản của hàm window.setTimeout của AngularJS.
Ví dụ
Hiển thị tin nhắn mới sau hai giây:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Hãy tự mình thử »Dịch vụ $interval
Dịch vụ $interval là phiên bản của hàm window.setInterval của AngularJS.
Ví dụ
Hiển thị thời gian mỗi giây:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Hãy tự mình thử »Tạo dịch vụ của riêng bạn
Để tạo dịch vụ của riêng bạn, hãy kết nối dịch vụ của bạn với mô-đun:
Tạo một dịch vụ có tên hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Để sử dụng dịch vụ tùy chỉnh của bạn, hãy thêm nó làm phần phụ thuộc khi xác định bộ điều khiển:
Ví dụ
Sử dụng dịch vụ tùy chỉnh có tên hexafy để chuyển đổi một số thành số thập lục phân:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Hãy tự mình thử »Sử dụng dịch vụ tùy chỉnh bên trong bộ lọc
Khi bạn đã tạo một dịch vụ và kết nối nó với ứng dụng của mình, bạn có thể sử dụng dịch vụ đó trong bất kỳ bộ điều khiển, lệnh, bộ lọc nào hoặc thậm chí bên trong các dịch vụ khác.
Để sử dụng dịch vụ bên trong bộ lọc, hãy thêm dịch vụ đó làm phần phụ thuộc khi xác định bộ lọc:
Dịch vụ hexafy được sử dụng trong bộ lọc myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
Hãy tự mình thử »Bạn có thể sử dụng bộ lọc khi hiển thị các giá trị từ một đối tượng hoặc một mảng:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Hãy tự mình thử »