0

我必须更改我们的 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", 的 angular-module 定义'component'尚未完成。

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

4

1 回答 1

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'
    });
});
于 2016-09-13T09:05:58.357 回答