Em nosso aplicativo Angular, temos que lidar com identificações que contêm um "ponto". Por exemplo:

book = {
  id: '123.456'
}

Temos problemas ao usar IDs como parâmetros de URL. Tudo funciona bem se a navegação ocorrer através de "Angular", ou seja, clicar no link que chama$state.go('bookDetails', {bookId: book.id});. Mas as coisas não funcionam ao recarregar a página

"Não é possível obter /bookDetails?bookId=123.456"

no controlador:

$scope.viewBookDetails = function() {
    $state.go('bookDetails', {bookId: book.id});
}

na vista

<a href="" ng-click="viewBookDetails(); $event.stopPropagation();">

no roteador:

.state('bookDetails', {
    url: '/bookDetails?bookId'
}

no navegador:

https://example.com/bookDetails?bookId=123.456

O link funciona se o "ponto" for substituído por%2E no navegador.

Tentamos substituir "ponto" por "% 2E" no parâmetro para $ state.go ()

$scope.viewBookDetails = function() {
    $state.go('bookDetails', {bookId: book.id.split('.').join('%2E')});
}

mas não funciona porque o "%" é codificado automaticamente e o "ponto" no navegador é substituído por "% 252E"

https://example.com/bookDetails?bookId=123%252E456