AngularJS Value in TypeScript

Question

I want to convert an AngularJS Value to TypeScript.

How can i achieve that?

AngularJS

angular.module('your_app').value('cgBusyDefaults',{
    message:'Loading Stuff',
    backdrop: false,
    templateUrl: 'my_custom_template.html',
    delay: 300,
    minDuration: 700,
    wrapperClass: 'my-class my-class2'
});

I tried to create a Class with TypeScript and initialize that class in the definition of the module, but I wasn't successful with that approach.

TypeScript

export class CgBusyDefaults {

    private _message: string;
    private _backdrop: boolean;
    private _templateUrl: string;
    private _delay: number;
    private _minDuration: number;
    private _wrapperClass: string;

    constructor() {
        this._message = 'Loading Stuff';
        this._backdrop = true;
        this._templateUrl = 'app/administration/partials/administration-busy.html';
        this._delay = 300;
        this._minDuration = 700;
        this._wrapperClass = 'dv-busy';
    }

    get wrapperClass(): string {
        return this._wrapperClass;
    }

    set wrapperClass(value: string) {
        this._wrapperClass = value;
    }

    get minDuration(): number {
        return this._minDuration;
    }

    set minDuration(value: number) {
        this._minDuration = value;
    }

    get delay(): number {
        return this._delay;
    }

    set delay(value: number) {
        this._delay = value;
    }

    get templateUrl(): string {
        return this._templateUrl;
    }

    set templateUrl(value: string) {
        this._templateUrl = value;
    }

    get backdrop(): boolean {
        return this._backdrop;
    }

    set backdrop(value: boolean) {
        this._backdrop = value;
    }

    get message(): string {
        return this._message;
    }

    set message(value: string) {
        this._message = value;
    }

}

angular.module('your_app').value('cgBusyDefaults', new CgBusyDefaults());

Is it possible to define Values with TypeScript? Or maybe I'm just missing something

The JS code should work with TS; and the TS code should also work! (I find the getters/setters redundant, is there a reason for using them? But that is irrelevant with the question.) What exactly does go wrong? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Nov 23, 2015 at 12:56
This should work, but are you testing the TS or JS file. Becouse you can not run the TS file, you need to run the JS file created by TS. — Zorken17
– Zorken17, Commented Nov 23, 2015 at 12:59

MartyIX · Accepted Answer · 2015-11-23 13:38:05Z

4

What does happen when you use the following TypeScript?

export class CgBusyDefaults {

    public message: string;
    public backdrop: boolean;
    public templateUrl: string;
    public delay: number;
    public minDuration: number;
    public wrapperClass: string;

    constructor() {
        this.message = 'Loading Stuff';
        this.backdrop = true;
        this.templateUrl = 'app/administration/partials/administration-busy.html';
        this.delay = 300;
        this.minDuration = 700;
        this.wrapperClass = 'dv-busy';
    }
}

angular.module('your_app').value('cgBusyDefaults', new CgBusyDefaults());

I had an issue once when I used getters&setters instead of normal properties. It's just a hunch.

edited Nov 23, 2015 at 13:38

answered Nov 23, 2015 at 13:04

MartyIX

28.8k33 gold badges143 silver badges218 bronze badges

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

1 Comment

Tobias Timm Over a year ago

Worked for me, the getters&setters made the difference. Thx a lot

basti1302 · Accepted Answer · 2017-04-25 07:53:23Z

Late to the party, but if you would want to directly convert the JS code to TypeScript, the class is not necessary. As an alternative, you can do this:

export interface CgBusyDefaults {
    message: string;
    backdrop: boolean;
    templateUrl: string;
    delay: number;
    minDuration: number;
    wrapperClass: string;
}

export const cgBusyDefaults: CgBusyDefaults = {
    message:'Loading Stuff',
    backdrop: false,
    templateUrl: 'my_custom_template.html',
    delay: 300,
    minDuration: 700,
    wrapperClass: 'my-class my-class2'
};

angular.module('your_app').value('cgBusyDefaults', cgBusyDefaults);

Note that in this case you need to omit the new call in when registering the value with AngularJS, instead you simple use the exported object literal directly.

The interface declaration is necessary if you want to have a type definition for your AngularJS value, otherwise it can be omitted (the const export would be export const cgBusyDefaults: any = { ... } in this case).

The class solution has the benefit of providing you the with type information implicitly, but having a class with a constructor for a thing that is meant to be a singleton value feels like a mismatch to me when JS/TS have the concept of object literals that perfectly match AngularJS values.

Collectives™ on Stack Overflow

AngularJS Value in TypeScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related