不允许加载本地资源，并且angular.min.js:35未捕获错误:[$injector:modulerr]

这是server.js文件

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
mongoose.connect("mongodb://localhost/test");
var todoschema = new mongoose.schema ({
name : {type: String, required: true}
});
var todomodel = mongoose.model('todolist',todoschema);
app.get('/',function(req,res){
res.sendFile('C:\Users\Rohit\Desktop\New folder\todo.htm');
});
app.get('/todolist', function (req, res){
todomodel.find(function(err,tasks){
res.json(tasks);
});
});
app.post('/todolist', function (req, res) {

todomodel.insert(req.body, function(err, task) {
res.json(task);
});
});
app.delete('/todolist/:id', function (req, res) {

todomodel.remove(req.params.id, function (err, task) {
res.json(task);
});
});
app.get('/todolist/:id', function (req, res) {

todomodel.findById({req.params.id, function (err, task) {
res.json(task);
});
});
app.put('/todolist/:id', function (req, res) {

todomodel.findAndModify({
query: req.params.id,
update: {$set: {name: req.body.name}},
new: true}, function (err, task) {

res.json(task);
}
);
});
app.listen(3000);
console.log("Server running on port 3000");

这是todo.html文件

<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="C:UsersRohitDesktopNew folderfrontend.js">
</script>
<style>
#list   
{ margin-left:320px;
font-size: 40px;
font-family:verdana;
}
button     
{ color:yellow;background-color:red;text-align:center;cursor:pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
font-size:40px;
padding: 14px 32px;
}
button:hover
{ background-color:Peachpuff;
color:tomato;
}
</style>
</head>
<body style="background-color:cyan;">
<div ng-controller="Ctrl">
<h1 style="text-align:center;font-family:verdana;">To-Do LiSt</h1>
<div style="margin-left:300px">
<input type="text" ng-model="task.name" style="background-color:black;color:white;font-size:40px;width:40%">
<button ng-click="addtask()">Add</button>&nbsp;<button ng-click="updatetask()">Update</button><button ng-click="clearfield()">Clear</button>&nbsp;
</div>
<ul>
<li id="list" ng-repeat="task in todolist">
{{task.name}}
<button ng-click="deletetask(task._id)">Delete</button>&nbsp;<button ng-click="edittask(task._id)">Edit</button>
</tr>
</table>
</div>
</body>
</html>

这是前端.js文件

var App = angular.module('App',[]);
App.controller('Ctrl',['$scope','$http',function($scope,$http) {

var reset = function(){
$http.get('/todolist').success(function(response){
$scope.todolist=response;
$scope.task="";
});
};
reset();
$scope.addtask = function() {
$http.post('/todolist', $scope.task).success(function(response) {
reset();
});
};
$scope.deletetask = function() {
$http.delete('/todolist/'+ id).success(function(response){
reset();
});
};

$scope.edittask = function(id) {
$http.get('/todolist/'+ id).success(function(response){
$scope.task=response;
});
};
$scope.updatetask = function(id){
$http.put('/todolist/'+$scope.task._id, $scope.task).success(function(response){
reset();
});
};
$scope.clearfield = function(){
$scope.task="";
}
}]);

这就是错误，它显示在浏览器控制台中

Not allowed to load local resource: file:///C:/Users/Rohit/Desktop/New%20folder/server.js
angular.min.js:35Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=App&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.12%2Fangular.min.js%3A17%3A381)
http://localhost:3000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to parse SourceMap: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js.map

我试图通过连接到//localhost:3000来显示todo.html文件，该文件被显示，但包含todo.html的javascript的frontend.js文件没有加载，它还在浏览器控制台中引发了一些错误。任何关于如何在连接到localhost服务器时将frontend.js准确导入todo.html文件的帮助都将有助于

我在合并两个JS文件后运行了您的代码。它按预期运行，并且在调用todolist web服务时遇到问题(这是预期的，因为我的机器上没有运行该服务)。

请注意，我并没有调用任何本地文件的src。本地文件对浏览器来说是一个安全风险，如果不设置忽略此风险的权限，它们将不会从本地驱动器加载您的JavaScript(除了使用HTTP服务器)。

请告诉我你的浏览器类型，我会看看我是否能帮助你解决这部分问题-你可能会遇到更多问题，因为你没有从你的web服务调用所需的web服务器加载这些文件。

如果你用http://localhost:3000那么您的机器上运行着一个活动的web服务器，或者您正在不同机器的上下文中从浏览器运行该URL(例如通过TS会话)。如果您确信"localhost"是您的机器，那么您应该尝试从web服务器提取文件的目录中工作。

<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Ctrl', ['$scope', '$http', function ($scope, $http) {
var reset = function () {
$http.get('/todolist').success(function (response) {
$scope.todolist = response;
$scope.task = "";
console.log("reset success: " + response);
}).error(function (response, status, headers, config) {
console.log("reset error: " + status + ": " + response);
});
};
reset();
$scope.addtask = function () {
$http.post('/todolist', $scope.task).success(function (response) {
reset();
console.log("addtask success: " + response);
}).error(function (response, status, headers, config) {
console.log("addtask error: " + status + ": " + response);
});
};
$scope.deletetask = function (id) {
$http.delete('/todolist/' + id).success(function (response) {
reset();
console.log("deletetask success: " + response);
}).error(function (response, status, headers, config) {
console.log("deletetask error: " + status + ": " + response);
});
};
$scope.edittask = function (id) {
$http.get('/todolist/' + id).success(function (response) {
$scope.task = response;
console.log("edittask success: " + response);
}).error(function (response, status, headers, config) {
console.log("edittask error: " + status + ": " + response);
});
};
$scope.updatetask = function (id) {
$http.put('/todolist/' + id, $scope.task).success(function (response) {
reset();
console.log("updatetask success: " + response);
}).error(function (response, status, headers, config) {
console.log("updatetask error: " + status + ": " + response);
});
};
$scope.clearfield = function () {
$scope.task = "";
}
}]);
</script>
<style>
#list {
margin-left: 320px;
font-size: 40px;
font-family: verdana;
}
button {
color: yellow;
background-color: red;
text-align: center;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
font-size: 40px;
padding: 14px 32px;
}
button:hover {
background-color: Peachpuff;
color: tomato;
}
</style>
</head>
<body style="background-color:cyan;">
<div ng-controller="Ctrl">
<h1 style="text-align:center;font-family:verdana;">To-Do LiSt</h1>
<div style="margin-left:300px">
<input type="text" ng-model="task.name" style="background-color:black;color:white;font-size:40px;width:40%">
<button ng-click="addtask()">Add</button>&nbsp;<button ng-click="updatetask()">Update</button><button ng-click="clearfield()">Clear</button>&nbsp;
</div>
<ul>
<li id="list" ng-repeat="task in todolist">{{task.name}}
</ul>
<button ng-click="deletetask(task._id)">Delete</button>&nbsp;<button ng-click="edittask(task._id)">Edit</button>
</div>
</body>
</html>

相关内容

最新更新

热门标签：