AngularJS和Express routing 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（尚未实现）。Express配置如下所示：

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路由处理，并重定向到默认的“/”页面。为什么没有发生？ 当这种情况发生时，所有应用程序都会再次下载，包括所有索引和资产文件。我想告诉AngularJS——每当有人进入一条无效的路径时，只需选择默认路径即可。这应该取代ng视图，而不是再次下载整个index.html。可能吗

---

谢谢

不确定这是否有帮助，但是这个路由非常有效。 （app.js）

然后在另一端，使用以下代码获取运行中的角度路线：

    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，知道在一年或两年前发生了一些变化，关于角度的分割（所以路线等是一个单独的模块）。不确定情况是否如此

---

有时我仍然会得到404，但我认为这是允许Angular选择路由的服务器端，但还不能完全回答路由（服务器/Angular）如何协同工作或什么优先的问题。

我遇到了与您完全相同的问题，并且有两种可能的解决方案

//////////////////////////////

解决方案#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个文件夹（应用程序、公用文件夹、视图）中的某些文件夹具有不同的规则，您希望根据这些规则提供服务和呈现：

• 应用程序/
  • 服务：如果您的站点确实获得/app/controller.js，那么您希望为它们提供文本文件
• 公开/
  • 服务：如果您的站点确实获得/public/img/logo.jpg，那么您希望为它们提供文本文件
• 视图/
  • 渲染：如果您的站点确实获得了视图/主视图，则您希望从angular.js路径将其渲染为视图

现在，从node/express js文件中，找到或添加以下内容：

//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（uuu dirname+'/client/views'）

表示您正在从/client/views提供文本文件，但不在该目录之外。看

扩展示例： 这将是您可能的配置：

//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'));
});

//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'));
});

然后这将是您的路由文件：

exports.index = function(req, res){
  res.render('index');
};

exports.partials = function (req, res) {
  var name = req.params.name;
  res.render('partials/' + name);
};

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');
        }
    });
};

//////////////////////////////

解决方案2：首先检查文件是否存在 //////////////////////////////

如何： 保留您已有的所有内容，但不要立即尝试“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');
        }
    });
};

扩展示例： 这将是您可能的配置：

//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'));
});

//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'));
});

这是您的路由文件：

exports.index = function(req, res){
  res.render('index');
};

exports.partials = function (req, res) {
  var name = req.params.name;
  res.render('partials/' + name);
};

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');
        }
    });
};

//////////////////////////////

---

希望有帮助

这里没有人能帮我吗？我也有同样的问题，你有没有想过问题是什么：）不幸的是没有：（我想知道这是否是因为你需要有两个路由？也就是说，你需要你的角度路由只拾取对它自己的调用，否则你会遇到一些问题，例如api调用（也就是说，假设您有www../api/getdata和www../api/savedata，您需要一种方法让angular知道它应该回答/，/garage，任何其他组合，但不是/api/…都可能是错误的，尽管我最大的问题是，否则angular routin似乎根本不起作用，而是在您键入时向服务器发出请求/aaaa在浏览器中您被重定向到/test？是的，如果我放入任何内容（包括/aaaa）它重定向得很好。这很奇怪，因为我的配置看起来很像，但当被请求的/aaaa请求发送到服务器时，浏览器会下载index.html。你使用什么浏览器？我使用chrome。如果它与我遇到的问题类似，那么问题可能出在你的服务器路由上。其他路由有效吗？