Book Image

Full Stack Development with JHipster

By : Deepu K Sasidharan, Sendil Kumar Nellaiyapen
Book Image

Full Stack Development with JHipster

By: Deepu K Sasidharan, Sendil Kumar Nellaiyapen

Overview of this book

JHipster is a development platform to generate, develop, and deploy Spring Boot and Angular/React applications and Spring microservices. It provides you with a variety of tools that will help you quickly build modern web applications. This book will be your guide to building full stack applications with Spring and Angular using the JHipster tool set. You will begin by understanding what JHipster is and the various tools and technologies associated with it. You will learn the essentials of a full stack developer before getting hands-on and building a monolithic web application with JHipster. From here you will learn the JHipster Domain Language with entity modeling and entity creation using JDL and JDL studio. Moving on, you will be introduced to client side technologies such as Angular and Bootstrap and will delve into technologies such as Spring Security, Spring MVC, and Spring Data. You will learn to build and package apps for production with various deployment options such as Heroku and more. During the course of the book, you will be introduced to microservice server-side technologies and how to break your monolithic application with a database of your choice. Next, the book takes you through cloud deployment with microservices on Docker and Kubernetes. Going forward, you will learn to build your client side with React and master JHipster best practices. By the end of the book, you will be able to leverage the power of the best tools available to build modern web applications.
Table of Contents (23 chapters)
Title Page
Copyright and Credits
Dedication
Packt Upsell
Foreword
Contributors
Preface
Index

Customizing the Angular frontend for an entity


Now that we have our entity domain model created and working, let's make it more usable. The Product listing screen has a table view generated by JHipster; it is sufficient for simple CRUD operations but isn't the best-suited user experience for end users who want to browse our product listing. Let's see how we can easily change to something more appealing. We will also add a nice client-side filter option to filter the listing. We will be using both Angular and Bootstrap features for this.

First, let's find the source code that we would need to edit. In your favorite editor/IDE navigate to src/main/webapp/app/entities/product:

 

Let's start by customizing the product.component.html file to update the UI view of the product listing. The HTML code currently renders a table view and uses some Angular directives to enhance the view with sorting and pagination. Let's first change the view from a table into a list, but first open the development web...