Question

我正在阅读角度教程以获得更好的理解，并且我遇到了将我的第二个模块连接到根模块的问题。我在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.'
        }
      ];
    }
  });

Answer 1

您的app.config.js 重新注册您的myApp模块并覆盖app.module值，因为它使用的是setter语法（angular.module('myApp', [...])）而非比getter语法（angular.module('myApp')）。

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

解决此问题的最简单方法是将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

Angular JS模块未连接到根模块

1 个答案: