0

我正在尝试使用 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)

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

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（即“home”）。然而，hello-world 组件根本没有被渲染。我只是在检查器中看到了一个 hello-world 元素。它不会被 helloWorld.html 模板中的代码替换。它应该在 h1 元素中显示在 helloWorldCtrl 中定义的问候字符串。当我在 index.html 中使用它以及引导它自己的模块时，我让这个组件正常工作。现在我将它用作对主页模块的依赖，但是它不再工作了。有什么我可能在这里遗漏的想法吗？重构时我一定做了什么，但我看不出是什么。

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

最好的问候，马丁

4

1 回答 1

0

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

.component('helloWorld', helloWorldComponent)
于 2016-02-16T08:17:32.720 回答