AngularJS 自定义 server

1. 定义 Server

如同指令一样，系统内置的服务以$开头，我们也可以自己定义一个服务，但不要以$开头用于区分系统内置的服务。定义服务的方式有如下几种：

1. 使用系统内置的$provide服务；

2. 使用Module的factory方法；

3. 使用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来访问数据了。

2. 管理服务的依赖关系

• Server 之间的依赖

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

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

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

• Server 与 Controller 之间的依赖

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

HTML :

<div ng-app="myApp" ng-controller="myCtrl">
</div>

JS :

第一种：
名称需要相同

var app = angular.module("myApp", []);
app.service("remoteData", function () {
    this.name = "n";
    this.value = "v";
});
app.controller("myCtrl", function ($scope, remoteData) {
    console.log(remoteData);
    $scope.getData = function(){
        alert('name：'+remoteData.name+'   value：'+remoteData.value);
    }
});

第二种：
将 controller 中的函数单独提出来，名称需要相同

var app = angular.module("myApp", []);
app.controller('myCtrl', testC);
function testC($scope, remoteData){
    console.log(remoteData);
    $scope.getData = function(){
        alert('name：'+remoteData.name+'   value：'+remoteData.value);
    }
}
app.service("remoteData", function () {
    this.name = "n";
    this.value = "v";
});

第三种：
名称不相同，使用 $inject 来手动注入

var app = angular.module("myApp", []);
app.controller('myCtrl', testC);
function testC(scope, rd){
    console.log(rd);
    scope.getData = function(){
        alert('name：'+rd.name+'   value：'+rd.value);
    }
}
app.service("remoteData", function () {
    this.name = "n";
    this.value = "v";
});
testC.$inject = ['$scope','remoteData'];
//这里的 rd 就是 remoteData。