Dịch vụ AngularJS
- Trang trước Bộ lọc AngularJS
- Trang tiếp theo Http 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ụ内置.
Gì là dịch vụ?
Trong AngularJS, dịch vụ là hàm hoặc đối tượng có thể được sử dụng và chỉ giới hạn trong ứng dụng AngularJS của bạn.
AngularJS có khoảng 30 dịch vụ内置. Một trong số đó là $location
dịch vụ.
$location
Dịch vụ có các phương thức để trả về thông tin về vị trí trang web hiện tại:
Mẫu
Sử dụng dịch vụ $location trong控制器:
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); });
Lưu ý rằng$location
Dịch vụ được truyền làm tham số vào控制器. Để sử dụng dịch vụ trong控制器, bạn phải định nghĩa nó là một phụ thuộc.
Tại sao sử dụng dịch vụ?
Đối với nhiều dịch vụ như $location
dịch vụ, bạn có vẻ như có thể sử dụng các đối tượng sẵn có trong DOM (ví dụ đối tượng window.location),但它 sẽ có một số giới hạn, í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, để đảm bảo rằng nó xử lý đúng các thay đổi và sự kiện, AngularJS ưa thích bạn sử dụng $location
dịch vụ thay vì đối tượng window.location.
Dịch vụ $http
$http
Dịch vụ là một trong những dịch vụ phổ biến nhất trong ứng dụng AngularJS. Dịch vụ này gửi yêu cầu đến máy chủ và để ứng dụng của bạn xử lý phản hồi.
Mẫu
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; }); });
Ví dụ này minh họa $http
Xin xem hướng dẫn AngularJS Http để biết thêm thông tin về dịch vụ $http.
Cách sử dụng rất đơn giản của dịch vụ.
$timeout
Dịch vụ là phiên bản AngularJS của window.setTimeout
hàm.
Mẫu
Hiển thị thông báo 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 = "Bạn cảm thấy thế nào hôm nay?"; }, 2000); });
Dịch vụ $interval
$interval
Dịch vụ là phiên bản AngularJS của window.setInterval
hàm.
Mẫu
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ụ với mô-đun:
Tạo dịch vụ có tên hexafy
dịch vụ:
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ó vào danh sách tùy thuộc khi định nghĩa điều khiển:
Mẫu
Sử dụng dịch vụ tùy chỉnh có tên hexafy để chuyển đổi số thành số hexa:
app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); });
Sử dụng dịch vụ tùy chỉnh trong bộ lọc
Tạo dịch vụ và kết nối nó với ứng dụng của bạn sau đó bạn có thể sử dụng dịch vụ này trong bất kỳ controller, directive, bộ lọc hoặc thậm chí dịch vụ khác.
Để sử dụng dịch vụ trong bộ lọc, hãy thêm nó làm phụ thuộc khi định nghĩa 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 này khi hiển thị giá trị trong đối tượng hoặc mảng:
<ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul>
- Trang trước Bộ lọc AngularJS
- Trang tiếp theo Http AngularJS