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ụ.
Các $locationdịch vụ có phương pháp mà 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ụ, 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
Các $httpdịch vụ là một trong những dịch vụ được sử dụng phổ biến 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 việc 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
Các $timeoutdịch vụ là phiên bản AngularJS’ của window.setTimeoutchức năng.
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
Các $intervaldịch vụ là phiên bản AngularJS’ của window.setIntervalchức năng.
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);
});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, 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:
Tạo một dịch vụ có tên hexafy:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Hãy tự mình thử »
