Integrating native JavaScript classes in an Angular app

Question

I have a native JavaScript class:

var Holder = new function(elements) {

    this.elements = elements;

    this.anyFunction() {
        // use of this.elements
    };

};

How to use it in an Angular-way? For example, if I would like to use:

.controller('AnyController', ['Holder',
function (Holder) {

    var elements = [
        {id: 1, label: 'foo'},
        {id: 2, label: 'bar'}
    ];

    $scope.holder = new Holder(elements);

}])

How should I register my Holder class then? What are the options (if any)?

In parallel, is it that bad to use native JavaScript classes in an Angular app (i.e. without integrating it within the framework)?

Why not create it as a service? The `.service` method can take a class. Check out tutorials on how to do it with Coffeescript where they uses classes, then look at the compiled JavaScript. — elclanrs, Jan 30 '14 at 08:46
@elclanrs If I understood services correctly, *all Angular services are application singletons* (see [AngularJS: Creating Services](http://docs.angularjs.org/guide/dev_guide.services.creating_services), last section: "Services as singletons"), while I need a new instance each time it is injected in a parameter. Am I wrong? — sp00m, Jan 30 '14 at 08:50
As I understand it, a factory is a singleton, but a factory can generate a class that can create instances. So the factory would return a reference to the constructor when you inject it, or a function that calls the constructor (without using `new`). But I don't know what's good practice on this TBH. — elclanrs, Jan 30 '14 at 08:57

score 3 · Accepted Answer · answered Jan 30 '14 at 09:00

3

You could return a class with a factory

    .factory('Holder', function() {
        return (function (){
            this.foo = foo;
            this.bar = bar;
        });
    });

Now to use it

.controller('AnyController', ['Holder', function (Holder) {
    var holder = new Holder();
}]);

EDIT Use a factory instead of a service, as suggested in the comments

answered Jan 30 '14 at 09:00

axelduch

10,769
2
31
50

2

then call it factory, if you need new instances each time :) – OZ_ Jan 30 '14 at 09:02

score 0 · Answer 2 · answered Jan 30 '14 at 09:07

As I understand it, a factory is a singleton, but a factory can generate a class that can create instances. So the factory would return a reference to the constructor when you inject it, or a wrapper function around the constructor to use it without using new:

.factory('Holder', function() {
  function Holder(elements) {
    this.elements = elements; 
  }
  Holder.prototype.get = function() {
    return this.elements;
  };
  return function(elements) {
    return new Holder(elements);
  };
})

.controller('Main', function($scope, Holder) {
  var elements = [
    {id: 1, label: 'foo'},
    {id: 2, label: 'bar'}
  ];
  $scope.elements = Holder(elements).get();
});

Integrating native JavaScript classes in an Angular app

2 Answers2

Linked