CODEWITHSUNDEEP
angularjsspring-mvcngroutelocation-provider
Dobidoo
Dobidoo

Reputation: 572

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

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
                            });
                        } ]);

Upvotes: 1

Views: 1190

Answers (2)

t3mplar83
t3mplar83

Reputation: 21

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:/";
}

Upvotes: 1

Dobidoo
Dobidoo

Reputation: 572

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.

Upvotes: 0

Related Questions