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