走进AngularJs 服务

Posted 2020-08-28 竹山一叶

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

来自为知笔记(Wiz)