angular之service、factory预provider区别
昨晚项目组做了angular分享,刚好有讨论到这个问题。虽然许久不做前端开发,但是兴趣所致。就查阅了下资料,以便后续需要使用
自己的理解:service是new出来的,factory是直接使用就能获得到service对象,service多了一个this。provider可以初始化注入之前进行一些全局配置,还有就是需要通过$get方法来获得
比较简单的一个理解
app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);
The difference between the three is that:
a
's stored value comes from runningfn
.b
’s stored value comes fromnew
ingfn
.c
’s stored value comes from first getting an instance bynew
ingfn
, and then running a$get
method of the instance.
Which means there’s something like a cache object inside AngularJS, whose value of each injection is only assigned once, when they've been injected the first time, and where:
cache.a = fn() cache.b = new fn() cache.c = (new fn()).$get()
一篇关于三者区别的英文资料 :http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/
看不来的可以看下中文翻译:http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider
但是不推荐,还是老老实实看英文为好
最后来篇比较长的
var myApp = angular.module('myApp', []); //Service style, probably the simplest one myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; }); //Factory style, more involved but more sophisticated myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } }; }); //Provider style, full blown, configurable version myApp.provider('helloWorld', function() { // In the provider function, you cannot inject any // service or factory. This can only be done at the // "$get" method. this.name = 'Default'; this.$get = function() { var name = this.name; return { sayHello: function() { return "Hello, " + name + "!" } } }; this.setName = function(name) { this.name = name; }; }); //Hey, we can configure a provider! myApp.config(function(helloWorldProvider){ helloWorldProvider.setName('World'); }); function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) { $scope.hellos = [ helloWorld.sayHello(), helloWorldFromFactory.sayHello(), helloWorldFromService.sayHello()]; }
同事的总结资料:
//service和factory的区别 someModule.factory('testF', [function(){ var f = 1; //可以return任意js支持的类型,如[],{},function.(建议是一个对象) return { add:function(){ f++; console.log(f); } }; //不能用这种形式 // var f = 1; // this.add = function(){ // f++; // console.log(f); // }; }]).service('testS', [function(){ //这种可以 var s = 1; this.add = function(){ s++; console.log(s); }; //这种也可以用。和factory一样,可以return任意js支持的类型,如[],{},function。(建议是一个对象) // var s = 1; // return { // add:function(){ // s++; // console.log(s); // } // }; }]) // 总结】service是用new function形式的,service提供的方法是构造函数。factory是通过执行提供的函数来创建。 // 也就是说:service比factory多了一种this.成员的写法,service创建的实例多一级原型(构造函数的原型) //PS:在ng中多了一级原型的作用 还没了解,未知
下图展示的是这两种方式得到的对象:
![](https://images2015.cnblogs.com/blog/111770/201509/111770-20150917190147914-875003583.jpg)
最后就是stackoverflow中关于该讨论的神级评论,http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory
考虑到很多朋友可以FQ困难,有爱的博主帮你们转了一份PDF 。下载地址