java - Spring boot Thymeleaf and angularjs 1 - angularjs http request to spring controller not binding in thymeleaf view -
im building dashboard app spring boot, thymeleaf , angularjs. objective trigger requests ui status of service each time button pressed. want manage logic in java making server side requests apis. note api service class referring has cors enabled (the external service @ host 'localhost:9090' has been left off here simplicity).
here contrived example demonstrates want 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 , 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 url other service in example. //calls service returns 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 localhost:8080 , clicking button initiates api call gets me json in server logs, not displayed in html markup. im sure design not best application focus on getting work part of learning process understanding complete tech stack.
thymeleaf server-side rendering html, mean html page rendered on server before shown on browser. other side, angularjs designed manipulate dom exisiting html pages shown in browser.
so, can't use thymeleaf markup shown data manipulated angularjs, instead need use angularjs (i assume want print $scope.responsedata) this:
<strong>{{ responsedata }}</strong>
Comments
Post a Comment