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:

1. a‘s stored value comes from running fn.
2. b’s stored value comes from newing fn.
3. c’s stored value comes from first getting an instance by newing fn, and then running a $getmethod 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中多了一级原型的作用 还没了解，未知
下图展示的是这两种方式得到的对象：

最后就是stackoverflow中关于该讨论的神级评论，http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory

考虑到很多朋友可以FQ困难，有爱的博主帮你们转了一份PDF 。下载地址