迁移 Angular 1 应用程序以使用模块加载器时出现加载顺序问题

Question

我必须更改我们的 Angular 1 应用程序之一以使用模块加载器（SystemJs），但我遇到了加载顺序问题，我不确定如何正确解决它。

这就是我加载应用程序的方式（/app.js）：

import angular from 'angular';
import './component/module';

angular.module('myApp',['component']);

// bootstrapping stuff...

然后是模块定义，其中包含来自组件的路由内容（/component/module.js）：

import angular from 'angular';
import 'angular-route';
import './CompController';

export default angular.module('component',['ngRoute']);

angular.module('component').config(function($routeProvider){
    $routeProvider.when('foo/bar',{
        templateUrl:'component/template.html',
        controller:'CompController'
    });
});

以及来自组件的控制器（/component/CompController.js）：

import angular from 'angular';

export default angular.module('component').controller('CompController',function(){
  // do something useful here...
});

当我运行此程序时，出现以下错误：

未捕获（承诺中）错误：(SystemJS) [$injector:nomod] 模块 “组件”不可用！您要么拼错了模块名称，要么 忘了加载它。如果注册模块，请确保指定 依赖项作为第二个参数。

这是在

"CompController"

中抛出的，因为当它加载时，作为

"component/module"

的依赖项，

'component'

的角度模块定义尚未完成。

有人可以解释一下在模块可用后如何正确初始化控制器吗？我犯了一些基本错误吗？

Answer 1

好吧，我有解决方案，而且非常简单：我必须重构 CompController.js 以仅导出控制器函数（纯 JavaScript 函数）而不是控制器对象，并将其传递到模块中的 Angulars Controller() 函数中.js，模块初始化后。

CompCotroller.js：

export default function(){ // <= export only the pure function
    // do something useful here...
}

模块.js：

import angular from 'angular';
import 'angular-route';
import CompController from './CompController'; // <= load it...

export default angular.module('component',['ngRoute']);

angular.module('component').controller('CompController', CompController); // <= ...and create the controller here. That's it :)

angular.module('component').config(function($routeProvider){
    $routeProvider.when('foo/bar',{
        templateUrl:'component/template.html',
        controller:'CompController'
    });
});