角度のあるJSモジュールがルートモジュールに接続していない

Question

角度チュートリアルを理解していたら、2番目のモジュールをルートモジュールに接続する問題が発生しました。 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は、セッターの構文（angular.module('myApp', [...])）ではなくゲッター構文​​（angular.module('myApp')）を使用しているため、あなたmyAppモジュールを再登録しapp.module値を上書きしています。ファイルのロードの順序は、ここで重要であり、唯一の特定のモジュールをロードする最初のファイルがモジュールを設定する必要があり、モジュールをロードする他のすべてのファイルがのみを取得する必要があることを

は注意してください。

これを解決する最も簡単な方法は、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