I have an AngularJS application (1.3.8) that deploys as a web application in Tomcat in the context of an application application.
The urls are as follows:
https://www.myserver.com/app/#/login https://www.myserver.com/app/#/register
etc .. Routes are defined as follows:
$routeProvider.when( 'login', {templateUrl: 'partials/login.html?' + now, controller: 'LoginController'} ); $routeProvider.when( 'register', {templateUrl: 'partials/register.html?' + now, controller: 'RegistrationController'} ); $routeProvider.otherwise( {redirectTo: 'login'} );
Everything is working fine. Now I need to remove the hash elements from the urls and use the HTML5 mode in $ location. So far I can’t get this to work.
My guess was that I just needed to call
$locationProvider.html5Mode({ enabled: true, requireBase: false });
and now the application urls change to
https://www.myserver.com/app/login https://www.myserver.com/app/register
This does not work. When I request a URL
https:
Angular redirects to
https:
In general, all this routing and resource loading is broken with this change. For example, partial URLs in routing definitions cannot be resolved. They work only when adding the prefix '/ app /'.
I tried using the base tag by changing the call to $ locationProvider to
$locationProvider.html5Mode({ enabled: true });
and using
<base href="/app">
Surprisingly, this has no effect. However, entering https://www.myserver.com/app leads to redirecting AngularJS to https://www.myserver.com/login . URL https://www.myserver.com/app/login is not available.
This is how I use the base tag:
<!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>
I also run into other problems. For example, if I change the location of the base tag inside the HTML file as follows:
<!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>
then all of a sudden, JS and CSS files can no longer be eliminated at boot time.
Can someone explain what I'm doing wrong?