URL Amigável AngularJS

Front-end JavaScript
,
#1

Boa tarde senhores,

Estou com um problema para deixar minha url amigável, utilizando o Angular JS.

Estou utilizando uma ui-view, e dentro dela, tenho meu elemento < a > que possui um “ui-sref”, que por sua vez, faz o link com o meu app.js desta forma:

< a ui-sref=“servico-single({id: servico.id, descricao: servico.descricao})” class=“btn-flat btn”>Saiba mais

Em meu controller, eu recebo os parâmetros corretamente desta forma:

.state(‘servico-single’, {
url: “/servico/:id/:descricao”,
templateUrl: “servico-single.html” ,
controller: …

, e na URL me traz da seguinte forma:

localhost/#/servico/15/Cat%C3%A1logo%20brasileiro%20de%20cooperativas%20exportadoras, onde a descricao seria : CATÁLOGO BRASILEIRO DE COOPERATIVAS EXPORTADORAS.

Como eu faço para a minha url ficar como ‘catalogo-brasileiro-de-cooperativas-exportadoras’ ?

Já tentei de diversas maneiras… se alguém puder da uma luz, eu agradeço.

Muito obrigado até então.

#2

E ai jovem,

Vc esta infringindo o enconding de sua URL, %20 na tabela ASCII tem o valor de espaço, e os demais caracteres não esperados devem ser ocasionados pelo acento em sua descrição. Tente “tratar” sua descrição antes.

#3

É exatamente este o problema. Espaços presentes na URL são tratados como %20.
Ao invés de passar a descrição de uma vez na URL, crie uma função que retorne uma string formatada, substituindo os espaços por “-”, que é uma boa prática. Aí vc pode chamar diretamente no model msm:

< a ui-sref="servico-single({id: servico.id, descricao: formatarDescricao(servico.descricao)})" class="btn-flat btn">Saiba mais

$scope.formatarDescricao = function(descricao){
	servico.descricao = descricao.replace(" ", "-");
}

Algo mais ou menos assim. Olhe a documentação do método replace().