Узел/Угловой url-rewrite не работает

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 и e все работает отлично, и index.html обслуживается. Я перехожу к своей панели навигации и нажимаю поиск, и он запускает функцию в моем угловом контроллере, который использует службу определения местоположения, чтобы перенаправить меня в/search /. Если я делаю это через пользовательский интерфейс, все загружается, и все html в моем шаблоне search.html хороши.

Если я нажму обновить или попробую вручную ввести URL-адрес, он просто дает мне JSON. Я возвращаюсь с SQL.

Извините, если есть что-то простое, но я застрял на нем какое-то время и искал вверх и вниз по форуму.

EDIT: Я добавил свои экспресс-маршруты на вопрос EDIT2: у Райана было правильное решение ниже. Мои маршруты на стороне клиента и маршруты на стороне сервера использовали один и тот же путь.

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.