Codefitter2: How to create simple REST app using Spring Boot, AngularJS and MariaDB in Eclipse. Part 2

In part 1 we created some basis structure for our app.

Here I’ll show how to display two lists of entities on one page in web browser.

We will need 6 files at the beginning. This allows only to add and remove entities.

/src/main/resources/static/index.html

/src/main/resources/static/webapp/app.js

/src/main/resources/static/webapp/entities/category/category_controller.js

/src/main/resources/static/webapp/entities/category/category_service.js

/src/main/resources/static/webapp/entities/vat/vat_controller.js

/src/main/resources/static/webapp/entities/vat/vat_service.js

/src/main/resources/static/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
 href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" />
</head>
<body ng-app="myApp">
 <div class="container" ng-controller="AppVatController">
  <div class="page-header">
   <h1>Vat</h1>
  </div>
  <div class="alert alert-info" role="alert"
   ng-hide="vats && vats.length > 0">There are no vats yet.</div>

  <form class="form-horizontal" role="form"
   ng-submit="addVat(newVatDescription, newVatRate, newVatActive)">
   <div class="table-responsive">
    <table class="jh-table table table-striped">
     <thead>
      <tr>
       <th></th>
       <th>ID</th>
       <th>Description</th>
       <th>Rate</th>
       <th>Active</th>
       <th></th>
      </tr>
     </thead>
     <tbody>
      <tr ng-repeat="vat in vats track by vat.id">
       <td><input type="checkbox" ng-model="vat.checked"
        ng-change="updateVat(vat)" /></td>
       <td>{{vat.id}}</td>
       <td>{{vat.description}}</td>
       <td>{{vat.rate}}</td>
       <td>{{vat.active}}</td>
       <td class="text-right">
        <div class="btn-group flex-btn-group-container">
         <button class="pull-right btn btn-danger" type="button"
          title="Delete" ng-click="deleteVat(vat)">
          <span class="glyphicon glyphicon-trash"></span>
         </button>
        </div>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <hr />
   <div class="input-group">
    <input type="text" class="form-control" ng-model="newVatDescription"
     placeholder="Enter vat description..." /> <input type="text"
     class="form-control" ng-model="newVatRate"
     placeholder="Enter vat rate [i.e 0.23]..." /> <input type="text"
     class="form-control" ng-model="newVatActive"
     placeholder="Is it active? [true or false]..." /> <span
     class="input-group-btn">
     <button class="btn btn-default" type="submit"
      ng-disabled="!newVatDescription" title="Add">
      <span class="glyphicon glyphicon-plus"></span>
     </button>
    </span>
   </div>
  </form>




  <hr />

  <div class="container" ng-controller="AppCategoryController">
   <div class="page-header">
    <h1>Categories</h1>
   </div>
   <form class="form-horizontal" role="form"
    ng-submit="addCategory(newCategoryName, newCategoryParentId)">
    <div class="alert alert-info" role="alert"
     ng-hide="categories && categories.length > 0">There are no
     categories yet.</div>
    <div class="table-responsive">
     <table class="jh-table table table-striped">
      <thead>
       <tr>
        <th></th>
        <th>ID</th>
        <th>Name</th>
        <th>Parent Id</th>
       </tr>
      </thead>
      <tbody>
       <tr ng-repeat="category in categories">
        <td><input type="checkbox" ng-model="category.checked"
         ng-change="updateCategory(category)" /></td>
        <td>{{category.id}}</td>
        <td>{{category.name}}</td>
        <td>{{category.parentId}}
         <button class="pull-right btn btn-danger" type="button"
          title="Delete" ng-click="deleteCategory(category)">
          <span class="glyphicon glyphicon-trash"></span>
         </button>
        </td>
       </tr>
      </tbody>
     </table>
    </div>

    <hr />
    <div class="input-group">
     <input type="text" class="form-control" ng-model="newCategoryName"
      placeholder="Enter category name..." /> <input type="text"
      class="form-control" ng-model="newCategoryParentId"
      placeholder="Enter category parentId..." /> <span
      class="input-group-btn">
      <button class="btn btn-default" type="submit"
       ng-disabled="!newCategoryName" title="Add">
       <span class="glyphicon glyphicon-plus"></span>
      </button>
     </span>
    </div>
   </form>
  </div>



  <script type="text/javascript"
   src="./bower_components/angular/angular.min.js"></script>
  <script type="text/javascript"
   src="./bower_components/angular-resource/angular-resource.min.js"></script>
  <script type="text/javascript"
   src="./bower_components/lodash/dist/lodash.min.js"></script>
  <script type="text/javascript" src="./webapp/app.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/vat/vat_controller.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/vat/vat_service.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/category/category_controller.js"></script>
  <script type="text/javascript"
   src="./webapp/entities/category/category_service.js"></script>
