Angular 当所有组件都在一个文件中时，应用程序可以正常工作，但当组件在单独的文件中时，会抛出 'nomod' 错误

Question

具体来说，我正在研究 this tutorial on creating a single-page MEAN stack todo app. I'm on this step。本教程涵盖了代码的模块化，虽然我能够成功地将我的后端代码（Express、Mongo 等）分离到模块中，但当我分离我的 angular.js 代码时，todo 应用程序停止运行.抛出到控制台的具体错误是 "Uncaught Error: [$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']);

Create/Delete待办事项服务（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 仓库，如果你想看的话，他的更改已实施：https://github.com/LeungEnterprises/simpleTodo

Answer 1

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

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

此外，您需要在 main.js 文件之前加载 todos.js 文件（当然它需要前者）

Answer 2

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

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

Angular 当所有组件都在一个文件中时，应用程序可以正常工作，但当组件在单独的文件中时，会抛出 'nomod' 错误

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

javascript

node.js

angularjs

mean-stack