AngularJS 服务（内置和自定义）

原文： https://howtodoinjava.com/angularjs/angularjs-services-built-in-and-custom/

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

Table of Contents

Built-in Services
Creating Custom Services
How to use Services

内置 Angular 服务

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

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

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

服务名称	描述
`$anchorScroll`	提供滚动到`$location.hash()`中指定的页面锚点的功能
`$animate`	该服务公开了一系列 DOM 工具方法，这些方法提供对动画挂钩的支持。
`$animateCss`	默认情况下，仅当包含`ngAnimate`时，此服务才会执行动画。
`$cacheFactory`	构造缓存对象，放置和检索键值对并为其提供对其他服务的访问权限的工厂。
`$templateCache`	首次使用模板时，会将其加载到模板缓存中以便快速检索。
`$compile`	将 HTML 字符串或 DOM 编译到模板中，并生成模板函数，然后可以使用该函数将范围和模板链接在一起。
`$controller`	这负责实例化 Angular 控制器组件。
`$document`	指定对`window.document`元素的 jQuery 包的引用。
`$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

创建自定义 Angular 服务

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

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

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

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

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

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

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()在自定义服务对象中声明方法的语法为：

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

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

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

    return factory;
});

如何使用 AngularJS 服务

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

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

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

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

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

<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 上的 Angular 服务演示 – 时区示例，作者为 Lokesh（@howtodoinjava）。

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

学习愉快！