Spring MVC With AngularJs - Reloading the browser returns Resource Not Found

Question

The main problem was in my SpringMVC App, I have index.jsp to load. In angularJs I used $locationProvider from ngRoute i suppose (sorry I am new in Angular). Lets say I have a navigation bar namely nav1, nav2, nav2. When I clicked nav1 the url was index.ipxs/nav1 in which the partial template is rendered normally in my ng-view div. But when i MANUALLY RELOAD THE BROWSER it says 'Request/Resource not found'. What I want to achieved is to redirect to home page (index.ipxs/nav1) as a default whenever i reload the browser even I am currently in a index.ipxs/nav2 page OR to render the page wherever I am into and retain the state of the page...

Here's my code

**index.jsp**

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="iPlexusApp">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>iPlexus</title>

<spring:url value="/resources/css/main.css" var="mainCss" />
<spring:url value="/resources/js/bootstrap.min.js" var="bootstrapJs" />
<spring:url value="/resources/js/angular.js" var="angularJs" />
<spring:url value="/resources/js/app.js" var="appJs" />
<spring:url value="/resources/js/angular-route.js" var="angularRouteJs" />
<spring:url value="/resources/js/controllers/navController.js"
    var="navControllerJs" />
<spring:url value="/resources/css/bootstrap.min.css" var="bootstrapCss" />
<spring:url value="/resources/image/logo.png" var="logo" />
<spring:url value="/resources/partials/marketplace.jsp"
    var="marketplace" />
<spring:url value="/resources/partials/directory.jsp" var="directory" />
<spring:url value="/resources/partials/faq.jsp" var="faq" />

<link rel="stylesheet" href="${bootstrapCss}" />
<link rel="stylesheet" href="${mainCss}" />


</head>
<body>

    <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <img id="appLogo" src="${logo}" />
    <div class="container">
        <%--        <div ng-controller="selectedNav" ng-include="'${navHeader}'"></div> --%>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                data-toggle="collapse" data-target="#navContents-navbar-collapse-1">

                <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>
        </div>

        <div ng-controller="navController" class="collapse navbar-collapse"
            id="navContents-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li ng-class="{active: isActive('/iPlexus/index.ipxs/marketplace')}"><a
                    href="/iPlexus/index.ipxs/marketplace"><span
                        class="glyphicon glyphicon-briefcase nav-icon"></span>Marketplace</a></li>
                <li ng-class="{active: isActive('/iPlexus/index.ipxs/directory')}"><a
                    href="/iPlexus/index.ipxs/directory"><span
                        class="glyphicon glyphicon-th-list nav-icon"></span>Directory</a></li>
                <li ng-class="{active: isActive('/iPlexus/index.ipxs/faq')}"><a
                    href="/iPlexus/index.ipxs/faq"><span
                        class="glyphicon glyphicon-question-sign nav-icon"></span>FAQ</a></li>
            </ul>
        </div>

        <div class="jumbotron">
            <h1>${message}</h1>
            <h1>{{5+5}}</h1>
        </div>
        <div ng-view></div>
    </div>
    </nav>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="${bootstrapJs}"></script>
    <script src="${angularJs}"></script>
    <script src="${angularRouteJs}"></script>
    <script src="${appJs}"></script>
    <script src="${navControllerJs }"></script>
 <script>

 </script>
</body>
</html>

The main problem was in my SpringMVC App, I have index.jsp to load. In angularJs I used $locationProvider from ngRoute i suppose (sorry I am new in Angular). Lets say I have a navigation bar namely nav1, nav2, nav2. When I clicked nav1 the url was index.ipxs/nav1 in which the partial template is rendered normally in my ng-view div. But when i MANUALLY RELOAD THE BROWSER it says 'Request/Resource not found'. What I want to achieved is to redirect to home page (index.ipxs/nav1) as a default whenever i reload the browser even I am currently in a index.ipxs/nav2 page OR to render the page wherever I am into and retain the state of the page...

**app.js**

var iPlexusApp = angular
        .module('iPlexusApp', [ 'ngRoute' ])
        .config(
                [
                        '$routeProvider',
                        '$locationProvider',
                        function($routeProvider, $locationProvider) {
                            $routeProvider
                                    .when(
                                            '/iPlexus/index.ipxs/marketplace',
                                            {
                                                templateUrl : '/iPlexus/resources/partials/marketplace.jsp'
                                            });
                            $routeProvider
                                    .when(
                                            '/iPlexus/index.ipxs/directory',
                                            {
                                                templateUrl : '/iPlexus/resources/partials/directory.jsp'
                                            });
                            $routeProvider
                                    .when(
                                            '/iPlexus/index.ipxs/faq',
                                            {
                                                templateUrl : '/iPlexus/resources/partials/faq.jsp'
                                            });
                            $routeProvider.otherwise({
                                redirectTo : '/iPlexus/index.ipxs/marketplace'
                            });
                            $locationProvider.html5Mode({
                                enabled : true,
                                requireBase : false
                            });
                        } ]);

here : <servlet-mapping> <servlet-name>iplexus-dispatcher</servlet-name> <url-pattern>*.ipxs</url-pattern> </servlet-mapping> — Dobidoo
– Dobidoo, Commented Jan 20, 2016 at 2:15
I am not a fan of this architecture. The problem is that all your page urls are intercepted by spring. is there any reason why you need to use jsp and the custom url pattern? — sdfacre
– sdfacre, Commented Jan 20, 2016 at 3:22
I'm just playing around with this architecture, but since I already come along with springMVC I wanted to achieve an application that is angularJS enabled as well. I've read some documentation about $route.reload() or window.location.reload() and it seems promising. I'll try it later and see what happens. I'll comment the result also just in case someone encounter the same problem. — Dobidoo
– Dobidoo, Commented Jan 20, 2016 at 13:57
If you really need to stick with this structure, maybe try map all url patterns <url-pattern>/*</url-pattern> see if that works? but you may soon encounter other problems, i.e. states stored in Angular is gone after reload. — sdfacre
– sdfacre, Commented Jan 20, 2016 at 23:16

t3mplar83 · Accepted Answer · 2018-03-26 09:43:05Z

1

Maybe can be late but i find the same problem and this appen becouse when you refresh the page you send a request to spring for an url that simply he does not know, you have create an url with angular that is not map in the server, you simply have to make a resource in the server that map all your url in the app to your index page something like

    @RequestMapping(value = "/{[path:[^\\.]*}")
public String redirect() {
  return "forward:/";
}

answered Mar 26, 2018 at 9:43

t3mplar83

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dobidoo · Accepted Answer · 2016-01-21 02:04:12Z

0

Thanks but I found some workaround, I used this url rewriting in order to rewirte any redirection directly in the server side...hope this helps to anyone with the same problem.

answered Jan 21, 2016 at 2:04

Dobidoo

5826 silver badges23 bronze badges

Collectives™ on Stack Overflow

Spring MVC With AngularJs - Reloading the browser returns Resource Not Found

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related