javascript - Angular JS 模块未连接到根模块

Question

我正在阅读 Angular 教程以更好地理解，但在将我的第二个模块连接到根模块时遇到了问题。我在 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 只有。

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