AngularJS and nodeJs Express: routes and refresh

Question

My app is "working" fine, but, when I press F5 in browser my problem appears.

My app is organized this way:

nodeJs + express, in Express I have those routes

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)
});

route for service

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);
    })
})

in my angularJs i have those routes

.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'})
}]);

my form

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

and in my angular controller

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

and my list view

    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}}

all is working fine, and the response is printed perfectly, but, if I press F5 I receive the message 'Cannot GET /enviar/busca/usuarios'.

I think the problem is because there is no route for '/enviar/busca/usuarios' in my express, that is set in angular $location.path in the last step, but, if I set this route in express routes, the problem change, because refresh don't send the original form values (parameters), so, my express return an error message, because don't have any term to search.

Is there some sugestion to solve my problem?

thanks for attention,

Answer 1

To handle this properly you need to make sure that any virtual (e.g. route) requests to your Express app will respond with the 'index' view.

You should be able to accomplish this by re-ordering your Express routes and using '*' to catch all requests besides those for '/partials/...' etc. As long as your '/partials/....' routes don't call next() you should be good.

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

Remove method='POST' from #form1