Kotlin SpringBoot RestAPI – AngularJs Ajax POST/GET messages – style with Bootstrap 4
Tags: kotlin, springboot, ajax, bootstrap
Published: 2021-05-03 07:54:34

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-restapi-angularjs-ajax-postget-messages-style-bootstrap-4

Kotlin SpringBoot RestAPI – AngularJs Ajax POST/GET messages – style with Bootstrap 4

In the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you how to create a web application with <strong>Kotlin</strong> SpringBoot RestAPI, <strong>AngularJs</strong> Ajax POST/GET messages and styling with <strong>Bootstrap 4</strong>.

<!--more-->
<h2>I. Technologies</h2>
– 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
<h2>II. Goal</h2>
We create a <strong>Kotlin SpringBoot</strong> project that uses <strong>AngularJs Ajax</strong> to Post/Get messages, the project as below structure:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringBoot-with-AngularJs-Ajax-Post-Get-messages-BootStrap-4-project-structure.png" alt="Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - project structure" width="385" height="290" class="alignnone size-full wp-image-9707" />

<strong>Run & check results</strong>
-> post message:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringBoot-with-AngularJs-Ajax-Post-Get-messages-BootStrap-4-post-logs-request.png" alt="Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - post logs request" width="521" height="479" class="alignnone size-full wp-image-9708" />

-> get message:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringBoot-with-AngularJs-Ajax-Post-Get-messages-BootStrap-4-get-logs-request.png" alt="Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - get logs request" width="547" height="178" class="alignnone size-full wp-image-9709" />

-> result:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringBoot-with-AngularJs-Ajax-Post-Get-messages-BootStrap-4-result.png" alt="Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - result" width="382" height="500" class="alignnone size-full wp-image-9710" />
<h2>III. Practice</h2>
<strong>Step to do</strong>:
- Create Kotin SpringBoot project
- Create Customer model
- Implement Index view Controller
- Implement RestAPIs
- Create index view
- Implement AngularJs Post/Get script
<h3>1. Create Kotin SpringBoot project</h3>
Use <strong>SpringToolSuite</strong> to create SpringBoot project with <strong>Kotlin</strong> language, see dependencies as below:

<pre><code class="language-html">&lt;properties&gt;
	&lt;kotlin.compiler.incremental&gt;true&lt;/kotlin.compiler.incremental&gt;
	&lt;project.build.sourceEncoding&gt;UTF-8&lt;/project.build.sourceEncoding&gt;
	&lt;project.reporting.outputEncoding&gt;UTF-8&lt;/project.reporting.outputEncoding&gt;
	&lt;java.version&gt;1.8&lt;/java.version&gt;
	&lt;kotlin.version&gt;1.1.61&lt;/kotlin.version&gt;
&lt;/properties&gt;

&lt;dependencies&gt;
	&lt;dependency&gt;
		&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
		&lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
	&lt;/dependency&gt;
	&lt;dependency&gt;
		&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
		&lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
	&lt;/dependency&gt;
	&lt;dependency&gt;
		&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
		&lt;artifactId&gt;kotlin-stdlib-jre8&lt;/artifactId&gt;
		&lt;version&gt;${kotlin.version}&lt;/version&gt;
	&lt;/dependency&gt;
	&lt;dependency&gt;
		&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
		&lt;artifactId&gt;kotlin-reflect&lt;/artifactId&gt;
		&lt;version&gt;${kotlin.version}&lt;/version&gt;
	&lt;/dependency&gt;

	&lt;dependency&gt;
		&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
		&lt;artifactId&gt;spring-boot-starter-test&lt;/artifactId&gt;
		&lt;scope&gt;test&lt;/scope&gt;
	&lt;/dependency&gt;
&lt;/dependencies&gt;

&lt;build&gt;
	&lt;sourceDirectory&gt;${project.basedir}/src/main/kotlin&lt;/sourceDirectory&gt;
	&lt;testSourceDirectory&gt;${project.basedir}/src/test/kotlin&lt;/testSourceDirectory&gt;
	&lt;plugins&gt;
		&lt;plugin&gt;
			&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
			&lt;artifactId&gt;spring-boot-maven-plugin&lt;/artifactId&gt;
		&lt;/plugin&gt;
		&lt;plugin&gt;
			&lt;artifactId&gt;kotlin-maven-plugin&lt;/artifactId&gt;
			&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
			&lt;version&gt;${kotlin.version}&lt;/version&gt;
			&lt;configuration&gt;
				&lt;compilerPlugins&gt;
					&lt;plugin&gt;spring&lt;/plugin&gt;
				&lt;/compilerPlugins&gt;
				&lt;jvmTarget&gt;1.8&lt;/jvmTarget&gt;
			&lt;/configuration&gt;
			&lt;executions&gt;
				&lt;execution&gt;
					&lt;id&gt;compile&lt;/id&gt;
					&lt;phase&gt;compile&lt;/phase&gt;
					&lt;goals&gt;
						&lt;goal&gt;compile&lt;/goal&gt;
					&lt;/goals&gt;
				&lt;/execution&gt;
				&lt;execution&gt;
					&lt;id&gt;test-compile&lt;/id&gt;
					&lt;phase&gt;test-compile&lt;/phase&gt;
					&lt;goals&gt;
						&lt;goal&gt;test-compile&lt;/goal&gt;
					&lt;/goals&gt;
				&lt;/execution&gt;
			&lt;/executions&gt;
			&lt;dependencies&gt;
				&lt;dependency&gt;
					&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
					&lt;artifactId&gt;kotlin-maven-allopen&lt;/artifactId&gt;
					&lt;version&gt;${kotlin.version}&lt;/version&gt;
				&lt;/dependency&gt;
			&lt;/dependencies&gt;
		&lt;/plugin&gt;
	&lt;/plugins&gt;
&lt;/build&gt;</code></pre>
<h3>2. Create Customer model</h3>

More at:

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-restapi-angularjs-ajax-postget-messages-style-bootstrap-4

Kotlin SpringBoot RestAPI – AngularJs Ajax POST/GET messages – style with Bootstrap 4