组件设计下未加载模板

Question

我正在尝试在使用组件的同时制作单页应用程序，因为我的公司将来会转向使用组件，并且我正在尝试遵循 angular-phonecat 教程。我遇到的问题是，出于某种原因，在我的 app.config.js 文件中，无法识别主页模板（主页部分），我无法弄清楚原因。如果我用 'hello' 的简单字符串替换它，它显示得很好，所以它必须在我的组件中的某个地方，但我无法追踪它为什么不识别它。

相关代码：

app.config.js:

angular.
module('newSpa').
config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider){
        $locationProvider.hashPrefix('!');

        $routeProvider.
            when('/home',{
            template: '<home-page></home-page>'
        }).
            when('/contacts', {
            template:'<contacts></contacts>'
        }).
            otherwise('/home');
    }]);

app.module.js:

angular.module('newSpa', [
'ngRoute',
'homePage',
'contacts'

]);

家-page.template.html:

<div>
    <p>{{message}}</p>
</div>

家-page.module.js:

angular.module('homePage', []);

家-page.component.js:

angular.module('homePage').component('homePage', {
templateUrl: 'home-page/home-page.template.html',
controller: 'homeCtrl'

});

controllers.js:

angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="newSpa">
<head>
    <meta charset="UTF-8">
    <title>SPA Contacts</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="app.module.js"></script>
    <script src="app.config.js"></script>
    <script src="home-page/home.module.js"></script>
    <script src="home-page/home.component.js"></script>
    <script src="contacts/contacts.module.js"></script>
    <script src="contacts/contacts.component.js"></script>
    <script src="controllers/controllers.js"></script>
</head>
<body>

<div ng-view></div>

</body>
</html>

我的app.config.js文件在根"app"目录下，我的home文件都在“/app/home-page”目录下。 Link 到 angular-phonecat：https://docs.angularjs.org/tutorial/step_03

Answer 1

您似乎将组件命名为 'home'，但在模板中使用的是 'home-page'。

Answer 2

所以我之前的解决方案仍然不正确。真正的解决方案是我的控制器正在重新定义 'home' 模块，因为我有方括号。这是旧控制器：

angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);

所以正如你所看到的，当我在模块定义中有方括号时，我正在重新定义模块，从而覆盖模块以前的所有定义。当我删除那些括号时：

angular.module('homePage').controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);

一切正常显示。所以问题是我正在制作一个只有控制器的新模块，所以它没有推送到视图进行更新的模板。

组件设计下未加载模板

Template not loading under component design

javascript

angularjs

angularjs-components