AngularJS : 工厂和服务?
编辑一月 2016:因为这仍然受到关注。自从问这个问题以来,我已经完成了一些AngularJS项目,对于我最常使用的那些项目,构建了一个对象并在最后返回了该对象。然而,我下面的陈述仍然是正确的。factory
编辑:我想我终于明白了两者之间的主要区别,我有一个代码示例要演示。我也认为这个问题与提议的副本不同。重复项说服务是不可实例化的,但是如果你像我下面演示的那样设置它,它实际上是。可以将服务设置为与工厂完全相同。我还将提供代码来显示工厂故障转移服务的位置,而其他答案似乎无法做到这一点。
如果我像这样设置VaderService(即作为服务):
var module = angular.module('MyApp.services', []);
module.service('VaderService', function() {
this.speak = function (name) {
return 'Join the dark side ' + name;
}
});
然后在我的控制器中,我可以这样做:
module.controller('StarWarsController', function($scope, VaderService) {
$scope.luke = VaderService.speak('luke');
});
对于服务,注入控制器的VaderService被实例化,所以我可以调用VaderService.speak,但是,如果我将VaderService更改为module.factory,控制器中的代码将不再工作,这是主要的区别。对于工厂,注入控制器的VaderService不会实例化,这就是为什么在设置工厂时需要返回对象的原因(请参阅我在问题中的示例)。
但是,您可以像设置工厂(IE 让它返回对象)完全相同的方式设置服务,并且服务的行为与工厂完全相同
鉴于这些信息,我认为没有理由使用工厂而不是服务,服务可以做工厂能做的一切,甚至更多。
原始问题如下。
我知道这个问题已经被问过很多次了,但我真的看不出工厂和服务之间的任何功能差异。我读过这个教程:http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
它似乎给出了一个相当好的解释,但是,我按如下方式设置了我的应用程序:
索引.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/VaderService.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="MyApp">
<table ng-controller="StarWarsController">
<tbody>
<tr><td>{{luke}}</td></tr>
</tbody>
</table>
</body>
</html>
应用程序.js:
angular.module('MyApp', [
'MyApp.services',
'MyApp.controllers'
]);
控制器.js:
var module = angular.module('MyApp.controllers', []);
module.controller('StarWarsController', function($scope, VaderService) {
var luke = new VaderService('luke');
$scope.luke = luke.speak();
});
维德服务.js
var module = angular.module('MyApp.services', []);
module.factory('VaderService', function() {
var VaderClass = function(padawan) {
this.name = padawan;
this.speak = function () {
return 'Join the dark side ' + this.name;
}
}
return VaderClass;
});
然后,当我加载索引时.html我看到“加入黑暗面卢克”,很棒。完全符合预期。但是,如果我将 VaderService.js更改为 this(注意 module.service 而不是 module.factory):
var module = angular.module('MyApp.services', []);
module.service('VaderService', function() {
var VaderClass = function(padawan) {
this.name = padawan;
this.speak = function () {
return 'Join the dark side ' + this.name;
}
}
return VaderClass;
});
然后重新加载索引.html(我确保清空缓存并进行硬重新加载)。它的工作方式与module.factory完全相同。那么两者之间真正的功能差异是什么?