節點/角URL重寫不起作用

Question

我對angular/node很新。這就是說我有一個問題，刷新我的網頁只是返回一個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; 

所以，乾脆重新帽，我打開我的webserver並轉到localhost：3000和e一切正常，index.html服務。我去我的導航欄並點擊搜索，它會在我的角度控制器中啓動一個功能，該功能使用位置服務將我路由到/ search /。如果我通過用戶界面執行此操作，那麼所有加載的和我的search.html模板中的所有html都是好的。

如果我點擊刷新或嘗試手動輸入URL，它只是給了我從SQL返回的JSON。

對不起，如果有一些容易，但我一直堅持這一段時間，並在論壇上上下搜索。

編輯：我添加了我的快速路線到問題 編輯2：瑞安在下面有正確的解決方案。我的客戶端路由和服務器端路由使用相同的路徑。

Answer 1

最簡單的解決方案（和更清潔的IMO）是爲所有的API路線添加一個前綴。像

// app.js.... 

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

// ...app.js 

東西，我沒有看到你的角度代碼，使實際的Ajax調用您的節點服務的地方，但它看起來你在你的客戶端路由通過search.getIssuesByVal調用它。撥打電話的服務將有類似$http.get('/search', ....);您需要更改以符合您的新api路線：$http.get('/api/search', ....)。

如果您絕對必須使用相同的路徑，您將不得不使用內容協商。這意味着角度上你必須設置Accept頭爲application/json，然後在所有路由中（或者在中間件中更好），你可以檢查Accept頭來確定你是否應該服務索引頁或者json。