Ligações normais de Angularjs com html5Mode

Eu estou trabalhando com angularjs no modo html 5. Que parece assumir o controle de todas as hrefs na página. Mas e se eu quiser ter um link para algo dentro do mesmo domínio do aplicativo, mas não no aplicativo. Um exemplo seria um pdf.

Se eu fizer angular tentará usar o html5mode e usar o provedor de rotas para determinar qual visão deve ser carregada. Mas eu realmente quero que o navegador vá para essa página do jeito normal.

A única maneira de fazer isso é criar uma regra com o provedor de rotas e redirect para a página correta com window.location?

no modo HTML5, há três situações em que a tag A não é reescrita: a partir dos documentos angulares

  • Links que contêm um atributo de target . Exemplo: link
  • Links absolutos que apontam para um domínio diferente Example: link
  • Links começando com ‘/’ que levam a um caminho base diferente quando a base é definida Example: link

então o seu caso seria 1. add target="_self"

A partir do Angular v1.3.0, há uma nova opção de configuração rewriteLinks para o provedor de localização. Isso muda o “seqüestro” de todos os links da página:

 module.config(function ($locationProvider) { $locationProvider.html5Mode({ enabled: true, rewriteLinks: false }); }); 

Embora desabilitar esse comportamento para todos os links talvez não seja sua intenção, estou postando isso para outras pessoas que, como eu, querem usar o $location no modo html5 apenas para alterar o URL sem afetar todos os links.

Se você não quiser que o Angular assuma o controle do href. Coloque um atributo de destino no link.

Portanto, o PDF passará pelo html5mode e pelo routeProvider, e o navegador apenas acessará esse URL.

Outra solução. Todos os links funcionarão normalmente (recarregar a página). Links marcados com ng-href="/path" serão reproduzidos no pushState. Pequeno JS hack ajuda com isso.

 .config(["$locationProvider", function($locationProvider) { // hack for html5Mode customization $('a').each(function(){ $a = $(this); if ($a.is('[target]') || $a.is('[ng-href]')){ } else { $a.attr('target', '_self'); } }); $locationProvider.html5Mode(true); }])