Spring boot Thymeleaf and angularjs 1 - angularjs http request to spring controller not binding in thymeleaf view
Question
Im building a dashboard app with spring boot, thymeleaf and angularjs. The objective is to trigger requests from the ui that will get the status of another service each time the button is pressed. As I want to manage the logic in java I am making server side requests to the apis. Note that the api that the service class is referring to has cors enabled (the external service at host 'localhost:9090' has been left off here for simplicity).
Here is a contrived example which demonstrates what I want to do:
<!--index.html-->
<html lang="en" ng-app="myApp" xmlns:th="http://www.thymeleaf.org">
<head>
<!--missing html not relevant-->
<div class="content">
<div class="container-fluid">
<div class="row">
<form id="services" ng-controller="myController">
<div class="form-group" >
<button type="button" class="btn btn-outline-primary" ng-click="result()">Primary</button>
<div id='whatever' class='panel-body'>
<strong th:text='${responseBody}'></strong>
</div>
</div>
</form>
</div>
</div>
</div>
...
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
//Spring controllers and service
@Controller
public class IndexController {
@GetMapping("/")
public String index() {
return "index";
}
}
package quick.thymeleaf.template.services;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
@Service
public class SimpleService {
public ResponseEntity getResponse(){
RestTemplate restTemplate = new RestTemplate();
//this is the url for the other service in this example.
//calls to this service returns a json string.
String url = "http://localhost:9090";
return restTemplate.getForEntity(url, String.class);
}
}
package quick.thymeleaf.template.controllers;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import quick.thymeleaf.template.services.SimpleService;
@Controller
public class AnotherController {
@Autowired
private SimpleService simpleservice;
@GetMapping("/path/tosomethingelse")
public void doSomething(Model model){
ResponseEntity<String> response = simpleservice.getResponse();
model.addAttribute("responseBody", response.getBody().toString());
}
}
//app.js
var app = angular.module('myApp', []);
app.controller('myController', function request($scope, $http, $log){
$scope.result = function() { $http({
method: 'GET',
url: '/path/tosomethingelse'})
.then(function (response){
$scope.responseData = response.data;
$log.info(response);
}, function(reason){
$scope.error = reason.data;
$log.info(reason);
});
}
});
Making requests to localhost:8080 and clicking the button that initiates the api call gets me the json in the server logs, but it is not displayed in the html markup. Im sure the design is not the best for this application but the focus now is on getting it to work as part of the learning process to understanding the complete tech stack.
1 answers
solution1
0 ACCPTED 2017-04-07 13:58:25
Thymeleaf was server-side rendering HTML, which mean the HTML page was rendered on the server before it shown on the browser. The other side, angularJS was designed to manipulate DOM from an exisiting HTML pages that already shown in the browser.
So, you can't use thymeleaf markup to shown data that manipulated by angularJS, instead you need to use with angularJS (I assume you want print $scope.responseData) like this:
<strong>{{ responseData }}</strong>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.