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;

所以再次上限，我加载我的网络服务器并转到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', ....)。

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

节点/ Angular url-rewrite无法正常工作

1 个答案: