Question

我一直在使用类似的问题来尝试找到我遇到的问题的解决方案。我明白为了使用带有angularjs的html5Mode，我需要告诉服务器如何处理直接访问页面。

我遇到的问题是点击应用中的链接会使页面正常，但直接访问不会显示优惠。

E.g。

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头还有基础（href =“/”）

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

为什么它不会返回优惠，即使它应该在快递routes.js中点击/ offer路线？或者我做了一些奇怪的事情？

谢谢！

Answer 1

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

要解决此问题，您可以选择。

检查路由以查看它是否是AJAX请求。如果是，返回您的数据，如果不是，则返回索引。
将您的API置于路径（如/ api）之后，然后您的所有API请求都将转到 /api/offers/:offId获取数据。这释放了/offers/:offerId 由'/*'处理，返回索引

编辑：我看到了混乱，app.router（Node.js / Express.js - How does app.router work?）。简而言之，app.use(app.router);告诉表明将作为一个整体运行路由的顺序。您在该点之后提供物质的路线的顺序。从你的代码（再次，没有显示所有代码），你只需要定义1个路由，app.get('/*', function(req, res) { res.render('index'); });。您有单独的路径文件，但没有在您发布的内容中包含这些脚本。默认情况下，它们会自动包含。

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

1 个答案: