node.js - AngularJS と nodeJs Express: ルートと更新

Question

私のアプリは正常に「動作」していますが、ブラウザで F5 を押すと問題が発生します。

私のアプリは次のように構成されています。

nodeJs + Express、Expressにはこれらのルートがあります

core.app.get('/', function(req, res){
  res.render('index')
});

core.app.get('/partials/:name', function(req, res){
    nome = req.params.name
    res.render('partials/' + name)
});

core.app.get('/partials/:folder/:name', function(req, res){
    name = req.params.name
    pasta = req.params.folder
    res.render('partials/' + folder + '/' + name)
});

サービスのルート

core.app.post('/servico/usuario/buscar', function(req, res){
    console.log('servico.usuario.buscar');

    console.log(req.body);

    model.buscar(core, req.body.termo, function(status, data){
        if(status == core.Status.error){
            console.error("Erro na busca de usuário!")
            console.error("termo: " + req.body.termo);
        }
        res.json(data);
    })
})

私のangularJsにはこれらのルートがあります

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {templateUrl: 'partials/index'})
        .when('/enviar/busca/usuarios', {templateUrl: '/partials/usuario/lista_usuario', reloadOnSearch: true})
        .when('/enviar/busca/produto', {templateUrl: '/partials/produto/listar', controller: 'BuscaProduto'})
}]);

私のフォーム

form#form1(name='formBuscaTopo', method='post', novalidate)
    span.L
        input(name='tipoBuscaTopo', type='radio', value="p", data-ng-model="busca.tipoBusca")
        label(for='produtos') produtos
        input(name='tipoBuscaTopo', type='radio', value="u", data-ng-model="busca.tipoBusca")
        label(for='produtos') usuários

    input#busca_geral.busca_campo(type='text', name='termo', data-ng-model="busca.termo", placeholder='faça aqui a sua busca')

    #lupa
        img(src='/images/base/lupa.png', alt='Buscar', title='Buscar', data-ng-click="buscar()")

そして私の角度コントローラーで

http.post('/servico/usuario/buscar', scope.busca)
        .success(function(data){
            scope.listaUsuario = data;
            location.path('/enviar/busca/usuarios');
        })

そして私のリストビュー

    div.box_busca_usu.c_azlEsc(data-ng-repeat="item in listaUsuario")
    div.busca_img_usu
        img.img75(data-ng-src="/img/avatar/gd/{{item.usuario.foto}}")
    div.box_d_u
        div.busca_n_usu.txt_14 {{item.usuario.nome}}
        img.img16(src='/img/status/superUsuario.png', title='usuário rubi', alt='usuário rubi')
        .HW100L.top5
            span {{item.usuario.cidade}}
            |/
            span {{item.usuario.estado}}
        .HW100L.txt_11.c_666.top5 Cadastrado desde
            span.c_azlEsc.lft5 {{item.usuario.dataCadastro}}

すべて正常に動作し、応答は完全に出力されますが、F5 を押すと「/enviar/busca/usuarios を取得できません」というメッセージが表示されます。

問題は、エクスプレスに「/enviar/busca/usuarios」のルートがないためだと思います。これは、最後のステップで angular $location.path に設定されていますが、このルートをエクスプレスルートに設定すると、問題が発生します更新すると元のフォームの値 (パラメーター) が送信されないため、検索する用語がないため、エクスプレスはエラー メッセージを返します。

私の問題を解決するための提案はありますか？

ご清聴ありがとうございました。

Answer 1

これを適切に処理するには、Express アプリへのすべての仮想 (ルートなど) リクエストが「インデックス」ビューで応答することを確認する必要があります。

Express ルートの順序を変更し、「*」を使用して「/partials/...」などのリクエスト以外のすべてのリクエストをキャッチすることで、これを達成できるはずです。「/partials/....」ルートがある限りnext() を呼び出さないでください。

core.app.get('/partials/:name', function(req, res){
    nome = req.params.name
    res.render('partials/' + name)
});

core.app.get('/partials/:folder/:name', function(req, res){
    name = req.params.name
    pasta = req.params.folder
    res.render('partials/' + folder + '/' + name)
});

core.app.get('*', function(req, res){
  res.render('index')
});

Answer 2

method='POST' を #form1 から削除