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

2023年7月15日 270次阅读

我正在通过角度教程来更好地理解,我遇到了将我的第二个模块连接到根模块的问题.我在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

点赞