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：无法读取未定义的属性'控制器'

回答

相关问题