Removendo o identificador de fragment de URLs AngularJS (símbolo #)

É possível remover o símbolo # dos URLs angular.js?

Eu ainda quero poder usar o botão Voltar do navegador, etc, quando eu mudar a visualização e atualizar o URL com params, mas não quero o símbolo #.

O routeProvider do tutorial é declarado da seguinte forma:

angular.module('phonecat', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). otherwise({redirectTo: '/phones'}); }]); 

Posso editar isso para ter a mesma funcionalidade sem o #?

Sim, você deve configurar $locationProvider e definir html5Mode como true :

 angular.module('phonecat', []). config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). otherwise({redirectTo: '/phones'}); $locationProvider.html5Mode(true); }]); 

Certifique-se de verificar o suporte do navegador para a API de histórico do html5:

  if(window.history && window.history.pushState){ $locationProvider.html5Mode(true); } 

Para remover a tag hash de uma URL bonita e também para que seu código funcione após a minificação, você precisa estruturar seu código, como no exemplo abaixo:

 jobApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/', { templateUrl: 'views/job-list.html', controller: 'JobListController' }). when('/menus', { templateUrl: 'views/job-list.html', controller: 'JobListController' }). when('/menus/:id', { templateUrl: 'views/job-detail.html', controller: 'JobDetailController' }); //you can include a fallback by including .otherwise({ //redirectTo: '/jobs' //}); //check browser support if(window.history && window.history.pushState){ //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so:   // to know more https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about setting base URL visit: https://docs.angularjs.org/error/$location/nobase // if you don't wish to set base URL then use this $locationProvider.html5Mode({ enabled: true, requireBase: false }); } }]); 

Eu escrevo uma regra no web.config depois que $locationProvider.html5Mode(true) é definido em app.js

Espero que ajude alguém.

                 

No meu index.html, adicionei isso a

  

Não se esqueça de instalar o gravador de url para o iis no servidor.

Além disso, se você usar o Web Api e o IIS, esse URL de correspondência não funcionará, pois ele alterará suas chamadas de API. Portanto, adicione terceira input (terceira linha de condição) e forneça um padrão que exclua as chamadas de www.yourdomain.com/api

Se você estiver na pilha .NET com MVC com AngularJS, é isso que você precisa fazer para remover o ‘#’ do url:

  1. Configure sua base href na sua página de _Layout:

  2. Em seguida, adicione o seguinte na sua configuração de aplicativo angular: $locationProvider.html5Mode(true)

  3. Acima removerá ‘#’ do url, mas a atualização da página não funcionará, por exemplo, se você estiver em “yoursite.com/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about”, a página refreash lhe dará um 404. Isso ocorre porque o MVC não sabe sobre o roteamento angular e pelo padrão MVC irá procurar por uma página MVC para ‘https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about’, que não existe no caminho de roteamento do MVC. A solução alternativa para isso é enviar todas as solicitações de página MVC para uma única visualização do MVC e você pode fazer isso adicionando uma rota que captura todas as

url:

 routes.MapRoute( name: "App", url: "{*url}", defaults: new { controller = "Home", action = "Index" } ); 

Você pode ajustar o html5mode, mas isso é apenas funcional para links incluídos em âncoras html da sua página e como a URL se parece na barra de endereços do navegador. A tentativa de solicitar uma subpágina sem a hashtag (com ou sem html5mode) de qualquer lugar fora da página resultará em um erro 404. Por exemplo, a seguinte solicitação CURL resultará em um erro de página não encontrada, independentemente de html5mode:

 $ curl http://foo.bar/phones 

embora o seguinte retorne a raiz / https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home page:

 $ curl http://foo.bar/#/phones 

A razão para isso é que qualquer coisa após a hashtag é removida antes que a solicitação chegue ao servidor. Assim, um pedido de http://foo.bar/#/portfolio chega ao servidor como uma solicitação para http://foo.bar . O servidor responderá com uma resposta 200 OK (presumivelmente) para http://foo.bar e o agente / cliente processará o resto.

Portanto, nos casos em que você deseja compartilhar um URL com outras pessoas, não há outra opção a não ser include a hashtag.

Siga 2 passos
1. Primeiro defina o $ locationProvider.html5Mode (true) no seu arquivo de configuração do aplicativo.
Por exemplo –
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Segundo defina o dentro da sua página principal.
Por exemplo ->

