TypeScripting AngularJS 1.x - Define module

As we know developing and maintaining a large application in pure JavaScript is really tough. One of the reason is its dynamic typing or its not TypeSafe. If we want to change a variable or function name that's it. There is no way to identify where all it used until we run. Of course we can do text search. But its difficult from the tooling perspective. So people going to TypeScript to develop JavaScript applications.

AngularJS is a JavaScript framework for developing enormous apps. If we use TypeScript there, we get more advantage. Since any valid JavaScript is valid TypeScript, people tend to write JavaScript inside TypeScript files without leveraging TypeScript features. But it works. It will definitely give difficulties in long term when maintaining the code.This series is aimed at how we can leverage TypeScript to code AngularJS application in the TypeSafe (compile time) way

Defining module 

It is easy.to define an Angular module via JavaScript.

var app = angular.module("<moduleName>", []);

But lets see how can we do it via TypeScript. Please note this require TypeDefinitions for AngularJS. If we are using Visual Studio, this can be installed via 'angularjs.TypeScript.DefinitelyTyped' package

var app: ng.IModule = angular.module("<moduleName>", []);

Then we can register controllers, services and directives to it. by calling app.controller(), service(), directive() respectively. But is that an object oriented way? Absolutely not. We need to wrap it inside a class. Lets see one sample below.

module CountryApplication {
    "use strict";
    export class CountryModule {
        private static _constructor = (() => {
            var countryApp: CountryModule = new CountryModule();
            countryApp.setup();
        })();
        app: ng.IModule;
        constructor() {
            this.app = angular.module("CountryApp", []);
        }
        setup() {
            var app1: ng.IModule = angular.module("<moduleName>", []);
            this.setupServices();
            this.setupControllers();
            this.setupDirectives();
            this.setupRoutes();
        }
        private setupServices(): void {
            this.app.service("CountryMetaDataService", ["$http",'$q',CountryMetaDataService]);
        }
        private setupControllers(): void {
            this.app.controller("CountryController",
                ['$scope', '$http','CountryMetaDataService', CountryController]);
        }
        private setupDirectives(): void {
            this.app.directive
        }
        private setupRoutes(): void {
        }
    }
}

We can see the things we were doing in Angular with JavaScript. But here we are just organizing, as a class. This gives us one view about our services, directives, controllers and how they are related each other.

The downside of this is every time a developer adds a new controller or service they need to modify this file.

Links

https://kodeyak.wordpress.com/2014/02/14/angularjs-in-typescript-modules/