jeudi 26 février 2015

Angular App works when all components are in one file, but throws 'nomod' error when components are in separate files



I'm working through this tutorial on creating a single-page MEAN stack todo app. I'm on this step, specifically. The tutorial covers modularization of code, and while I was able to separate my backend code (Express, Mongo, etc.) into modules successfully, when I separate my angular.js code, the todo app ceases to function. The specific error which is thrown to the console is "Uncaught Error: [$injector:modulerr]." The specific error is "nomod" (i.e. the module "simpleTodo" is failing to load.) I'd appreciate any help.


Code as one file (core.js):



var simpleTodo = angular.module('simpleTodo', []);

simpleTodo.controller('mainController', ['$scope', '$http', function($scope, $http) {
$scope.formData = {};

$http.get('/api/todos')
.success(function(data) {
$scope.todos = data;
})
.error(function(data) {
console.log('Error: ' + data);
});

$scope.createTodo = function() {
$http.post('/api/todos', $scope.formData)
.success(function(data) {
$scope.formData = {};
$scope.todos = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
};

$scope.deleteTodo = function(id) {
$http.delete('/api/todos/' + id)
.success(function(data) {
$scope.todos = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
};
}]);


Code in modules:

New core.js:



var simpleTodo = angular.module('simpleTodo',['todoController', 'todoService']);


Create/Delete Todo Service (todos.js):



angular.module('todoService', [])
.factory('Todos', ['$http', function($http) {
return {
get: function() {
return $http.get('/api/todos');
},
create: function(todoData) {
return $http.post('/api/todos', todoData);
},
delete: function(id) {
return $http.delete('/api/todos/' + id);
}
}
}]);


Controller file (main.js)



angular.module('todoController', [])
.controller('mainController', ['$scope', '$http', 'Todos', function($scope, $http, Todos) {
$scope.formData = {};

Todos.get()
.success(function(data) {
$scope.todos = data;
});

$scope.createTodo = function() {
if ($scope.formData !== null) {
Todos.create($scope.formData)
.success(function(data) {
$scope.formData = {};
$scope.todos = data;
});
}
};

$scope.deleteTodo = function(id) {
Todos.delete(id)
.success(function(data) {
$scope.todos = data;
});
};
}]);


Order of script loading on index.html:



<script src="http://ift.tt/1yCEpkO"></script>
<script src="http://ift.tt/1MwNz7a"></script>
<script src="js/controllers/main.js"></script>
<script src="js/services/todos.js"</script>
<script src="js/core.js"></script>


Thanks!


New info: After following floribon's advice, I get the same error, except instead of "simpleTodo" failing to load, it is "todoController" that cannot be loaded. I appreciate his advice but it still isn't working. :( Here's a github repo with his changes implemented, if you want to see: http://ift.tt/1MUBvfY


Aucun commentaire:

Enregistrer un commentaire