Building Web Apps with Spring 5 and Angular

Many a times, the Hollywood principle of Don't call us, we will call you is used to explain the concept of Inversion of Control. In Hollywood, this is what one gets to hear after auditioning is done. If we apply this principle to the programming model, instead of the classes creating dependencies along with serving functionality, the dependencies are appropriately made available to the classes during runtime, and the classes just need to focus on delivering the functionality.

Simply speaking, Inversion of Control (IOC) is about inverting the flow of control that the traditional programming model used to have in terms of objects at the higher-level handling the creation and management of lower-level objects' (can also be termed as dependencies) life cycle. In the IOC programming model, higher-level objects rather receive one or more instances of these dependencies from the calling object or external framework. This is why IOC is also termed Dependency Injection, wherein the dependencies are injected appropriately, and, objects bother themselves solely with the program execution and not with the object creation. Inversion of Control is related to the object-oriented principle known as the Dependency Inversion Principle (DIP), coined by Robert Martin (Uncle Bob).

Let's take a look at the following code sample, which represents higher-level objects handling the creation of lower-level objects (dependencies):

    /*
     * This class demonstrates the dependency of higher-level object   
     * (DrawWithoutIOC)
     * onto lower level objects such as Rectangle, Square which are 
     * created within 
     * Shape class based on the value of shapeType which is passed as a 
     * method 
     * parameter to draw method.
     */

    public class DrawWithoutIOC {

      Logger logger = Logger.getLogger(DrawWithoutIOC.class.getName());

      public void draw(String shapeType) {
        Shape shape = new Shape();
        try {
          shape.draw(shapeType);
        } 
        catch (UndefinedShapeException e) {
          logger.log(Level.INFO, e.getMessage(), e);
        }
      }
    /*
     * Note that Shape class creates instances of Rectangle or Square   
       class
     * based on the value of shapeType. Any new value that needs to be   
       supported requires change in the draw method of Shape class.
     */

      private class Shape {
        public void draw(String shapeType) throws 
          UndefinedShapeException 
        {
          if(shapeType.equals("rectangle")) {
            Rectangle rectangle = new Rectangle();
            rectangle.draw();
          } else if(shapeType.equals("square")) {
            Square square = new Square();
            square.draw();
          } else {
            String shapeNotSupportedMessage = "Shape " + shapeType + " 
                   not supported";
            logger.log(Level.INFO, shapeNotSupportedMessage);
            throw new UndefinedShapeException 
              (shapeNotSupportedMessage);
          }
        }
      }

      public static void main(String[] args) {
        DrawWithoutIOC drawWithoutIOC = new DrawWithoutIOC();
        drawWithoutIOC.draw("circle");
      }
    }

Let us take a look at the class DrawWithIOC, which accepts the implementation of the Shape object in its public constructor. Note that the dependencies, such as different implementations of the Shape object, are rather injected, and code just does the execution of business logic without bothering about creation of objects related to the different implementations of Shape. Other alternatives to injecting the dependencies are passing arguments to a factory method of the class, or through properties that are set on the object instance:

    /**
     * In this class, the Shape is passed as parameter to DrawWithIOC   
     * constructor. 
     * draw method on a DrawWithIOC object just invokes the draw method  
     * on Shape object. 
     * It, no longer, manage the creation of Shape object based on 
     * shapeType and there upon, invoke the draw method.
     **/

    public class DrawWithIOC {
      Logger logger = Logger.getLogger(DrawWithIOC.class.getName());

      private Shape shape;

      public DrawWithIOC(Shape shape) {
        this.shape = shape;
      }

      public void draw() { 
        this.shape.draw(); 
      } 

      public static void main(String[] args) {
        Shape shape = new Rectangle();
        DrawWithIOC drawWithIOC = new DrawWithIOC(shape);
        drawWithIOC.draw();
      }
    }

A Spring IOC container is a framework which, basically, manages the life cycle of plain old Java objects (POJOs), and injects them into the application as required. Java objects define their dependencies using one of the following methods:

A Spring IOC container injects the dependencies after it creates the beans. Note the fact that dependencies are no longer managed by Java objects. They are rather managed and injected by the framework, and hence, Inversion of Control.

The following are the packages which are core to the IOC container:

It is the interface, org.springframework.context.ApplicationContext (sub-interface of the interface, BeanFactory), which represents the Spring IOC container and is responsible for managing the life cycle of beans. The instructions related to creating, configuring, and assembling the objects is termed Configuration Metadata. The configuration metadata is often represented using Java annotations or XML. A Java application using Spring IOC Container is created by combining Business POJOs with the previously mentioned configuration metadata, and passing it on to the IOC Container (an instance of ApplicationContext). The same is represented using the following diagram:

Figure 1: Java Application with Spring IOC Container

