Question

如何使用spring mvc REST控制器连接angularjs Web表单，以便在提交表单时只刷新页面的一小部分（而不是整个页面）？

在这种情况下，页面中只刷新一个字符串，而不是刷新整个页面。具体来说，如何更改下面的代码，以便在表单提交后页面上唯一从服务器刷新的元素为<H1>${person.answer}</H1>。

注意：以下代码已经过编辑，以符合@ Cotta的建议。我正在用@ Cotta的建议替换原始代码，而不是追加，因为我希望它易于阅读。

index.html是：

<!DOCTYPE html>
<html>
<head>
    <!-- CSS ===================== -->
    <!-- load bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <style>
        body    { padding-top:30px; }
    </style>

    <!-- JS ===================== -->
    <!-- load angular -->
    <script src="http://code.angularjs.org/1.2.6/angular.js"></script> 
    <script src="app.js"></script>
</head>

<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">

    <!-- PAGE HEADER -->
    <div class="page-header"><h1>What is your name?</h1></div>

    <!-- FORM -->
    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" ng-model="name" required>
        </div>

        <!-- SUBMIT BUTTON -->
        <button type="submit" class="btn btn-primary">Submit</button>

    </form>

</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>
<!-- example from: https://scotch.io/tutorials/angularjs-form-validation -->

app.js是：

var validationApp = angular.module('validationApp', ['ngResource']);

validationApp.controller('mainController', ['$scope'], '$resource', function($scope, $resource) { 
  // function to submit the form after all validation has occurred            
  $scope.submitForm = function(isValid) {

    // check if form is valid before sending data to the server
    if (isValid) {
        var NameCheck = $resource('/api/namecheck', {});
        var result = NameCheck.get();
        console.log(result.answer);
    }

  };

});

RingRestController.java是：

@RestController
@RequestMapping("/api")
public class RingRestController {

    @RequestMapping(value = "/namecheck", method = RequestMethod.POST)
    public @ResponseBody Person create(@RequestBody Person person) {
        String answer = "";
        if (person.getName().equals("Frodo") || person.getName().equals("frodo")){
            answer = "Frodo, would you please hold onto this ring for me?";
        }
        else {
            answer = "Thank you for telling us your name.";
        }
        person.setTransientAnswer(answer);
        return person;
    }

}

注意：这使用与spring petclinic示例应用程序的angularjs分支相同的核心项目（我删除了/src/main/webapp中的所有内容，并在spring项目shell中构建了新的angularjs。因此，它使用了相同的spring.xml配置文件，可能与解决方案有关。您可以阅读spring配置文件by clicking on this link。

Answer 1

您可以通过以下方式解决此问题：

在您的申请中加入ngResource

var validationApp = angular.module('validationApp', ['ngResource']);

在控制器上注入$resource

validationApp.controller('mainController', ['$scope', '$resource', function($scope, $resource) { ... }]);

然后您可以使用$resource创建一个负责在submitForm内发送请求的对象：

var NameCheck = $resource('http://url-to-service', {});
var result = NameCheck.get();
console.log(result.answer);

请记住包含angular-resource.js文件。

你也可以做一些类似于$http和更多代码的事情。

如何从angular.js调用spring mvc REST控制器？

1 个答案: