Прежде всего, я очень неопытен в AngularJS и JavaScript.
Я пытаюсь связать свое приложение Spring с шаблоном HTML и Angular, и я не знаю, как именно решить проблему и какие функции использовать.
@ Контроллер (возвращает расчет чистой заработной платы в соответствии с выбранным кодом валюты и дневной заработной платой):
@RestController
public class CalculatorController {
private final NBPClient nbpClient;
public CalculatorController(NBPClient nbpClient) {
this.nbpClient = nbpClient;
}
@RequestMapping(path = "/calculator/{currency-code}/{daily-wage}")
public BigDecimal calculateSalaryByCountryCode(@PathVariable("currency-code") String currencyCode,
@PathVariable("daily-wage") BigDecimal dailyWage) {
return this.nbpClient.getCalculation(dailyWage, currencyCode);
}
}
код JavaScript для Angular (экспериментальный)
(function() {
var app = angular.module("githubViewer", []);
var GitHubViewerController = function($scope, $http) {
$scope.getRepositoryData = function() {
var owner = $scope.owner;
var repository = $scope.repository;
var serviceUrl = "/repositories/"+ owner +"/" + repository
$http.get(serviceUrl).then(onCalculationCheckComplete, onError);
}
var onCalculationCheckComplete = function(response) {
$scope.repositoryData = response.data;
$scope.showData = true;
};
var onError = function(reason) {
$scope.error = "Couldn't fetch GitHub repository data";
$scope.showError = true;
};
};
app.controller("GitHubViewerController", GitHubViewerController);
}());
и некоторые части шаблона HTML (также с экспериментальными функциями Angular):
<!doctype html>
<html lang="en" ng-app="calculatorViewer">
<head>
<script data-require="angular.js@1.6.6" data-semver="1.6.6"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<link rel="stylesheet" href="../static/main.css"/>
</head>
<body ng-controller="CalculatorViewerController">
<form method="" action="#">
<div class="row">
<div class="6u 12u(mobilep)">
<input type="number" ng-model='dailyWage' name="dailyWage" min="1"
placeholder="Type your daily wage"/>
</div>
<div class="6u 12u(mobilep)">
<select class="6u 12u(mobilep)" name="service">
<option ng-model='PLN' name='currencyCode'>Poland</option>
<option ng-model='GBP' name='currencyCode'>Great Britain</option>
<option ng-model='EUR' name='currencyCode'>Germany</option>
</select>
</div>
</div>
<div class="row">
<div class="12u">
<textarea ng-show="showResult" placeholder="Result" rows="6">
Result: {{calculationData}}
</textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>
<button ng-click="calculateSalaryByCountryCode()" value="Calculate"></button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
<div ng-show="showError">
<h2>Something wrong happened</h2>
</div>
</body>
</html>
Страница должна загружаться автоматически, и после того, как пользователь выберет тип «страна» (вводимый текст должен отличаться: «ВВП», «PLN» или «EUR»), «Суточная заработная плата» и нажмите кнопку, должен отобразиться результат. в существующей текстовой области.
Буду рад любому совету