Witajcie. Na zajęcia laboratoryjne mam zadanie zasynchronizować strone JSP przy pomocy Angulara. Mam dwa widoki które umieszczone są w tapach w stronie MainPage.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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="js/page.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)"
ng-controller="tableReciptCtr">{{tab.title}}
</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
</div>
</body>
</html>
Widok wszystkich przepisów
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="js/page.js"></script>
</head>
<body>
<div style="width: 1200px; margin-left: auto; margin-right: auto;">
<div data-ng-app="TabsApp">
<div ng-controller="tableReciptCtr">
<div ng-init="recipts = getDataFromServer()">
<form action="/CookBook/Filtr" method="post">
<table cellpadding="10">
<tr>
<th><a href="sort?sort=ID">ID</a></th>
<th><a href="sort?sort=TITLE">TITLE</a></th>
<th><a href="sort?sort=CONTENT">CONTENT</a></th>
<th><a href="sort?sort=TIME_PREPARE">TIME</a></th>
<th><a href="sort?sort=CAL">CAL</a></th>
<th></th>
</tr>
<tr>
<td><input type="text" name="id"></td>
<td><input type="text" name="title"></td>
<td><input type="text" name="content"></td>
<td><input type="text" name="time"></td>
<td><input type="text" name="cal"></td>
<td><input type="submit" value="Submit"></td>
</tr>
<tr ng-repeat="recipt in recipts">
<td>{{recipt.id}}</td>
<td>{{recipt.title}}</td>
<td>{{recipt.content}}</td>
<td>{{recipt.time}}</td>
<td>{{recipt.cal}}</td>
<td><a ng-click="editRecipt(recipt.id)">Edit</a> <a
ng-click="">Delete</a></td>
</tr>
<tr>
<td><a ng-click="">Add New</a></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
oraz Widok pojedynczego aby edytowac
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="js/page.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)"
ng-controller="tableReciptCtr">{{tab.title}}
</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
</div>
</body>
</html>
Potrzebuje wykonać następujący flow. Bo naciśnieniciu przycisku edit w tabelce wyswietlającej wszystkie przepisy, przechodze do wikou Edit gdzie w formularzu dostaje juz wypełniony model dlatego przepisu.
@WebServlet(name = "edit", urlPatterns = { "/edit" })
public class EditRecipt extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response) {
String idTemp = request.getParameter("id");
if(idTemp!=null){
int id = Integer.parseInt(idTemp);
Recipt newRecipt=DataAccess.getReciptById(id).get(0);
String json = new Gson().toJson(newRecipt);
response.setContentType("application/json");
try {
response.getWriter().write(json);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
Próbowałam komunikacji za pomocą metody POST i GET ale nie wykonuje mi sie ona poproawnie. Ma ktoś jakiś pomysł jak należy to zrobić?
.controller("tableReciptCtr", function($scope, $http) {
$scope.getDataFromServer = function() {
$http({
method : 'GET',
url : 'AllRecipt'
}).success(function(data, status, headers, config) {
$scope.recipts = data;
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
})};
$scope.editRecipt = function(curdata) {
$http({
method : 'GET',
url : 'edit?id='+curdata,
}).success(function(data, status, headers, config) {
$scope.getRecipt = data;
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
})};
Ma ktoś jaki pomysł jak zrobić taka komunikacje pomiedzy jsp gdzie elementy umieszczone są w tapach?