组件设计中的模板不加载
我试着做一个单一的页面应用程序，同时使用组件，因为我的公司将转向使用组件在未来，我试图遵循角-语音教程。我遇到的问题是，由于某些原因，在我的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'])；
home-page.template.html：
<div>
<p>{{message}}</p>
</div>home-page.module.js：
angular.module('homePage', []);home-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”目录中。连接到角-电话：03
回答 2
Stack Overflow用户
发布于 2016-07-08 13:15:07
所以我以前的解决方案仍然是错误的。真正的解决方案是，我的控制器重新定义了'home‘模块，因为我有方括号。这是旧的控制器：
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);因此，正如您所看到的，当我在模块定义中有方括号时，我将重新定义模块，从而覆盖模块的所有先前定义。当我去掉这些括号时：
angular.module('homePage').controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);一切都表现得很好。所以问题是，我只是用控制器制作了一个新模块，所以它没有模板可以推送到视图以进行更新。
Stack Overflow用户
发布于 2016-07-07 22:05:18
您似乎已经将组件命名为“home”，但在模板中使用的是“主页”。
https://stackoverflow.com/questions/38255058
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号