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. i.e; 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.
