gpt4 book ai didi

javascript - 组件设计下未加载模板

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:28:10 25 4
gpt4 key购买 nike

我正在尝试在使用组件的同时制作单页应用程序,因为我的公司将来会转向使用组件,并且我正在尝试遵循 angular-phonecat 教程。我遇到的问题是,出于某种原因,在我的 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');
}]);

应用程序模块.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”根目录下,我的 home 文件都在“/app/home-page”目录下。链接到 angular-phonecat:https://docs.angularjs.org/tutorial/step_03

最佳答案

所以我之前的方案还是不对。真正的解决方案是我的 Controller 正在重新定义“home”模块,因为我有方括号。这是旧 Controller :

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

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

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

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

关于javascript - 组件设计下未加载模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38255058/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com