node.js - AngularJS 和 NodeJs Express : routes and refresh

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()")

在我的 Angular Controller 中

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

和我的 ListView

    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”。

我认为问题是因为我的 Express 中没有“/enviar/busca/usuarios”的路线，这是在最后一步中在 Angular $location.path 中设置的，但是，如果我在 Express route 设置此路线，问题发生了变化，因为刷新没有发送原始表单值(参数)，所以，我的express返回错误消息，因为没有任何术语可供搜索。

有什么建议可以解决我的问题吗？

感谢您的关注，

Answer 1

要正确处理此问题，您需要确保对 Express 应用程序的任何虚拟(例如路由)请求都将使用“索引” View 进行响应。

您应该能够通过重新排序 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')
});