节点/角度 url 重写不起作用

Question

我对角度/节点很陌生。话虽如此，我遇到了一个问题，刷新我的页面只会返回一个 JSON 正文，该正文是从我的网络服务器提供的。

我尝试创建中间件，以便我的 index.html 成为应用程序的入口点，但由于某种原因，在这个特定页面上它不想工作。

app.js

    //set up web server
var express = require('express');
var path = require('path');
var app = express();
var port = process.env.port || 5000;
var rootPath = path.normalize(__dirname);

//init body parser
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
//serve up static css/js files from public directory
app.use(express.static(rootPath + '/public'));
app.use(express.static(rootPath + '/src'));


//init sql
var sql = require('mssql');
var config = require('./dbconfig');

sql.connect(config, function (err) {
    if (err !== null) {
        console.log(err);
    };
});


//set up routes
var searchRouter = require('./src/webserver/routes/searchRoutes')();
app.use('/search', searchRouter);


app.get('*', function (req, res) {
   res.sendFile(rootPath + '/src/index.html');
  // res.render(rootPath + '/src/index.html');
  });

 //start server
app.listen(port, function (err) {
console.log('running server on port ' + port);
});

searchService.js - 这是一个向客户端发送 json 响应的服务。这段代码之间有一个路由和控制器来处理响应。

var sql = require('mssql');

var searchService = function () {

function searchIssues(req, res, searchterm) {
    var fetch = 50; //show 50 results at a time
    var offset = 0; //will extract out of request eventually
    var ps = new sql.PreparedStatement();
    ps.input('searchterm', sql.NVarChar);
    ps.input('fetch', sql.Int);
    ps.input('offset', sql.Int);
    ps.prepare('select * from dbo.udfSearchIssues(@searchterm, @offset, @fetch)',
        function (err) {
            ps.execute({
                    searchterm: searchterm,
                    fetch: fetch,
                    offset: offset
                },
                function (err, recordset) {
                    if (recordset.length === 0) {
                        res.status(404).send('Not Found');
                    } else {
                        res.setHeader('Content-Type', 'application/json');
                        res.send(recordset);
                        res.end();
                    }
                });
        });
}

return {
    searchIssues: searchIssues
};
}

module.exports = searchService; 

我的角度客户端路由

    'use strict';
(function () {
var bugFarmApp = angular.module('bugFarmApp', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/issue/:issueKey', {
           templateUrl: 'templates/issue.html',
            controller: 'IssueController'
        });
        $routeProvider.when('/search/', {
            templateUrl: 'templates/search.html',
            controller: 'SearchController',
            resolve: {
                event: function($route, search){
                    return search.getIssues().$promise;
                }
            }
        });
        $routeProvider.when('/search/:searchval', {
            templateUrl: 'templates/search.html',
            controller: 'SearchController',
            resolve: {
                event: function($route, search){
                    return                       search.getIssuesByVal($route.current.pathParams.searchval)
.$promise;
                }
            }
        });
        $routeProvider.otherwise({
            redirectTo: '/'
        });

        $locationProvider.html5Mode(true);
    });

})();

searchRoute.js

var express = require('express');
var searchRouter = express.Router();

var router = function(){

var searchController = require('../controllers/searchController')();

searchRouter.route('/')
    .get(searchController.getAllIssues);
searchRouter.route('/:searchval')
    .get(searchController.getIssuesByValue);

return searchRouter;
};

module.exports = router;

searchController.js

var searchController = function () {

var searchService = require('../services/searchService')();

var getAllIssues = function (req, res) {
    searchService.searchIssues(req, res, '');
};


var getIssuesByValue = function (req, res) {
    if (req.params.searchval == undefined) {
        var searchterm = '';   
    } else {
        var searchterm = req.params.searchval;    
    };
    searchService.searchIssues(req, res, searchterm);
};

 return {
    getAllIssues: getAllIssues,
    getIssuesByValue: getIssuesByValue
 };


};

module.exports = searchController;

所以再次重申一下，我加载了我的网络服务器并转到 localhost:3000，一切正常，并且 index.html 已提供服务。我转到导航栏并单击搜索，它会在我的角度控制器中触发一个函数，该函数使用位置服务将我路由到 /search/。如果我通过 UI 执行此操作，所有内容都会加载，并且我的 search.html 模板中的所有 html 都很好。

如果我单击刷新或尝试手动输入 URL，它只会给我从 SQL 返回的 JSON。

对不起，如果有什么简单的，但我已经卡了一段时间，并在论坛上上下搜索。

编辑：我在问题中添加了我的快速路线 EDIT2：Ryan 在下面有正确的解决方案。我的客户端路由和服务器端路由使用相同的路径。

Answer 1

最简单的解决方案（和更清洁的 IMO）是为所有 api 路由添加前缀。像

// app.js....

//set up routes
var searchRouter = require('./src/webserver/routes/searchRoutes')();
app.use('/api/search', searchRouter);

// ...app.js

我在您的 Angular 代码中没有看到对您的节点服务进行实际 ajax 调用的位置，但看起来您是在客户端路由中通过 search.getIssuesByVal 调用它。进行调用的服务将具有类似 $http.get('/search', ....); 的内容，您需要更改它以匹配您的新 api 路由：$http.get('/api/search', ....)。

如果您绝对必须使用相同的路径，则必须使用内容协商。这意味着在 Angular 中，您必须将 Accept 标头设置为 application/json，然后在所有路由中（或者在中间件中更好），您将检查 Accept 标头以确定您应该提供索引页面还是 json。