Integrating native JavaScript classes in an Angular app

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)?

Answers:

Answer

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

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.