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ụ内置.

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

Thử ngay

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

Thử ngay

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

Thử ngay

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

Thử ngay

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

Thử ngay

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

Thử ngay

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>

Thử ngay