</body>
</html>

/src/main/resources/static/webapp/app.js:

(function(angular) {
   angular.module("myApp.vat_controller", []);
   angular.module("myApp.vat_service", []);
   angular.module("myApp.category_controller", []);
   angular.module("myApp.category_service", []);
  angular.module("myApp", ["ngResource", "myApp.vat_controller", "myApp.vat_service", 
   "myApp.category_controller", "myApp.category_service"]);
}(angular));

/src/main/resources/static/webapp/entities/category/category_controller.js

(function(angular) {
  var AppCategoryController = function($scope, Category) {
   Category.query(function(response) {
      $scope.categories = response ? response : [];
    });
    
    $scope.addCategory = function(name, parentId) {
      new Category({
          name: name,
          parentId: parentId,
          checked: false
      }).$save(function(category) {
        $scope.categories.push(category);
      });
      $scope.newCategoryParentId = "";
      $scope.newCategoryName = "";
    };
    
//    $scope.updateCategory = function(category) {
//     category.$update();
//    };
//    
    $scope.deleteCategory = function(category) {
     category.$remove(function() {
        $scope.categories.splice($scope.categories.indexOf(category), 1);
      });
    };
  };
  
  AppCategoryController.$inject = ['$scope', 'Category'];
  angular.module("myApp.category_controller").controller("AppCategoryController", AppCategoryController);
}(angular));

/src/main/resources/static/webapp/entities/category/category_service.js:

(function(angular) {
  var CategoryFactory = function($resource) {
    return $resource('/category/:id', {
      id: '@id'
    }, {
      update: {
        method: "PUT"
      },
      remove: {
        method: "DELETE"
      }
    });
  };
  
  CategoryFactory.$inject = ['$resource'];
  angular.module("myApp.category_service").factory("Category", CategoryFactory);
}(angular));

/src/main/resources/static/webapp/entities/vat/vat_controller.js:

(function(angular) {
  var AppVatController = function($scope, Vat) {
    Vat.query(function(response) {
      $scope.vats = response ? response : [];
    });
    
    $scope.addVat = function(description, rate, active) {
      new Vat({
        description: description,
        rate: rate,
        active: active,
        checked: false
      }).$save(function(vat) {
        $scope.vats.push(vat);
      });
      $scope.newVatDescription = "";
      $scope.newVatRate = "";
      $scope.newVatActive = "";
    };
//    
//    $scope.updateVat = function(vat) {
//      vat.$update();
//    };
//    
    $scope.deleteVat = function(vat) {
      vat.$remove(function() {
        $scope.vats.splice($scope.vats.indexOf(vat), 1);
      });
    };
  };
  
  AppVatController.$inject = ['$scope', 'Vat'];
  angular.module("myApp.vat_controller").controller("AppVatController", AppVatController);
}(angular));

/src/main/resources/static/webapp/entities/vat/vat_service.js:

(function(angular) {
  var VatFactory = function($resource) {
    return $resource('/vats/:id', {
      id: '@id'
    }, {
      update: {
        method: "PUT"
      },
      remove: {
        method: "DELETE"
      }
    });
  };
  
  VatFactory.$inject = ['$resource'];
  angular.module("myApp.vat_service").factory("Vat", VatFactory);
}(angular));

Now it should look like this:

Codefitter2

sobota, 22 października 2016

How to create simple REST app using Spring Boot, AngularJS and MariaDB in Eclipse. Part 2

Brak komentarzy:

Prześlij komentarz

Archiwum bloga