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 服务

这个$httpservice 是 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服务。了解更多关于$http服务于AngularJS Http 教程



$超时服务

这个$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);
});
亲自试一试 »

在过滤器内使用自定义服务

创建服务并将其连接到应用程序后,您可以在任何控制器、指令、过滤器甚至其他服务中使用该服务。

要在过滤器内使用该服务,请在定义过滤器时将其添加为依赖项:

服务hexafy用在过滤器中myFormat:

app.filter('myFormat',[ 'hexafy', function( hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);
亲自试一试 »

显示对象或数组中的值时可以使用过滤器:

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
亲自试一试 »