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

Answer 1

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

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

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

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

一切都正常显示。所以问题是我只使用控制器创建了一个新模块，因此没有模板可以推送到视图进行更新。

Answer 2

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

模板未在组件设计下加载

2 个答案: