ノード/角張ったURL書き換えが機能しない

Question

私は角度/ノードがかなり新しいです。それは私のページをリフレッシュするだけで私のWebサーバーから提供されている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; 

だけで再キャップするために、私は私のロードWebサーバーを開き、localhost：3000とeに移動します非常にうまく動作し、index.htmlが提供されます。私はナビゲーションバーに行き、検索をクリックすると、位置検索サービスを使用して/検索/に私をルーティングする角度コントローラの機能を起動します。 UIを使ってこれを行うと、search.htmlテンプレート内のすべてのHTMLが読み込まれ、すべてHTMLが良好です。

私がリフレッシュをクリックするか、URLを手動で入力しようとすると、JSONが私にSQLから戻ってきます。

申し訳ありませんが、私はしばらくの間これに固執しており、フォーラムで上下に検索しました。

EDIT：私の急行ルートを質問に追加しました 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 

のようなものは、私はあなたのノードサービスに実際のAJAX呼び出しを行い、あなたの角度コード内の場所が表示されていないが、それはあなたがあなたのクライアント側のルーティングにsearch.getIssuesByValを経由して、それを呼び出しているに見えます。呼び出しを行うサービスは$http.get('/search', ....);のようになります。新しいAPIのルートに合わせて変更する必要があります：$http.get('/api/search', ....)。

絶対に同じパスを使用する必要がある場合は、コンテンツネゴシエーションを使用する必要があります。つまり、Acceptヘッダーをapplication/jsonに設定してから、すべてのルート（またはミドルウェアの方が良い）でAcceptヘッダーをチェックして、インデックスページまたはjsonを提供する必要があるかどうかを判断する必要があります。