软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
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年7日历
2018-7-22 11:17:37
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --