模板未在组件设计下加载答案

【问题标题】：Template not loading under component design模板未在组件设计下加载
【发布时间】：2016-11-10 08:06:44
【问题描述】：

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

相关代码：

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'

]);

主页.template.html：

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

主页.module.js：

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

主页.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”目录中，而我的主文件都位于“/app/home-page”目录中。 angular-phonecat 链接：https://docs.angularjs.org/tutorial/step_03

【问题讨论】：

控制台错误？
没有错误，这就是我无法弄清楚的原因。一切正常，只是模板没有被识别。

标签： javascript angularjs angularjs-components

【解决方案1】：

您似乎已将组件命名为“主页”，但在模板中使用的是“主页”。

【讨论】：

是的，这是我在一天结束时所做的剩余工作。为更正而更新
无法编辑之前的评论，所以我会补充一点，它仍然无法在该命名空间下工作。
这些事情总是发生在我身上。我的疏忽。

【解决方案2】：

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

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

如您所见，当我在模块定义中有方括号时，我正在重新定义模块，从而覆盖该模块的所有先前定义。当我删除这些括号时：

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

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

【讨论】：