标签：javascript service angularjs
与 Java 相似， AngularJS 中的 controller 应该尽可能保持短小精悍，不提倡在 controller 中进行 DOM 操作和数据操作。先来看一个臃肿、难以维护的 controller ：
var app = angular.module(‘APPModule‘, []);
app.controller(‘MainController‘, function($scope) {
$scope.shouldShowLogin = true;
$scope.showLogin = function() {
$scope.shouldShowLogin =!$scope.shouldShowLogin;
};
$scope.clickButton = function() {
$(‘#btnspan‘).html(‘Clicked‘);
};
$scope.onLogin = function(user) {
$http({
method: ‘POST‘,
url: ‘/login‘,
data: {
user: user
}
}).success(function(data) {
//Some Actions
});
};
});coding 初学者总是倾向于写这种代码。更加优雅的方法是通过使用 service 和 directive 使 controller 更轻量，更易于维护。下面来看看如何自定义并使用service 。
1.通过 factory() 创建自定义 service：
var app =angular.module(‘APPModule‘, []);
app.factory(‘UserService‘, [
‘$http‘,
function($http) {
var runLogin = function(user) {
$http({
method: ‘POST‘,
url: ‘/login‘,
data: {
user: user
}
}).success(function(data) {
//Some Actions
});
};
return {
runLogin: runLogin
};
}
]);不难发现，如此声明自定义的 service 后，我们将之前臃肿的 controller 中的登录逻辑放到了 UserService 中，代码马上变得逼格十足。
2.使用自定义 service：
app.controller(‘MainController‘, [
‘$scope‘,
‘UserService‘,
function($scope, UserService) {
$scope.onLogin = function(user) {
UserService.runLogin(user);
};
}
]);这里的 UserService就是我们自定义的 service ，在 controller 初始化时注入，即可使用其中的值和方法了。注意一点，在自定义服务之前注入所有的 AngularJS 内置服务，是约定俗称的规则。
如果自定义的service 和使用它的 controller 不在一个 module中，需要在 controller 所在 module 初始化时注入 service 所在的 module：
var serviceModule = angular.module(‘ServiceModule‘, []);
serviceModule.factory(‘UserService‘, [
‘$http‘,
function($http) {
… //与之前UserService相同
}
]);
//在controller所在的module中注入service所在的module
var app =angular.module(‘APPModule‘, [‘ServiceModule‘]);
app.controller(‘MainController’, [
‘$scope‘,
‘UserService‘,
function($scope, UserService) {
… //与之前controller相同
}
]);
3.创建自定义 service 的其他方式：
factory() 方法是用来创建服务的最常规方式，除此之外，还有其他方式可以创建服务。
3.1 provider()：
app.provider(‘UserService‘, {
self: this,
setName:function(name) {
self.name = name;
},
$get: function() {
return {
getName: function() {
return self.name;
}
};
}
});使用provider() 创建时，返回的对象中必须有 $get() 函数对象，否则会创建失败。用 provider() 创建服务可以在多个应用使用同一个服务时获得更强的扩展性，通过如下方式进行扩展：
app.config(function(UserServiceProvider) {
NameServiceProvider.setName(‘Lucy‘);
});其中，UserServiceProvider为对应的服务名 + Provider组成，通过这一对象可以调用 UserService中的方法。
3.2 constant()：
该方法可以将变量值注册为服务，可以使该变量被其他 module 或 controller 共享：
app.constant(‘ASToken‘, ‘12345‘);
app.controller(‘MainController‘, [
‘$scope‘,
‘ASToken‘, //注入constant
function($scope, ASToken) {
//Some Actions
}
]);将 constant 注入后就可以直接使用了。
3.3 value()：
与 constant()用法相同。与 constant() 的区别是，constant() 可以注入到 config 中，而 value() 不行：
app.constant(‘ASToken‘, ‘12345‘).config(function(ASToken) {
//正常使用
});
app.constant(‘ASValue’, ‘12345‘).config(function(ASValue) {
//ASValue在config中无法访问
});
4.AngularJS中的拦截器$provide.decorator()：
AngularJS 中的 $provide 服务提供了在服务实例创建时对其进行拦截的功能，可以对服务进行扩展和修改。不仅可以使用在自定义服务上，也可以对AngularJS 的内置服务进行拦截。以拦截 3.1 中 provider() 创建的 UserService 为例：
app.config([
‘$provide’,
function($provide) {
$provide.decorator(‘UserService‘, [
‘$delegate‘,
function($delegate) {
return{
getName: function() {
return $delegate.getName() + ‘ <-- TheFunction Has Been Decorated.‘
},
getAge: function() {
return 18;
}
};
}
]);
}
]);如上所示，在 config 中，通过 $provide.decorate() 方法拦截 UserService ，注入的 $delegate 可以调用要拦截的 service 中原本的方法。这里我们通过对UserService 进行拦截，修改了 UserService 中的 getName() 方法，并为 UserService 添加了 getAge() 方法。
完。
参考资料：
《AngularJS 权威教程》作者：Ari Lerner 译者：赵望野 徐飞 何鹏飞
本文出自 “细桶假狗屎” 博客，请务必保留此出处http://xitongjiagoushi.blog.51cto.com/9975742/1659620
AngularJS（二）——使用AngularJS自定义service
标签：javascript service angularjs
原文地址：http://xitongjiagoushi.blog.51cto.com/9975742/1659620
