javascriptangularjsangularjs-factory

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-


Solution

  • 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()];
    }​