Angular-Route與Spring MVC

我是angular-js.新手。我正在創建一個示例應用程序來理解Angular-route.My的用法。Webapp是一個Spring Web-MVC應用程序。Angular-Route與Spring MVC

我有以下兩個選項卡主頁：

添加記錄
查看記錄

找到低於其代碼片段：回到Home.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title>Home</title> 
    <jsp:include page="taskAppCommonJs.jsp"/> 
    </head> 
    <body ng-app="taskApp"> 
    <form id="taskForm" name="taskForm"> 
     <table width="100%" bgcolor="black" border="0"> 
     <tr> 
      <td> 
       <div class="main_menu"> 
        <ul> 
         <li> <a href="#add">Add Record</a></li> 
         <li> <a href="#view">View Record</a></li> 
        </ul> 
       </div> 
      </td>  
     </tr> 
     </table> 
     <div ng-view></div> 
    </form> 
    </body> 
</html>

taskAppCommonJs.jsp個

<% 
    final String ctxPath = request.getContextPath(); 
%> 
<script type="text/javascript" src="<%=ctxPath%>/resources/js/jquery-3.1.1-min.js"></script> 
<script type="text/javascript" src="<%=ctxPath%>/resources/js/jquery-1.12.1-ui.js"></script> 
<script type="text/javascript" src="<%=ctxPath%>/resources/js/angular-1.4.8-min.js"></script> 
<script type="text/javascript" src="<%=ctxPath%>/resources/js/angular-route.js"></script> 
<script type="text/javascript" src="<%=ctxPath%>/resources/js/taskAppAngular.js"></script> 
<link rel="stylesheet" type="text/css" href="<%=ctxPath%>/resources/css/jquery-ui.css"/> 
<link rel="stylesheet" type="text/css" href="<%=ctxPath%>/resources/css/menu_style.css"/>

taskAppAngular.js

var customerApp = angular.module('taskApp', [ 'ngRoute' ]); 
customerApp.config(function($routeProvider) { 
$routeProvider 
    .when('view', { 
     templateUrl : 'viewTask.html', 
     controller : 'activityController' 
    }) 
    .when('add', { 
    templateUrl : 'createTask.html', 
    controller : 'activityController' 
    }); 
}); 
customerApp.controller('activityController',function($scope){ 
    $scope.createInfo="create page"; 
    $scope.viewInfo="view page"; 
});

彈簧控制器類：

@Controller 
public class TaskController implements Serializable{ 
    @RequestMapping(value = "/createTask.html", method = RequestMethod.GET) 
    public String createTask() { 
    System.out.println("createTask invoked"); 
    return "createTask"; 
    } 

    @RequestMapping(value = "/viewTask.html", method = RequestMethod.GET) 
    public String viewTask() { 
    System.out.println("viewTask invoked"); 
    return "viewTask"; 
    } 
}

viewConfig.xml

<beans xmlns="http://www.springframework.org/schema/beans" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xmlns:mvc="http://www.springframework.org/schema/mvc" 
      xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd 
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd"> 

     <mvc:annotation-driven /> 

     <mvc:resources mapping="/resources/**" location="/resources"/> 

     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
     <property name="prefix" value="/WEB-INF/view/" /> 
      <property name="suffix" value=".jsp" /> 
     </bean> 
    </beans>

我的createTask.jsp和viewTask.jsp位於/WEB-INF/view/文件夾內。

createTask.jsp

<p ng-bind="createInfo"></p>

viewTask.jsp

<p ng-bind="viewInfo"></p>

我的問題是角路由器不能正常工作。任何人都可以提供任何解決方案？

來源

2017-05-14 Sumit Ghosh

你狀態在配置應該是，

$routeProvider 
    .when('/view', { 
     templateUrl : 'viewTask.html', 
     controller : 'activityController' 
    }) 
    .when('/add', { 
    templateUrl : 'createTask.html', 
    controller : 'activityController' 
    }); 
});

來源

2017-05-14 05:14:35 Sajeetharan

我已經做了現在我正在修改以下錯誤：錯誤：[$ compile：tpload] http://errors.angularjs.org/1.4.8/$comp /tpload?p0=%2FcreateTask.html ＆p1 = 404＆p2 = Not％20Found –

它現在可以工作。謝謝Sajeetharan –

您查看之前缺少/並添加：應改爲：

.when('/view',.... 
.when('/add',....

來源

2017-05-14 05:13:32 Alex

感謝Alex.it工作 –

Angular-Route與Spring MVC

回答

相關問題