Instradamento AngularJS senza hash ‘#’

Sto imparando AngularJS e c’è una cosa che mi infastidisce davvero.

Uso $routeProvider per dichiarare le regole di routing per la mia applicazione:

 $routeProvider.when('/test', { controller: TestCtrl, templateUrl: 'views/test.html' }) .otherwise({ redirectTo: '/test' }); 

ma quando accedo alla mia app nel browser, vedo app/#/test anziché app/test .

Quindi la mia domanda è perché AngularJS aggiunge questo hash # alle url? C’è qualche possibilità di evitarlo?

In effetti hai bisogno del # (hashtag) per i browser non HTML5.

Altrimenti eseguiranno semplicemente una chiamata HTTP al server al href menzionato. # È un vecchio cortocircuito del browser che non triggers la richiesta, il che consente a molti frameworks js di creare il proprio reindirizzamento del client in più.

Puoi usare $locationProvider.html5Mode(true) per dire a angular di usare la strategia HTML5 se disponibile.

Qui la lista dei browser che supportano la strategia HTML5: http://caniuse.com/#feat=history

Se hai abilitato html5mode come altri hanno detto, e crea un file .htaccess con i seguenti contenuti (aggiusta per le tue necessità):

 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] 

Gli utenti saranno indirizzati alla tua app quando entreranno in un percorso corretto e la tua app leggerà il percorso e li porterà alla “pagina” corretta al suo interno.

EDIT: Assicurati solo di non avere alcun nome di file o directory in conflitto con le tue rotte.

Consente di scrivere una risposta che sembra semplice e breve

In Router alla fine aggiungi html5Mode (true) ;

 app.config(function($routeProvider,$locationProvider) { $routeProvider.when('/home', { templateUrl:'/html/home.html' }); $locationProvider.html5Mode(true); }) 

In testa HTML aggiungi tag base

      

grazie a @plus – per i dettagli della risposta di cui sopra

provare

 $locationProvider.html5Mode(true) 

Maggiori informazioni su $ locationProvider
Usando $ posizione

Le seguenti informazioni provengono da:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

È molto facile ottenere URL puliti e rimuovere l’hashtag dall’URL in Angular.
Per impostazione predefinita, AngularJS instraderà gli URL con un hashtag Ad esempio:

Ci sono 2 cose che devono essere fatte.

  • Configurazione $ locationProvider

  • Impostazione della nostra base per i collegamenti relativi

  • $ posizione servizio

In Angular, il servizio $ location analizza l’URL nella barra degli indirizzi e apporta modifiche all’applicazione e viceversa.

Consiglio vivamente di leggere i documenti ufficiali di localizzazione Angular per avere un’idea del servizio di localizzazione e di ciò che fornisce.

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider e html5Mode

  • Useremo il modulo $ locationProvider e imposteremo html5Mode su true.
  • Lo faremo quando definiremo la tua applicazione Angular e configureremo i tuoi percorsi.

     angular.module('noHash', []) .config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl : 'partials/home.html', controller : mainController }) .when('/about', { templateUrl : 'partials/about.html', controller : mainController }) .when('/contact', { templateUrl : 'partials/contact.html', controller : mainController }); // use the HTML5 History API $locationProvider.html5Mode(true); }); 

Cos’è l’API della cronologia HTML5? È un modo standard per manipolare la cronologia del browser utilizzando uno script. Ciò consente ad Angular di modificare il routing e gli URL delle nostre pagine senza aggiornare la pagina. Per ulteriori informazioni su questo, ecco un buon articolo dell’API Storia HTML5:

http://diveintohtml5.info/history.html

Impostazione per collegamenti relativi

  • Per colbind l’applicazione utilizzando i collegamenti relativi, è necessario impostare nel del documento. Questo potrebbe essere nel file index.html root della tua app Angular. Trova il tag e impostalo sull’URL di root che desideri per la tua app.

