I am following the official angular tutorial, specifically at step 4 where I am trying to reorganize my files so that a feature related code is in a separate module as explained in https://docs.angularjs.org/tutorial/step_04.
When I define a component in trip-list/trip-list.module.js it works but if I move the definition to a separate file called trip-list/trip-list.component.js, it throws the following error in both Chrome and 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
Relevant code snippets:
- Html Code
<!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 - trip-list/trip-list.module.js
angular.module('tripList', []);- Javascript: trip-list/trip-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'));
