Using modules in Angular way

You can use a TypeScript module as it is in an Angular app. Just load and it use it right away.

However, if you want it done in Angular way, it's better. It makes the code more testable and the module dependencies on your code will be more obvious.

Here's an example. /shared/utilities/StringLib.ts

///<reference path="../../typings/node/node.d.ts"/>
///<reference path="../../typings/angularjs/angular.d.ts"/>

var isNode = typeof exports !== 'undefined' && this.exports !== exports;

module utilities.StringLib {

    export function isNumeric(n: string) : boolean {
        return !isNaN(parseFloat(n)) && isFinite(<any>n);
    }

    export function replaceAll(src: string, search: string, replacement: string) : string {
        return src.split(search).join(replacement)
    }
}

if (isNode) {
    module.exports = utilities.StringLib;
}
else {
    angular.module('utilities.stringLib',[])
        .factory('stringLib', () => {
            return utilities.StringLib;
        });
}

Then on the ocLazyLoadProvider's config add this:

{
    name: 'utilities.stringLib.files',
    files: ['/shared/utilities/StringLib.js']
}

To use, indicate the module name above on the module's dependency array parameter. On the last element of the array, nest an array, put the name of the list of file(s) of the module(s) that are being lazy-loaded. ocLazyLoad makes this lazy-loading possible.


The typeof operator for utilities.StringLib enables the autocomplete functionality for TypeScript on your IDE.


Note, put the <any> typecast to make the TypeScript compiler stop complaining of incompatible parameter, this lazy-loading mechanism is an extension of ocLazyLoad to Angular, and is not included on Angular's TypeScript definition file.

///<reference path="../../../shared/utilities/StringLib.ts"/>
///<reference path="../../../typings/angularjs/angular.d.ts"/>

module App.Product {

    export class Controller {
    
        constructor(public stringLib: typeof utilities.StringLib) {
        
            console.log(this.stringLib.isNumeric("1234"));
            console.log(this.stringLib.isNumeric("1234b"));        
        }
    
    }

}    
    

angular
    .module('niceApp', <any>
        [
            'utilities.stringLib',

            [                
                'utilities.stringLib.files'                
            ]
        ])
    .controller('ProductController', [
        'stringLib',
        
        App.Product.Controller
    ]);