当所有组件都在一个文件中时，Angular App就可以工作，但是当组件在不同的文件中时会引发'nomod'错误

我正在通过本教程来创build一个单页MEAN堆栈待办事项应用程序。 我正在这一步 ，具体而言。 本教程涵盖了代码的模块化，虽然我能够将我的后端代码（Express，Mongo等）成功地分离成模块，但当我分开我的angular.js代码时，待办事项应用程序停止运行。 抛出控制台的具体错误是“未捕获错误：[$ injector：modulerr]”。 具体的错误是“nomod”（即模块“simpleTodo”无法加载。）我会很感激任何帮助。

代码作为一个文件（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); }); }; }]); 

代码模块：
新的core.js：

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

创build/删除待办事项（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); } } }]); 

控制器文件（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; }); }; }]); 

在index.html上加载脚本的顺序：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script> <script src="js/controllers/main.js"></script> <script src="js/services/todos.js"</script> <script src="js/core.js"></script> 

谢谢！

新信息：遵循floribon的build议后，我得到相同的错误，除了“simpleTodo”未能加载，而是“todoController”，无法加载。 我赞赏他的build议，但它仍然没有工作。 :(这是一个github回购与他的变化实施，如果你想看到： https : //github.com/LeungEnterprises/simpleTodo

Answer 1

由于你的控制器需要解决Todos依赖，所以你需要将服务todoService添加到它的模块依赖：

 angular.module('todoController', ['todoService']) 

另外，你需要在main.js之前加载main.js文件（它需要前者）

Answer 2

我细读了我的文件，经过大量实验后，我推断出这个问题是由HTML文件造成的。 问题是一个未封闭的脚本标记。

不过，我非常感谢大家的帮助，尤其是@floribon！