Enterprise Java

Build a new Web Application from scratch using Spring boot, Thymeleaf, AngularJS – Part 1

In this series of blog posts we will be building a complete responsive web application using the following tech stack :

1) Spring boot
– Spring MVC web
– Spring Data JPA
– Spring Security
2) Thymeleaf for server side templating
3) Angular JS for client side MVC ( including JS dependency management with bower)
4) Deploy the app on AWS/EBS/Heroku/Openshift

We will use good old maven to get started.

STEP 1: Simple Hello world UI with Thymeleaf

1.) To begin with lets create a workspace in our local filesystem to start the project.

Anirudhs-MacBook-Pro:~ anirudh$ mkdir practice && cd practice

2.) Open your favorite IDE (eclipse/IDEA) and start a new project using maven, (you can also use a quickstart maven archetype). Provide the group id and artificat id of your choice.
I used the following :

group id : com.practice
   artifact id : ecomm

3.) Once the project is created, open Pom.xml and paste the following below

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">





4.) Now Add Application.class for SpringBoot in your package ( at com.practice)

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);


5) Add a Controller
Make a new package inside com.practice with name controller and add HomeController.Java

package com.practice.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

public class HomeController {

    public String home(){
        return "index";


Note the annotation is not “@RestController” it is just “@Controller” which is Spring MVC controller which returns a view.

6) Finally we will make a view HTML file. Thymeleaf is the templating library here which is used to generate this.
Place this index.html in the location : src/main/resources/templates ( Spring boot convention)

<html xmlns:th="http://www.thymeleaf.org">
    <title>First Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Hi, this is my first landing page using server side templating by Thymeleaf

7.) Run the application
Go to the console and go to the home directory, where you have pom.xml file and run mvn clean package

Anirudhs-MacBook-Pro:practice anirudh$ mvn clean package

After the project is build , run using spring-boot:run

Anirudhs-MacBook-Pro:practice anirudh$ mvn spring-boot:run

Now go to http://localhost:8080/home and find your landing page.

In the next blog we will add more functionality, expose REST Services and add introduce Angular JS in our app.

Anirudh Bhatnagar

Anirudh is a Java programmer with extensive experience in building Java/J2EE applications. He has always been fascinated by the new technologies and emerging trends in software development. He has been involved in propagating these changes and new technologies in his projects. He is an avid blogger and agile enthusiast who believes in writing clean and well tested code.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
5 years ago

This tutorial is misleading, i cant angularjs on the example

Back to top button