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

在之前介绍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",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",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",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",HQString) { $scope.name = HQString.toUpperCase('jianggujin'); }); </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div>{{name}}</div>
</body>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...