AngularJS 服务
在 AngularJS 中，您可以创建自己的服务，或使用众多内置服务之一。
什么是服务？
在 AngularJS 中，服务是一个函数或对象，可供您的 AngularJS 应用程序使用，并仅限于您的 AngularJS 应用程序。
AngularJS 拥有大约 30 个内置服务。其中之一是 $location 服务。
The $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 服务
The $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 服务
The $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 服务
The $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>
自己尝试 »
