angularJS服务一

一 认识服务

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

2.特点：首先是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。

其次这与我们自己定义一个function然后在其他地方调用不同，因为服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

3.ng提供了很多内置的服务，如$location,$scope,$rootScope,$http,$q,$resource,$routeProvider等等。我们在controller中直接声明$location服务，这依靠ng的依赖注入机制。$location提供地址栏相关的服务，我们在此只是简单的获取当前的地址。

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

二 定义服务

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

使用系统内置的$provide服务

使用Module的factory方法

使用Module的service方法

2.举例：

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

举个例子

HTML部分：

<div ng-app="MyApp">

    <div ng-controller="testC2">

        <button ng-click="getData()">获取远程数据</button>

    </div>

</div>

JS部分：

var app = angular.module('MyApp', []);

app.controller('testC2',function($scope,remoteData){

    $scope.getData = function(){

        alert('name：'+remoteData.name+'   value：'+remoteData.value);

    }

});

 

app.factory('remoteData',function(){

    var data = {name:'n',value:'v'};

    return data;

});

三 服务中的依赖关系

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

HTML部分：

<div ng-app="MyApp">

    <div ng-controller="testC3">

        <button ng-click="validateData()">验证数据</button>

    </div>

</div>

JS部分：

var app = angular.module('MyApp', []);

app.controller('testC3',function($scope,validate){

    $scope.validateData = validate;

});

 

app.factory('remoteData',function(){

    var data = {name:'n',value:'v'};

    return data;

});

 

app.factory('validate',function(remoteData){

    return function(){

        if(remoteData.name=='n'){

            alert('验证通过');

        }

    };

});

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

app.factory('validate',['remoteData',function(remoteDataService){

    return function(){

        if(remoteDataService.name=='n'){

            alert('验证通过');

        }

    };

}]);

controller中注入服务也是同样的道理，使用的名称需要与服务名称一致才可以正确注入，这里有两种方法：

法一：与上面的类似

app.controller('testC',['$scope','remoteData',function($scope,rd){

    $scope.getData = function(){

        alert('name：'+rd.name+'   value：'+rd.value);

    }

}]);

法二：使用$inject手动指定注入的服务

function testC(scope,rd){

    scope.getData = function(){

        alert('name：'+rd.name+'   value：'+rd.value);

    }

}

testC.$inject = ['$scope','remoteData'];