自定义Angular服务

Posted 2020-08-02 水流目

Angular内置了很多服务，比如和浏览器地址栏交互的$location服务，和服务器进行交互的$http服务

自然自己也可以自定义服务。

使用服务可以很好的在多个Angular控制器之间进行交互和共享状态，因此自己创建符合当前需要的服务往往可以使效率事半功倍。

 

如何创建Angular服务？

Angular提供了模型对象的API来定义服务，一下三个函数可以用来创建一般的服务

函数　　　　　　　　　　　　　　　　　　　　　　　　定义

provider(name,Object or constructor())　　　　　　一个可配置的服务，创建的逻辑比较复杂。如果你传递一个Object作为参数，

　　　　　　　　　　　　　　　　　　　　　　　　　　那么这个Object对象必须带有一个$get的函数，此函数需要返回服务的名称。

　　　　　　　　　　　　　　　　　　　　　　　　　　否则Angular会人物传递的是一个构造函数，调用构造函数会返回服务实例对象

factory(name,$get Function())　　　　　　　　　　　一个不可配置的服务，创建逻辑比较复杂。需要制定一个函数，当调用这个函

　　　　　　　　　　　　　　　　　　　　　　　　　　数的时候，会返回服务的实例。可以把它看成provider（name,{$get :$getfunction()})

　　　　　　　　　　　　　　　　　　　　　　　　　　的形式。

service(name,constructor())　　　　　　　　　　　　一个不可配置的服务，创建逻辑比较简单，与上面provider函数的constructor

　　　　　　　　　　　　　　　　　　　　　　　　　　参数类似，Angular调用它可以创建服务实例。

 

provider

　　　　provider中既绑定了factory也绑定了service，并且在注入系统准备完毕前，还可以享受到配置provider的好处

 实例：

 1 var myApp=angular.module(‘myApp‘,[]);
 2 myApp.provider(‘greeter‘,function(){
 3     var salutation=‘Hello‘;
 4     this.setSalutation=function(s){
 5         salutation=s;
 6     }
 7 
 8     function Greeter(a){
 9         this.greet=function(){
10             return salutation+‘ ‘+a;
11         }
12     }
13 
14     this.$get=function(a){
15         return new Greeter(a);
16     };
17 });

 

factory

　　　　如果有一个类或者对象，需要首先为它提供一些逻辑或者参数，然后才能对它初始化，那么可以使用factory接口。

实例

1 myApp.factory(‘greeter‘,function(salut){
2     return new Greeter(salut);
3 });
4 
5 function Greeter(salutation){
6     this.greet=function(name){
7         return salutation+‘ ‘+name;
8     };
9 }

 

service

　　　　factory和service之间不同点在于，service会直接调用传递给它的函数，然后返回执行结果；而factory会使用

　　　　“new”关键字来调用传递给它的构造方法然后再返回结果

实例

1 myApp.factory(‘greeter‘,Greeter);
2 
3 function Greeter(salutation){
4     this.greet=function(name){
5         return salutation+‘ ‘+name;
6     };
7 }