AngularJS:Service、Factory、Provider依赖注入使用与区别

本篇转载于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址：https://angularjs.org/
注：代码都亲测过，效果是一样的，所以用了作者原本的图，望谅解

AngularJs中可用来注入的有三种类型，service、factory、provide,这三种写法不一样，用法也不一样，其中，service只实例化一次，其实就是单例模式的思想，无论我们在什么地方注入service，将永远使用同一个实例，所以对很多Controller的操作就可以放到service层中去。
AngularJS提供例如许多的内在服务，如:$http，$route、$window,$location等等。每个服务负责例如一个特定的任务，$http是用来创建AJAX调用，已获得服务器的数据。$route用来定义路由信息等。内置的服务总是前缀$符号。
关系图如下所示：

image.png

一、Service使用详解
（1）定义
一般使用this来操作数据、定义函数。

app.service('myService', function () {
    var privateValue='I am priivate';
    this.variable = 'This is public';
    this.getPrivate = function(){
        return privateValue;
    };
});

（2）AngularJS中使用DI添加Service的三种方式
方式1（内联注解，推荐使用）

app.controller('myController'，['$scope','deteFiler',function($scope,deteFilter){}]);

方式2（$inject注解）

var MyController = function($scope,dateFilter){}
MyController.$inject =['$scope','dateFilter'];
someModule.controller('MyController',MyController);

方式3 （隐式注解、不推荐使用）;

app.controller('mycontroller',function($scope,dateFilter){});

推荐使用方法1的理由是：
写法上比方法2更简单明了，比方法3更可靠（由于JavaScriptkeyi可以被压缩，AngularJs又是通过解析服务器名称找到对应的Service的，因为JavaScript压缩之后AngularJs将无法找到指定的Service，但字符串不会被压缩，因此单独以字符串指定的Service的名称可以避免这个问题）
使用方法1或方法2的注意点：
由于上述第二点原因：AngularJS在编译Htm时，由$injector将数组中的service的名称与方法中的Service进行--映射。这种映射关系必须遵循由AngularJS的约定：
数组中Service名称的个数必须与方法体中Service名称个数一致
数组中Service的顺序必须与方法体中Service的顺序一致。

（3）什么时候适合使用Service()方法
Service()方法很适合使用在功能控制比较多的Service()里面
*需要使用.config()来配置service的时候不能使用service()方法
（4）service使用实例

    
    
    


    

        按钮一
        按钮二
    
    

效果如下：

image.gif

另外，从控制台可以看出两个Controller注入了同一个Service，但最终只实例化了一次。

image.png

service定义的服务不能在.config中使用！只有providerdingyi定义的才可以。

二、Factory使用详解
Factory一般就是创建一个对象。然后在这个对象添加方法与数据，最后将些对象返回即可，然后注入到Controller层中即可。
使用实例：

    
    
    


    

        按钮一
        按钮二
    
    

效果如下：

image.gif

另外，从这里可以看到controller注入同一个factory，但是最终只实例化了一次。

image.png

记住一定要return 一个Object对象，否则会报出一下错误。

image.png

三、provider使用详解
$provide服务负责告诉AngularJs如何r创造一个新的可注入的东西，即服务。服务会被叫做供应商的东西来定义，你可以使用$provide来创建一个供应商。你需要使用$provide中的provider()方法来定义一个供应商，同时也可以通过要求$provide被注入到一个引用的config函数中来获得$provide服务，使用方法是返回一个$get函数，注意的是，在config阶段，只有provider能被注入，其他用法和service一样。
实例：

    
    
    


    

        请点击我1
    
    

        请点击我2
    

效果如下：

image.gif

控制台输出内容：

image.png

下面是一个provider实例化的时间测试

    
    
    


    

        请点击我1
    
    

        请点击我2
    

image.png

页面刷新后，即使不注入provider，但它也进行了实例化，而Service/Factory则是第一次注入时才会初始化。而这也是为什么它可以注入到config的一个原因吧。

什么时候使用provider() 方法
（1）当我们希望在应用开始前对Service进行配置的时候就需要使用到provider().。比如，我们需要配置Service在不同的部署环境（开发，演示，生产）使用不同的后端处（2）理的时候，就可以使用到了，当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方法来配置Services而不是将配置数据硬编码写到代码里。

四、Service、Factory、Provider三者的区别

（1）用Factory就是创建一个对象，为它添加属性，然后把这个对象返回出来。把Service传进Controller之后，在Controller里这个对象的属性就可以通过factory使用了。
（2）Service是用new关键字实例化的。因此，应该给this添加属性。然后service返回this,把service传进Controller之后，在Controller里this上的属性就可以通过Service来使用了。
（3）providers是唯一一种可以传入.config()函数的Service。当想要在Service对象启用之前，先进性模块范围的配置，那就应该使用provider。
（4）Factory/service是第一个注入时才实例化。而provider不是，它是在config之前就实例化好了。
同一种函数的三种不同写法：

    
    
    


    

        
{{ output1 }}
        
{{ output2 }}
        
{{ output3 }}
    
    

image.png

看console的输出，可以知道都只实例 化了一次：

image