AngularJS 服務

在 AngularJS 中，您可以創建自己的服務，或使用眾多內置服務之一。

什么是服務？

在 AngularJS 中，服務是函數或對象，可用于并僅限于您的 AngularJS 應用程序。

AngularJS 有大約 30 個內置服務。其中之一是 $location 服務。

$location 服務有方法可以返回有關當前網頁位置的信息：

實例

在控制器中使用 $location 服務：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

親自試一試

請注意，$location 服務作為參數傳遞到控制器。為了在控制器中使用該服務，必須將其定義為依賴項。

為什么使用服務？

對于許多服務，如 $location 服務，您似乎可以使用 DOM 中已有的對象（例如 window.location 對象），但它會有一些限制，至少對于您的 AngularJS 應用程序來說是這樣。

AngularJS 不斷監督您的應用程序，為了使其正確處理更改和事件，AngularJS 更喜歡您使用 $location 服務而不是 window.location 對象。

$http 服務

$http 服務是 AngularJS 應用程序中最常用的服務之一。該服務向服務器發出請求，并讓您的應用程序處理響應。

實例

使用 $http 服務從服務器請求數據：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
    $scope.myWelcome = response.data;
  });
});

親自試一試

此例演示了 $http 服務的非常簡單的用法。請在 AngularJS Http 教程中了解有關 $http 服務的更多信息。

$timeout 服務

$timeout 服務是 AngularJS 版本的 window.setTimeout 函數。

實例

兩秒后顯示新消息：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
    $scope.myHeader = "How are you today?";
  }, 2000);
});

親自試一試

$interval 服務

$interval 服務是 AngularJS 版本的 window.setInterval 函數。

實例

每秒顯示時間：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});

親自試一試

創建您自己的服務

要創建自己的服務，請將服務與模塊連接：

創建名為 hexafy 的服務：

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

要使用您的自定義服務，請在定義控制器時將其添加為依賴項：

實例

使用名為 hexafy 的自定義服務將數字轉換為十六進制數字：

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

親自試一試

在過濾器中使用自定義服務

創建服務并將其連接到您的應用程序后，您可以在任何控制器、指令、過濾器或甚至其他服務中使用該服務。

要在過濾器中使用服務，請在定義過濾器時將其添加為依賴項：

過濾器 myFormat 中使用的服務 hexafy：

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);

親自試一試

您可以在顯示對象或數組中的值時使用該過濾器：

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

親自試一試