angularjs UI-Router not routing the .jsp view

Question

I'm new to angular and its UI-Routing. My index.jsp having a link to render home.jsp at <div ui-view></div> . Though I'm able to see my index page but when I clicked on the home tab nothing is happening. ie; I considered the home.jsp is the child view to index.jsp, but unable to route it inside index page. After login I'm redirecting the page to index.jsp using this inside the login service factory $window.location.href = 'http://localhost:8080/Employee/index'; and I defined my ng-app in index.jsp only.Here is my code...

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>

<html ng-app="myApp">
<head>
<style>
//my styles here....
</style>

 <link rel="stylesheet" href="static/css/bootstrap.css" />
    <link rel="stylesheet" href="static/css/app.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
      <script src="<c:url value='/static/js/app.js' />"></script>
        <script src="<c:url value='/static/js/controller/index_controller.js' />"></script>
        <script src="<c:url value='/static/js/service/index_service.js' />"></script> 
        <script src="<c:url value='/static/js/controller/home_controller.js' />"></script>
    <script src="<c:url value='/static/js/service/home_service.js' />"></script>


</head>
<body >

<div class="container" >

<header>
   <h1>Header</h1>
</header>
 <div id="navbar">
        <ul>
            <li><a ui-sref="index.home">Home</a></li>
            <li>Experiance</li>
            <li>SkillSet</li>
            <li>Awards</li>
        </ul>
 </div>
 <div ui-view="_home"></div>

<hr/>
<footer>Footer</footer>
</div>      
</body>
</html>

app.js

'use strict';

var App = angular.module('myApp',['ui.router']);

App.config(['$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider){

    $urlRouterProvider.otherwise("/Employee/index");

    $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
    });

    $stateProvider
    .state('index', {
        abstract: true,
        url: '/Employee/index',
        views: {
          'index': {
            templateUrl: '/Employee/index',
//            templateUrl: '/views/index.jsp',
            controller : "IndexController"
          }
        }
      }).state('index.home', {
          parent:'index',  
          url: '/home',
            views: {
              '_home': {
                templateUrl: '/Employee/index/home',
//                templateUrl: '/views/home.jsp',
                    controller : "HomeController"
              }
            }
          })
}]);

when I un commenting the line templateUrl: '/views/home.jsp', and commenting the above, I'm getting 404 error saying like http://localhost:8080/views/index.jsp not found.

My page controller

@Controller
public class BasePageController {

    @RequestMapping(value="/*")
    public String getDefaultPage(){
        System.out.println("test default");
        return "Login";
    }

    @RequestMapping(value="/login")
    public String getLoginPage(){
        System.out.println("test login");
        return "Login";
    }

    @RequestMapping(value="/index/home")
    public String getHomePage(){
        System.out.println("test home");
        return "home";
    }

    @RequestMapping(value="/index")
    public String getIndexPage(){
        System.out.println("test index");
        return "index";
    }

}

service configuration

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.arun.employee")
public class EmployeeConfiguration extends WebMvcConfigurerAdapter{ 

    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setViewClass(JstlView.class);
        viewResolver.setPrefix("/WEB-INF/views/");
        viewResolver.setSuffix(".jsp");
        registry.viewResolver(viewResolver);
    }
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("/static/");

    }    
}

Note : angular console not showing any error, but the routing for home.jsp is not taking place. Please let me know where exactly I'm doing wrong or else please suggest me any other references to achieve my need. Thanks in advance.

Answer 1

As you are Using single ui-view in ur index. i have removed ui-view="_home" and just make it <div ui-view></div> . and have made some changes in config file as below

$stateProvider
.state('index', {
abstract: true,
url: '/Employee/index',
templateUrl: '/views/index.jsp',
controller : "IndexController"
})
.state('index.home', {  
url: '/home',
templateUrl: '/views/home.jsp',
controller : "HomeController"
})

hope this will help you .

angularjs UI-Router not routing the .jsp view

Question

1 answers

solution1
1 2017-04-19 10:03:58

angularjs UI-Router not routing the .jsp view

Question

1 answers

solution1 1 2017-04-19 10:03:58

solution1
1 2017-04-19 10:03:58