angularjs route with spring framework

Question

I've developed a simple web page with angularjs and spring framework.

I tried to make the web page using angular route so that web page work as SPA.

Here's my simple main jsp file. The page is shown when I access to 'http://localhost:8080/test' on the chrome.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>

<script>
    angular.module("app", ['ngRoute'])
        .config(function($routeProvider) {
            $routeProvider.when("/home", {
                templateUrl: "home.html",
                controller: "controller"
            })
        })
        .controller("controller", function() {

        });
</script>
</head>

<body ng-app="app" ng-controller="controller as main">
    <ul>
        <li><a href="#/home">HOME</a></li>
    </ul>

    <ng-view></ng-view>
    <div ng-view></div>
</body>

</html>

I want to put the home.html into <ng-view> or <div class="ng-view"> when I click the 'HOME' link without page refresh but it's not working.

What's the problem with the code?

Community · Accepted Answer · 2017-05-23 11:53:20Z

1

To get it to work change href="#/home" to href="#!home"

Also, make sure home.html is in the /src/main/resources/static/ directory

I would prefer to use .html with Thymeleaf instead of .jsp

Read

Integrating JSP with AngularJS, Is it a concern in real world...Beginer in Angular JS

https://spring.io/blog/2015/08/19/migrating-a-spring-web-mvc-application-from-jsp-to-angularjs

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 22, 2017 at 20:44

Sully

15k5 gold badges56 silver badges83 bronze badges

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

3 Comments

hshan Over a year ago

You are a life saver! There are useful for me. Thanks for your answer. :)

hshan Over a year ago

why I should use '#!home' instead? All documents I found said that use '#/home'.

Sully Over a year ago

The issue is due to the character encoding to make the URL html safe. I tested and this was fine for the case. If you find out let me know

Collectives™ on Stack Overflow

angularjs route with spring framework

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related