노드/각 URL 다시 쓰기가 작동하지 않습니다.

Question

저는 각/노드에 익숙하지 않습니다. 즉, 내 웹 페이지에서 새로 고침되는 JSON 본문 만 새로 고치는 문제가 있습니다.

내 index.html이 응용 프로그램의 진입 점이기 때문에 미들웨어를 만들려고했으나 어떤 이유로이 특정 페이지에서 작동하지 않습니다.

는

//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을 app.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로 이동하십시오. verything은 잘 작동하며 index.html이 제공됩니다. 탐색 바를 클릭하고 검색을 클릭하면 내 각도 컨트롤러에서 위치 서비스를 사용하여 나를/검색 /에 연결하는 기능이 실행됩니다. UI를 통해이 작업을 수행하면 모든 search.html 템플릿의 모든 HTML이로드되고 모든 html이 좋습니다.

새로 고침을 클릭하거나 수동으로 URL을 입력하면 JSON이 다시 SQL로 돌아옵니다.

죄송합니다. 뭔가 쉬운 점이 있다면 죄송합니다. 잠시 동안 붙어있어서 포럼에서 위아래로 검색했습니다.

편집 : 질문에 내 표현 경로를 추가했습니다. 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 

같은 뭔가 내가 노드 서비스에 실제 아약스 호출을 당신의 각도 코드의 위치가 표시되지 않습니다하지만 당신은 당신의 클라이언트 측 라우팅에 search.getIssuesByVal를 통해 그것을 호출 보인다. 전화를 거는 서비스는 $http.get('/search', ....);과 같을 것입니다. 새로운 API 경로에 맞게 변경해야합니다 : $http.get('/api/search', ....).

절대적으로 동일한 경로를 사용해야하는 경우 콘텐츠 협상을 사용해야합니다. 즉 각도에 따라 Accept 헤더를 application/json으로 설정 한 다음 모든 경로 (또는 미들웨어의 경우)에서 Accept 헤더를 확인하여 인덱스 페이지 또는 json을 제공해야하는지 결정해야합니다.