Let's illustrate the preceding diagram with an example. The following code represents how a service, namely, UserService is instantiated using Spring IOC container in a Spring Boot web application. Notice how the annotation-based autowiring feature has been used to have ApplicationContext autowired to the userService field in this code:

    package com.example;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;

    import com.services.UserService;
    import com.services.domain.User;

    @Controller
    @SpringBootApplication (scanBasePackages={"com.services"})
    public class DemoApplication {

@Autowired
        private UserService userService;

        @RequestMapping("/")
        @ResponseBody
        String home() { 
            User user = null;
            return "Hello " + userService.getUsername(user) + ". How are you?";
        }

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

In this section, we will learn about the key building blocks of a Spring web MVC application. The following diagram represents the key building blocks:

Figure 2: Key building blocks of Spring web MVC framework

The following are the details in relation to the preceding diagram:

Figure 3: Representing handler mappings (URL mapping) and Controller annotation

        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.stereotype.Service;

        import com.services.dao.UserDAO;
        import com.services.domain.User;

        @Service ("userService")
        public class UserService {

            @Autowired
            private UserDAO userDAO;

            public String getUsername(User user) {
                return userDAO.getUsername(user);
            }
        }

        import org.springframework.stereotype.Repository;

        import com.services.domain.User;

        @Repository ("userDAO")
        public class UserDAO {

            public String getUsername(User user) {
                return "Albert Einstein";
            }
        }

In this section, we will learn about the core component of a Spring web MVC application, the Dispatcher servlet.

As introduced in the previous section, Dispatcher servlet is the front controller which processes the user requests by invoking the appropriate components such as handler mappings, interceptors, adapters, custom controllers, services, DOA, view resolver, and finally, the views. The following diagram represents the web request/response workflow of the Dispatcher servlet:

Figure 4: Web request/response flow across the Dispatcher servlet

As per the preceding diagram, the journey of a request/response through a Spring web MVC application looks like the following:

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:

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:

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:

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

            <dependency>
              <groupId>org.apache.tomcat.embed</groupId>
              <artifactId>tomcat-embed-jasper</artifactId>
            </dependency>
            <dependency>
              <groupId>javax.servlet</groupId>
              <artifactId>jstl</artifactId>
            </dependency>

            spring.mvc.view.prefix=/WEB-INF/jsp/
            spring.mvc.view.suffix=.jsp

            @Controller
@SpringBootApplication
            public class HelloWorldApplication {

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

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

In this section, we will learn how to use the RequestParam annotation for reading web request parameters in the controller class. The following image shows what the signup form looks like with three input fields such as Nick Name, Email address, and Password: 

Figure: New User Signup form

On submission of the preceding form, the user request parameters will be handled using the @RequestParam annotation. The RequestParam annotation is used to bind a method parameter to a web request parameter. The following code displays the binding of method parameters such as nickname, emailAddress, and password with web request parameters such as nickname, emailaddress, and password respectively. In simple words, the frontend has to send parameters with keys as nickname, email address, and password for the code given next to work. 

    @Controller
    @RequestMapping("/account/*")
    public class UserAccountController {

@GetMapping("/signup")
        public String signup() {
            return "signup";
        } 

@PostMapping("/signup/process")
        public String processSignup(ModelMap model, 
@RequestParam("nickname") String nickname, 
        @RequestParam("emailaddress") String emailAddress, 
        @RequestParam("password") String password) {
            model.addAttribute("login", true);
            model.addAttribute("nickname", nickname);
            return "index";
        }
    }

In this section, we will learn when and how to use the RequestBody annotation (@RequestBody) for handling web requests.

The RequestBody annotation is used to bind the method parameter with the body of the incoming request. In the process of binding, HttpMessageConverters converts the body of the request appropriately (most commonly into the parameter object) based on the content type of the request.

The RequestBody annotation is most commonly used in scenarios dealing with REST APIs. 

The following example demonstrates the usage of the @RequestBody annotation using a domain object, User, which is made a parameter to the controller method:

    @RestController
    public class RestDemoController {

@PostMapping("/hello")
        public HelloMessage getHelloMessage(@RequestBodyUser user) {
            HelloMessage helloMessage = new HelloMessage();
            String name = user.getName();
            helloMessage.setMessage( "Hello " + name + "! How are you doing?");
            helloMessage.setName(name);
            return helloMessage;
        }  
    }

In the preceding example, note some of the following:

        {"name": "Calvin Hobbes"}

The HttpMessageConverter method converts the preceding into the User object, whose code looks like the following:

    public class User {
      private String name;

      public String getName() {
        return name;
      } 

      public void setName(String name) {
        this.name = name;
      }
    }

   public class HelloMessage {
     private String message;
     private String name;
     public String getMessage() {
       return message;
     }
     public void setMessage(String message) {
       this.message = message;
     }
     public String getName() {
       return name;
     }
     public void setName(String name) {
       this.name = name;
     }
   }

The HttpMessageConverter method converts the preceding response object into the following response message:

    {"message": "message text goes here...", "name": "name goes here..."}

In this section, we will learn how to use the PathVariable annotation for handling request parameters.

The PathVariable annotation is used to bind a method parameter to a URI template variable. A URI template is a URI-like string containing one or more variables. For example, in  the following code, /{nickname} is a URI template consisting of nickname as a variable. A method can have multiple @Pathvariable annotations to bind multiple variables present in the URI template. PathVariable is seen to be mainly used in the REST web service. Later, while going through Angular chapters, you will see that PathVariable is very similar to handling routing parameters using the ActivatedRoute concept:

    @Controller
    @SpringBootApplication
    public class HealthAppApplication {

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

@GetMapping("/{nickname}")
      public String home(ModelMap model, @PathVariable String nickname) {
        model.addAttribute("name", nickname);
        return "index";
      }

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

Both RequestParam and PathVariable can be used to read the request parameters. @RequestParam is used to retrieve the query parameters from the request URL. On the other hand, @PathVariable is used to retrieve one or more placeholders from the URI. URLs without query parameters, for example, paths, tend to be cached. The following code demonstrates the usage of both RequestParam and PathVariable. Different URLs will be handled using different methods represented in the code as follows:

The following code displays the usage of both RequestParam and PathVariable:

    @Controller
    @SpringBootApplication
    public class HealthAppApplication {
     //
     // RequestParam is used to retrieve value of parameter, name. 
     //
     @RequestMapping("/") 
     public String usingRequestParam(Model model, 
                   @RequestParam(value="name", required=false) String nickname) {
      model.addAttribute("nickname", nickname);
      return "index";
    }

    @RequestMapping("/{nickname}") 
     public String usingPathVariable(Model model, @PathVariable String nickname) 
     {
       model.addAttribute("nickname", nickname);
       return "index";
     }
   }

In the next section, you will learn how to use interceptors to handle web requests-response, before and after the requests are handled by the controller respectively.

ModelAndView is a container object to hold both Model and View. With ModelAndView as a return object, the controller returns the both model and view as a single return value. The model is a map object which makes it possible to store key-value pairs. The following code sample represents the usage of ModelAndView in a Controller:

    @Controller
    @RequestMapping("/account/*")
    public class UserAccountController {

      @PostMapping("/signup/process")
      public ModelAndView processSignup(ModelMap model, @RequestParam("nickname")       String  nickname, @RequestParam("emailaddress") 
      String emailAddress, @RequestParam("password") String password) {
        model.addAttribute("login", true);
        model.addAttribute("nickname", nickname);
        model.addAttribute("message", "Have a great day ahead.");
return new ModelAndView("index", model);
      }
    }

The following code samples represent the different ways in which an instance of ModelAndView is returned with different sets of information:

    // Will result in display of index.jsp page
    return new ModelAndView("index");

    // Will result in display of index.jsp page. 
    //The JSP page could consist of code such as "Hello ${name}" 
    //which will get displayed as "Hello Calvin Hobbes"  

    return new ModelAndView("index", "name", "Calvin Hobbes");

    // Will result in display of index.jsp page. 
    // The JSP page could consist of code such as 
    //"Hello ${model.firstName} ${model.lastName}" 
    //which will get displayed as "Hello Calvin Hobbes"

    UserInfo userInfo = new UserInfo();
    userInfo.setFirstName("Calvin");
    userInfo.setLastName("Hobbes");
    return new ModelAndView("index", "model", userInfo);

    // Will result in display of index.jsp page. 
    // The JSP page could consist of code such as "Hello ${name}" 
    // which will get displayed as "Hello Calvin Hobbes"

    Map<String, Object> map = new HashMap<String, Object>();
    map.put("name", "Calvin Hobbes");
    return new ModelAndView("index", map);

This section represents the concepts related to the usage of the @ResponseBody annotation for returning a response to the client request.

The @ResponseBody annotation can be applied both at the class level and the method level. When @ResponseBody is applied at the class level along with the @Controller annotation, another annotation such as @RestController can be used instead.

The @ResonseBody annotation represents the fact that the value returned by the method will form the body of the response. When the value returned is an object, the object is converted into an appropriate JSON or XML format by HttpMessageConverters. The format is decided based on the value of  the produce attribute of the @RequestMapping annotation, and also the type of content that the client accepts. Take a look at the following example:

    @Controller
    public class RestDemoController {

      @RequestMapping(value="/hello", method=RequestMethod.POST, produces="application/json")
@ResponseBody
      public HelloMessage getHelloMessage(@RequestBody User user) {
        HelloMessage helloMessage = new HelloMessage();
        String name = user.getName();
        helloMessage.setMessage( "Hello " + name + "! How are you doing?");
        helloMessage.setName(name);
        return helloMessage;
      }
    }