Angular simple routing is not working

Question

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.

Refer to github.com/spring-guides/tut-spring-security-and-angular-js/… — EpicPandaForce
– EpicPandaForce, Commented Oct 13, 2016 at 14:10

Yannic Bürgmann · Accepted Answer · 2015-12-20 14:51:16Z

3

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.

answered Dec 20, 2015 at 14:51

Yannic Bürgmann

6,5916 gold badges46 silver badges81 bronze badges

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

4 Comments

Piotr Żak Over a year ago

Thank You for answer my problem were, ng-app was in unpropper place and templateUrl was wrong should be templateUrl: 'test' i had templateUrl: 'test.html'. Thank You verry much for answer and Merry Christmas :)

Yannic Bürgmann Over a year ago

Nice to hear that it works, but i still would not suggest to provide static content via custom controllers. Make use of spring boot :) if you do so your previous url was right. if you have a reason to do use custom controllers i don't now i would like to hear it. Merry Christmas :)

Piotr Żak Over a year ago

I think custom controller could be usefull in security reasons, but You are right i should use spring boot as it should be used :) If I put my file in /public/test.html angular routing templateUrl: 'test.html' is ok, If i use /templates directory and register View angular routing templateUrl: 'test' is ok

Yannic Bürgmann Over a year ago

If you don't want do offer the templates without authentication put it in directory /public/templates/ and make a security rule for /templates/**

Gurkan Yesilyurt · Accepted Answer · 2015-12-19 15:50:14Z

1

First of all, Please ng-app directive placement <body> or <html> tag

<body ng-app="ngViewExample">

Template url

templateUrl: 'test'

MvcConfig.java

@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {
  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/test").setViewName("test");  
  }
}

SpringBootApp

@SpringBootApplication
@ComponentScan(basePackages = {"com.example.spring"})
public class SpringAngularApplication {

   public static void main(String[] args) {
     SpringApplication.run(SpringAngularApplication.class, args);
 }
}

answered Dec 19, 2015 at 15:50

Gurkan Yesilyurt

2,6752 gold badges24 silver badges23 bronze badges

Comments

Thang Hoang · Accepted Answer · 2015-12-19 12:12:20Z

0

where do you put test.html. It should be in /resources/static folder. If in /resources/templates it will be process by thymeleaf and need to be added in ViewControllerRegistry

public class WebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/test").setViewName("test");
    }
}

answered Dec 19, 2015 at 12:12

Thang Hoang

3805 silver badges22 bronze badges

6 Comments

Piotr Żak Over a year ago

I have add this

@Bean     public WebMvcConfigurerAdapter forwardToIndex() {         return new WebMvcConfigurerAdapter() {             @Override             public void addViewControllers(ViewControllerRegistry registry) {                 registry.addViewController("/test").setViewName("test");             }         };     }

To my config file when I'm accesing it by localhost:8080/test Hello appears but still routing from index.html is not working

Thang Hoang Over a year ago

do you see javascript syntact error. I think .when need a ;

Thang Hoang Over a year ago

templateUrl: 'test.html' should be templateUrl: 'test'

Piotr Żak Over a year ago

I have seted templateUrl: 'test.html' to templateUrl: 'test' and it still didn't working, do You have any more idea what could be wrong there?

Piotr Żak Over a year ago

html files should be in /templates directory, /static directory is for js, css

|

Collectives™ on Stack Overflow

Angular simple routing is not working

3 Answers 3

4 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related