Currently, I am enhancing my AngularJS skills by creating a Todo list application. Unfortunately, I am encountering some challenges when it comes to utilizing modules from one another.
To elaborate, in my app.js file, I have the following code snippet:
var app = angular.module('todoApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'TodoItem'
]);
var TodoItem = angular.module('TodoItem');
app.init = function () {
var item1 = TodoItem.newItem();
item1.title = 'Item 1';
var item2 = TodoItem.newItem();
item2.title = 'Item 2';
app.todoList = [item1, item2];
}
app.init();
The 'TodoItem' module is located in a file called TodoItem.js, containing the following code:
'use strict';
var TodoItemModule = angular.module('TodoItem', []);
function TodoItemClass() {
this.id = -1;
this.title = '';
this.detail = '';
this.endDate = null;
this.startDate = null;
}
TodoItemModule.newItem = function() {
return new TodoItemClass();
}
Furthermore, in the index.html of my application, I have included the following scripts:
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/todo.js"></script>
<script src="scripts/models/TodoItem.js"></script>
It seems like there are no spelling errors in the script references. However, upon inspecting the Chrome Javascript console, I encounter the following error:
Uncaught Error: [$injector:nomod] Module 'TodoItem' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.6/$injector/nomod?p0=TodoItem
Can you please guide me on where I might have gone wrong here? Your assistance is greatly appreciated. Thank you.