Wie wird der AngularJS $ locationProvider HTML5-Modus für Nicht-Root-Basis-URLs eingerichtet?

Ich habe eine funktionierende AngularJS (1.3.8) -Anwendung, die als Web-App in Tomcat unter einem Anwendungskontext "App" bereitgestellt wird.

URLs wie folgt aussehen:

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

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

usw. Routen sind wie folgt definiert:

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

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

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

alles funktioniert. Was ich jetzt tun muss, ist, die Hashbangs von den URLs zu entfernen und den HTML5-Modus von $ location zu verwenden. Bis jetzt kann ich das nicht zur Arbeit bringen.

Meine Vermutung war, dass ich

nennen müssen nur

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

und jetzt die App-URLs ändern

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

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

Das funktioniert nicht. Wenn ich die URL-Anforderung wird

https://www.myserver.com/app

Angular Umleitungen

https://www.myserver.com/login

Insgesamt ist die gesamte Routing und Ressourcenbelastung mit dieser Änderung gebrochen. Zum Beispiel können die Teil-URLs in den Routing-Definitionen nicht aufgelöst werden. Sie funktionieren nur, wenn ich ein '/ app /' Präfix hinzufüge.

Ich versuchte, das Basis-Tag, die Änderung der $ locationProvider Aufruf

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

und mit

<base href="/app">

Überraschenderweise zu verwenden, hat dies keine Auswirkungen. Die Eingabe von https://www.myserver.com/app führt jedoch zu einer AngularJS-Umleitung zu https://www.myserver.com/login. Die URL https://www.myserver.com/app/login ist nicht verfügbar. Diese

ist, wie ich die Basis-Tag verwenden:

<!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>

ich andere Probleme auch encounterd. wenn ich die Position des Basis-Tag in der HTML-Datei wie folgt beispielsweise ändern:

<!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>

dann plötzlich die JS und CSS-Dateien werden nicht mehr bei Belastung aufgelöst.

Kann jemand erklären, was ich falsch mache?

Quelle

2015-07-15 OliverM

Ich glaube, Sie müssen / innen Basis haben nachlauf href

<base href="/app/">

Quelle

2015-07-15 10:03:01

Wo Sie das Basis-Tag gesetzt haben? Soll dieses Basis-Tag innerhalb der $ locationProvider.html5Mode() Methode gesetzt werden? Bitte geben Sie ein Beispiel dafür, wie und wo dies festgelegt werden soll. – dionysus

Basis-Tag erscheint im 'head' Tag &' $ locationProvider.html5Mode() 'in' app.Config 'Phase –

Pankaj, was ist, wenn die Produktionsdateien unter myserver/MyProject liegen, während MyProject während der Entwicklung Ihr Stammordner ist, also müssen wir in diesem Szenario die index.html base href nach der Bereitstellung manuell bearbeiten. Die obige Lösung funktioniert auch nicht während der Entwicklung auf dem lokalen Server. –

Wie wird der AngularJS $ locationProvider HTML5-Modus für Nicht-Root-Basis-URLs eingerichtet?

Antwort

Verwandte Themen