Spring MVCを使用した角度経路

Angular-Roututeの使い方を理解するサンプルアプリケーションを作成しています。私のWebappはSpring Web-MVCアプリケーションです。Spring MVCを使用した角度経路

追加録音
ビュー録音

そのコードスニペットの下に見つける：

は、私は、次の2つのタブでホームページ持っ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

あなた状態でなければなりませんconfigにを、

$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は、私が行っている –

Spring MVCを使用した角度経路

答えて

関連する問題