AngularJS入门(10)-Angular服务总结

来源：互联网发布：淘宝ecco鞋真假编辑：程序博客网时间：2024/05/16 07:38

在之前介绍AngularJS的博客中，简单的介绍了AngularJS提供的常用服务，以及如何自定义服务，具体可参见《AngularJS 服务(Service)》。在这一篇博客中，我将为大家详细介绍如何自定义服务，以及各种方式之间的区别。

value(name, object)

value(name, object)方法允许我们直接将一个普通值或对象作为服务。我们通过一段代码来看看如何使用：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>AngularJS</title>        <script type="text/javascript" src="js/angular.min.js"></script>        <script type="text/javascript">            angular.module("myApp", [])                .value("HQValue", 10)                .controller("myCtrl", function($scope, HQValue) {                    $scope.value = HQValue;                });        </script>    </head>    <body ng-app="myApp" ng-controller="myCtrl">        {{value}}    </body></html>

在这段代码中，我们是用value方法定义了一个服务，服务名称为HQValue，值为：10，这是一个很简单的例子。

constant(name, value)

constant(name, value)也可以注册一个服务，值可以是一个字符串、数字、数组、对象或函数，和value(name, object)很像有木有。对上面的示例进行简单的修改：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>AngularJS</title>        <script type="text/javascript" src="js/angular.min.js"></script>        <script type="text/javascript">            angular.module("myApp", [])                .constant("HQConstant", 10)                .config(function(HQConstant) {                    console.info(HQConstant);                })                .controller("myCtrl", function($scope, HQConstant) {                    $scope.value = HQConstant;                });        </script>    </head>    <body ng-app="myApp" ng-controller="myCtrl">        {{value}}    </body></html>

细心的小伙伴应该可以发现constant(name, value)和value(name, object)的用法虽然很想，但是二者也是有区别的，不然也就没必要搞两个出来了，二者最大的区别在于使用constant(name, value)注册的服务可以在config(configFn)方法中注入，而value(name, object)不可以。通常用value(name, object)来注册服务对象或者函数，而用constant(name, value)来配置数据。

service(name, constructor)

使用service(name, constructor)注册服务，服务对象是使用new进行实例化的，所以我们应该给this添加属性。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="js/angular.min.js"></script>        <script type="text/javascript">            angular.module("myApp", [])                .service('HQString', function() {                    this.toUpperCase = function(x) {                        return x.toUpperCase();                    }                }).controller("myCtrl", function($scope, HQString) {                    $scope.name = HQString.toUpperCase('jianggujin');                });        </script>    </head>    <body ng-app="myApp" ng-controller="myCtrl">        <div>{{name}}</div>    </body></html>

在这段代码中，我们使用了service(name, constructor)注册了一个服务，服务名为HQString，我们为该服务添加了一个toUpperCase用于将字符串转换为大写。

factory(name, providerFunction)

使用factory(name, providerFunction)注册服务其实就是创建一个对象作为providerFunction的返回值，注入到controller中的其实就是创建的对象。我们使用factory(name, providerFunction)来实现service(name, constructor)同样的功能，代码如下：

<head>    <meta charset="UTF-8">    <title></title>    <script src="js/angular.min.js"></script>    <script type="text/javascript">        angular.module("myApp", [])            .factory('HQString', function() {                return {                    toUpperCase: function(x) {                        return x.toUpperCase();                    }                };            }).controller("myCtrl", function($scope, HQString) {                $scope.name = HQString.toUpperCase('jianggujin');            });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <div>{{name}}</div></body>

provider(name, provider)

provider(name, provider)是可以传入config(configFn)的服务，如果我们想要在 service对象启用之前，先进行模块范围的配置，那就应该用 provider。使用provider(name, provider)注册服务，我们需要为this添加$get函数，函数返回用于注入到controller中对象，我们也可以为this添加其他属性以便于我们在config(configFn)方法中使用。需要注意的是，如果我们的服务名称为：HQString，那么我们在config(configFn)方法中注入的名称应该为：HQStringProvider。下面我们通过代码来看一下如何使用：

<head>    <meta charset="UTF-8">    <title></title>    <script src="js/angular.min.js"></script>    <script type="text/javascript">        angular.module("myApp", [])            .provider('HQString', function() {                this.defaults = "defaults";                this.$get = function() {                    return {                        toUpperCase: function(x) {                            return x.toUpperCase();                        }                    };                }            }).config(function(HQStringProvider) {                console.info(HQStringProvider.defaults)            }).controller("myCtrl", function($scope, HQString) {                $scope.name = HQString.toUpperCase('jianggujin');            });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <div>{{name}}</div></body>

0 0