Building Web Apps with Spring 5 and Angular

Ajitesh Shukla

• Editorial: Packt Publishing
• Año: 2017
• ISBN:
  9781787281523
• Edición: 1
• Categoría: Ciencia de la computación
• Categoría: Programación en JavaScript

A complete guide to build robust and scalable web applications with Spring and Angular.About This Book• This hands on guide will teach you how to build an end-to-end modern web application using Spring and Angular.• It is easy to read and will benefit Java developers who have been used to develop the back-end part of web application while front-end (UI) has been left for UI developers.• Learn the core aspects involved in developing the backend and the UI, right from designing to integrating and deploying.Who This Book Is ForThis book is targeted towards Java Web Developers with a basic knowledge of Spring who want to build complete web applications in a fast and effective way. They will want to gain a stronghold on both frontend and backend development to advance in their careers.What You Will Learn• Set up development environment for Spring Web App and Angular app.• Process web request and response and build REST API endpoints.• Create data access components using Spring Web MVC framework and Hibernate• Use Junit 5 to test your application• Learn the fundamental concepts around building Angular• Configure and use Routes and Components.• Protect Angular app content from common web vulnerabilities and attacks.• Integrate Angular apps with Spring Boot Web API endpoints• Deploy the web application based on CI and CD using Jenkins and Docker containersIn DetailSpring 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.Style and approachThis is a straightforward guide that shows how to build a complete web application in Angular and Spring.

Creating SPA with Angular and Spring 5

Navigating through different pages/views in an effective manner is the most important aspect of creating a single page app (SPA). This is where routing comes into picture. Angular provides different concepts in relation to implementing routing in order to achieve navigation from one view to another. In this chapter, we will learn concepts such as the following to create single page applications (SPAs) using Angular and Spring 5:

• Introduction to routing
• Configuring route definitions
• RouterLink for navigation
• Route Guards for access control
• Routing configuration design patterns
• Creating a single page app
• Debugging Angular app

Introduction to routing

The routing concept in relation to web applications represents the ability to do some of the following:

• Navigate to different pages, for example, from one page to another, or, from one view to another by clicking on a URL
• Navigate back and forward through the history of pages using the back and forward button of the browser

The Angular router helps to achieve the earlier mentioned capability of moving from one view to another while users work through the application. When the browser's URL changes, the router looks for a corresponding route from which it can determine the component to display. The following are some key aspects which need to be taken care of while working with the Angular router:

• Add a base element in index.html. This instructs Angular Router to create navigation URLs for different views. The following code can be found within the <head> tag in index.html. While moving the app to production, the base href need to be set to appropriate path such as "/" (instead of "./") or any other context path. For example, if angular app is available at path, http://www.somewebsite.com/my/app/, the base href needs to be set to /my/app/.

 <base href="./">

• Create route definitions in the appropriate routing module. The route definitions can be created within AppModule, root module, as a separate routing module at the root level, or as a routing module specific to each of the feature modules. The details on different techniques based on which route definitions can be created has been detailed in one of the later sections.
• In case route definitions are defined as a separate module, import the routing module in the root module, as appropriate, either in AppModule or in the feature module. This is demonstrated in later this chapter.

Configuring Route definitions

Route definitions represent association of one or more URL paths to the respective components. Each of these route definitions can also be termed as a route. Route definitions or routes, are stored in an array and loaded using Router.forRoot or Router.forChild API depending upon whether routes are defined at root level or submodule/feature module level. When the users click on the hyperlink (URL), the router looks for the corresponding route, and based on appropriate path matching strategy (prefix by default) determines the component to display. The following are the key steps to configure route definitions:

• Define route definitions in the form of an array of routes. The following code represents route definitions where no parameters are passed (such as new user registration and user login), and one ...