Question

我正在尝试使用jspm，systemjs和angular 1.5为应用创建新的设置。我有一个或多或少像这样的结构：

src
  common (pieces common to entire app, some services, images, etc)
  components (separate components of the app that have their own js, scss, html, etc.)
  pages (views that are coupled to routes. They may contain components or common code)

还有更多，但这应该足够了。我用一些简单的角度模块测试整个设置。我有一个app模块，它将主页模块作为依赖项：

import angular from 'angular';
import home from 'pages/home/home';
// import other common stuff here. Directives, services, etc. that are shared over different pages.
// import other pages here

angular.module('app', [home]);

angular.bootstrap(document.getElementById('app'), ['app']);

主页模块又有一个带角度分量的模块作为依赖：

import angular from 'angular';
import helloWorldComponent from './helloWorldComponent';
import helloWorldCtrl from './helloWorldCtrl';

let helloWorld = angular.module('helloWorld', []);

helloWorld.controller('helloWorldCtrl', helloWorldCtrl)
    .component('components.helloWorld', helloWorldComponent);

export default helloWorld.name;

helloWorldCtrl的代码：

class HelloWorldCtrl {
    constructor () {
        this.greeting = 'Welcome to ' + this.name + "'s world!";
    }
}

HelloWorldCtrl.$inject = []; // Inject dependencies here

export default HelloWorldCtrl;

对于helloWorldComponent：

const helloWorldComponent = {
    bindings: {
        name: '@'
    },
    controller: 'helloWorldCtrl as helloWorld',
    templateUrl: '/components/helloWorld/helloWorld.html'
};

export {helloWorldComponent as default};

嗯，我有点工作，但并不完全。页面加载，但我没有看到组件模板的内容（helloWorld.html）。我看到主页的模板内容home.html：

<p>{{home.name}}</p>
<div id="im-hello-world">
    <hello-world name="Daan"></hello-world>
</div>

现在显示homeCtrl中给出的home.name（＆＃39; home＆＃39;）。但是，hello-world组件根本不会呈现。我只是在检查器中看到一个hello-world元素。它不会被helloWorld.html模板中的代码替换。它应该在h1-element中显示helloWorldCtrl中定义的greeting-string。当我在index.html中使用它并且当我引导它自己的模块时，我有这个组件工作。现在我已经将它用作对主页模块的依赖，但它不再适用。我在这里可能缺少什么想法？重构时我必须做点什么，但我无法发现什么。

如果我需要提供更多代码，请告诉我。

祝你好运，马亭

Answer 1

来自@ShuheiKagawa的评论很有意思。我不得不将组件的名称更改为helloWorld（因为我在插入组件的html模板中使用hello-world），所以：

.component('helloWorld', helloWorldComponent)

使用模块b中模块a的1.5角分量（使用ES2015）

1 个答案: