Simple angular routing does not work

I'm tring build single page app, but i have problem with angular routing it doesnt work.

I'm using spring boot, thymeleaf and angular 1.4.8.

I'm basing on this example https://code.angularjs.org/1.4.8/docs/api/ngRoute/directive/ngView

Here is my main controller:

@Controller
public class HomeController {
    @RequestMapping(value = "/")
    public String index(){
        return "index";
    }
}

Here is my index.html

<!DOCTYPE html>
<html>
<head ng-app="ngViewExample">
    <title></title>
</head>
<body>
<div ng-controller="MainCtrl as main">
        <a href="#/test">test</a>

    <div ng-view=""></div>
</div>

<script type="text/javascript" th:src="@{/js/lib/angular.js}" />
<script type="text/javascript" th:src="@{/js/lib/angular-route.js}" />
<script type="text/javascript" th:src="@{/js/lib/angular-resource.js}" />
<script type="text/javascript" th:src="@{/js/lib/underscore.js}" />
<script type="text/javascript" th:src="@{/js/lib/restangular.js}" />
<script type="text/javascript" th:src="@{/js/src/index.js}" />
</body>
</html>

index.js

 var home = angular.module('ngViewExample', ['ngRoute']);

home.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/test', {
                templateUrl: 'test.html',
                controller: 'TestCtrl',
                controllerAs: 'test'
            })
    }])

    .controller('MainCtrl',
        function() {

        })
    .controller('TestCtrl',
        function() {

    });

And content I wish to pass to ng-view

test.html

<div>
    Hello
</div>

Everything is loading fine but routing just not working here.

you linked me this question yesterday:

here my answer so far

Let's start with How to provide static content via Spring Boot

As shown in this spring blog all resources placed in the directories

/META-INF/resources/
/resources/
/static/
/public/

inside your classpath are added as static resources. So for example just put your index.html into the /public/ directory inside your classpath and you won't need your HomeControlleranymore

Now to the angular part

First of all put the ng-app directive at the <html>or the <body> tag. I can't see any problems with your angular code so far. Can you verify, that the partial HTML is available at the /test endpoint? If not please follow the steps i told you above. Just put the test.html inside the /public/directory inside your classpath.

Are there any errors in the console if you open the browser devtools and reload the page?

If you could provide your project on Github i will have a look at it.

Related Articles