EDIT Jan 2016: Since this still gets attention. Since asking this I've completed a few AngularJS projects, and for those I mostly used factory, built up an object and returned the object at the end. My statements below are still true, however.
EDIT : I think I finally understand the main difference between the two, and I have a code example to demonstrate. I also think this question is different to the proposed duplicate. The duplicate says that service is not instantiable, but if you set it up as I demonstrated below, it actually is. A service can be set up to be exactly the same as a factory. I will also provide code that shows where factory fails over service, which no other answer seems to do.
If I set up VaderService like so (ie as a service):
var module = angular.module('MyApp.services', []);
module.service('VaderService', function() {
this.speak = function (name) {
return 'Join the dark side ' + name;
}
});
Then in my controller I can do this:
module.controller('StarWarsController', function($scope, VaderService) {
$scope.luke = VaderService.speak('luke');
});
With service, the VaderService injected in to the controller is instantiated, so I can just call VaderService.speak, however, if I change the VaderService to module.factory, the code in the controller will no longer work, and this is the main difference. With factory, the VaderService injected in to the controller is not instantiated, which is why you need to return an object when setting up a factory (see my example in the question).
However, you can set up a service in the exact same way as you can set up a factory (IE have it return an object) and the service behaves the exact same as a factory
Given this information, I see no reason to use factory over service, service can do everything factory can and more.
Original question below.
I know this has been asked loads of times, but I really cannot see any functional difference between factories and services. I had read this tutorial: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
And it seems to give a reasonably good explanation, however, I set up my app as follows:
index.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>
app.js:
angular.module('MyApp', [
'MyApp.services',
'MyApp.controllers'
]);
controllers.js:
var module = angular.module('MyApp.controllers', []);
module.controller('StarWarsController', function($scope, VaderService) {
var luke = new VaderService('luke');
$scope.luke = luke.speak();
});
VaderService.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;
});
Then when I load up index.html I see "Join the dark side luke", great. Exactly as expected. However if I change VaderService.js to this (note module.service instead of 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;
});
Then reload index.html (I made sure I emptied the cache and did a hard reload). It works exactly the same as it did with module.factory. So what is the real functional difference between the two??
services,factoriesandprovidersworks. – Shull