250.md

{% raw %}

# AngularJS 服务（内置和自定义）

> 原文： [https://howtodoinjava.com/angularjs/angularjs-services-built-in-and-custom/](https://howtodoinjava.com/angularjs/angularjs-services-built-in-and-custom/)

正如我们在 [Angular 介绍](//howtodoinjava.com/angularjs/angularjs-tutorial-helloworld-example/)中了解到的，服务是**无状态对象和单例对象**，它们为 Web 应用提供功能。 例如，`$http`是用于对 Web 服务器进行 HTTP 调用的核心服务。 简单来说，您可以将 Angular 服务假定为可重用代码块，它执行一个或多个相关任务（例如 Java 中带有静态方法的工具类）。 在 AngularJS 中，有几个内置服务 – 您也可以创建自己的自定义服务。

```java
Table of Contents

Built-in Services
Creating Custom Services
How to use Services
```

## 内置 Angular 服务

如前所述，Angular 提供了几种内置服务，这些服务可以即时使用。 在运行时，这些服务会自动向依赖项注入器注册，因此您可以通过使用依赖项注入轻松地将它们合并到您的 angular 应用中。 例如，要在控制器中使用`$http`服务，请按以下步骤注入服务：

```java
module.controller('DemoController', function( $http ){
    //...
});
```

让我们列出有 Angular 的内置服务。

| 服务名称 | 描述 |
| --- | --- |
| `$anchorScroll` | 提供滚动到`$location.hash()`中指定的页面锚点的功能 |
| `$animate` | 该服务公开了一系列 DOM 工具方法，这些方法提供对动画挂钩的支持。 |
| `$animateCss` | 默认情况下，仅当包含`ngAnimate`时，此服务才会执行动画。 |
| `$cacheFactory` | 构造缓存对象，放置和检索键值对并为其提供对其他服务的访问权限的工厂。 |
| `$templateCache` | 首次使用模板时，会将其加载到模板缓存中以便快速检索。 |
| `$compile` | 将 HTML 字符串或 DOM 编译到模板中，并生成模板函数，然后可以使用该函数将范围和模板链接在一起。 |
| `$controller` | 这负责实例化 Angular 控制器组件。 |
| `$document` | 指定对`window.document`元素的 [jQuery 包的](//howtodoinjava.com/scripting/jquery/javascript-dom-objects-vs-jquery-objects/)引用。 |
| `$exceptionHandler` | Angular 表达式中任何未捕获的异常都委托给此服务。 默认实现只是委派给`$log.error`，它将其记录到浏览器控制台中。 |
| `$filter` | 过滤器用于格式化显示给用户的数据。 |
| `$httpParamSerializer` | 默认的`$http`参数序列化程序，将对象转换为字符串。 |
| `$httpParamSerializerJQLike` | 替代`$http`参数序列化器，它遵循 jQuery 的`param()`方法逻辑。 序列化程序还将按字母顺序对参数进行排序。 |
| `$http` | 此服务有助于通过浏览器的`XMLHttpRequest`对象或`JSONP`与远程 HTTP 服务器进行通信。 |
| `$xhrFactory` | 用于创建`XMLHttpRequest`对象的工厂函数。 |
| `$httpBackend` | 用于处理浏览器不兼容。 |
| `$interpolate` | 将带有标记的字符串编译为插值函数。 HTML `$compile`服务使用此服务进行数据绑定。 |
| `$interval` | Angular 的`window.setInterval`包装器。 |
| `$locale` | 提供各种 Angular 组件的本地化规则。 |
| `$location` | 它解析浏览器地址栏中的 URL，并使该 URL 可用于您的应用。 对地址栏中 URL 的更改将反映到`$location`服务中，对`$location`的更改将反映到浏览器地址栏中。 |
| `$log` | 控制台日志。 |
| `$parse` | 将 Angular 表达式转换为函数。 |
| `$q` | 帮助您异步运行函数，并在完成处理后使用它们的返回值（或错误）。 |
| `$rootElement` | Angular 应用的根元素。 |
| `$rootScope` | 范围提供了模型和视图之间的分离。 这是针对根范围的。 每个应用都有一个根范围。 |
| `$sceDelegate` | 由后端`$sce`使用。 |
| `$sce` | 为 AngularJS 提供严格的上下文转义服务。 |
| `$templateRequest` | 它运行安全检查，然后使用`$http`下载提供的模板，并在成功后将内容存储在`$templateCache`中。 |
| `$timeout` | Angular 的`window.setTimeout()`包装器 |
| `$window` | 对浏览器的`window`对象的引用。 尽管`window`在 JavaScript 中全局可用，但由于它是全局变量，因此会引起可测试性问题。 在 Angular 上，我们始终通过`$window`服务来引用它，因此可以对其进行覆盖，删除或模拟以进行测试。 |

*参考： [https://docs.angularjs.org/api/ng/service](https://docs.angularjs.org/api/ng/service)*

## 创建自定义 Angular 服务

将应用的业务逻辑和通用操作放在一个地方总是一个好的设计。 这样可以提高代码的可重用性，并避免代码重复。 您应将所有此类逻辑放入自定义 Angular 服务中。 这使代码模块化并且更易于维护。

此外，您的代码变得更具可测试性。 请记住，Angular 为单元测试提供了一流的支持。 因此，我们可以为这些服务快速编写测试，并避免许多可能的缺陷。

声明 angularjs 服务的方式主要有两种。 让我们了解两种方式：

#### 使用`module.service('serviceName', function(){})`

当您使用`module.service()`和**创建服务时**，作为第二个参数传递的`function()`的实例成为 AngularJS 注册并随后在需要时注入到其他服务/控制器的服务对象。

使用`module.service()`在自定义服务对象中声明方法的语法为：

```java
module.service('DemoService', function() {
	//"this" will be used as service instance
    this.firstMethod = function() {
        //..
    }

    this.someOtherMethod = function() {
        //..
    }
});
```

#### 使用`module.factory('factoryName', function(){})`

当您使用`module.factory()`创建服务时，作为第二个参数传递的`function()`的**返回值**将成为 AngularJS 注册并稍后在需要时注入到其他服务/控制器的服务对象。

使用`module.factory()`在自定义服务对象中声明方法的语法为：

```java
module.factory('DemoService', function() {
	//"factory" will be used as service instance
	var factory = {}; 

    factory.firstMethod = function() {
        //..
    }

    factory.someOtherMethod = function() {
        //..
    }

    return factory;
});
```

## 如何使用 AngularJS 服务

此示例演示了自定义服务的用法，该服务具有用于显示不同时区的当前时间的逻辑。 首先创建自定义服务。

```java
var app = angular.module('myApp', []);

//Create a function
function TimeObj() {
    var cities = {
        'Los Angeles': -8,
        'New York': -5,
        'London': 0
    };
    this.getTZDate = function(city) {
        var localDate = new Date();
        var utcTime = localDate.getTime() + localDate.getTimezoneOffset() * 60 * 1000;
        return new Date(utcTime + (60 * 60 * 1000 * cities[city]));
    };
    this.getCities = function() {
        var cList = [];
        for (var key in cities) {
            cList.push(key);
        }
        return cList;
    };
}

//Register as service 'TimeService'
app.service('TimeService', [TimeObj]);

```

现在要使用此服务，请使用如下控制器：

```java
app.controller('LAController', ['$scope', 'TimeService',
    function($scope, timeS) {
        $scope.myTime = timeS.getTZDate("Los Angeles").toLocaleTimeString();
    }
]);

app.controller('NYController', ['$scope', 'TimeService',
    function($scope, timeS) {
        $scope.myTime = timeS.getTZDate("New York").toLocaleTimeString();
    }
]);

app.controller('LondonController', ['$scope', 'TimeService',
    function($scope, timeS) {
        $scope.myTime = timeS.getTZDate("London").toLocaleTimeString();
    }
]);

```

现在，您可以在网页中使用控制器显示不同的时间。

```java
<html ng-app="myApp">
	<head>
		<title>AngularJS Custom Time Service</title>
		<style>
			span {
				color: lightgreen; background-color: black;
				border: 3px ridge; padding: 2px;
				font: 14px/18px arial, serif; 
			}
		</style>
	</head>
	<body>
		<h2>Custom Time Service:</h2><hr>

		<div ng-controller="LAController">
		Los Angeles Time:
		<span>{{myTime}}</span>
		</div><hr>

		<div ng-controller="NYController">
		New York Time:
		<span>{{myTime}}</span>
		</div><hr>

		<div ng-controller="LondonController">
		London Time:
		<span>{{myTime}}</span>
		</div>

	</body>
</html>
```

输出将如下所示：

请参阅 [CodePen](https://codepen.io) 上的 [Angular 服务演示 – 时区示例](https://codepen.io/howtodoinjava/pen/jWxYKB/)，作者为 Lokesh（[@howtodoinjava](https://codepen.io/howtodoinjava)）。

这就是 **AngularJS 服务入门教程**的全部内容。 将我的问题放在评论部分。

学习愉快！

{% endraw %}