AngularJs：TypeError：未定義のプロパティ 'controller'を読み取ることができません

公式角度チュートリアル、具体的にはステップ4で、ファイルを再編成しようとしているので、フィーチャー関連のコードがhttps://docs.angularjs.org/tutorial/step_04 。AngularJs：TypeError：未定義のプロパティ 'controller'を読み取ることができません

trip-list/trip-list.module.jsでコンポーネントを定義すると、trip-list/trip-list.component.jsという別のファイルに定義を移動すると、次のようにスローされます

HTMLコード

<!DOCTYPE html> 
 
<html ng-app="carpoolApp"> 
 
<head> 
 
    <title>Isha Carpool App</title> 
 
</head> 
 
<body> 
 
<header> 
 

 
</header> 
 

 
<section> 
 
    <greet-user></greet-user> <!-- this works --> 
 
    <trip-list></trip-list> <!-- this works only if I define the component in trip-list.module.js. Doesn't work if I put it in a separate file and include it after loading trip-list.module.js as mentioned below --> 
 
</section> 
 

 
<footer> 
 

 
</footer> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> 
 
<script src="app.module.js"></script> 
 
<script src="trip-list/trip-list.module.js"></script> 
 
<script src="trip-list/trip-list.component.js"></script> 
 

 

 
</body> 
 
</html>

：ChromeとIE 9

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module carpoolApp due to: 
Error: [$injector:modulerr] Failed to instantiate module tripList due to: 
TypeError: Cannot read property 'controller' of undefined

関連するコードスニペットの両方でエラー210

はjavascript：app.module.js

var carpoolApp = angular.module('carpoolApp', [ 
 
    'tripList' 
 
]); 
 

 
carpoolApp.component('greetUser', { 
 
       template: 'Hello, {{$ctrl.user}}!', 
 
       controller: function GreetUserController() { 
 
       this.user = 'world'; 
 
       } 
 
      });

Javascriptを - 旅行-リスト/トリップlist.module.js

angular.module('tripList', []);

Javascriptを：トリップ-リスト/トリップlist.component.js

'use strict'; 
 

 
// this prints a valid object 
 
console.log('tripList module in component', angular.module('tripList')); 
 

 
angular. 
 
    module('tripList'). 
 
    component('tripList', { 
 
    templateUrl: 'trip-list/trip-list.template.html', 
 
    controller: function TripListController() { 
 
     this.trips = [ 
 
      { 
 
       from: 'BNA', 
 
       to: 'iii', 
 
       departureDateAndTime: new Date() 
 
      }, 
 
      { 
 
       from: 'iii', 
 
       to: 'BNA', 
 
       departureDateAndTime: new Date() 
 
      } 
 
     ]; 
 
    } 
 
}); 
 

 
// this too prints a valid object 
 
console.log("tripList component registered", angular.module('tripList').component('tripList'));

出典

2017-01-01 Prasanna

https://plnkr.co/edit/w9odyMbzjzUrryfRCeqh - （コンポーネントがトリップlist.module.js自体の内部に定義されている動作バージョン – Prasanna

git PRを変更して送信しようとしていて、うまくいきませんでしたが、誤って動作させました。問題が判明したのは、index.htmlファイルに正しいEOL（dos形式）がないことでした。下のdiffで^ Mの変更を見ることができます。私はこれで無駄に何時間をカウントすることはできません！

diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html 
index fd50422..86d0666 100644 
--- a/src/main/webapp/index.html 
+++ b/src/main/webapp/index.html 
@@ -23,8 +23,9 @@ 
<script src="trip-list/trip-list.module.js"></script> 
<!-- 
TODO: This doesn't work :(
-<script src="trip-list/trip-list.component.js"></script> 
--> 
+<script src="trip-list/trip-list.component.js"></script>^M 
+^M 

</body> 
</html>

出典

2017-01-01 21:06:59 Prasanna

-1

あなたは、角度モジュールのセッターを使用する必要がありますtripList次のように

'use strict'; 

// this prints a valid object 
console.log('tripList module in component', angular.module('tripList')); 

angular. 
    //modified the below line 
    module('tripList',[ ]). 
    component('tripList', { 
    templateUrl: 'trip-list/trip-list.template.html', 
    controller: function TripListController() { 
     this.trips = [ 
      { 
       from: 'BNA', 
       to: 'iii', 
       departureDateAndTime: new Date() 
      }, 
      { 
       from: 'iii', 
       to: 'BNA', 
       departureDateAndTime: new Date() 
      } 
     ]; 
    } 
}); 

// this too prints a valid object 
console.log("tripList component registered", angular.module('tripList').component('tripList'));

出典

2017-01-01 19:46:20 Aravind

モジュール/ '旅行リストに作成されていますtrip-list.module.js'ファイルで上書きすると、これが上書きされてしまいます。なぜモジュールが接続されていないのかという疑問があると思われます。 – Claies

setterを試してみてうまくいきません。私がtrip-list.module.jsに入れば、コンポーネントが登録され、正しく動作します。コード自体と何か関係があるかどうかは分かりません。 – Prasanna

両方のケースでプランナーを作成できますか？ – Aravind

AngularJs：TypeError：未定義のプロパティ 'controller'を読み取ることができません

答えて

関連する問題