2015-05-09 2 views
0

новый для угловых. Я уверен, что чего-то не хватает. Я не могу отобразить ответ, отправляемый сервером на странице jsp, если я нахожу сервер с директивой $http от angularjs.SpingMVC + Angularjs + POST с jsp

angularcode

// Read button Handler 
$scope.readAll=function(){ 
    readTable($scope.clnfamilyArray); 
    //send data to server 
    testAddItem=function(){ 
     $http({ 
      'url' : 'http://localhost:9090/QuantumM/orbital/sendstatement/', 
      'method' : 'POST', 
      'headers': {'Content-Type' : 'application/json'}, 
      'data' : $scope.clnfamilyArray 
     }).success(function(data){ 
      console.log(data); 
     }) 
    }//end of function 
    testAddItem(); 
}////end of readAll 

весна код

@RequestMapping(value = "/sendstatement/", method = RequestMethod.POST) 
public ModelAndView welcome(@RequestBody String map) {  
    ModelAndView model = new ModelAndView();   
    // BL 
    model.addObject("name",hTable.toHtml()); 
    model.setViewName("test"); 
    return model; 
} 

test.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 

<h1>Gradle - Spring MVC Hello World</h1> 
<h2>Hello ${name}</h2> 

</body> 
</html> 

Вместо оказания test.jsp. Я сажусь на ту же страницу. Но на консоли я вижу ожидаемый результат.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 

<h1>Gradle - Spring MVC Hello World</h1> 
<h2>Hello <table border=1><tr><td colspan=2>s</td></tr><tr><td colspan=1>f</td><td colspan=1>d</td></tr></table></h2> 

</body> 
</html> 

Есть ли что-нибудь, что мне не хватает ??? Я хотел приземлиться на test.jsp не на моей текущей странице вызова ...

ответ

1

Вам не хватает чего-то, как вы уже догадались. Цель вызова $ http - получить результаты HTTP-вызова и предоставить его вашей модели приложения AngularJS. Он не предназначен для перенаправления на новую страницу на другом сервере.

Причина вы видите вывод страницы в консоли связано с .success() части вызова HTTP:

$http({ 
'url' : 'http://localhost:9090/QuantumM/orbital/sendstatement/', 
    'method' : 'POST', 
    'headers': {'Content-Type' : 'application/json'}, 
    'data' : $scope.clnfamilyArray 
}).success(function(data){ // The data is passed here when received 
    console.log(data); 
}) 

Это асинхронной вызов handled by a promise. Таким образом, ваше приложение делает http-вызов, а затем продолжает веселиться. Когда данные из этого http-вызова доступны, он передается на ваш вызов .success(), а затем вы регистрируете его на консоли. Here's a Plunk demo I did, показывающий, как обещания работают последовательно и параллельно, поэтому вы можете увидеть некоторые из их преимуществ.

Это не угловой путь. То, что вы должны делать для одностраничного приложения в AngularJS, - это получить DATA с сервера, а не с отображаемой страницы, а затем отобразить его пользователю с просмотрами AngularJS.

Вместо того, чтобы ваше приложение SpringMVC визуализировало представление, передайте его обратно в качестве данных JSON. Таким образом, вы сможете легко показать его пользователю в своем представлении AngularJS.

Я думаю, что если вы взяли ваш пример и она была вернуть JSON, он возвращает что-то вроде:

{ 
    "name": "Bob" 
} 

Тогда вы бы изменить .success() вызов, чтобы сделать что-то вроде этого:

.success(function(data) { 
    $scope.name = data.name; 
}) 

А на вашем взгляде, вы бы показать его:

<p>Hi {{name}}</p> 

Надеется, что это помогает.

+0

Охх. Но в этом случае Is View в ModelAndView будет бесполезным при работе с angularjs? Если нет опции, то мне нужно включить одну страницу .... – sailor

+0

В этом случае. Вы могли бы попытаться создать кучу отдельных одностраничных приложений, но на самом деле это не то, на что предназначался AngularJS. Это будет много дополнительной работы и ресурсов без какой-либо выгоды.Исходя из Java, я понимаю, насколько отличается асинхронный метод Javascript/Angular. Вот демонстрация Plunk обещает немного больше, что может вам помочь: http://plnkr.co/edit/lv8Kyu?p=info –

+0

@sailor Мы все время используем SpringMVC, чтобы добавить AngularJS в существующие веб-приложения на базе Java/JSP. Мы добавляем Spring MVC-контроллеры в веб-приложение, которое предоставляет данные JSON, которые мы затем используем для добавления интерактивных аспектов в приложение. Формула работает очень хорошо. –