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

About Anirudh Bhatnagar

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.

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"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.practice</groupId>
    <artifactId>ecomm</artifactId>
    <version>1.0-SNAPSHOT</version>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.3.RELEASE</version>
    </parent>

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

    <properties>
        <java.version>1.8</java.version>
    </properties>

</project>

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

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

@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;

@Controller
public class HomeController {

    @RequestMapping("/home")
    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)

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

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.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz