开发者社区> 技术mix呢> 正文

走进AngularJs(六) 服务

简介:
+关注继续查看

天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下。

一、认识服务(service)

  服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块。ng的服务是这样定义的:

Angular services are singletons objects or functions that carry out specific tasks common to web apps.

  它是一个单例对象或函数,对外提供特定的功能。

  • 首先是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例。
  • 其次这与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

  ng提供了很多内置的服务,可以到API中查看http://docs.angularjs.org/api/。知道了概念,我们来拉一个service出来溜溜,看看到底是个什么用法。(从这篇文章开始,我就使用jsfiddle来写示例代码了,再也不折腾博客园的变态编辑器了~)  

  我们在controller中直接声明$location服务,这依靠ng的依赖注入机制。$location提供地址栏相关的服务,我们在此只是简单的获取当前的地址。

  服务的使用是如此简单,我们可以把服务注入到controller、指令或者是其他服务中。

二、自定义服务

  如同指令一样,系统内置的服务以$开头,我们也可以自己定义一个服务。定义服务的方式有如下几种:

  • 使用系统内置的$provide服务
  • 使用Module的factory方法
  • 使用Module的service方法

  下面通过一个小例子来分别试验一下。我们定义一个名为remoteData服务,它可以从远程获取数据,这也是我们在程序中经常使用的功能。不过我这里没有远程服务器,就写死一点数据模拟一下。

复制代码
//使用$provide来定义
var app = angular.module('MyApp', [], function($provide) {
    $provide.factory('remoteData', function() {
        var data = {name:'n',value:'v'};
        return data;
    });
});
复制代码
复制代码
//使用factory方法
app.factory('remoteData',function(){
    var data = {name:'n',value:'v'};
    return data;
});
复制代码
复制代码
//使用service方法
app.service('remoteData',function(){
    this.name = 'n';
    this.value = 'v';
});
复制代码

  Module的factory和$provide的factory方法是一模一样的,从官网文档看它们其实就是一回事。至于Module内部是如何调用的,我此处并不打算深究,我只要知道怎么用就好了。

  再看Module的service方法,它没有return任何东西,是因为service方法本身返回一个构造器,系统会自动使用new关键字来创建出一个对象。所以我们看到在构造器函数内可以使用this,这样调用该服务的地方便可以直接通过remoteData.name来访问数据了。

  下面我们来用一下自己定义好的服务:

三、管理服务的依赖关系

  服务与服务中间可以有依赖关系,例如我们这里定义一个名为validate的服务,它的作用是验证数据是否合法,它需要依赖我们从远程获取数据的服务remoteData。代码如下:

   在factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:

复制代码
app.factory('validate',['remoteData',function(remoteDataService){
    return function(){
        if(remoteDataService.name=='n'){
            alert('验证通过');
        }
    };
}]);
复制代码

  我们在controller中注入服务也是同样的道理,使用的名称需要与服务名称一致才可以正确注入。否则,你必须使用$inject来手动指定注入的服务。比如:

复制代码
function testC(scope,rd){
    scope.getData = function(){
        alert('name:'+rd.name+'   value:'+rd.value);
    }
}
testC.$inject = ['$scope','remoteData'];
复制代码

 -------------------补充于2014.01.11-------------------------

  感谢@Terry Sun指出,在controller中注入服务,也可以在定义controller时使用数组作为第二个参数,在此处把服务注入进去,这样在函数体中使用不一致的服务名称也是可以的,不过要确保注入的顺序是一致的,如:

复制代码
app.controller('testC',['$scope','remoteData',function($scope,rd){
    $scope.getData = function(){
        alert('name:'+rd.name+'   value:'+rd.value);
    }
}]);
复制代码

 

  ng服务的基本知识也就这些了。目前只是学些皮毛,或许以后用到项目中了才能体会到他的强大之处,以及在真实使用中的这样那样的问题。


本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3464015.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16685 0
Dropwizard - 开发Java RESTful Web服务
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8081036 Dropwizard是一个开源Java框架,用于开发高性能、RESTful Web服务。
751 0
VMware虚拟机安装CentOS 7并搭建Lamp服务器环境
很多时候为了方便,搭配wamp或者wnmp环境的时候,直接在windows系统搭建就好了,而且更方便的是直接用集成环境phpstudy,直接了当。这个对于初学者来说,可以这样子做,但是对于一些摸索php好久的同学,其实都没什么挑战性了,更多的是,linux都没去学着的话,更容易忘记。
2552 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23609 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14290 0
进军Arm服务器,携手微软开启云超算,这是英伟达黄仁勋的「超算已来」
在刚刚正式开幕的国际超级计算机大会(SC2019)上,英伟达 CEO 黄仁勋宣布了三项重大的产品信息:基于 GPU 加速器的 Arm 服务器、可在微软 Azure 云服务上使用的 GPU 加速型超级计算机 NDv2 以及几分钟即可实现数据移动的 Magnum IO 软件套件。
42 0
+关注
2968
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载