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
– elclanrs, Commented Jan 30, 2014 at 8:46
@elclanrs If I understood services correctly, all Angular services are application singletons (see AngularJS: 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
– sp00m, Commented Jan 30, 2014 at 8: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
– elclanrs, Commented Jan 30, 2014 at 8:57

a-d · Accepted Answer · 2014-01-30 09:00:47Z

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, 2014 at 9:00

a-d

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user680786 Over a year ago

then call it factory, if you need new instances each time :)

elclanrs · Accepted Answer · 2014-01-30 09:07:38Z

0

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

answered Jan 30, 2014 at 9:07

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Collectives™ on Stack Overflow

Integrating native JavaScript classes in an Angular app

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related