Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Building Web Apps with Spring 5 and Angular

You're reading from   Building Web Apps with Spring 5 and Angular Modern end-to-end web application development

Arrow left icon
Product type Paperback
Published in Aug 2017
Publisher Packt
ISBN-13 9781787284661
Length 370 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Ajitesh Kumar Shukla Ajitesh Kumar Shukla
Author Profile Icon Ajitesh Kumar Shukla
Ajitesh Kumar Shukla
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Introduction to Spring Web Framework 2. Preparing the Spring Web Development Environment FREE CHAPTER 3. Data Access Layer with Spring and Hibernate 4. Testing and Running Spring Web App 5. Securing Web App with Spring Security 6. Getting Started with Angular 7. Creating SPA with Angular and Spring 5 8. Unit Testing with Angular Apps 9. Securing an Angular App 10. Integrating Angular App with Spring Web APIs 11. Deploying the Web Application

Building Hello World web application with Spring Boot

In this section, we will learn how to quickly build a web application using Spring Boot. The following will be covered in this section:

  • The Spring Tool Suite (STS) setup in Eclipse IDE
  • Introduction to Spring Boot
  • Building the Hello World web app using Spring Boot

The Spring STS Setup in Eclipse IDE

Spring Tool Suite (STS) provides the development environment for Spring-powered enterprise applications. This can be easily downloaded from the Eclipse marketplace in the following manner:

  1. Within the Eclipse IDE, click on Help | Eclipse Marketplace... and search for Spring STS by submitting Spring STS in the Find text field. The search result would show up different versions of STS for different Eclipse versions. 
  2. Choose the appropriate version and install. The most current version is 3.9.0.RELEASE.
  3. Restart Eclipse, and you are all set to create your first Spring Boot web application.

Introduction to Spring Boot

Spring Boot is a quick and easy way to get up and running with production-grade standalone applications in no time. If you hated all the XML configurations required to be set for creating a Spring web application, Spring Boot helps us to get away with all those troubles, and lets us focus on developing the application from the word go. The following are some of the key attributes of a Spring Boot application:

  • Requires no XML configuration or code generation.
  • Automatically configures Spring wherever appropriate and possible. 
  • Supports embedded web servers such as Tomcat, Jett, and so on. One of the key disadvantages while working with the Spring web framework prior to Spring Boot was deploying these apps explicitly on the web server either manually, or using some tools/scripts. This is no more required with Spring Boot, as it comes with support for embedded web servers. 
  • Helps to quickly and easily get started with microservices development.  Spring Boot has seen great adoption in recent times thanks to the advent of micro-services architecture style apps. Spring Boot supports creation of micro-services in the form of a JAR file, which could easily be deployed within a server container.
  • Supports features such as health checks, metrics, and so on.
  • Provides useful annotations such as @ConfigurationProperties to accomplish tasks such as loading properties' details from the application.properties file.

Building  Hello World web app using Spring Boot

In this section, we will go through the steps required to build a Hello World Web App using Spring Boot. The following given steps assume that you have set up Spring STS within your Eclipse IDE by following the steps given earlier. Now, with the steps given next, one can set up the Hello World web app in an easy manner:

  1. Press Ctrl + N to open up the Project creation Wizard dialog box.
  2. Write Spring in the Wizards text field. This will show various project options related to Spring projects. Select the option Spring Starter Project, and click on Next.
  1. Name the project HelloWorld, or leave the default name demo, and click on Next:
  1. Select Web in the list of dependencies as shown in the following screenshot, and click on Finish:
  1. Clicking on Finish will create a HelloWorld project whose file structure will look as seen in the following screenshot. Pay attention to the annotation @SpringBootApplication in the HelloWorldApplication class shown in the screenshot. Spring applications are commonly found to be annotated with annotations such as @Configuration, @EnableAutoConfiguration, and @ComponentScan. Spring Boot came up with @SpringBootApplication as an alternative to using three annotations together:
  1. Right-click on the project, and start Spring Boot App, as shown in the following screenshot. It will start the app on the embedded Tomcat server. Access the URL http://localhost:8080 on your browser. It will show up a page with the heading as Whitelabel Error Page followed by some content.
  1. At times, the project may not run successfully due to one or more errors encountered during setting up the project. One can open the Problems View, and find out if there are any issues. As creating and running a Maven project requires the dependencies to be downloaded from the internet, it is to be ensured that the internet connection is active while setting up and running the project.
  2. It is time to write some custom code in the HelloWorldApplication Java file, and run the app. Place the following code (in bold) as shown and run the app. Access the URL http://localhost:8080, and you will find the following getting printed: Hello World. How are you?. Pay attention to the usage of the @Controller annotation, which is required to annotate a class as a controller. In case one wants the class to serve REST APIs, one can use either @Controller and @ResponseBody together appropriately at the class and method level, or use @RestController at the class level:
        @Controller
@SpringBootApplication
public class HelloWorldApplication {

@RequestMapping("/")
String home() {
return "Hello world. How are you?";
}

public static void main(String[] args) {
SpringApplication.run(HelloWorldApplication.class, args);
}
}
  1. When wanting to use the JSP files for displaying views, the following steps needed to be taken:
  • Include the following code in the pom.xml file. This is done to enable JSP support:
            <dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
  • The following needs to be put in src/main/resources/application.properties in order to define the template prefix and suffix for the JSP files:
            spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
  • Create the JSP files in the folder src/main/resources/META-INF/resources/WEB-INF/jsp/. For the sake of this current example, let's call the file as index.jsp. 
  • The code for @Controller would look like the following to render the index.jsp file. Note the absence of the @ResponseBody annotation on the home() method. This is why the JSP file, index.jsp, is rendered. Otherwise, a string object would have been returned as a response leading to errors while rendering.

 

            @Controller
@SpringBootApplication
public class HelloWorldApplication {

@RequestMapping("/")
String home() {
return "index";
}

public static void main(String[] args) {
SpringApplication.run(HelloWorldApplication.class, args);
}
}
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime