0

I have used Spring Boot and Angular JS application. My home page is getting viewed from my controller but routing to new page using angular is not happening,

Angular JS - code 

use strict
    var demoApp = angular.module('app', [ 'ngRoute']); 
    //configure our routes    
    demoApp.config(function($routeProvider) {  

    $routeProvider  

    // route for the home page    
        .when('/', {  
        templateUrl: 'home.html',  
        controller: 'mainController'  
    })  

    // route for the about page    
    .when('/about', {  
        templateUrl: 'views/about.html',  
        controller: 'aboutController'  
    })  

    // route for the contact page    
    .when('/contact', {  
        templateUrl: 'contact.html',  
        controller: 'contactController'  
     });  
    });  

       // create the controller and inject Angular's $scope    
        demoApp.controller('mainController', function($scope) {  
      // create a message to display in our view    
       $scope.HomeMessage = 'Home Controller Called !!!';  
       });  

      demoApp.controller('aboutController', function($scope) {  
        $scope.AboutMessage = 'About Controller Called !!!';  
      });  

     demoApp.controller('contactController', function($scope) {  
        $scope.ContactMessage = 'Contact Controller Called !!!';  
     });

Spring Boot Code

   @RequestMapping("/main")
   @Controller
   public class HomeController {

    @RequestMapping("/")    
    public String home() {
        return "home";
    }
  }

I am getting my home page but from my html I am traversing to about and contact page where routing is not happening

HTML Code

 <ul class="nav navbar-nav navbar-right ">    
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>    
            <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>    
            <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a> 
  </li>    
  </ul>

This is the home page it is displaying http://localhost:8080/main/#!/ and if I try to traverse to contact or about it is displaying the same page and it is appending "!" mark http://localhost:8080/main/#!/#about. Can anyone suggest how is it possible to traverse to new page

Got this below error in console


     Error: [$compile:tpload] Failed to load template: 
    home.html (HTTP status: 404 )
http://errors.angularjs.org/1.6.9/$compile/tpload?p0=home.html&p1=404&p2=
    at angular.js:116
user3428736
  • 864
  • 2
  • 13
  • 33
  • The message is pretty clear: AngularJS needs to load the HTML template, and your server sends a 404. You need to serve the static templates from your Spring Boot server. – JB Nizet Sep 29 '18 at 10:47
  • Can you please let me know what can be done to fix this issue – user3428736 Sep 29 '18 at 10:56
  • You need to make sure Spring Boot serves the static HTML templates. Just like you must already make it serve the static JavaScript and CSS files. https://docs.spring.io/spring-boot/docs/2.0.5.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content – JB Nizet Sep 29 '18 at 10:57
  • 1
    Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](https://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) – Daniel Beckmann Oct 01 '18 at 08:24

0 Answers0