Bootstrap 4 Table + AngularJs + Kotlin SpringBoot RestAPI

In the tutorial, JavaSampleApproach will show you how to show data from Kotlin SpringBoot RestAPI on web-view by Bootstrap 4 Table and AngularJs.

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Bootstrap 4
– AngularJs
– Spring Boot – 1.5.9.RELEASE
– Kotlin

II. Goal

We create a Kotlin SpringBoot project that uses AngularJs Ajax to get data and styles web-view with BootStrap 4 Table, the project as below structure:

Kotlin SpringBoot RestAPI + AngularJS + Bootstrap 4 Table - project structure

Run & check results
-> get message:

Kotlin SpringBoot RestAPI + AngularJS + Bootstrap 4 Table - logs request headers

Kotlin SpringBoot RestAPI + AngularJS + Bootstrap 4 Table - logs request preview

-> result:

Kotlin SpringBoot RestAPI + AngularJS + Bootstrap 4 Table - results

III. Practice

Step to do:
– Create Kotin SpringBoot project
– Create data models
– Implement Index view Controller
– Implement RestAPI
– Create index view
– Implement AngularJs Ajax script

1. Create Kotin SpringBoot project

Use SpringToolSuite to create SpringBoot project with Kotlin language, see dependencies as below:

<parent>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-parent</artifactId>
	<version>1.5.9.RELEASE</version>
	<relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
	<kotlin.compiler.incremental>true</kotlin.compiler.incremental>
	<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
	<java.version>1.8</java.version>
	<kotlin.version>1.1.61</kotlin.version>
</properties>

<dependencies>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
		<groupId>org.jetbrains.kotlin</groupId>
		<artifactId>kotlin-stdlib-jre8</artifactId>
		<version>${kotlin.version}</version>
	</dependency>
	<dependency>
		<groupId>org.jetbrains.kotlin</groupId>
		<artifactId>kotlin-reflect</artifactId>
		<version>${kotlin.version}</version>
	</dependency>

	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-test</artifactId>
		<scope>test</scope>
	</dependency>
</dependencies>

<build>
	<sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory>
	<testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
		<plugin>
			<artifactId>kotlin-maven-plugin</artifactId>
			<groupId>org.jetbrains.kotlin</groupId>
			<version>${kotlin.version}</version>
			<configuration>
				<compilerPlugins>
					<plugin>spring</plugin>
				</compilerPlugins>
				<jvmTarget>1.8</jvmTarget>
			</configuration>
			<executions>
				<execution>
					<id>compile</id>
					<phase>compile</phase>
					<goals>
						<goal>compile</goal>
					</goals>
				</execution>
				<execution>
					<id>test-compile</id>
					<phase>test-compile</phase>
					<goals>
						<goal>test-compile</goal>
					</goals>
				</execution>
			</executions>
			<dependencies>
				<dependency>
					<groupId>org.jetbrains.kotlin</groupId>
					<artifactId>kotlin-maven-allopen</artifactId>
					<version>${kotlin.version}</version>
				</dependency>
			</dependencies>
		</plugin>
	</plugins>
</build>

2. Create data models

– Create Address model:


package com.javasampleapproach.angularjsajax.model

data class Address(
		val street : String = "",
		val postcode : String = ""
){}

- Create Customer model:

package com.javasampleapproach.angularjsajax.model

import com.javasampleapproach.angularjsajax.model.Address;

data class Customer(
		val name : String = "",
		val age :Int = 0,
		val address : Address
){}

3. Implement Index view Controller


package com.javasampleapproach.angularjsajax.controller

import org.springframework.stereotype.Controller
import org.springframework.web.bind.annotation.GetMapping

@Controller
class WebController {
	
    @GetMapping(value="/")
    fun homepage() : String {
        return "index";
    }
}

4. Implement RestAPI


package com.javasampleapproach.angularjsajax.controller

import com.javasampleapproach.angularjsajax.model.Customer
import com.javasampleapproach.angularjsajax.model.Address
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController

import javax.annotation.PostConstruct

@RestController
@RequestMapping("/api/customer")
class RestWebController {
	
	val custStore = mutableListOf()
	
	@PostConstruct
    fun initial(){
		custStore.add(Customer("Jack", 25, Address("NANTERRE CT", "77471")))
		custStore.add(Customer("Mary", 37, Address("W NORMA ST", "77009")))
		custStore.add(Customer("Peter", 18, Address("S NUGENT AVE", "77571")))
		custStore.add(Customer("Amos", 23, Address("E NAVAHO TRL", "77449")))
		custStore.add(Customer("Craig", 45, Address("AVE N", "77587")))
    }
 
	@GetMapping(value = "/all")
	fun getResource() : List{
		return custStore;
	}
}

5. Create index view

<!DOCTYPE HTML>
 
<html  lang="en">
<head>
	  <title>Bootstrap 4 Table + AngularJs + Kotlin SpringBoot</title>
	  <meta charset="utf-8" />
  	  <meta name="viewport" content="width=device-width, initial-scale=1" />
	  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	  <script src="/js/angularJsApp.js"></script>
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
  	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
 
<body>
<div class="container" ng-app="app" ng-controller="jsaController">
	<h5 style="margin:10px 0px 10px 0px">Customer List:</h5>
    <div id="customerlist" class="row col-md-7 table-responsive">
    	<table class="table table-dark table-hover">
    		<tr>
    			<th>No</th>
   				<th>Name</th>
   				<th>Age</th>
   				<th>Street</th>
   				<th>PostCode</th>
 			</tr>
  			<tr ng-repeat="cust in listCustomers | orderBy : 'name'" ng-class-even="'info'" ng-class-odd="'success'">
  				<td>{{ $index + 1 }}</td>
    			<td>{{ cust.name | uppercase}}</td>
    			<td>{{ cust.age}}</td>
    			<td>{{ cust.address.street}}</td>
    			<td>{{ cust.address.postcode}}</td>
  			</tr>
		</table>
    </div>
</div>
</body>
</html>

6. Implement AngularJs Ajax script


var app = angular.module('app', []);
 
//#######################
//JSA CONTROLLER
//#######################
 
app.controller('jsaController', function($scope, $http, $location) {
	$scope.listCustomers = [];
	
	function getAllCustomer(){
		// get URL
		var url = $location.absUrl() + "api/customer/all";
		
		// do getting
		$http.get(url).then(function (response) {
			$scope.listCustomers = response.data;
		}, function error(response) {
			alert("Error!");
		});
	}
	
	getAllCustomer();
});

IV. Sourcecode

KotlinSpringBootAngularJsBootstrap4Table

One thought on “Bootstrap 4 Table + AngularJs + Kotlin SpringBoot RestAPI”

Leave a Reply

Your email address will not be published. Required fields are marked *