软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> AngularJS服务总结 -> 正文阅读

[Web前端]AngularJS服务总结


在之前介绍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>

......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-29 22:59:18  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-11 3:50:42
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --