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

我已经用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 angular控制器中，我有一个mainApp，在那里我注册了所有控制器，比如

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

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

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

上面所示的带有typescript的snipes是否也可以，或者这里的最佳实践是什么？我在网上搜索了很多示例，但对于controlerAs语法和“module Name{class xyz}”来说，这不是一个很好的示例，而“module Name{class xyz}”确实有效

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

通过这种方法，我可以通过以下方式将子模块注入主角度模块：

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

---

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

代码的运行顺序是什么？

MainAppCtrl

类的初始化需要在

MainApp.App

初始化运行之前运行。第一个代码与主模块配合使用效果很好，但第二个代码与我尝试过的子模块配合使用，这里Vs Debugger告诉我“Module”是不是主文件没有引用子模块？你可以看看我是如何在这里设置一个TypeScript AngularJS项目的：我通过gulp而不是通过可视化研究来创建我的TypeScript这里是我当前的SLN：我已经在你的解决方案中实现了它，并将其签入-但它不起作用，仍然是相同的错误。在每个文件中都有所有引用标记是重要的还是唯一可选的？解决了问题-我为文件添加了正确顺序的a_reference.ts-