Javascript 组件设计下未加载模板_Javascript_Angularjs_Angularjs Components

Javascript 组件设计下未加载模板

javascript angularjs

Javascript 组件设计下未加载模板,javascript,angularjs,angularjs-components,Javascript,Angularjs,Angularjs Components,我正在尝试在使用组件的同时制作一个单页应用程序，因为我的公司将来将转向使用组件，我正在尝试遵循angular phonecat教程。我遇到的问题是，由于某种原因，在我的app.config.js文件中，主页的模板没有被识别（主页部分），我不知道为什么。如果我用一个简单的“hello”字符串替换它，它会显示得很好，所以它必须在我的组件中的某个地方，但我无法找到为什么它不能识别它相关代码： app.config.js： angular. module('newSpa'). config(['$lo

我正在尝试在使用组件的同时制作一个单页应用程序，因为我的公司将来将转向使用组件，我正在尝试遵循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');
    }]);

]))

home-page.template.html：

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

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”目录中。链接到angular phonecat:

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

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

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

如您所见，当我在模块定义中使用方括号时，我将重新定义模块，从而覆盖模块之前的所有定义。当我移除这些括号时：

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

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

控制台中出现错误？没有错误，这就是为什么我无法解决这个问题。一切都很好，只是模板没有被识别。是的，这是我在一天结束时处理的剩余内容。为更正而更新无法编辑以前的注释，因此我要补充的是，它在该命名空间下仍然不起作用。这些事情总是发生在我身上。我的疏忽。

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

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