DEV Community

loizenai
loizenai

Posted on

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

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, JavaSampleApproach will show you how to create a web application with Kotlin SpringBoot RestAPI, AngularJs Ajax POST/GET messages and styling with Bootstrap 4.

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 Post/Get messages, the project as below structure:

Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - project structure

Run & check results
-> post message:

Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - post logs request

-> get message:

Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - get logs request

-> result:

Kotlin SpringBoot with AngularJs Ajax Post-Get messages + BootStrap 4 - result

III. Practice

Step to do:

  • Create Kotin SpringBoot project
  • Create Customer model
  • Implement Index view Controller
  • Implement RestAPIs
  • Create index view
  • Implement AngularJs Post/Get script

    1. Create Kotin SpringBoot project

    Use SpringToolSuite to create SpringBoot project with Kotlin language, see dependencies as below:
<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 Customer model

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

Top comments (0)