AngularJS和Express路由404
我有一个以下的AngularJS应用程序：
angular.module('app', ['ngRoute', 'app.controllers']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { controller: 'HomeController', templateUrl: 'views/home.html' }) .when('/garage', { controller: 'GarageController', templateUrl: 'views/vehicle.html' }) .otherwise({ redirectTo: '/' }); }]) .config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode(true); }]); Node.js是我的后端，它的唯一目的是提供REST api（尚未实现）。 Expressconfiguration如下：
app.use(express.static(path.join(__dirname, 'public'))); app.get('*', function(req, res) { res.sendFile(__dirname + '/public/index.html'); });
问题是，每当我把一些无效的url在地址栏，如http://localhost:3000/abc请求到达服务器。 我认为，它应该由AngularJS路由处理，并redirect到默认的“/”页面。 为什么没有发生？ 当发生这种情况时，所有应用程序都会再次下载，所有索引和资产文件。 我想告诉AngularJS – 每当有人input一个无效的路由，只是路由到默认的路由。 这应该只是取代ng-view，而不是再次下载整个index.html。 那可能吗？
谢谢
不确定，如果这有帮助，但这种路由工作得很好。 （app.js）
var routes = require('./routes/index'); var users = require('./routes/users'); var api = require('./routes/api') var partials = require('./routes/partials')
然后在另一端的下面的代码来获取angular度路由运行：
var BabyPadz = angular.module('BabyPadz', ["ngResource", "ngRoute"]). config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when('/', { templateUrl: 'partials/index', controller: 'IndexController' }) .when('/about', { templateUrl: '/partials/about', controller: 'AboutController' }) .when('/contactus', { templateUrl: "partials/contactus", controller: 'ContactController' }) .when('/boompad', { templateUrl: "partials/boompad", controller: "BoomController" }) // route for the about page .otherwise({redirectTo: "/test"}); } ] );
我意识到我也使用ngResource，知道有一些事情在一年或两年前发生了一些变化，关于angular度的分割（所以Route等是一个单独的模块）。 不确定如果是这样的话。
我仍然得到一个404，但认为这是服务器端允许Angular拿起路由，但一直没有能够完全回答这个问题，如何路由（服务器/angular）一起工作或获得优先。
我遇到了同样的问题，并为您提供了两种可能的解决scheme！
//////////////////////////////
解决scheme＃1：列出你做/不想要“服务”的目录
//////////////////////////////
如何：
假设你的目录结构如下所示：
-app/ ---controllers/ ---directives/ ---etc. -public/ ---img/ ---css/ ---index.html ---etc. -views/ ---home.html ---vehicle.html ---etc. -app.js (run with 'node app.js')
这些3个文件夹（应用程序，公共，视图）中的一部分具有不同的规则，您想要在其上进行渲染和渲染 ：
- 应用 /
- 服务 ：如果您的网站GET /app/controller.js，您想为他们提供文字文件。
- 公共 /
- 服务 ：如果您的网站的GET /public/img/logo.jpg，你想为他们提供文字文件。
- 意见 /
- 渲染 ：如果你的网站的GET视图/家，你想要呈现他们从你的angular.js路线的视图。
现在从您的node / express js文件中find或添加以下内容：
//This tells node that these folders are for STATIC SERVING files (meaning literal files). //And Yes! You can use multiple to indicate multiple directories. app.use(express.static(path.join(__dirname, 'app'))); app.use(express.static(path.join(__dirname, 'public')));
更多信息：
app.use(express.static(__dirname + '/client/views')); 意味着你正在从/客户端/视图提供文字文件，但没有任何该目录。 请参阅视图文件夹中的angularjs index.html
扩展示例：
这将是你可能的configuration：
//app.js var express = require('express'), bodyParser = require('body-parser'), methodOverride = require('method-override'), errorHandler = require('error-handler'), morgan = require('morgan'), routes = require('./routes/index'), //My special routes file http = require('http'), path = require('path'); var app = module.exports = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(morgan('dev')); app.use(bodyParser()); app.use(methodOverride()); app.use(express.static(path.join(__dirname, 'app'))); app.use(express.static(path.join(__dirname, 'public'))); // serve index and view partials app.get('/', routes.index); //Partials app.get('/partials/:name', routes.partials); // redirect all others to the index // BUT the static files listed above still get served statically app.get('*', routes.index); http.createServer(app).listen(app.get('port'), function () { console.log('Express server listening on port ' + app.get('port')); });
那么这将是你的路线文件：
exports.index = function(req, res){ res.render('index'); }; exports.partials = function (req, res) { var name = req.params.name; res.render('partials/' + name); };
//////////////////////////////
解决scheme2：检查文件是否存在
//////////////////////////////
如何：
保持一切，你已经拥有了它，而不是立即尝试“res.sendFile”，检查它是否存在。 例如：
exports.all = function (req, res) { var name = req.params[0]; fs.exists(path+'/'+name, function(exists){ if(exists) { //console.log("file exists"); res.sendFile(path+'/'+name); }else{ //console.log("file does not exist"); //redirects to index res.render('index'); } }); };
扩展示例：
这将是你可能的configuration：
//app.js var express = require('express'), bodyParser = require('body-parser'), methodOverride = require('method-override'), errorHandler = require('error-handler'), morgan = require('morgan'), routes = require('./routes/index'), //My special routes file http = require('http'), path = require('path'); var app = module.exports = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(morgan('dev')); app.use(bodyParser()); app.use(methodOverride()); app.use(express.static(path.join(__dirname, ''))); // serve index and view partials app.get('/', routes.index); //Partials app.get('/partials/:name', routes.partials); // redirect all others app.get('*', routes.all); http.createServer(app).listen(app.get('port'), function () { console.log('Express server listening on port ' + app.get('port')); });
这是你的路线文件：
var fs = require('fs'); var path = require('path'); exports.index = function(req, res){ res.render('index'); }; exports.partials = function (req, res) { var name = req.params.name; res.render('partials/' + name); }; exports.all = function (req, res) { var name = req.params[0]; fs.exists(path+'/'+name, function(exists){ if(exists) { //console.log("file exists"); res.sendFile(path+'/'+name); }else{ //console.log("file does not exist"); //redirects to index res.render('index'); } }); };
//////////////////////////////
希望有所帮助！