How to organize helper function with TypeScript and AngularJs

Question

I am writing my web apps with AngularJs and TypeScript. That works great, but I've a conceptual problem. In most cases I use AngularJs Services to encapsulate some functionality like a typed abstraction for localstorage.

But I am not sure how to handle some simple helper functions, create a simple helper service with AngularJs or simple class with TypeScript whats the best way in a AngularJs project.

I would also reuse this helper functions in my other AngularJs Projects

Example implemented as service at the moment:

module App.Views.Shared {

 export interface IPasteSrv {
    getPastedText($pasteEvent): string;
 }

 export class PasteSrv implements IPasteSrv {
    static $inject = [];

    constructor() { }

    public getPastedText($pasteEvent): string {
        var pastedText = "";

        if (window.clipboardData) { //IE
            pastedText = window.clipboardData.getData('Text');
        } else if ($pasteEvent.originalEvent.clipboardData) {
            try {
                pastedText = $pasteEvent.originalEvent.clipboardData.getData('text/plain');
            } catch (ex) {
                pastedText = undefined;
            }
        }

        if (pastedText) {
            //verhindern das der Text im Model eingefügt wird.
            $pasteEvent.preventDefault();
        }

        return pastedText;
    }

    //#region Angular Module Definition
    private static _module: ng.IModule;

    public static get module(): ng.IModule {
        if (this._module) {
            return this._module;
        }

        this._module = angular.module('pasteSrv', []);
        this._module.service('pasteSrv', PasteSrv);
        return this._module;
    }
    //#endregion
 }
}

AngullarJs service is for this purpose only. Keep your reusable code inside service use them anywhere by just injecting them. — Ved
– Ved, Commented Jan 5, 2016 at 9:16
Show us an example so we can understand what you want. Seems like there is a very easy and obvious solution, but maybe your problem is kind of exotic... — hgoebl
– hgoebl, Commented Jan 5, 2016 at 9:23

Lodewijk Bogaards · Accepted Answer · 2016-01-05 20:51:52Z

It depends on what you want to achieve. Usually I make a distinction between behavior that is generic and behavior that is common. Generic, broadly speaking, means sharable between projects and common means sharable throughout parts of your project.

What you qualify as simple helper functions I would probably qualify as generic. That code should not even have to depend on Angular and don't need to share state in any form. Typescript modules with exported functions would be a way to go. Of course an entire framework like Angular qualifies as generic as well, but since your question is a bit vague I'll just simply state that framework building requires a different perspective on code. The user is now another coder and you don't know what he/she might want to do with your framework in the future (the open/closed principle of the solid principles comes to mind here).

Your getPastedText function is generic; I would thus simply put it in a Clipboard module and export that function. There is no shared state, so there is no need for classes. There is no need to involve Angular, so no need to involve angular modules or services. Keep it simple.

Collectives™ on Stack Overflow

How to organize helper function with TypeScript and AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related