18

I'm an AngularJS newbie, and I'm just starting to understand the concepts and differences of factory, service and controller. As I understand, a factory is used to return a "value object" that can be injected. Most examples I've seen do something like this:

angular.module('module.factories', function() {
    factory('FactoryObject', function() {
        return {
            someFunction: function(someParam) {};
            someOtherFunction: function(someOtherParam) {});
        };
    });
});

In my controller, I want to be able to use this object, but I would like to initialize/instantiate it in the controller, since it can be re-initialized depending on events/actions in the controller. Therefore, I was wondering if I could return a constructor function in the factory instead?

angular.module('module.factories', function() {
    factory('FactoryObject', function() {

        function FactoryObject(initParam) {
        }

        FactoryObject.prototype.someFunction = function() {};

        return FactoryObject;

    });
});

Is this a suitable pattern for an angular factory? Or is it just "overkill" to use a factory for a custom object like this? Should I just include it in a library js file and reference it from there instead? One benefit of putting it in a factory is that it will be easy to mock it in a test since it will be injected where it's used. Are there any other mechanisms in Angular that could be used instead?

6
  • I think the whole point of declaring your custom factory object inside the providing function is that it gets abstracted away from the rest of the application.
    – Bart
    Apr 17, 2013 at 6:49
  • If you actually DO need a constructor function, then what you are doing is fine!
    – Ganaraj
    Apr 17, 2013 at 8:48
  • @ganaraj The reason I "need" it is that it can potentially be re-initialized multiple times in the controller during the lifetime of the controller. I could just return a regular object, and then have a init method on it, but I don't see how that would be any better. Thanks for the feedback.
    – NilsH
    Apr 17, 2013 at 9:11
  • If you are looking for the same object to be re-initialized, then passing the constructor wont be a solution. If you want to be able to create multiple objects of type ( constructor function ) then this will be the right solution.
    – Ganaraj
    Apr 17, 2013 at 9:13
  • @ganaraj No, I'm actually looking for new instances, so I use new FactoryObject(initParam) in the controller. The other example was just how I could have solved it otherwise.
    – NilsH
    Apr 17, 2013 at 9:16

4 Answers 4

8

Here's what I implemented:

angular.module('foo', [])
.factory('Foo', ['$http', function($http) {
  return function(a, b) {
    this.arr = [];
    this.a = a;
    this.b = b;
    this.random = Math.floor(Math.random()*11);

    this.someFunc = function(c) {
      this.arr.push(c);
    };
  };
}]);

Now, I can do:

var f1 = new Foo('A', 'B');
f1.random;  // i.e. 0
f1.someFunc('z');  // only affects f1.arr
var f2 = new Foo('C', 'D');
f2.random;  // i.e. 8
f2.someFunc('y');  // only affects f2.arr

Makes things more modularized. Hope that helps.

3

You're quite right, this is the way to create injectable "classes" (constructors). However, using factory is only necessary when you need to inject other stuff to be used by your class:

.factory('Class', ['$q', function ($q) {
    function Class () {}
    Class.prototype = {
        constructor: Class,
        doSomeAsyncAction: function () {
            return $q(function (resolve, reject) {
                // ...
            });
        },
        // ...
    };
    return Class;
})

If you're creating a completely independent class (e.g. some data structure), you can just use constant, so that your class is available even in service providers:

(function (undefined) {
    function Class () {}
    Class.prototype = { ... };
    angular.module(...)
        .constant('Class', Class);
})();

As a sidenote, using provider is not going to help you in this. Providers serve a completely different purpose and (among other things) return a factory function that is then used _once_ on the first requested injection to create a single instance of the service. Providers are used to let you configure that single service instance in the _config phase_ of application construction (see documentation).

1
  • We battled honorably... I shall now fall upon my own sword. Dec 18, 2014 at 12:43
1

I had the same question. I found a terrific article on how to setup Object-oriented AngularJS Services. Here's the article. Pay attention to the note about using Factories and not Services. It also covers extending your objects. I found it super easy to setup and it fit perfectly with Angular while keeping the Javascript simple and straight forward.

For Factory services which are singletons and do not need to be instantiated I use the object literal approach which has some performance advantages.

1

Here's how I solved the issue:

(function (myModule) {
    'use strict';

    myModule.service('myService', [
        function() {
            var serivce = this;
            var obj = null;

            service.func1 = function(a, b) {

            }

            service.func2 = function(c, d) {
                . . .
                return something;
            }

            var constructor = function(myObj) {
                obj = myObj;

                return service;
            }

            return constructor;
        }
    ]);
}(angular.module("myModule")))

(function(myModule) {
    'use strict';

    myModule.controller('myController', [
        '$scope', 'myService', function($scope, myService) {

            var service = myService($scope.someObj);

            $scope.someOtherObj = service.func2($scope.a, $scope.b);

        }
    ]);
}(angular.module("myModule")))

The only thing returned from the service is the constructor and then the service returns the rest of the service.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.