4

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

});

控制器.js：

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

索引.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

4

2 回答 2

1

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

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

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

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

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

于 2016-07-08T13:15:07.583 回答
0

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

于 2016-07-07T22:05:18.953 回答