在html文件

时间：2015-07-21 06:45:45

标签： javascript html angularjs

我收到错误消息：

  

无法加载资源：服务器响应状态为404（未找到）

在我尝试加载它的html文件中的

。

跟踪追踪：

Error: Not Found
       at C:\Users\dev4\Desktop\Sample\server.js:48:13
       at Layer.handle [as handle_request] (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\layer.js:95:5)
       at trim_prefix (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:312:13)
       at C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:280:7
       at Function.process_params (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:330:12)
       at next (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:271:10)
       at SendStream.error (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\serve-static\index.js:120:7)
       at SendStream.emit (events.js:107:17)
       at SendStream.error (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\send\index.js:245:17)
       at SendStream.onStatError (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\send\index.js:356:12)
       at onstat (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\send\index.js:621:26)
       at FSReqWrap.oncomplete (fs.js:95:1

5)

HTML文件： 它被称为app.html，并作为默认的html文件加载。

<!DOCTYPE HTML>
<html ng-app="Todo">
<head>
    <meta charset="UTF-8">
    <title>DemoAPI</title>

   <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

<!--<link rel="stylesheet" href="./Client/css/styling.css" />-->
<!--<script type="text/javascript" src="/Client/public/core.js"></script>-->


<script type="text/javascript" src="/core.js"></script>


</head>
 <body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="/">
      Demp<strong>API</strong></a>
  </div>

</div>  
<div ng-controller="mainController">
<form name="userForm" ng-submit="createTodo()" novalidate>
   <div class="row col-lg-offset-3">
      <div class="form-group col-lg-6"  ng-class="{ 'has-error': userForm.name.$invalid && userForm.name.$dirty}" >
        <label class="control-label">Name</label>
        <input type="text" class="form-control" name="name" ng-model="user.name" ng-required="true" ng-minlength="3" placeholder="Name" />
        <span class="error-message" ng-show="userForm.name.$dirty
        && userForm.name.$error.required">You are required to provide your name</span>

        <span class="error-message" ng-show="userForm.name.$dirty
        && userForm.name.$error.minlength">Your name should contain 3 or more characters</span>
      </div>
      </div>
      <div class="row col-lg-offset-3">
      <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.band.$invalid && userForm.band.$dirty }" >
        <label class="control-label">Band</label>
        <input type="text" class="form-control" name="email" ng-model="user.band" ng-required="true" placeholder="Your Band Name" />
        <span class="error-message" ng-show="userForm.email.$dirty
        && userForm.name.$error.required">You are required to provide your Band name </span>
      </div>
      </div>


       <div class="row col-lg-offset-3">
      <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.instrument.$invalid && userForm.instrument.$dirty }" >
        <label class="control-label">Instrument</label>
        <input type="text" class="form-control" name="instrument" ng-model="user.instrument" ng-required="true" placeholder="The Instrument you play" />
        <span class="error-message" ng-show="userForm.instrument.$dirty
        && userForm.name.$error.required">You are required the instrument you play </span>
      </div>
      </div>


  <div class="row col-lg-offset-3">
      <button class="btn btn-primary"
      ng-disabled="userForm.$invalid"
      type="submit">Save</button>

      </div>

</form>   
    </div>  




</body>
</html>

Javascript文件：名称为core.js，与app.html放在同一个文件夹中。

 angular.module('Todo', [])

 .controller('mainController', function($scope, $http)
 {
    $scope.formData = {};

    // get all and show them
    $http.get('/musicians')
      .success(function(data) {
            $scope.todos = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

        //get with an id
        $scope.getOneTodo = function() {
        $http.get('/musicians' + id)
            .success(function(data) {
                $scope.todos = data;
                      console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
      // send the text to the node API
    $scope.createTodo = function() {
        $http.post('/musicians', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // clear the form 
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    // delete 
    $scope.deleteTodo = function(id) {
        $http.delete('/musicians' + id)
            .success(function(data) {
                $scope.todos = data;
                      console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    /*
    $scope.updateTodo = function(id) {
        $http.delete('/musicians' + id)
            .success(function(data) {
                $scope.todos = data;
                      console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };*/

});

server.js看起来像这样：

var express = require('express');
var path = require('path');
//var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose'), 
fs = require('fs');

var app = express();

var mongoUri = 'mongodb://localhost/DemoDB';


mongoose.connect(mongoUri);
var db = mongoose.connection;
db.on('error', function () {
  throw new Error('unable to connect to database at ' + mongoUri);
});



// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//app.use('/musicians',custom);
require('./models/musician');
require('./routes/routes')(app);

//page change at front end


app.get('/', function(req, res) {
        res.sendfile('app.html');  
    });

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});







app.listen(3000, function() {
   console.log("Listening on  3000");
 });
module.exports = app;

1 个答案:

答案 0 :(得分：1)

在server.js中，在

之后 
app.get('/', function(req, res) {
    res.sendfile('app.html');  
});

添加

app.get('/core.js', function(req, res) {
    res.sendfile('core.js');  
});
相关问题
最新问题