How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?

空扰寡人 提交于 2019-12-23 11:41:04

问题


I have a working AngularJS (1.3.8) application, which is deployed as a web app in Tomcat under an application context 'app'.

URLs look like this:

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

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

etc. Routes are defined like this:

$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. What I now need to do is remove the hashbangs from the URLs and use the HTML5 mode of $location. So far, I can not get this to work.

My assumption was that I just need to call

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

and now the app URLs change to

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

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

This is not working. When I request the URL

https://www.myserver.com/app

Angular redirects to

https://www.myserver.com/login

Overall, the whole routing and resource loading is broken with this change. For example, the partials URLs in the routing definitions can not be resolved. They are only working when I add a '/app/' prefix.

I tried to use the base tag, changing the $locationProvider call to

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

and using

<base href="/app">

Surprisingly, this has no effect. Still, entering https://www.myserver.com/app leads to a AngularJS-redirect to https://www.myserver.com/login. The 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 encounterd other problems. For example, if I change the location of the base tag inside the HTML file like this:

<!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 suddenly the JS and CSS files can not be resolved any more during load.

Can somebody explain what I am doing wrong?


回答1:


I believe you must have trailing / inside base href

<base href="/app/">


来源:https://stackoverflow.com/questions/31424897/how-to-setup-angularjs-locationprovider-html5-mode-for-non-root-base-urls

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!