- Email devpro.edu.vn@gmail.com
- Hotline0985.95.08.95
Trong AngularJS, bạn có thể tạo ra các service của riêng mình hoặc sử dụng một trong nhiều service tích hợp sẵn. Các Service trong AngularJS là một hàm hoặc một đối tượng có sẵn và được giới hạn trong, ứng dụng AngularJS của bạn.
AngularJS có khoảng 30 service cài sẵn, một trong số đó là service $location. Các service $location có phương pháp trả về thông tin về vị trí của trang web hiện tại.
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 service $location được chuyển vào bộ điều khiển như một đối số. Để sử dụng service trong bộ điều khiển, nó phải được định nghĩa là phụ thuộc.
AngularJS nội bộ cung cấp nhiều service mà chúng ta có thể sử dụng trong ứng dụng của mình. $http là một ví dụ (Lưu ý: Tất cả các service nội bộ của angularjs bắt đầu bằng ký hiệu $). Ngoài ra còn có những service hữu ích khác như $route, $window, $location,…
Các service này có thể được sử dụng trong bất kỳ Controller nào bằng cách chỉ khai báo chúng như là các phụ thuộc.
Ví dụ:
module.controller('FooController', function($http){
//...
});
module.controller('BarController', function($window){
//...
});
Chúng tôi có thể xác định các service tùy chỉnh của riêng mình trong ứng dụng js và sử dụng chúng ở bất cứ đâu. Có một số cách để khai báo service angularjs trong ứng dụng. Sau đây là hai cách đơn giản:
var module = angular.module('myapp', []);
module.service('userService', function(){
this.users = ['John', 'James', 'Jake'];
});
hoặc chúng ta có thể sử dụng phương pháp:
module.factory('userService', function(){
var fac = {};
fac.users = ['John', 'James', 'Jake'];
return fac;
});
Cả hai cách xác định hàm, đối tượng dịch vụ đều hợp lệ. Chúng ta sẽ sớm thấy sự khác biệt giữa phương thức factory() và service(). Bây giờ chỉ cần ghi nhớ rằng cả hai apis định nghĩa một đối tượng dịch vụ singleton có thể được sử dụng trong bất kỳ bộ điều khiển, bộ lọc, chỉ thị,…
Đối với nhiều service như $location có vẻ như bạn có thể sử dụng các đối tượng đã có trong DOM, giống như window.location bạn có thể nhưng nó sẽ có một số hạn chế, ít nhất là cho ứ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 thích sử dụng $location dịch vụ thay window.location.
$http là một trong những service sử dụng phổ biến nhất trong các ứng dụng AngularJS. Service đư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 $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;
});
});
Ví dụ này chứng minh việc sử dụng $http rất đơn giản.
Các $timeout là phiên bản AngularJS' của window.setTimeout.
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);
});
Các $interval là phiên bản AngularJS của window.setInterval.
Thí dụ:
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 service 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 service tùy chỉnh hãy thêm nó làm phụ thuộc khi xác định bộ điều khiển.
Thí dụ:
Sử dụng service 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);
});
Tài liệu liên quan đến AngularJS khác bạn nên xem:
