todos.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Todo REST service</title>
  <link rel="stylesheet" href="https://unpkg.com/wingcss"/>
  <!-- Load AngularJS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module("TodoManagement", []);

    //Controller Part
    app.controller("TodoManagementController", function ($scope, $http) {

      //Initialize page with default data which is blank in this example
      $scope.todos = [];

      $scope.form = {
        name: "",
        status: true
      };

      //Now load the data from server
      _refreshPageData();

      //HTTP POST methods for add fruits
      $scope.add = function () {
        var data = { "name": $scope.form.name, "finished": $scope.form.status };

        $http({
          method: "POST",
          url: '/todos',
          data: angular.toJson(data),
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(_success, _error);
      };

      /* Private Methods */
      //HTTP GET- get all fruits collection
      function _refreshPageData() {
        $http({
          method: 'GET',
          url: '/todos'
        }).then(function successCallback(response) {
          $scope.todos = response.data;
        }, function errorCallback(response) {
          console.log(response.statusText);
        });
      }

      function _success(response) {
        _refreshPageData();
        _clearForm();
      }

      function _error(response) {
        alert(response.data.message || response.statusText);
      }

      //Clear the form
      function _clearForm() {
        $scope.form.name = "";
        $scope.form.status = "";
      }
    });
  </script>
</head>
<body ng-app="TodoManagement" ng-controller="TodoManagementController">

<div class="container">
  <h1>REST Service - Todo</h1>

  <h3>Add a Todo</h3>
  <form ng-submit="add()">
    <div class="row">
      <div style="display: flex; flex-direction: column; align-items: center;gap: 0px;    justify-content: center;">
        <pre style="margin: 5px;">Erledigt</pre>
        <input type="checkbox"   ng-model="form.status" size="60"/>
      </div>
      <div class="col-8"><input type="text" placeholder="Name" ng-model="form.name" size="60"/></div>
    </div>
    <input type="submit" value="Save"/>
  </form>

  <h3>Todo List</h3>
  <div class="row">
    <div class="col-4">Name</div>
    <div class="col-8">Status</div>
    <div class="col-9">Status</div>
  </div>
  <div class="row" ng-repeat="todo in todos">
    <div class="col-4">{{ todo.name }}</div>
    <div class="col-8">{{ todo.status }}</div>

    <div class="col-9">{{ todo.status }}</div>
  </div>
</div>

</body>
</html>