AngularJS服务之 Factory vs Service vs Provider

AngularJS的service层用于处理业务逻辑和数据持久化，以下3钟方法可以创建并注册我们自己的service，在控制器中注入已创建的service服务，就可以调用service里面的属性和方法了。

1、Factory

2、Service

3、Provider

1、最简单的方式：Factory工厂方法

Angular里创建service最简单的方式就是使用factory()方法，使用factory()来创建服务的时候，首先创建一个对象，然后在这个对象上添加属性，最后返回这个对象。把这个服务注入控制器中，控制器就可以访问对象上的方法了。

angular.module('yeomanAngularApp')
	.factory('playerFactory',function(){
		var _players = [
			{"username":"zhangsan",'address':'北京'},
			{"username":"lisi",'address':'上海'},
			{"username":"wangwu",'address':'大连'}
		];
		var service = {};
		service.getPlayers = function(){
			return _players;
		}
		return service;
	});

angular.module('yeomanAngularApp')
.controller('PlayerCtrl', function ($scope,$http,$filter,playerFactory) {
		$scope.playName = $filter('lowercase')('Angular');
		$scope.players = playerService.getPlayers();
		console.log(players);
	})

2、最直接的方式：Service构造函数方法

service()与factory用法差不多，区别在于不需要返回一个对象。

使用service()创建服务时，相当于使用new关键字进行了实例化，只需要在this上添加属性和方法，然后服务会自动返回this。把这个服务注入控制器中，控制器就可以访问对象上的属性方法了。

angular.module('yeomanAngularApp')
	.service('playerService', function(){
		this.getRemotePlayers = function(){
			var deferred = $q.defer();
		  $http({
		  	method: 'JSONP',
		  	url: 'url'+'&callback=JSON_CALLBACK'
		  }).success(function(data, status) {
		  	deferred.resove(data);
		  }).error(function(data, status) {
		  	deferred.reject('error');
		  });
		  return deferred.promise;
		}
	})

angular.module('yeomanAngularApp')
.controller('PlayerCtrl', function ($scope,$http,$filter,playerService) {
		$scope.players = playerService.getRemotePlayers();
		console.log(players);
	})

3、最通用的方式：Provider方法

provider是唯一一种可以创建用来注入到config()函数的服务的方式。如果要在service对象启动之前先进行模块范围的配置，应使用Provider。

angular.module('yeomanAngularApp')
	.provider('playerProvider',function(){
		this._players = [
			{"username":"zhangsan",'address':'北京'},
			{"username":"lisi",'address':'上海'},
			{"username":"wangwu",'address':'大连'}
		];
		this.paramFromConfig = '';
		this.$get = function(){
			var that = this;
			return{
				getPlayers: function(){
					return that._players;
				},
				paramOnConfig: that.paramFromConfig
			}
		}
	})
	.config(function(playerProviderProvider){
		playerProviderProvider.paramFromConfig = 'param from config';
	})

angular.module('yeomanAngularApp')
.controller('PlayerCtrl', function ($scope,$http,$filter,playerProvider) {
		$scope.playName = $filter('lowercase')('Angular');
		$scope.players = playerService.getPlayers();
		console.log(players);
	})