Ad esempio:

  • Esistono molti altri modi per configurarlo e la modalità HTML5 impostata su true dovrebbe risolvere automaticamente i collegamenti relativi. Se la root della tua applicazione è diversa dall’URL (ad esempio / my-base, usala come base.

Fallback per i browser meno recenti

  • Il servizio $ location eseguirà automaticamente il fallback del metodo hashbang per i browser che non supportano l’API della cronologia HTML5.
  • Questo accade in modo trasparente a te e non dovrai configurare nulla perché funzioni. Dai documenti di posizione $ Angular, puoi vedere il metodo di fallback e come funziona.

In conclusione

  • Questo è un modo semplice per ottenere URL carini e rimuovere l’hashtag nella tua applicazione Angular. Divertiti a creare quelle app Angular super pulite e super veloci!

Se vuoi configurarlo localmente su OS X 10.8 che serve Angular con Apache, potresti trovare quanto segue nel tuo file .htaccess per aiutare:

  Options +FollowSymlinks RewriteEngine On RewriteBase /~yourusername/appname/public/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt) RewriteRule (.*) index.html [L]  

Opzioni + FollowSymlinks se non impostato potrebbe darti un errore proibito nei log in questo modo:

 Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden 

La base di riscrittura è richiesta, altrimenti le richieste verranno risolte sulla root del server che localmente, per impostazione predefinita, non è la directory del progetto a meno che non siano stati configurati specificatamente i vhost, quindi è necessario impostare il percorso in modo che la richiesta trovi la directory root del progetto. Per esempio sulla mia macchina ho una directory / Users / me / Sites dove tengo tutti i miei progetti. Come il vecchio sistema operativo OS X.

Le due linee successive dicono effettivamente se il percorso non è una directory o un file, quindi è necessario assicurarsi di non avere file o directory uguali ai percorsi di instradamento delle app.

La prossima condizione dice se la richiesta non finisce con le estensioni di file specificate, quindi aggiungi ciò che ti serve

E l’ultimo [L] sta dicendo di servire il file index.html – la tua app per tutte le altre richieste.

Se hai ancora problemi, controlla il log di apache, probabilmente ti darà suggerimenti utili:

 /private/var/log/apache2/error_log 

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

Puoi anche utilizzare il codice seguente per redirect alla pagina principale (home):

 { path: '', redirectTo: 'home', pathMatch: 'full'} 

Dopo aver specificato il tuo reindirizzamento come sopra, puoi redirect le altre pagine, ad esempio:

 { path: 'add-new-registration', component: AddNewRegistrationComponent}, { path: 'view-registration', component: ViewRegistrationComponent}, { path: 'home', component: HomeComponent} 

**

Si consiglia di utilizzare lo stile HTML 5 (PathLocationStrategy) come strategia di posizione in Angolare

** Perché

  1. Produce gli URL puliti e SEO friendly che sono più facili da comprendere e ricordare per gli utenti.
  2. Puoi sfruttare il rendering lato server, che renderà la nostra applicazione più veloce, eseguendo il rendering delle pagine nel server prima di consegnarlo al client.

Usa Hashlocationstrtegy solo se devi supportare i browser più vecchi.

Clicca qui per saperne di più

L’utilizzo della modalità HTML5 richiede la riscrittura degli URL sul lato server, in pratica devi riscrivere tutti i tuoi collegamenti al punto di ingresso della tua applicazione (ad es. Index.html). Richiedere un tag è importante anche per questo caso, poiché consente a AngularJS di distinguere tra la parte dell’URL che è la base dell’applicazione e il percorso che deve essere gestito dall’applicazione. Per ulteriori informazioni, consultare la Guida per gli sviluppatori di AngularJS: Utilizzo della modalità HTML5 in posizione $ Lato server .


Aggiornare

Procedura: configurare il server in modo che funzioni con html5Mode 1

Quando hai triggersto html5Mode, il carattere # non verrà più utilizzato negli URL. Il simbolo # è utile perché non richiede alcuna configurazione lato server. Senza # , l’url sembra molto più bello, ma richiede anche riscritture sul lato server. Ecco alcuni esempi:

Apache Riscrive

  ServerName my-app DocumentRoot /path/to/app  RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L]   

Nginx Riscrive

 server { server_name my-app; index index.html; root /path/to/app; location / { try_files $uri $uri/ /index.html; } } 

IIS riscrive di Azure

               

Express Riscrive

 var express = require('express'); var app = express(); app.use('/js', express.static(__dirname + '/js')); app.use('/dist', express.static(__dirname + '/../dist')); app.use('/css', express.static(__dirname + '/css')); app.use('/partials', express.static(__dirname + '/partials')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); }); app.listen(3006); //the port you want to use 

In Angular 6, con il tuo router puoi usare:

 RouterModule.forRoot(routes, { useHash: false })