Spring Boot + Kotlin + AngularJS + WebJar CRUD Example

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

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 ...