Estou aprendendo o AngularJS e há uma coisa que realmente me incomoda.
Uso $routeProvider
para declarar regras de roteamento para meu aplicativo:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
mas quando navego para o meu aplicativo no navegador, vejo em app/#/test
vez de app/test
.
Então, minha pergunta é por que o AngularJS adiciona esse hash #
aos URLs? Existe alguma possibilidade de evitá-lo?
javascript
angularjs
pikkvile
fonte
fonte
Respostas:
Na verdade, você precisa do # (hashtag) para navegadores não HTML5.
Caso contrário, eles apenas farão uma chamada HTTP para o servidor no href mencionado. O # é um curto-circuito do navegador antigo que não aciona a solicitação, o que permite que muitas estruturas js construam seus próprios roteamentos no lado do cliente.
Você pode usar
$locationProvider.html5Mode(true)
para dizer ao angular para usar a estratégia HTML5, se disponível.Aqui está a lista de navegadores que suportam a estratégia HTML5: http://caniuse.com/#feat=history
fonte
Se você ativou o html5mode como já foi dito, e crie um
.htaccess
arquivo com o seguinte conteúdo (ajuste para suas necessidades):Os usuários serão direcionados ao seu aplicativo quando entrarem em uma rota adequada, e o aplicativo lerá a rota e os levará para a "página" correta.
EDIT: Apenas certifique-se de não ter nenhum nome de arquivo ou diretório em conflito com suas rotas.
fonte
/about
a página falha, a menos que eu chegue a ela através do aplicativo.Permite escrever uma resposta simples e curta
graças a @plus - por detalhar a resposta acima
fonte
experimentar
Mais informações em $ locationProvider
Using $ location
fonte
As informações a seguir são de:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
É muito fácil obter URLs limpos e remover a hashtag da URL no Angular.
Por padrão, o AngularJS roteará URLs com uma hashtag. Por exemplo:
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact
Há duas coisas que precisam ser feitas.
Configurando $ locationProvider
Definindo nossa base para links relativos
Serviço $ location
No Angular, o serviço de localização $ analisa o URL na barra de endereço e faz alterações no seu aplicativo e vice-versa.
Eu recomendo a leitura dos documentos oficiais de localização do Angular $ para ter uma idéia do serviço de localização e do que ele fornece.
https://docs.angularjs.org/api/ng/service/$location
$ locationProvider e html5Mode
Faremos isso ao definir seu aplicativo Angular e configurar suas rotas.
O que é a API de histórico do HTML5? É uma maneira padronizada de manipular o histórico do navegador usando um script. Isso permite que o Angular altere o roteamento e os URLs de nossas páginas sem atualizar a página. Para obter mais informações, veja um bom artigo sobre a API de histórico de HTML5:
http://diveintohtml5.info/history.html
Configuração para links relativos
<base>
no<head>
documento. Isso pode estar no arquivo index.html raiz do seu aplicativo Angular. Encontre a<base>
tag e defina-a no URL raiz que você deseja para o seu aplicativo.Por exemplo:
<base href="https://stackoverflow.com/">
Fallback para navegadores mais antigos
Em conclusão
fonte
Se você deseja configurá-lo localmente no OS X 10.8, servindo o Angular com Apache, poderá encontrar o seguinte em seu arquivo .htaccess:
Opções + FollowSymlinks, se não definido, pode fornecer um erro proibido nos logs da seguinte forma:
É necessário reescrever a base, caso contrário, as solicitações serão resolvidas para a raiz do servidor que, localmente, por padrão, não é o diretório do projeto, a menos que você tenha configurado seus vhosts especificamente, portanto, é necessário definir o caminho para que a solicitação encontre o diretório raiz do projeto. Por exemplo, na minha máquina, tenho um diretório / Users / me / Sites onde mantenho todos os meus projetos. Como o antigo OS X configurado.
As próximas duas linhas dizem efetivamente se o caminho não é um diretório ou arquivo, portanto, você precisa ter arquivos ou diretórios iguais aos caminhos de rota do aplicativo.
A próxima condição diz que, se a solicitação não terminar com as extensões de arquivo especificadas, adicione o que você precisa lá
E o último [L] está dizendo para servir o arquivo index.html - seu aplicativo para todos os outros pedidos.
Se você ainda tiver problemas, verifique o log do apache, provavelmente ele fornecerá dicas úteis:
fonte
O uso do modo HTML5 requer a reescrita de URL no servidor, basicamente você precisa reescrever todos os seus links no ponto de entrada do seu aplicativo (por exemplo, index.html). Exigir uma
<base>
tag também é importante para este caso, pois permite ao AngularJS diferenciar entre a parte da URL que é a base do aplicativo e o caminho que deve ser tratado pelo aplicativo. Para obter mais informações, consulte o AngularJS Developer Guide - Usando $ location no modo HTML5 no lado do servidor .Atualizar
Como configurar o servidor para funcionar com o html5Mode 1
Quando você tiver o html5Mode ativado, o
#
personagem não será mais usado em seus URLs. O#
símbolo é útil porque não requer configuração do lado do servidor. Sem#
, o URL parece muito melhor, mas também requer reescritas no lado do servidor. aqui estão alguns exemplos:Apache Rewrites
Nginx Rewrites
Regravações do IIS do Azure
Reescrições Expressas
Veja também
fonte
No Angular 6, com o seu roteador, você pode usar:
fonte
Você também pode usar o código abaixo para redirecionar para a página principal (home):
Depois de especificar seu redirecionamento como acima, você pode redirecionar as outras páginas, por exemplo:
fonte
**
** porque
fonte