混合Angular 1.x + Angular 6应用程序,包含Angular 1.x中的vanilla JS和TS文件

Question

当AngularJS文件是JS和TS时,我正在尝试构建混合应用程序.我似乎无法添加到JS控制器的路由.

我依赖以下示例并执行以下操作:

const statesConfigBlock = ['$stateProvider', $stateProvider => {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'app/components/layout/mainView.html',
    controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

虽然我有一个mainCtrl.js定义为的文件:

var app = angular.module('myApp', []);

(function(app) {
  'use strict';

  app.controller('mainController', [
      function () {
        console.log("blah");

      }]);
})(app);

当我运行应用程序时,我得到:

名称为"mainController"的控制器未注册

但是当我在控制台中运行时,我确实看到了它:

angular.module('myApp')._invokeQueue.filter(function(el){
  return el[0] === "$controllerProvider";
}).map(function(el){
  return el[2]["0"];
});

Answer 1

好吧，我想我成功了。这可能不是最好的解决方案，但就是这样。

首先，我创建了一个 js 文件来保存模块的声明：

appDependencies = [];
app = angular.module('myApp', appDependencies);

所有 Angular 1.x 控制器和服务都使用全局变量，app如下所示：

(function(app) {
  'use strict';

  app.controller('mainController', [
      function () {
        console.log("blah");

      }]);
})(app);

最后，Angular 1.x 模块 ts 文件使用全局app并向其添加依赖项：

...

declare const app: any;
declare var appDependencies: any;

export const appModuleAngularJS = app;

angular.forEach([
  uiRouter, upgradeModule.name
], module => {
  appDependencies.push(module);
});

...

const statesConfigBlock = ['$stateProvider', $stateProvider => {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'app/components/layout/mainView.html',
    controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

...

现在，文件中 js 导入的顺序index.html非常重要。减速app文件应该首先出现，然后是所有 Angular 1.x 控制器和服务，最后是转换为 js 文件的 *.ts 文件。

这个解决方案对我有用，但我非常乐意阅读更好的解决方案。

干杯!