gpt4 book ai didi

javascript - Angular App 在所有组件都在一个文件中时工作,但当组件在单独的文件中时抛出 'nomod' 错误

转载 作者:行者123 更新时间:2023-11-30 12:27:59 28 4
gpt4 key购买 nike


我正在处理 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);
}
}
}]);

Controller 文件(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

最佳答案

由于您的 Controller 需要解析Todos 依赖项,因此您需要将服务todoService 添加到它的模块依赖项中:

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

此外,您需要在加载 main.js 文件之前加载 todos.js 文件(当然它需要前者)

关于javascript - Angular App 在所有组件都在一个文件中时工作,但当组件在单独的文件中时抛出 'nomod' 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28709809/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com