I'm writing a system where the frontend is in AngularJS and the backend is in Java with Jersey.
But I am having problems using $locationProvider.html5Mode (true);to remove the "#" in url.
If I click in a link on the page, the correct view is shown. But if I press F5 or copy and paste the URL in the browser, the server looks for a resource that doesn't exist and says that it is not available.
I can't redirect, on the server, links to the entry point of the webapp, such as requested here https://docs.angularjs.org/guide/$location.
Also, I tried doing what they said here about servlets AngularJS HTML5 Mode - How do direct links work without server specific changes?, but for me it didn't work.
Does anyone have idea how to make it work?
In NodeJS, it would use app.use ('/', express.static (__ dirname + '/ public')) ;.
Below is the code I'm using:
appRoutes.js
angular.module('appRoutes', [])
.config(
[ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller : 'HomeController'
})
.when('/login', {
templateUrl : 'views/login.html',
controller : 'LoginController'
}).otherwise({
redirectTo : '/'
});
$locationProvider.html5Mode(true);
} ])
.run(function($rootScope, $location, Login) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
if (!Login.isLogged()) {
$location.path('/login');
}
});
});
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Resources</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>sammubr.resources</param-value>
</init-param>
<init-param>
<param-name>jersey.config.server.provider.classnames</param-name>
<param-value>sammubr.filtro.FiltroSeguranca;org.glassfish.jersey.filter.LoggingFilter</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Resources</servlet-name>
<url-pattern>/api/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>sammubr.authenticate</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/authenticate/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Logout</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>sammubr.logout</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Logout</servlet-name>
<url-pattern>/logout/*</url-pattern>
</servlet-mapping>
</web-app>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/" />
<title>SampleApp</title>
<!-- CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="sampleApp" ng-controller="MainController">
<div class="container">
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
<!-- ANGULARJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="libs/angular-bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/angular-cookie/angular-cookies.min.js"></script>
<!-- CUSTOM JS -->
<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/HomeCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/services/LoginService.js"></script>
<script src="js/services/UsuarioService.js"></script>
<script src="js/services/UsuarioService.js"></script>
<script src="js/controllers/UsuarioListCtrl.js"></script>
<script src="js/controllers/UsuarioItemCtrl.js"></script>
</body>
</html>
