AngularJS服务(内置和自定义)

正如我们从角度介绍中学到的那样,服务是无状态的单例对象,它们为Web应用程序提供功能。例如,$http是用于对Web服务器进行HTTP调用的核心服务。简而言之,您可以将角度服务假定为执行一个或多个相关任务的可重用代码块(例如Java中带有静态方法的Utility类)。在AngularJS中,有几个内置服务–您也可以创建自己的自定义服务。

目录

内置服务
创建自定义服务
如何使用服务

内置角度服务

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

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

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

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

参考:https : //docs.angularjs.org/api/ng/service

创建自定义Angular服务

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

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

声明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>

输出将如下所示:

这就是AngularJS服务入门教程的全部内容。如果您有任何疑问,请在评论区留言,我会一一解答。

saigon has written 1445 articles

Leave a Reply