Book Image

Building Web Apps with Spring 5 and Angular

By : Ajitesh Kumar Shukla
Book Image

Building Web Apps with Spring 5 and Angular

By: Ajitesh Kumar Shukla

Overview of this book

Spring is the most popular application development framework being adopted by millions of developers around the world to create high performing, easily testable, reusable code. Its lightweight nature and extensibility helps you write robust and highly-scalable server-side web applications. Coupled with the power and efficiency of Angular, creating web applications has never been easier. If you want build end-to-end modern web application using Spring and Angular, then this book is for you. The book directly heads to show you how to create the backend with Spring, showing you how to configure the Spring MVC and handle Web requests. It will take you through the key aspects such as building REST API endpoints, using Hibernate, working with Junit 5 etc. Once you have secured and tested the backend, we will go ahead and start working on the front end with Angular. You will learn about fundamentals of Angular and Typescript and create an SPA using components, routing etc. Finally, you will see how to integrate both the applications with REST protocol and deploy the application using tools such as Jenkins and Docker.
Table of Contents (18 chapters)
Title Page
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

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);
                }
            }