简单的角度组件不会显示任何内容

时间:2016-04-25 14:18:58

标签: javascript angularjs components

我正在尝试实现一个非常简单的Angular组件。我希望它为main-windows标签输出“Hello World”。不幸的是,它没有显示任何内容。

我可以确认,webpack工作正常。我可以在bundle.js中查看我的所有文件,但没有错误。

的index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Test Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="prj">

<main-window></main-window>

<script src="bundle.js"></script>

</body>
</html>

index.js:

import 'expose?$!expose?jQuery!jquery';
import angular from 'angular';
import 'bootstrap-webpack';
import './mystyle.css';
import './mainWindow.js'

var ngModule = angular.module('prj', []);

mainWindow.js:     从'angular'导入角度;

angular.module('prj', []).component('mainWindow', {
        template: '<h1>Hello World</h1>'
    }
);

1 个答案:

答案 0 :(得分:1)

请尝试如下所示。

index.js

var ngModule = angular.module('prj', []);

mainWindow.js

ngModule.component('mainWindow', {
        template: '<h1>Hello World</h1>'
    }
);