How do I hook up an angularjs web form with a spring mvc REST controller, so that only a small fragment of a page is refreshed (instead of the entire page) when the form is submitted?
In this case, only a string is refreshed in the page instead of refreshing the entire page. Specifically, how do I alter the code below so that the only element on the page that refreshes from the server after form submit is <H1>${person.answer}</H1>.
NOTE: the code below has been edited to adhere to @Cotta's suggestions. I am replacing the original code with @Cotta's suggestions instead of appending because I want this to be easy to read.
index.html is:
<!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 is:
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 is:
@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;
}
}
NOTE: this uses the same core project as the angularjs branch of the spring petclinic sample app (I deleted everything in /src/main/webapp and built up new angularjs within the spring project shell. Thus, it uses the same spring.xml config files, which might be related to a solution. You can read the spring config files by clicking on this link.
$httpto make ajax request, see docs for particulars – charlietfl 2 days ago$http– charlietfl 2 days ago$httppart is quite simple...and you need a script at server to receive the data the same way you would a form – charlietfl 2 days ago