How to initialize - AngularJs app with TypeScript

Question

I've the following AngularJS App written with TypeScript

The Main App where I initalize the App:

module MainApp {
   export class App {
      public static Module : ng.IModule = angular.module("mainApp", [])
   }
}

And my controller

module MainApp {
   export class Person {
     public firstName: string;
     public lastName: string;
   }

   export  interface IMainAppCtrl {

   }

   export class MainAppCtrl implements IMainAppCtrl {
      public person : Person;
      constructor() {
          this.person = new Person();
          this.person.firstName = "Vorname";
          this.person.lastName = "Nachname";
      }
  }

  MainApp.App.Module.controller("mainAppCtrl", MainAppCtrl);
}

Thats working, but I am not very happy with this solution, because here I have to register the controller for my App in my controller itself

MainApp.App.Module.controller("mainAppCtrl", MainAppCtrl);

It would be nice If ther is a possiblity to register the controller in the "App" class directly like:

public static Module : ng.IModule = angular.module("mainApp", []).controller("mainAppCtrl", MainAppCtrl);

but thats not working here i get the error Message from the browser

"Argument 'mainAppCtrl' is not a function, got undefined"

in my old plain JS angular controllers I had an mainApp where I've registered all my Controllers like

angular.module("app.main", [
    "ui.router",
    "ngSanitize",
    "DirectiveTestsCtrl",
    ....
]);

and in my controller i've only registerd the controller name for angular:

angular.module("DirectiveTestsCtrl", [])
       .controller("DirectiveTestsCtrl", function () { ... });

is this also possible with the above shown snipes with typescript or what is best practise here - I've searched the web and found many examples but not a good one for controlerAs syntax and with "module Name { class xyz }" which was really working.

Answer 1

TLDR; - Export a static function on your main module that will handle all the bootstrapping/initialization logic. For child/sub modules export a static readonly property which will allow you to build once and retrieve multiple times a defined angular module.

---

Main Module

I have taken a similar approach, but it at least encapsulates the additional of components (controllers, services) inside the module definition

module appName {
  export class App {
    static createModule(angular: ng.IAngularStatic) {
      angular.module('moduleName', ['ngRoute'])
          .controller('refCtrl', ReferencedControllerClass)
          .service('dataService', DataService);
    }
  }
}

appName.App.createModule(angular);

Child Module(s)

Then in other internal modules I create a static reference to the module to account for it being referenced more than once...

module appName {
  export class SubModuleName {
    private static _module:ng.IModule;

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

      this._module = angular.module('subModuleName', []);

      this._module.controller('SomeCtrl', SomeController);

      return this._module;
    }
  }
}

With this approach I can inject my SubModule into the main angular module via:

angular.module('moduleName', ['ngRoute', appName.SubModuleName.module.name])

Note: The main module could be defined as the child one's are for consistency, but I am only ever referencing/building it once, so I didn't bother caching it with a local static instance.