AngularJS : What is a factory?
I've been doing a lot of work on Angular.js
and overall I find it to be an interesting and powerful framework.
I know there have been a lot of discussions on Services vs. Factories vs. Providers vs. Values, but I am still pretty confused about what a Factory
is.
Factory has been defined in other StackOverflow discussions as the following:
Factories
Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
I find this explanation to be very difficult to grasp and it doesn't increase my understanding of what a factory is.
Would anyone have any explanations or real life examples to share about what exactly a Factory
is and why you should use it in lieu of a Service
, Provider
, or other?
Update
A service
holds a reference to any object.
A factory
is a function which returns any object
A provider
is a function which returns any function
-phew-
From what I understand they are all pretty much the same. The major differences are their complexities. Providers are configurable at runtime, factories are a little more robust, and services are the simplest form.
Check out this question AngularJS: Service vs provider vs factory
Also this gist may be helpful in understanding the subtle differences.
Source: https://groups.google.com/forum/#!topic/angular/hVrkvaHGOfc
jsFiddle: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/
author: Pawel Kozlowski
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
// In the provider function, you cannot inject any
// service or factory. This can only be done at the
// "$get" method.
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
};
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
One major difference I see is that you can run custom code in the factory. But, in a service, only object creation happens.
myJs.factory('Factory', function() {
//Write custom code here
return {
Hello: function() {
return "Hello, World!"
}
};
});