花了整整一天（！）处理这个问题：
在我的Node / Express / Angular应用程序中，我有这个简单的节点路由：
server.js：
// set up ======================================================================
var express = require('express');
var app = express(); // create our app w/ express
var mongoose = require('mongoose'); // mongoose for mongodb
var port = process.env.PORT || 8080; // set the port
var database = require('./config/database'); // load the database config
var morgan = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
// configuration ===============================================================
mongoose.connect(database.url); // connect to mongoDB database on modulus.io
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request
// routes ======================================================================
require('./app/routes.js')(app);
// listen (start app with node server.js) ======================================
app.listen(port);
console.log("App listening on port " + port);
route.js：
module.exports = function(app) {
app.get('*', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
};
的index.html：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DC Quote</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<script src="../bower_components/angular/angular-bootstrap.js"></script>
<script src="../bower_components/angular-file-upload/angular-file-upload.js"></script>
<script src="../app/app.js"></script>
</body>
</html>
主要角色应用模块：
'use strict';
var app = angular.module('myApp', [
'ngRoute',
'ui.bootstrap',
'angularFileUpload'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/Quote', {templateUrl: "tabcontrol/tabcontrol.html", controller: 'TabController'})
.otherwise({redirectTo: '/Quote'});
}])
.controller("TabController", ['$scope','$http', function ($scope, $http) {
console.log("This is TabController");
var setAllInactive = function() {
angular.forEach($scope.workspaces, function(workspace) {
workspace.active = false;
});
};
var Site = {
numberOfMainframes: undefined,
numberOfStorageFrames: undefined,
numberOfUnixServers: undefined,
numberOfBladeCenters: undefined,
numberOfX86Servers: undefined
};
var addNewWorkspace = function() {
var id = $scope.workspaces.length + 1;
$scope.workspaces.push({
id: id,
name: "Site " + id,
active: true
});
};
$scope.workspaces =
[
{ id: 1, name: "Site 1" ,active:true },
{ id: 2, name: "Site 2" ,active:false }
];
$scope.addWorkspace = function () {
setAllInactive();
addNewWorkspace();
};
$scope.removeWorkspace = function() {
angular.forEach($scope.workspaces, function(workspace) {
if(workspace.active){
var index = $scope.workspaces.indexOf(workspace);
console.log('Active Workspace id: ' + index);
$scope.workspaces.splice(index,1);
}
})
};
$scope.collectValuesFromEachTab = function(){
$scope.quote = new Object();
$scope.quote.SalesForceId = $scope.salesForceId;
$scope.quote.AccountName = $scope.accountName;
$scope.quote.siteCollection = [];
angular.forEach($scope.workspaces, function(workspace) {
//console.log("Site: " + workspace.name);
//console.log("Number of Mainframes: " + workspace.numberOfMainframes);
//console.log("Number of Starage Frames" + workspace.numberOfStorageFrames);
//console.log("Number of Unix/AIX Servers: " + workspace.numberOfUnixServers);
//console.log("Number of Blade Centers: " + workspace.numberOfBladeCenters);
//console.log("Number of x86 Servers: " + workspace.numberOfx86Servers);
var site = new Object();
site.SiteName = workspace.name;
site.NumberOfMainframes = workspace.numberOfMainframes;
site.NumberOfStorageFrames = workspace.numberOfStorageFrames;
site.NumberOfUnixServers = workspace.numberOfUnixServers;
site.NumberOfBladeCenters = workspace.numberOfBladeCenters;
site.NumberOfX86Servers = workspace.numberOfx86Servers;
$scope.quote.siteCollection.push(site);
});
var res = $http.post('http://10.211.55.26:8081/api/dcquote/testquote', $scope.quote);
res.success(function(data, status, headers, config) {
$scope.message = data;
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
}
}])
.controller("TabsChildController", ['$scope',function($scope){
}])
.controller('FileUploadController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: 'http://10.211.55.26:8081/api/test/files'
});
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
使用此路由：“app.get（*，function（）{} ...”
I Express试图只为index.html服务，所以我的JS东西被破坏了，我在浏览器中收到了这个错误：
Uncaught SyntaxError: Unexpected token <
angular-file-upload.js:1 Uncaught SyntaxError: Unexpected token <
app.js:1 Uncaught SyntaxError: Unexpected token <
但是，当我将路由更改为：
app.get('/', function(req, res) {}...
我的JS脚本都没有找到，我得到404尝试加载其中的每一个：
GET /bower_components/angular/angular-bootstrap.js 404 0.719 ms - 58
GET /bower_components/angular-file-upload/angular-file-upload.js 404 1.571 ms - 72
GET /app/app.js 404 1.728 ms - 23
我需要做些什么才能正确配置？