AngularJs：TypeError：無法讀取未定義的屬性'控制器'

我正在遵循官方的角度教程，特別是在第4步，我試圖重新組織我的文件，以便與功能相關的代碼位於單獨的模塊中，如https://docs.angularjs.org/tutorial/step_04 。AngularJs：TypeError：無法讀取未定義的屬性'控制器'

當我在trip-list/trip-list.module.js中定義一個組件時，它可以工作，但是如果我將定義移動到一個名爲trip-list/trip-list.component.js的單獨文件，它會引發以下誤差在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

相關的代碼段：

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>

的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公關與工作和不工作的改變，我不小心使工作。原來問題是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

你可以在兩種情況下創建一個plunker！ – Aravind

AngularJs：TypeError：無法讀取未定義的屬性'控制器'

回答

相關問題