O serviço de localização $ recorrerá automaticamente ao método hash-part para navegadores que não suportam a API de histórico do HTML5.

Minha solução é criar .htaccess e usar código #Sorian .. sem .htaccess não consegui remover #

 RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico) RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ./index.html [L] 

Como foi mencionado nas respostas acima, os passos são-

Adicionar a index.html Ativar html5mode $ location.html5Mode (true) em app.js.

Com isso, o aplicativo funcionará bem. Mas apenas nos cenários quando você navega do index.html para outras páginas. Por exemplo, minha página de base é http://www.javainuse.com. Se eu clicar no link java, ele irá navegar corretamente para http://www.javainuse.com/java.

No entanto, se eu ir diretamente para http://www.javainuse.com/java receberá erro de página não encontrado.

Para resolver isso, temos que usar a reescrita de url. Dot net requer regravação de URL para o IIS.

Se você estiver usando o tomcat, a regravação de URL terá que ser feita usando o Tuckey. Pode obter mais informações sobre reescrita de URL aqui

De acordo com a documentação. Você pode usar:

 $locationProvider.html5Mode(true).hashPrefix('!'); 

NB: Se o seu navegador não suporta HTML 5. Não se preocupe: D tem fallback para o modo hashbang. Então, você não precisa verificar com if(window.history && window.history.pushState){ ... } manualmente

Por exemplo: se você clicar em: Some URL

No navegador HTML5 : o ângulo será redirecionado automaticamente para example.comhttps://stackoverflow.com/other

Em Navegador não HTML5 : o ângulo redirectá automaticamente para example.com/#!https://stackoverflow.com/other

Essa resposta assume que você está usando nginx como proxy reverso e já definiu $ locationProvider.html5mode como true.

-> Para as pessoas que ainda podem estar lutando com todas as coisas legais acima.

Certamente, a solução @maxim grach funciona bem, mas para a solução de como responder a solicitações que não querem que a hashtag seja incluída, o que pode ser feito é verificar se o php está enviando o 404 e depois reescrevê-lo. A seguir está o código para o nginx,

Na localização do php, detectar erro 404 php e redirect para outro local,

 location ~ \.php${ ... fastcgi_intercept_errors on; error_page 404 = /redirect/$request_uri ; } 

Em seguida, reescreva o url no local de redirecionamento e proxy_pass os dados, fora do curso, coloque o URL do seu site no local do URL do meu blog. (Pedido: questione isso somente depois que você tentou)

 location /redirect { rewrite ^/redirect/(.*) /$1; proxy_pass http://www.techromance.com; } 

E veja a mágica.

E isso definitivamente funciona, pelo menos para mim.

Etapa 1: Injetar o serviço $ locationProvider no construtor da configuração do aplicativo

Etapa 2: adicione a linha de código $ locationProvider.html5Mode (true) ao construtor da configuração do aplicativo.

Etapa 3: na página do contêiner (landing, master ou layout), adicione uma tag html como dentro da tag.

Etapa 4: remova todo o ‘#’ para a configuração de roteamento de todas as tags de âncora. Por exemplo, href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home” se torna href = “https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home”; href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about” se torna herf = “https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about”; href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/contact “torna-se href =” contato ”

   

Comece em index.html remove all # de About Us por isso deve ser parecido com About Us .Agora na tag principal de index.html escreva logo após a última metatag .

Agora, no seu roteamento, js injete $locationProvider e escreva $locatonProvider.html5Mode(true); Algo assim:-

 app.config(function ($routeProvider, $locationProvider) { $routeProvider .when("/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home", { templateUrl: "Templates/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home.html", controller: "https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/homeController" }) .when("/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/aboutus",{templateUrl:"Templates/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/aboutus.html"}) .when("/courses", { templateUrl: "Templates/courses.html", controller: "coursesController" }) .when("/students", { templateUrl: "Templates/students.html", controller: "studentsController" }) $locationProvider.html5Mode(true); }); 

Para mais detalhes, assista a este vídeo https://www.youtube.com/watch?v=XsRugDQaGOo

Basta adicionar $locationProvider em

 .config(function ($routeProvider,$locationProvider) 

e, em seguida, adicione $locationProvider.hashPrefix(''); depois de

 .otherwise({ redirectTo: '/' }); 

É isso aí.