zoukankan      html  css  js  c++  java
  • (转)走进AngularJs(六) 服务

    原文地址:http://www.cnblogs.com/lvdabao/p/3464015.html

      今天学习了一下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'];

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

  • 相关阅读:
    5G网络逐渐普及TSINGSEE青犀视频云边端架构网页视频实时互动直播系统又将如何发展?
    【开发记录】TSINGSEE青犀视频云边端架构Visual Studio 2017自建WebRTC中peerconnection_client编译报无法解析错误
    安防视频云服务平台EasyCVR视频智能分析系统运行控制台报404错误如何排查?
    一对一或一对多音视频通话会议系统可以通过哪些方式实现?
    TSINGSEE青犀视频云边端视频智能分析平台开发VMware下安装Ubuntu系统后无法安装VMwaretools问题解决
    最简单的Windows套接字(Socket)例子(源码,实例)
    KJAVA虚拟机Hack笔记实现MIDP的SLAVE事件模型
    系统程序员成长计划你的数据放在哪里(下)
    使用new实现realloc操作
    KJava虚拟机hack笔记基于GTK的移植
  • 原文地址:https://www.cnblogs.com/fcsh820/p/3464323.html
Copyright © 2011-2022 走看看