Come configurare AngularJS $ locationProvider Modalità HTML5 per gli URL non root?

Ho un'applicazione AngularJS (1.3.8) funzionante, che viene distribuita come app Web in Tomcat sotto un'applicazione di contesto dell'applicazione.

URL simile a questa:

https://www.myserver.com/app/#/login 

https://www.myserver.com/app/#/register

ecc Routes sono definiti in questo modo:

$routeProvider.when(
    'login', 
    {templateUrl: 'partials/login.html?' + now, controller: 'LoginController'} 
); 

$routeProvider.when(
    'register', 
    {templateUrl: 'partials/register.html?' + now, controller: 'RegistrationController'} 
); 

$routeProvider.otherwise(
    {redirectTo: 'login'} 
);

Tutto sta funzionando benissimo. Quello che ora devo fare è rimuovere gli hashbang dagli URL e usare la modalità HTML5 di $ posizione. Finora, non riesco a farlo funzionare.

La mia ipotesi è che ho solo bisogno di chiamare

$locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false 
});

e ora gli URL app passare alla

https://www.myserver.com/app/login 

https://www.myserver.com/app/register

Questo non funziona. Quando richiedo l'URL

https://www.myserver.com/app

redirect angolari a

https://www.myserver.com/login

Nel complesso, l'intero percorso e delle risorse di carico è rotto con questo cambiamento. Ad esempio, gli URL parziali nelle definizioni di instradamento non possono essere risolti. Funzionano solo quando aggiungo il prefisso '/ app /'.

ho cercato di utilizzare il tag di base, cambiando la chiamata $ locationProvider a

$locationProvider.html5Mode({ 
    enabled: true 
});

e utilizzando

<base href="/app">

Sorprendentemente, questo non ha alcun effetto. Tuttavia, inserendo https://www.myserver.com/app si accede a un reindirizzamento AngularJS a https://www.myserver.com/login. L'URL https://www.myserver.com/app/login non è disponibile.

Questo è come io uso il tag base:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <link href="css/mycss" rel="stylesheet" type="text/css"> 
    ... 
    <script src="js/my.js"></script> 
    <base href="/app"> 
</head> 
<body class="ng-cloak"> 
    <ng-view></ng-view> 
</body> 
</html>

Ho anche encounterd altri problemi. Ad esempio, se cambio la posizione del tag base all'interno del file HTML in questo modo:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <base href="/app"> 
    <link href="css/mycss" rel="stylesheet" type="text/css"> 
    ... 
    <script src="js/my.js"></script> 
</head> 
<body class="ng-cloak"> 
    <ng-view></ng-view> 
</body> 
</html>

poi improvvisamente il file JS e CSS non può essere risolto più durante il caricamento.

Qualcuno può spiegare cosa sto facendo male?

fonte

2015-07-15 OliverM

credo è necessario aver finali / all'interno di base href

<base href="/app/">

fonte

2015-07-15 10:03:01

Dove si imposta il tag base? Questo tag di base dovrebbe essere impostato all'interno del metodo $ locationProvider.html5Mode()? Si prega di fornire un esempio di come e dove questo dovrebbe essere impostato. Il tag base – dionysus

verrà visualizzato nel tag 'head' e' $ locationProvider.html5Mode() 'all'interno dell'applicazione.fase di configurazione –

Pankaj, cosa succede se i file di produzione si trovano sotto myserver/MyProject/mentre durante lo sviluppo MyProject sarà la cartella radice, quindi in questo scenario dobbiamo modificare manualmente index.html base href dopo la distribuzione. Anche la soluzione di cui sopra non funziona durante lo sviluppo in esecuzione sul server locale. –

Come configurare AngularJS $ locationProvider Modalità HTML5 per gli URL non root?

risposta

Problemi correlati