Question

我正在遵循官方角度教程，特别是在第4步，我正在尝试重新组织我的文件，以便与https://docs.angularjs.org/tutorial/step_04中所述的功能相关的代码位于单独的模块中。

当我在trip-list / trip-list.module.js中定义一个组件时，它可以工作，但是如果我将定义移动到一个名为trip-list / trip-list.component.js的单独文件中，它会抛出以下错误在Chrome和IE 9中都有。

UL.redirects A {
    display: block;
}

相关代码段：

Html代码

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

Javascript：app.module.js

<!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 - trip-list / trip-list.module.js

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

Javascript：trip-list / trip-list.component.js

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

Answer 1

在尝试发送一个有效且无效的git PR时，我不小心让它发挥了作用。事实证明问题是index.html文件没有正确的EOL（它是dos格式）。你可能会在下面的差异中看到^ 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>

Answer 2

您必须使用角度模块 tripList 的setter，如下所示

'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'));

AngularJs：TypeError：无法读取undefined的属性'controller'

2 个答案: