AngularJS 自定义 server

绝地灬酷狼 2022-06-08 09:57 202阅读 0赞

#### 1. 定义 Server ####

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

1.  使用系统内置的$provide服务；
2.  使用Module的factory方法；
3.  使用Module的service方法。

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

*  ##### 使用$provide来定义 #####

*  ##### 使用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 :

JS :

第一种：  
名称需要相同

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

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

AngularJS 自定义 server

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 angularjs自定义过滤器

相关 AngularJS 自定义常量服务

相关 AngularJS 自定义常量服务

相关 AngularJs自定义过滤器

相关 AngularJs自定义服务

相关 AngularJS 自定义 server

相关 AngularJs自定义指令

相关 angularJs自定义指令

相关 AngularJs 自定义指令

相关 AngularJs 自定义provider服务