AngularJs提供了三种方法可以自定义服务,分别是provider、factory、service.请注意三者之间的区别。
有三种方式可以自定义服务:
第一种方式,在module中以回调函数的形式作为参数引入:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl">
{{name}}
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[],function($provide){
$provide.provider('providerService01',function(){
this.$get=function(){
return {message:'this is providerService01'};
}
});
$provide.provider('providerService02',function(){
this.$get=function(){
return 'this is providerService02';
}
});
$provide.factory('factoryService01',function(){
return {message:'this is factoryService01'};
});
$provide.factory('factoryService02',function(){
return 'this is factoryService02';
});
$provide.service('serviceService01',function(){
return {message:'this is serviceService01'};
});
});
myApp.controller('firstCtrl',['$scope','providerService01','providerService02','factoryService01','factoryService02','serviceService01',function(
$scope,providerService01,providerService02,factoryService01,factoryService02,serviceService01){
console.log(providerService01);
console.log(providerService02);
console.log(factoryService01);
console.log(factoryService02);
console.log(serviceService01);
$scope.name="张三";
}]);
</script>
</body>
</html>
第二种方式,用config方法引入:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl">
{{name}}
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.config(function($provide){
$provide.provider('providerService01',function(){
this.$get=function(){
return {message:'this is providerService01'};
}
});
$provide.provider('providerService02',function(){
this.$get=function(){
var _name="";
var service={};
service.setName=function(name){
_name=name;
}
service.getName=function(){
return _name;
}
return service;
}
});
});
myApp.controller('firstCtrl',['$scope','providerService01','providerService02',function($scope,providerService01,providerService02){
console.log(providerService01);
providerService02.setName("服务二");
$scope.name=providerService02.getName();
}]);
</script>
</body>
</html>
第三种方式,module调用各自的方法:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl">
{{name}}
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.provider('providerService01',function(){
this.$get=function(){
return {message:'this is providerService01'};
}
});
myApp.factory('factoryService01',function(){
return {message:'this is factoryService01'};
});
myApp.service('serviceService01',function(){
return {message:'this is serviceService01'};
});
myApp.controller('firstCtrl',['$scope','providerService01','factoryService01','serviceService01',function(
$scope,providerService01,factoryService01,serviceService01){
console.log(providerService01);
console.log(factoryService01);
console.log(serviceService01);
$scope.name="张三";
}]);
</script>
</body>
</html>
Provider、Factory、Service三者之间的区别是:
Provider是唯一一种可以传进.config()函数的service.当你想要在service对象启用之前,先进行模块范围的配置,那就应该用provider。
Factory是直接把一个函数当成一个对象的$get方法,可以直接返回字符串。用factory就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把service传进controller之后,在controller里这个对象里的属性就可以通过factory使用了。
Service是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后service返回"this"。你把service传进controller之后,在controller里"this"上的属性就可以通过service来使用了。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl">
{{name}}<br/>
##name##
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.config(['providerService01Provider','$interpolateProvider',function(providerService01Provider,$interpolateProvider){
providerService01Provider.name="李四";
providerService01Provider.age=25;
//用$interpolateProvider改变数据绑定的方式
$interpolateProvider.startSymbol('##');
$interpolateProvider.endSymbol('##');
}]);
myApp.provider('providerService01',function(){
//可以在config里配置的属性
this.name="";
this.age="";
this.$get=function(){
var that=this;
var _name="";
var service={};
service.setName=function(name){
_name=name;
};
service.getName=function(){
return _name;
};
service.getConfigName=function(){
return that.name+',age:'+that.age;
}
return service;
}
});
myApp.factory('factoryService01',function(){
var _name="";
var service={};
service.setName=function(name){
_name=name;
};
service.getName=function(){
return _name;
};
return service;
});
myApp.service('serviceService01',function(){
var _name="";
this.setName=function(name){
_name=name;
};
this.getName=function(){
return _name;
}
});
myApp.controller('firstCtrl',['$scope','providerService01','factoryService01','serviceService01',function(
$scope,providerService01,factoryService01,serviceService01){
console.log(providerService01);
console.log(providerService01.getConfigName());
console.log(factoryService01);
console.log(serviceService01);
$scope.name="张三";
}]);
</script>
</body>
</html>