Angularjs笔记之 - factory，service，provider的区别

Factory 使用频率：最高

作用就是返回一个有属性有方法的对象
举例用于AJAX请求：

angular.
  module('core.phone').
  factory('Phone', ['$resource',
    function($resource) {
      return $resource('phones/:phoneId.json', {}, {
        query: {
          method: 'GET',
          params: {phoneId: 'phones'},
          isArray: true
        }
      });
    }
  ]);

在组件中使用：
第一步：写入依赖：

//路径：phone-detail/phone-detail.module.js
angular.module('phoneDetail',['core.phone'/*这就是依赖的factory出处*/])

第二步：使用factory

//路径：phone-detail/phone-detail.component.js
angular.
	module('phone-detail').
	component('phoneDetail',{
		templateUrl:'phone-detail/phone-detail.template.html',
		controller(['Phone',function phoneDetailCtrl(Phone){
			this.phones = Phone.query();
			this.orderprop = 'age'
		}])
	}

Service 使用频率：较少

通过 service 所注册的服务，在 controller 取得实体时，拿到的实体就是该传进去的 function。DI engine 通过所提供的 function ，new 出该 function 的实体，该 function 相当于是 JS constructor 的功能。DI engine 的服务都是 singleton，也就是 AngularJS 只有在 App 一开始时会初始化向 DI 注册的 service，之后调用服务的动作，都只是「取得」服务，不会再有 new 的动作。

var app = angular.module('app',[]);

app.service('helloWorldService', function(){
    this.hello = function() {
        return "Hello World";
    };
});

app.factory('helloWorldFactory', function(){
    return {
        hello: function() {
            return "Hello World";
        }
    }
});

Provider 使用频率：中等

Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider

第一部分:是私有变量和私有函数（例如：var name=“test”）。

第二部分:是在app.config函数里可以访问的变量和函数（设置在this上），app.config()函数能够修改this上的变量和函数。

第三部分:是在控制器里可以访问的变量和函数（设置在this.$get上）。

app.provider('MyProvider', function () {

        // 只有直接添加在this上的属性才能被config函数访问
        this._artist = '';
        this.thingFromConfig = '';

        // 只有$get函数返回的属性才能被控制器访问
        this.$get = function () {
            var that = this;

            return {
                getArtist: function () {
                    return that._artist;
                },
                thingFromConfig: that.thingFromConfig
            };
        };
    })
    .config(['MyProvider', function ( MyProvider ) {
        MyProvider.thingFormConfig = 'this is set in config()';
    }])
    .controller('myProviderCtrl', [
        '$scope', 'MyProvider',
        function ( $scope, MyProvider ) {
            $scope.artist = MyProvider.getArtist();
        }]);