admin管理员组

文章数量:1335840

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:

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

This is not working. When I request the URL

Angular redirects to

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 leads to a AngularJS-redirect to . The URL 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?

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./app/#/login 

https://www.myserver./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./app/login 

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

This is not working. When I request the URL 

https://www.myserver./app

Angular redirects to 

https://www.myserver./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./app leads to a AngularJS-redirect to https://www.myserver./login. The URL https://www.myserver./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?

  • javascript
  • angularjs
  • html
  • url-routing
  • angularjs-routing
Share Improve this question edited Jun 29, 2017 at 11:11 laser 1,37613 silver badges14 bronze badges asked Jul 15, 2015 at 8:09 OliverMOliverM 5106 silver badges13 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

I believe you must have trailing / inside base href

<base href="/app/">

本文标签： javascriptHow to setup AngularJS locationProvider HTML5 mode for nonroot base urlsStack Overflow

版权声明：本文标题：javascript - How to setup AngularJS $locationProvider HTML5 mode for non-root base urls? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742400050a2467697.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。