当所有组件都在一个文件中时，Angular App 可以工作，但当组件在单独的文件中时会抛出“nomod”错误答案

【问题标题】：Angular App works when all components are in one file, but throws 'nomod' error when components are in separate files当所有组件都在一个文件中时，Angular App 可以工作，但当组件在单独的文件中时会抛出“nomod”错误
【发布时间】：2015-04-26 21:40:34
【问题描述】：

我正在通过 this 创建单页 MEAN 堆栈待办事项应用程序的教程。具体来说，我在this step。本教程涵盖了代码的模块化，虽然我能够成功地将我的后端代码（Express、Mongo 等）分离为模块，但当我分离 angular.js 代码时，todo 应用程序停止运行。向控制台抛出的具体错误是“未捕获的错误：[$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']);

创建/删除 Todo 服务 (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 的建议后，我得到了同样的错误，除了“simpleTodo”无法加载，而是“todoController”无法加载。我很欣赏他的建议，但它仍然不起作用。 :( 如果你想看的话，这里是一个 github repo，他的改动已经实现了：https://github.com/LeungEnterprises/simpleTodo

【问题讨论】：

你能显示加载这些脚本文件的相关HTML，以及它们的加载顺序吗？
jQuery、Angular、控制器、服务、加载应用程序
如前所述，您错过了错误中最重要的部分；加载失败的模块。
如果您使用与教程中代码来源相同的 Angular 版本，您的代码是否有效？
不，我使用的是 1.3.13，而 scotch.io 使用的是 ~1.2.x。但是，在查阅了角度迁移指南后，我没有看到任何重大变化。

标签： javascript angularjs node.js mean-stack

【解决方案1】：

由于您的控制器需要解析 Todos 依赖项，因此您需要将服务 todoService 添加到其模块依赖项中：

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

另外，您需要在main.js 之前加载todos.js 文件（因为它需要前者）

【讨论】：

问题中列出的代码有 2 个不同版本；并不是它被声明了两次......第一个清单是一个功能代码示例，其他清单是一个不起作用的替代方案。
我将我的模块设置为 var simpleTodo = angular.module('simpleTodo', []);当一切都在一个文件中时；当我将它分成模块时，它是这样设置的： var simpleTodo = angular.module('simpleTodo', ['todoController', 'todoService']);
哦，我很抱歉我没有这样理解，当然，抱歉。所以确实看起来不错，请给我们完整的错误，以便我们知道哪个模块是错误的。我将编辑我的答案或删除它。
好的，我改变了答案，我想我有你的问题。
现在我收到“由于 nomod 导致无法实例化 todoController”错误。如果有帮助，这里是他们在 Scotch.io 上使用的代码，该教程所在的地方。 github.com/scotch-io/node-todo/tree/tut3-controllers-services/…

【解决方案2】：

我仔细阅读了我的文件，经过大量实验后，我推断问题是由 HTML 文件引起的。问题是一个未关闭的脚本标签。

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

【讨论】：