如何初始化 - 使用 TypeScript 的 AngularJs 应用程序

Question

我有以下用 TypeScript 编写的 AngularJS 应用程序

我初始化应用程序的主应用程序：

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

还有我的控制器

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);
}

这行得通，但我对这个解决方案不太满意，因为在这里我必须在我的控制器本身中为我的应用程序注册控制器

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

如果有可能直接在“App”类中注册控制器就好了：

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

但这在这里不起作用，我从浏览器收到错误消息

“参数 'mainAppCtrl' 不是函数，未定义”

在我旧的普通 JS 角度控制器中，我有一个 mainApp，我在其中注册了所有控制器，例如

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

在我的控制器中，我只为 angular 注册了控制器名称：

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

上面显示的带有打字稿的狙击也可以做到这一点，或者这里的最佳实践是什么 - 我在网上搜索并找到了很多示例，但对于 controlerAs 语法和“module Name { class xyz }”这不是一个好的示例真的很有效。

Answer 1

TLDR; - 在您的主模块上导出一个静态函数，该函数将处理所有引导/初始化逻辑。对于子/子模块，导出一个静态只读属性，这将允许您构建一次并多次检索已定义的角度模块。

---

主模块

我采取了类似的方法，但它至少在模块定义中封装了额外的组件（控制器、服务）

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

appName.App.createModule(angular);

子模块

然后在其他内部模块中，我创建一个对该模块的静态引用，以说明它被多次引用...

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;
    }
  }
}

通过这种方法，我可以通过以下方式将我的 SubModule 注入主 Angular 模块：

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

注意：主模块可以定义为子模块以保持一致性，但我只引用/构建一次，所以我没有费心用本地静态实例缓存它。