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();
});

Hãy tự mình thử »

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;
  });
});

Hãy tự mình thử »

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);
});

Hãy tự mình thử »

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);
});

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ụ đượ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);
  };
}]);

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:

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ử »