我正在通过角度教程来更好地理解,我遇到了将我的第二个模块连接到根模块的问题.我在home.template.html中添加了一个名为“phone-list”的模板.当我将模块名称更改为根模块时,它会显示列表.如果我使用不同的名称“phoneList”并创建模块phoneList.module.js然后尝试将其连接到名为app.module.js的根模块,则不起作用
我的代码:https://plnkr.co/edit/42GDb6nhr4zB3EAcd0od?p=preview
ROOT MODULE -
angular.module('myApp', [
// ...which depends on the `phoneList` module
'phoneList'
]);
PHONELIST MODULE -
angular.module('phoneList', []);
PHONELIST COMPONENT-
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
}
});
最佳答案 您的app.config.js正在重新注册myApp模块并覆盖app.module值,因为它使用的是setter语法(angular.module(‘myApp’,[…]))而不是getter语法( angular.module( ‘对myApp’)).
请注意,文件加载的顺序在这里很重要,只有加载特定模块的第一个文件才应该设置模块,加载模块的所有其他文件应该只得到.
解决此问题的最简单方法是将ui-router依赖项移至app.module.js文件,并使用app.config.js中的getter方法.
app.module.js:
'use strict';
angular.module('myApp', ['ui.router',
// ...which depends on the `phoneList` module
'phoneList'
]);
app.config.js:
angular.module('myApp')
.config(function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.template.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.template.html'
});
});
工作样本:https://plnkr.co/edit/tCA2ov0Vux2AxTSqNAEY?p=preview