Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I define an AngularJS factory using TypeScript class that has constructor parameters

I want to write a TypeScript class that gets a "prefix" parameter in the constructor, this class also needs access to a LogService inject.

Using plain JavaScript you should do it like this:

angular.module('myModule', []).factory('LogWithPrefixFactory', ['LogService', function(LogService) {
    var LogWithPrefixFactory = function(prefix) {
        this.prefix = prefix;
    }

    LogWithPrefixFactory.prototype.log = function(txt) {
        // we have access to the injected LogService
        LogService.log(this.prefix, txt);
    }

    return LogWithPrefixFactory;
}]);

So when you inject this factory to a controller, you can initiate it many times like this (No need to inject the LogService):

angular.module('myModule').controller('Ctrl', function(LogWithPrefixFactory) {
    var foo = new LogWithPrefixFactory("My PREFIX");
    var foo = new LogWithPrefixFactory("My OTHER PREFIX");
}

How would you define this Factory in a TypeScript class? TypeScript classes can not be defined inside functions... This class should have access to the LogService, but it can't get it in one of the injects.

like image 258
gilamran Avatar asked Jun 05 '14 09:06

gilamran


People also ask

How do you define a function in class TypeScript?

TypeScript defines a constructor using the constructor keyword. A constructor is a function and hence can be parameterized. The this keyword refers to the current instance of the class. Here, the parameter name and the name of the class's field are the same.

What is constructor in AngularJS?

In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. Controllers can be attached to the DOM in different ways.

What is$ inject in AngularJS?

Dependency Injection in AngularJS can be defines as the software design pattern which defines the way the software components are dependent on each other. AngularJS provides a set of components that can be injected in the form of dependencies such as factory, value, constant, service, and provider.

How does dependency Injection work in AngularJS?

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The AngularJS injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.


1 Answers

The following is one way to achieve this:

class LogWithPrefixFactory {
    static LogService;
    constructor(prefix) {
        this.prefix = prefix;
    }

    log = function(txt) {
        // we have access to the injected LogService
        LogService.log(this.prefix, txt);
    }
}

angular.module('myModule', []).factory('LogWithPrefixFactory', ['LogService', function(LogService) {
    LogWithPrefixFactory.LogService = LogService;
    return LogWithPrefixFactory;
}]);


angular.module('myModule').controller('Ctrl', function(LogWithPrefixFactory) {
    var foo = new LogWithPrefixFactory("My PREFIX");
    var foo = new LogWithPrefixFactory("My OTHER PREFIX");
});

Rational: You effectively want a static property in a the LogWithPrefixFactory (using a closure in JS) , and you want it to come from Angular.

like image 166
basarat Avatar answered Oct 11 '22 22:10

basarat