0

我是新角度和它的UI路由。我的index.jsp有一个链接来呈现home.jsp在<div ui-view></div>。虽然我能够看到我的索引页面,但是当我点击主页选项卡时,没有任何事情发生。即;我认为home.jsp是index.jsp的子视图,但无法在索引页面内路由它。登录后我重定向页面使用此登录服务工厂$window.location.href = 'http://localhost:8080/Employee/index';里面index.jsp和我的index.jsp only.Here定义我的ng-app是我的代码...angularjs UI路由器没有路由.jsp视图

的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" 
       } 
      } 
      }) 
}]); 

当我取消注释行templateUrl: '/views/home.jsp',和评论上面,我刚开g 404错误说没有找到像http://localhost:8080/views/index.jsp

我的页面控制器

@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"; 
    } 

} 

服务配置

@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/"); 

    }  
} 

注:角控制台没有显示任何错误,但针对home.jsp路由没有发生。 请让我知道我在哪里做错了,或者请给我建议任何其他参考,以实现我的需要。提前致谢。

回答

1

因为您在ur索引中使用单个ui-view。我已经删除ui-view="_home",只是让它 <div ui-view></div>。并取得了在配置文件中的一些变化,如下

$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" 
}) 

希望这会帮助你。