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.
| Reference: | Build a new Web Application from scratch using Spring boot, Thymeleaf, AngularJS – Part 1 from our JCG partner Anirudh Bhatnagar at the anirudh bhatnagar blog. |
This tutorial is misleading, i cant angularjs on the example