Spring Boot + Kotlin + AngularJS + WebJar CRUD Example Part 4

Hope you work well and from previous parts we’re able to create RESTful service using Spring Boot with Kotlin. But one more thing you should know before go ahead named WebJar.

What is and Why WebJars?

WebJars are client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR (Java Archive) files. Maven is great on managing jars, but not so good for static web dependencies like CSS or JS files packaged in a zip. With Webjars you can have AngularJS or Bootstrap in your pom.xml, like you did with Bower on a web project.

Explicitly and easily manage the client-side dependencies in JVM-based web applications
Use JVM-based build tools (e.g. Maven, Gradle, sbt, …) to download your client-side dependencies
Know which client-side dependencies you are using
Transitive dependencies are automatically resolved and optionally loaded via RequireJS.

I am adding bootstrap and angularjs jar using WebJars and for this we’ve to add dependencies for that.

Pom.xml

<dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>3.3.7-1</version>
</dependency>
    
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>angularjs</artifactId>
    <version>1.6.6</version>
</dependency>

I am adding themeleaf which is not mandatory in pom.xml.

<dependency>  
        <groupId>org.springframework.boot</groupId>  
        <artifactId>spring-boot-starter-thymeleaf</artifactId>  
</dependency>

index.html

Now we’re ready to use our webjars in our application.

<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
  <!-- ADD ALL YOUR CSS DEPENDENCIES HERE... -->
  <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" >
</head>
<body>
 
  <!-- DO YOUR THING HERE... -->
  Hello world!
 
  <!-- ADD ALL YOUR JS DEPENDENCIES HERE... -->
<script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
<!-- Include Bootstrap library -->
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<!-- Include AngularJS library -->
<script th:src="@{webjars/angularjs/1.6.6/angular.min.js}"></script>
<!-- Include custom AngularJS  -->
<script th:src="@{/resources/js/angular-script.js}"></script>
</body>
</html>

application.properties

Add server and Spring MVC configuration in properties file:

#server properties
server.contextPath=/SpringBootCRUD

#spring mvc properties
spring.mvc.view.prefix: /
spring.mvc.view.suffix: .jsp
spring.mvc.static-path-pattern=/resources/**

spring.thymeleaf.cache: false

Now when you open http://localhost:8080/SpringBootCRUD/ you didn’t see your HTML code. You’ve to configure index.html with your application.

HomeController.kt

Create a controller named HomeController in package co.tellmehow.kotlin.

import org.springframework.context.annotation.Configuration
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry
import org.springframework.web.servlet.config.annotation.EnableWebMvc

@Configuration

open class HomeController : WebMvcConfigurerAdapter(){
  
    override fun addViewControllers(registry: ViewControllerRegistry) {
        registry.addViewController("/index").setViewName("index")
        registry.addViewController("/").setViewName("index")
   }
  

  
}

Now run your application. In the next part we’ll work on AngularJS