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 sẵn.
Dịch vụ là gì?
Trong AngularJS, một dịch vụ là một hàm hoặc đối tượng, có sẵn và giới hạn cho ứng dụng AngularJS của bạn.
AngularJS có khoảng 30 dịch vụ tích hợp sẵn. Một trong số đó là $location
dịch vụ.
Dịch $locationvụ này có các phương thức trả về thông tin về vị trí của trang web hiện tại:
Thí dụ
Sử dụng $locationdịch vụ trong bộ điều khiển:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Lưu ý rằng $locationdịch vụ được chuyển tới 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 định nghĩa là một phụ thuộc.
Tại sao sử dụng Dịch vụ?
Đối với nhiều dịch vụ, chẳng hạn như $locationdịch vụ, có vẻ như bạn có thể sử dụng các đối tượng đã có trong DOM, như window.location
đối tượng, 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à để nó xử lý các thay đổi và sự kiện đúng cách, AngularJS muốn bạn sử dụng $location
dịch vụ thay vì window.locationđối tượng.
Dịch vụ $ http
Dịch $httpvụ này 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.
Thí dụ
Sử dụng $httpdịch vụ để 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;
});
});
Ví dụ này cho thấy cách sử dụng $httpdịch vụ rất đơn giản. Tìm hiểu thêm về $httpdịch vụ trong Hướng dẫn AngularJS Http .
Dịch vụ $ timeout
Dịch $timeoutvụ này là phiên bản của
window.setTimeouthàm AngularJS.
Thí dụ
Hiển thị một 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);
});
Dịch vụ $ khoảng thời gian
Dịch $intervalvụ này là phiên bản của
window.setIntervalhàm AngularJS.
Thí 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);
});
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ụ được tạo tùy chỉnh của bạn, hãy thêm nó làm phụ thuộc khi xác định bộ điều khiển:
Thí dụ
Sử dụng dịch vụ tùy chỉnh được đặt 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);
});
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, chỉ thị, 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 nó dưới dạng 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);
};
}]);
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>