0
スプリングブート、thymeleafとangularjsのダッシュボードアプリケーションをビルドします。目的は、ボタンを押すたびに別のサービスのステータスを取得するUIからのリクエストをトリガーすることです。私はJavaのロジックを管理したいので、私はapiにサーバー側の要求をしています。サービスクラスが参照しているapiはcorsを有効にしていることに注意してください（ホスト 'localhost：9090'の外部サービスはここでは簡単のために省略しています）。スプリングブートThymeleafとangularjs 1 - angularjsスプリングコントローラへのhttp要求がタイムリーフビューでバインドされていません
<!--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;
//春コントローラーおよびサービス
@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);
});
}
});
メイキング：ここ
は、私が何をしたいのかを示して不自然な例でありますlocalhost：8080へのリクエストを送信し、apiコールを開始するボタンをクリックするとサーバーログのjsonが取得されますが、 htmlのマークアップには表示されません。設計がこのアプリケーションには最適ではないと確信していますが、現在は、完全な技術スタックを理解するための学習プロセスの一部として機能するように焦点を当てています。
：
だから、あなたは、あなたがこのようなangularJS（私はあなたが$ scope.responseDataを印刷したいと仮定）を使用する必要がある代わりに、angularJSによって操作示されたデータにthymeleafマークアップを使用することはできませんはい、私は理解します。だから本質的に私は春のブートのデフォルト構成のためにthymeleafが必要なものでもありません。 – aDiT