角JS模块不连接到根模块

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', [...])），而不是吸气语法（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