Html5 模式 Angularjs Express URL 重写返回所有请求的索引页面

Question

我一直在使用类似的问题来尝试找到解决我遇到的问题的方法。我知道为了将 html5Mode 与 angularjs 一起使用，我需要告诉服务器如何处理对页面的直接访问。

我遇到的问题是，单击应用内的链接可以使页面正常显示，但直接访问不显示优惠。

例如

http://localhost:3001/offers/television/

应该在 routes.js 中调用

app.get('/offers', offers.all); 

当链接时它会这样做

  <a href="offers/television">televisions</a>

被点击

当我直接访问它时，看起来我的角度服务正在将索引页面作为资源返回......！

//Offers service used for offers REST endpoint
 angular.module('mean.offers').factory("Offers", ['$resource','$routeParams',function($resource,$routeParams) {
   return $resource('/offers/:offerId', 
     {offerId: '@_id'},
       {
         search: {'method': 'GET', params: {}, isArray:true}
       });
     }]);

我的 index.jade 头中也有 base(href="/")

角度配置.js

//Setting up route
window.app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/offers/:type/',{
        controller: 'OffersController',
        templateUrl: 'views/offers/list.html'
      }).
      when('/', {
        templateUrl: 'views/index2.html'
      }).
      otherwise({
        redirectTo: '/'
      });
    }
 ]);
 //Setting HTML5 Location Mode
 window.app.config(['$locationProvider',
   function($locationProvider) {
     $locationProvider.hashPrefix("!");
     $locationProvider.html5Mode(true)
   }
 ]);

express routes.js

//Offer Routes
var offers = require('../app/controllers/offers');
app.get('/offers', offers.all); 
app.get('/offers/:offerId', offers.show);

//Home route
var index = require('../app/controllers/index');
app.get('/', index.render);

express.js

    app.configure(function() {
    // app.use('/', express.static(__dirname + '/'));

    //cookieParser should be above session
    app.use(express.cookieParser());

    //bodyParser should be above methodOverride
    app.use(express.bodyParser());
    app.use(express.methodOverride());


    //routes should be at the last
    app.use(app.router);

    app.get('/*', function(req, res) {
            res.render('index');
    });
 ...

为什么即使它应该命中 express routes.js 中的 /offers 路由，它也不返回报价？还是我在做一些奇怪的事情？

谢谢！

Answer 1

正如您在问题的 cmets 中提到的，"app.get('/offers', offers.all); will handle /offers/:offerId"。这意味着直接转到http://localhost:3001/offers/television/ 将由您的offers.all 函数处理（未在帖子中显示），而不是返回索引的'/*' 处理程序。

要解决此问题，您有多种选择。

1. 检查路由是否为 AJAX 请求。如果是， 返回您的数据，如果不是，则返回索引。
2. 将您的 API 放在路径后面（如 /api），然后您的所有 API 请求将转到 /api/offers/:offId 获取数据。这释放了/offers/:offerId 由'/*'处理，返回索引

编辑： 我看到了困惑，app.router (Node.js / Express.js - How does app.router work?)。简而言之，app.use(app.router); 告诉 express 以哪个顺序运行路线作为一个整体。在此之后您提供相关路线的顺序。从您的代码（同样，没有显示全部）中，您只真正定义了 1 条路线，app.get('/*', function(req, res) { res.render('index'); });。您有单独的路由文件，但在您发布的内容中没有包含这些脚本。默认情况下，它们不会自动包含在内。