Javascript Angular JS模块未连接到根模块

我正在阅读angular教程以获得更好的理解，我遇到了将第二个模块连接到根模块的问题。我在home.template.html中添加了一个名为“电话列表”的模板。当我将模块名称更改为根模块时，它将显示列表。如果我使用不同的名称“phoneList”，创建一个模块phoneList.module.js，然后尝试将其连接到名为app.module.js的根模块，那么它将不起作用

我的代码：

---

您的app.config.js正在重新注册

myApp

模块并覆盖app.module值，因为它使用的是setter语法（

angular.module（'myApp'，[…]）

），而不是getter语法（

angular.module（'myApp'）

）

请注意，文件加载的顺序在这里很重要，只有加载特定模块的第一个文件应该设置模块，加载该模块的所有其他文件应该只获取

解决此问题的最简单方法是将

ui路由器

依赖项移动到app.module.js文件中，并改用app.config.js中的getter方法

app.module.js:

“严格使用”；
angular.module（'myApp'，['ui.router'，
//…这取决于“电话列表”模块
“电话列表”
]);

app.config.js:

angular.module（'myApp'）
.config（函数（$stateProvider）{
$stateProvider
.州（“家”{
url:“/home”，
templateUrl:'home.template.html'
})
.state（'about'{
url:“/关于”，
templateUrl:'about.template.html'
});
});

---

工作示例：

您是否尝试过为

模块

和

组件

使用不同的名称？谢谢，这解决了问题。我也很感激你的解释，现在更有意义了！

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.'
        }
      ];
    }
  });