angular1 servicce

重点：angular1核心之一service

以下分享来自团队童鞋vernvn

Service

自定义或内建服务，它是一个函数或对象，

$http服务

app.controller('ctrl',function($scope,$http){
	$http.get('post/json').then(function(data){
		$scope.name = data.name
	})
})

创建自定义服务,五种方法，constant,value,factory,service,provider,一般情况下factory与service使用较多，angular内置服务都是以$开头，所以自定义的服务应该避免以$开头，造成混乱。

所有类型的service都是单体，单体是什么？单体是一种设计模式，它限制了每一个类仅能够实例化为一个对象，无论我们在什么地方注入，将永远使用同一个实例，换句话就是，如果我们在一个地方改变了其中的某个值，其他地方也会发生相应的改变；

constant

1
2
3

app.constant('myconstant',{
	config1 :　'defaultValue'
})

constant是用来在指令中提供默认配置，放入的值不会改变;

value

1
2
3

app.value('myvalue',{
	config2: 'changeValue'
})

value经常用来保存值，数值是可以改变的，这是和constant最大区别，但是不能对其中的值进行计算

provider

app.provider('myprovider',function(){
	this.$get = function(){
	}
})

通过provider方法创建的服务一定要包含$get方法，否则会报错，provider注入的结果就是$get返回的结果，并且在三种创建服务的方法中，只有provider方法创建的服务可以传进config函数，以用于在对象启动前，对模块进行配置，但是在config中进行配置的只能在是$get函数之外定义的变量,注入config函数时，参数名必须是 服务名+Provider,例如下面代码只有color能被访问到，getcolor却不能
1
2
3
4
5
6
7
8
9
10
11
app.provider('myprovider',function(){
this.color = '';
this.$get = function(){
var that = this;
return {
getcolor : function(){
return that.color
}
}
}
})

1
2
3

app.config(function(myproviderProvider){
	myproviderProvider.color = 'red';
})

factory

app.factory('myfactory',function(){
	var factory = {};
	return factory;
})

通过factory创建的服务必须有返回值，即return函数，factory方法注入的结果即是return返回的结果，可以使用注入对象的定义的方法，例如
1
2
3
4
5
6
7
var factory = {};
var _name = 'lee';
factory.getname = function(){
return _name;
};
return factory;
})

service

1
2
3

app.service('myservice',function(){
	this.saysomething = function(){}
})

通过service方法创建的服务可以不用返回任何值，因为service本身返回一个构造器，系统会用new关键字来创建一个对象，所以我们可以在service内部使用this来进行扩展。
1
2
3
4
5
6
7
8
9
app.service('myservice',function(){
this.name = '';
this.getname = function(){
return this.name;
}
this.setname = function(name){
this.name = name;
}
})

上面的代码也可以用以下方式表示

app.factory('myservice',function(){
	return new Foobar();
})
function Foobar(){
	this.name = '';
	this.getname = function(){
		return this.name
	}
	this.setname = function(name){
		this.name = name
	}
}

Foobar是一个’类’,如果已经有个一个类，诸如Foobar，只需要注入进服务

1	app.service('myservice',Foobar);

官方小例子：

app.service('lee',function(){
	this.myfunc = function(x){
		return x.tostring(16)
	}
});

1
2
3

app.controller('ctrl',function($scope,lee){
	$scope.hex = lee.myfunc(255);
})

1
2
3

<div ng-controller="ctrl">
	<div>{{hex}}</div>
</div>

项目中的服务例子

angular.module('clientModule',['home'])
.factory('clientService',['$http','$q','mainservice',function($http,$q,mainservice){  
//$q是angular内置服务，可以使你异步地执行函数
	var communicateIp = 'http://10.0.1.8:8010/';
	mainservice.ip = communicateIp;
	function handleRequest(method,url,data){  //定义一个接口管理的方法
		var deferred = $q.defer();            
// defer的字面意思是延迟,$q.defer(),可以创建一个deferred实例。 
		var config = {
			method : method,
			url : url
		};
		if('POST'===method){
			config.data = data;
		}else if('GET'=== method){
			config.params = data;
		}else if('DELETE'=== method){
			config.params = data;
		}
		$http(config).success(function(data){
			deferred.resolve(data);
		}).error(function(err){
			deferred.reject(err);
		});
		return deferred.promise;   
//通过deferred延迟对象，可以得到一个承诺promise，而promise会返回当前任务的完成结果						
	};
	return {
	    exit: function(params){
	      return handleRequest('GET', communicateIp+'api/pre/demo/loginout', params);
	    },
	    changepersonalPassword: function(params){
	      return handleRequest('GET', communicateIp+'api/pre/demo/updatePassword', params);
	    },
	    checkuser: function(params){
	    	return handleRequest('GET', communicateIp +'api/pre/demo/login',params);
	    }
  	};
}]);