Spring Boot + Kotlin + AngularJS + WebJar CRUD Example

Now we’re ready to give final touch in our CRUD example. Lets give you brief what we study previously.

  1. In first part, we create simple spring boot application and why use spring boot.
  2. In second part, we add Kotlin dependency in our Spring boot application.
  3. Third part, create RESTful program using Kotlin and Spring boot.
  4. Fourth part, Add webjars dependency and why use webjars

Now lets move on fifth part of this tutorial in which we add angularjs for front end and give final touch to this tutorial example.

What is and why use AngularJS?

Angular JS is an open source JavaScript framework that is used to build web applications. It can be freely used, changed and shared by anyone. It is developed by Google. It is an excellent framework for building single phase applications and line of business applications.

Advantage of AngularJS

There are a lot of JavaScript frameworks for building web applications. So, it is a genuine question, why to use Angular JS.

Following are the advantages of AngularJS over other JavaScript frameworks:

  • Dependency Injection: Dependency Injection specifies a design pattern in which components are given their dependencies instead of hard coding them within the component.
  • Two way data binding: AngularJS creates a two way data-binding between the select element and the orderProp model. orderProp is then used as the input for the orderBy filter.
  • Testing: Angular JS is designed in a way that we can test right from the start. So, it is very easy to test any of its components through unit testing and end-to-end testing.
  • Model View Controller: In Angular JS, it is very easy to develop application in a clean MVC way. You just have to split your application code into MVC components i.e. Model, View and the Controller.
  • Directives, filters, modules, routes etc.

First of all you’ve to give name of your angularjs application and controller. I am using div tag for this and all of code would be inside of that div tag in index.html.

<div class="container" ng-app="myApp" ng-controller="productsCtrl">
   //////////all angularjs html part would be here
</div>
  • Application name : myApp
  • Controller name : productsCtrl

Now register your angular app and controller in our custom javascript file named angular-script.js

//Application module
var app = angular.module('myApp', []);
app.controller('productsCtrl', function($scope, $http) {
//angular code start	


//angular code end
});

Fetch employee details in table

Now we are going to retrieve and read these data from the database and display it in the application’s main page.

index.html

 <!-- Table to show employee detalis -->
<input type="text" ng-model="search" class="form-control" placeholder="Search product..." /> 
<table class="table table-hover">
<tr>
<th>Emp ID</th>
<th>Employee Name</th>
<th>Age</th>
<th>Department</th>
<th></th>
<th></th>
</tr>
 <tbody ng-init="getAll()">
        <tr ng-repeat="d in names  | filter:search">
            <td class="text-align-center">{{ d.id }}</td>
            <td>{{ d.name }}</td>
            <td>{{ d.age }}</td>
            <td class="text-align-center">{{ d.dept }}</td>
            <td>
      <button class="btn btn-warning" ng-click="editInfo(d.id)" title="Edit"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
      <td>
      <button class="btn btn-danger" ng-click="deleteInfo(d.id)" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
      </td>
        </tr>
    </tbody>
</table>

In above code you can see <tbody> tag, we call getAll() function initialization time. So firstly create that function in our AngularJS script(angular-script.js).

//read products
$scope.getAll = function(){
  
  
  $http.get("employee").then(function(response, status, header, config){
     $scope.names = response.data;
        
    });
  
}

Add employee details

Now add [Add employee] button to open a modal with form and code of index.html would be:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg " ng-click="openModal()">
    Add Employee
</button>


<!-- Modal start -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Add Employee details
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  
                  <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                      <input type="text" ng-model="name" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter employee name"/>
                  </div>
                  
                  <div class="form-group">
                    <label for="exampleInputPassword1">Age</label>
                      <input type="text" ng-model="age" class="form-control"
                          id="exampleInputPassword1" placeholder="Enter employee age"/>
                  </div>
                  
                  <div class="form-group">
                    <label for="exampleInputPassword1">Department</label>
                      <input type="text" ng-model="dept" class="form-control"
                          id="exampleInputPassword1" placeholder="Enter employee department"/>
                  </div>
                 
                  
                </form>
                
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
            
             <button type="button" ng-click="createProduct()" class="btn btn-primary addButton">
                    Add employee details
                </button>
                
                <button type="button"  ng-click="updateProduct()" class="btn btn-primary updateButton">
                    Update employee details
                </button>
            
                <button type="button" class="btn btn-default closeModal"
                        data-dismiss="modal">
                            Close
                </button>
               
            </div>
        </div>
    </div>
</div>

<!-- Modal end-->

Create openModal() function in angular script.

//open modal	
$scope.openModal = function()
{
  $(".updateButton").hide();
  $(".addButton").show();
  $('#myModalLabel').text("Add Employee details");
  $scope.clearForm();
  $('#myModalNorm').modal();  
}

Modal will be open when you click on button:

 

Now when you click on [Add employee details] button it call createProduct() funtion. So next work is to create that function in script:

//create new product 
$scope.createProduct = function(){
  
  
    
    // fields in key-value pairs
    $http.post("employee", {
            'name' : $scope.name, 
            'age' : $scope.age, 
            'dept' : $scope.dept,
        }
    ).then(function (response, status, headers, config) {
        
//        // close modal
        $('#myModalNorm').modal('hide');
//         
//        // clear modal content
        $scope.clearForm();
         
        // refresh the list
        $scope.getAll();
    });
}

Edit employee details

In read employee section, you can see two button : edit and delete in index.html. In which edit button trigger editInfo(d.id) function with employee id.

//fetch data for edit
$scope.editInfo = function(id){
  
  
  
  $http.get("employee/"+id).then(function(response, status, header, config){

    $scope.id = response['data']['id'];
    $scope.name = response['data']['name'];
    $scope.age = response['data']['age'];
    $scope.dept = response['data']['dept'];
    
    $(".addButton").hide();
    $(".updateButton").show();
    $('#myModalLabel').text("Edit Employee details");
    $('#myModalNorm').modal();  
    });
    
}

When you click on [Update employee details] button it trigger updateProduct() function then we’ve to create that function in script.

// edit data
$scope.updateProduct = function(){
  $http.put("employee",{
    'id' : $scope.id,
    'name' : $scope.name,
    'age' : $scope.age,
    'dept' : $scope.dept
  }).then(function(response, status, header, config){
    $('#myModalNorm').modal('hide');  
    $scope.getAll();
  });
}

Delete employee details

For delete employee details, you can see delete button trigger deleteInfo(d.id) function with employee id. So firstly we create this function.

// delete data
$scope.deleteInfo = function(id){
  
  if(confirm("Are you sure you want to delete !!!")){
  
    
    $http.delete("employee/"+id).then(function(response, status, header, config){
      // refresh the list
          $scope.getAll();
          
      });
    
    
  }
  
}

When you click on delete button is open confirm dialog and when you click on ok then that data would be delete from table.

This tutorial is end here. Hope you enjoy this tutorial : Download whole project here.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...