Rimozione dell’identificatore di frammento dagli URL di AngularJS (simbolo #)

È ansible rimuovere il simbolo # dagli URL angular.js?

Voglio comunque poter utilizzare il pulsante Indietro del browser, ecc., Quando cambio la vista e aggiorno l’URL con i parametri, ma non voglio il simbolo #.

Il tutorial routeProvider è dichiarato come segue:

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 modificare questo per avere la stessa funzionalità senza #?

Sì, dovresti configurare $locationProvider e impostare html5Mode su 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); }]); 

Assicurati di controllare il supporto del browser per l’API della cronologia html5:

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

Per rimuovere il tag Hash per un URL carino e anche perché il tuo codice funzioni dopo la minificazione, devi strutturare il tuo codice come nell’esempio seguente:

 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 }); } }]); 

Scrivo una regola in web.config dopo che $locationProvider.html5Mode(true) è impostato in app.js

Spero, aiuti qualcuno.

                 

Nel mio index.html l’ho aggiunto a

  

Non dimenticare di installare url rewriter per iis sul server.

Inoltre se usi Web Api e IIS, l’url di corrispondenza non funzionerà, poiché cambierà le tue chiamate API. Quindi aggiungi un terzo input (terza riga di condizione) e dai uno schema che escluderà le chiamate da www.yourdomain.com/api

Se sei nello stack .NET con MVC con AngularJS, questo è quello che devi fare per rimuovere il ‘#’ dall’URL:

  1. Imposta il tuo href di base nella tua pagina _Layout:

  2. Quindi, aggiungi la seguente configurazione di app angular: $locationProvider.html5Mode(true)

  3. Sopra rimuoverà “#” dall’url, ma l’aggiornamento della pagina non funzionerà, ad esempio se ti trovi in ​​”yoursite.com/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about” refreash ti darà un 404. Questo perché MVC non conosce il routing angular e MVC lo usa cercherà una pagina MVC per “https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about” che non esiste nel percorso di routing MVC. Per ovviare a questo problema, è necessario inviare tutte le richieste di pagina MVC a una singola vista MVC e lo si può fare aggiungendo un percorso che cattura tutto

url:

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

Puoi modificare l’html5mode ma è funzionale solo per i link inclusi negli ancoraggi html della tua pagina e come appare l’url nella barra degli indirizzi del browser. Il tentativo di richiedere una sottopagina senza l’hashtag (con o senza html5mode) da qualsiasi posizione al di fuori della pagina comporterà un errore 404. Ad esempio, la seguente richiesta CURL genererà un errore di pagina non trovata, indipendentemente da html5mode:

 $ curl http://foo.bar/phones 

sebbene quanto riportato di seguito restituirà la root / https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home page:

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

La ragione di ciò è che qualsiasi cosa dopo che l’hashtag viene rimosso prima che la richiesta arrivi al server. Quindi una richiesta per http://foo.bar/#/portfolio arriva al server come richiesta per http://foo.bar . Il server risponderà con una risposta di 200 OK (presumibilmente) per http://foo.bar e l’agente / client elaborerà il resto.

Pertanto, nei casi in cui desideri condividere un URL con altri, non hai altra scelta che includere l’hashtag.

Segui 2 passaggi-
1. Imposta innanzitutto $ locationProvider.html5Mode (true) nel file di configurazione dell’app.
Per esempio –
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2. Secondo impostare la all’interno della pagina principale.
Per esempio ->

Il servizio $ location eseguirà automaticamente il fallback del metodo hash-part per i browser che non supportano l’API della cronologia HTML5.

La mia soluzione è creare .htaccess e usare #Sorian code .. senza .htaccess Non ho rimosso #

 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] 

Come è stato menzionato nelle risposte di cui sopra i passaggi sono-

Aggiungi a index.html Abilita html5mode $ location.html5Mode (true) in app.js.

Con questo l’applicazione funzionerà bene. Ma solo negli scenari quando navighi da index.html ad altre pagine. Ad esempio la mia pagina di base è- http://www.javainuse.com. Se clicco su link java, naviga correttamente su http://www.javainuse.com/java.

Tuttavia, se vado direttamente su http://www.javainuse.com/java otterrò l’errore di pagina non trovata.

Per risolvere questo dobbiamo usare la riscrittura dell’URL. Dot net richiede la riscrittura degli URL per IIS.

Se si utilizza Tomcat, la riscrittura dell’URL dovrà essere eseguita utilizzando Tuckey. Puoi ottenere maggiori informazioni sulla riscrittura degli URL qui

Secondo la documentazione. Puoi usare:

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

NB: Se il tuo browser non supporta HTML 5. Non preoccuparti: D ha fallback alla modalità hashbang. Quindi, non è necessario controllare if(window.history && window.history.pushState){ ... } manualmente

Ad esempio: se fai clic su Some URL

Nel browser HTML5 : angular reindirizzerà automaticamente su example.comhttps://stackoverflow.com/other

In Not HTML5 Browser : angular reindirizzerà automaticamente su example.com/#!https://stackoverflow.com/other

Questa risposta presuppone che tu stia utilizzando nginx come proxy inverso e che hai già impostato $ locationProvider.html5mode su true.

-> Per le persone che potrebbero ancora lottare con tutte le cose interessanti di cui sopra.

Sicuramente, la soluzione @maxim grach funziona bene, ma per la soluzione di come rispondere alle richieste che non vogliono includere l’hashtag, in primo luogo, è ansible verificare se php sta inviando 404 e quindi riscrive l’url. Di seguito è riportato il codice per nginx,

Nella posizione php, rileva 404 errori php e reindirizza in un’altra posizione,

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

Quindi riscrivi l’url nella posizione di reindirizzamento e proxy_pass i dati, offcourse, inserisci l’URL del tuo sito web nel punto dell’URL del mio blog. (Richiesta: interroga questo solo dopo averlo provato)

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

E vedi la magia.

E sicuramente funziona, almeno per me.

Passaggio 1: Inietta il servizio $ locationProvider nel costruttore della configurazione dell’app

Passaggio 2: aggiungi la riga di codice $ locationProvider.html5Mode (true) al costruttore della configurazione dell’app.

Passaggio 3: nella pagina del contenitore (landing, master o layout), aggiungi tag html come all’interno del tag.

Passaggio 4: rimuovere tutto il “#” per il routing di configurazione da tutti i tag di ancoraggio.Per esempio, href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home” diventa 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” diventa 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 “diventa href =” contatto ”

   

Inizia da index.html rimuovi tutti i # da About Us modo che assomigli a About Us . Ora nel tag head di index.html scrivi subito dopo l’ultimo meta tag .

Ora nel tuo routing js iniettare $locationProvider e scrivere $locatonProvider.html5Mode(true); Qualcosa come questo:-

 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); }); 

Per maggiori dettagli guarda questo video https://www.youtube.com/watch?v=XsRugDQaGOo

Aggiungi $locationProvider In

 .config(function ($routeProvider,$locationProvider) 

e quindi aggiungere $locationProvider.hashPrefix(''); dopo

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

Questo è tutto.