Question

首先，我对AngularJS和JavaScript非常缺乏经验。我正在尝试将我的Spring App与HTML模板和Angular链接起来，我不知道如何解决问题以及使用哪些函数。

@Controller（它根据所选的货币代码和日工资返回净工资的计算）：

@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);
    }
}

Angular的JavaScript代码（实验性）

(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>

页面应自动加载，并在用户选择“国家/地区”类型（输入文本应不同：“GDP”，“PLN”或“EUR”），“每日工资”后点击按钮，结果应显示在现有的文本区域。

我很高兴任何建议

用角度js和html模板连接弹簧控制器的响应

0 个答案: