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:
