javascript - 无法加载 javascript 文件和 bower_components/angular/angular.js

标签 javascript html angularjs node.js

当我运行 localhost:3000 服务器时,我在控制台中收到以下错误:

http://localhost:3000/bower_components/angular/angular.js加载资源失败:服务器响应状态为 404(未找到)

http://localhost:3000/controller.js加载资源失败:服务器响应状态为 404(未找到)

如果我将 angular.js 脚本放在 index.html 而不是单独放在 controller.js 中,它就可以工作,我不知道为什么我在使用脚本标签时会出错。

目录图是这样的

-files
  -bower_components
    -angular
  -index.html
  -controller.js
  -server.js

这是index.html文件

<!DOCTYPE html>
<html ng-app="App">
<head>
<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>&nbsp;<button ng-click="clearfield()">Clear</button>
</div>

<ul>
<li id="list" ng-repeat="task in todolist">
{{task.name}}
<button ng-click="deletetask(task._id)">Delete</button>&nbsp;&nbsp;<button ng-click="edittask(task._id)">Edit</button>
</li>
</ul>

</div>


</body>

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="controller.js"></script>

</html>

这是 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("/index.html",{root:__dirname}); 
});

app.get('/todolist', function (req, res){
    TodoModel.find(function(err,tasks){
      res.json(tasks);
     });
});

app.post('/todolist', function (req, res) {

  TodoModel.create({name:req.body.name},function(err,task){
    res.send('created');
  });

});

app.delete('/todolist/:id', function (req, res) {

 TodoModel.remove({_id:req.params.id}, function (err) {
     res.send('');
 });
});

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.findByIdAndUpdate(req.params.id,
     {name: req.body.name},
      function (err, task) {

      res.json(task);
    }
  );
});

app.listen(3000);
console.log("Server running on port 3000");

最佳答案

在您的 server.js 文件中添加以下行并检查一次。

app.use(express.static(__dirname));

在 Node js 中,您必须设置注册表以访问相对路径。

关于javascript - 无法加载 javascript 文件和 bower_components/angular/angular.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38305028/

相关文章:

javascript - Jquery 自动完成库从 PHP 脚本返回没有属性的数组

html - img下面有一个小空格

javascript - Angular js 我无法动态调用我的按钮

javascript - 如何在 .click() 上取消绑定(bind)另一个 jQuery 函数?

javascript - JS : Recursively calling a promise function

javascript - 使用 document.getElementById 时,它无法正常工作

html - 链接到 Skype 配置文件失败

javascript - 当从 AngularJS 中的 API 响应收到错误时,触发错误弹出模式的最佳方法是什么?

javascript - 刷新 Firebase token

javascript - 从对象数组中创建对象特定字段的数组