AngularJS提供了5种创建服务的方法:
factory()
service()
provider()
constant()
value()
在不同情况下合理的使用这些方法可以让代码变得简洁。
1、factory
factory(serviceName, getFun),factory()函数可以接收两个参数,分别是服务名以及一个函数,这个函数的返回对象就是服务的实例,当服务被创建时该函数就会被调用。
var myApp = angular.module('myApp',[]);
//通过factory创建FactoryService服务
myApp.factory('FactoryService',function(){
return{
changeName:function(person){
person.name = "Tom";
}
};
});
//将FactoryService注入到控制器
myApp.controller('myController',['$scope','FactoryService',function($scope,FactoryService){
$scope.person={
name:'Jack',
age:'20'
};
$scope.changeName = function(){
//在controller内部创建方法,调用FactoryService中定义的具体实现
FactoryService.changeName($scope.person);
};
}]);
通过如下html实例化模块,并测试效果:
<body ng-app="myApp">
<div ng-controller="myController">
<h3>{{person.name}}</h3>
<h3>{{person.age}}</h3>
<button ng-click="changeName()">Change</button>
</div>
</body>
2、service
service(serviceName,constructor),service()函数接收方法名、构造函数两个参数,通过调用构造函数实例化服务对象。
myApp.service('ConstructService',function(){
this.changeName=function(person){
person.name = "Tom";
}
});
或先声明一个构造函数,将其传入service方法
var ServiceConstrustor = function(){
this.changeName=function(person){
person.name = "Tom";
};
};
myApp.service('ConstructService',ServiceConstrustor );
3、provider
provider()是最基础的服务创建方法,其他的服务创建方法都是对provider()的简化。provider接收serviceName和aProvider两个参数,aProvider可以是对象、数组(行内注入格式)或函数,对象(或者函数返回的对象)中一定要定义$get方法,该方法会返回一个实例化的服务。
myApp.provider('ProviderService', function() {
var newName = 'Tom';
return {
$get: function() {
//定义一系列对象、方法
function changeName(person) {
person.name = newName;
}
//将一系列对象塞进一个对象作为实例化的服务返回
return {
changeName: changeName
};
}
};
});
provider()方法最大的特性是提供了名为serviceName+'Provider'
的提供者,该提供者可被注入到config()函数中对服务进行配置,以便在不同模块中改变服务的具体实现。
myApp.provider('NameService', function() {
var newName = 'Tom';
return {
//定义配置方法,可在NameServiceProvider中调用
changeNewName:function(name){
newName = name;
},
$get:function() {
function changeName(person) {
person.name = newName;
}
return {
changeName: changeName
}
}
}
});
//在config函数中注入NameServiceProvider,调用相关函数改变服务的配置
myApp.config(function(NameServiceProvider){
NameServiceProvider.changeNewName('Keli');
});