Java EE 8 and Angular

Prashant Padmanabhan, Sukma Wardana

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788299381
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in Java
• Index: Computer Science

Learn how to build high-performing enterprise applications using Java EE powered by Angular at the frontendAbout This Book• Leverage Java EE 8 features to build robust back end for your enterprise applications• Use Angular to build a single page frontend and combine it with the Java EE backend• Practical guide filled with ample real-world examplesWho This Book Is ForThis book is for Java EE developers who would like to build modern enterprise web applications using Angular. No prior knowledge of Angular is expected.What You Will Learn• Write CDI-based code in Java EE 8 applications• Build an understanding of Microservices and what they mean in Java EE context• Use Docker to build and run a microservice application• Use configuration options to work effectively with JSON documents• Understand asynchronous task handling and writing REST API clients• Explore the fundamentals of TypeScript, which sets the foundation for working on Angular projects• Use Angular CLI to add and manage new features• Use JSON Web tokens to secure Angular applications against malicious attacksIn DetailThe demand for modern and high performing web enterprise applications is growing rapidly. No more is a basic HTML front-end enough to meet customer demands. This book will be your one stop guide to build outstanding enterprise web applications with Java EE and Angular. It will teach you how to harness the power of Java EE to build sturdy back ends while applying Angular on the front end. Your journey to building excellent web enterprise applications starts here!The book starts with a brief introduction to the fundamentals of Java EE and all the new APIs offered in the latest release. Armed with the knowledge of Java EE 8, you will go over what it's like to build an end to end application, configure database connection for JPA, and build scalable microservice using RESTful APIs running in docker containers. Taking advantage of Payara Micro capabilities, you will build an Issue Management System, which will have various features exposed as services using Java EE backend. With a detailed coverage of Angular fundamentals, the book will expand the Issue Management System by building a modern single page application frontend. Moving forward you will learn to fit both the pieces together i.e. the frontend Angular application with the backend java EE microservices. As each unit in a microservice promotes high cohesion, you will learn different ways in which independent units can be tested efficiently.Finishing off with concepts on securing your enterprise applications, this book is a hands on guide to building Modern Web Applications.Style and approachThis is a step-by-step tutorial that explains to building modern web enterprise applications.

Angular in a Nutshell

Web-based development typically involves creating pages using HTML and CSS. While HTML describes the page structure and content, CSS is responsible for the looks. If you want these pages to be interactive, then you will undoubtedly require JavaScript. Needless to say, once the scripting code grows, effective maintenance becomes an uphill task. Angular is a JavaScript framework that helps in building non-trivial client side applications. The road to learning Angular can be taken with an understanding of HTML and some basic JavaScript. If you know TypeScript fundamentals, which we covered in the previous chapter, you already have a head start! You may not become an expert on Angular with this chapter, but it should help cover enough ground for us to start building Angular applications.

The topics we will cover in this chapter are as follows:

• Understanding Angular:
  • Anatomy of a component
  • Pipes
  • Modules
  • Boostrapping process
• Angular 2 and beyond:
  • Angular CLI
  • Managing packages
  • Bootstrap dependency
• A better Hello World:
  • Modules
  • Components
  • Handling events
• Data binding:
  • One way
  • Two way
• Services
• Routes
• Building a project:
  • Setup and run sample
  • Introduction to PrimeNG

Understanding Angular

As a JavaScript framework, Angular runs in the browser (client side). It is used to build Single Page Applications (SPA) that offer an app-like experience as opposed to traditional web pages. SPAs are web applications that loads a single page at first, and further UI updates are handled by dynamic DOM/page updates rather than page reloads. Angular is not a library and should not be compared with jQuery or any other utility library. The framework consists of core modules and optional ones that are put together to build an application. Angular comes with great tooling support in the form of Angular CLI, which is a code generation tool that we will explore further in the CLI section.

Angular is a component-based model and thus you can break the sections of a page or user interface into various components. Let's look at the anatomy of a sample page shown here, with its various sections represented as components:

Anatomy of an sample Angular page

We can break this page into sections such as a top header, bottom footer, and the content area, which is the middle section. The middle section can be considered as a two-column layout with the left column as the navigation area and the right as the content area. The content area is dynamic and keeps getting updated by different components based on the link or item selected from the left side navigation. If we are to build this page in Angular, then we would require a root container or root component that represents the entire page, followed by a hierarchy of components that form the component tree.

Here's a table showing the container or layout components for this sample page:

User interface	Components
	AppComponent (Root Component) for the page, having: HeaderComponent NavComponent DashboardComponent FooterComponent

These layout components can themselves contain other components that are part of the page. As an example, the DashboardComponent could consist of a feed component which shows the latest updates, followed by a list of items below it displaying some statistics. An item with statistical data could be represented by an ItemComponent.

Rendered ItemComponent UI	Description
	A child component of DashboardComponent. Represented by class ItemComponent with a header and a value.

Anatomy of a component

We have been using the word component for a while now, so let us look at it in more detail. In Angular, a component is just a class that has an annotation on it, with some additional metadata, along with the required HTML template for the view. This component would be responsible for controlling the part of the view that it represents. The component class interacts with the view with its API consisting of methods and properties. The view in turn will use the component class's properties to display data and its methods for any event based interaction.

Ingredients of a component = HTML template + Styling in CSS or SCSS + Class with logic

Components live and die

Components in Angular have a lifecycle that is managed internally by the framework. One can listen into these phases of the lifecycle by defining methods that get invoked by the framework, the most basic being when a component gets initialized and when it's about to be destroyed or removed. You can implement the OnInit and OnDestroy interfaces and their corresponding ngOnInit and ngOnDestroy methods to hook into these lifecycle moments:

import { Component, OnInit, OnDestroy } from '@angular/core';

class SomeComponent implements OnInit, OnDestroy {
 constructor() { } // when using, new SomeComponent
 ngOnInit() { } // when component is considered initialised
 ngOnDestroy() { } // when component is about to be destroyed
}

The constructor always runs first before any lifecyle hook. Apart from ngOnInit and ngOnDestory, there are other lifecycle hooks as well. Here's all the hooks for a component:

• ngOnChanges(): Gets called every time any input property of component changes. Additionally, we get a map containing the change from a previous to a new value.
• ngOnInit(): Called only once and immediately after the first ngOnChanges() runs. Invocations of ngOnChanges() later does not trigger this hook again.
• ngDoCheck(): Invoked as part of the change detection process, it allows us to write our own change detection logic.
• ngAfterContentInit(): Invoked after any external content is projected in the components view.
• ngAfterContentChecked(): Invoked after checking the external content that got projected in the components view, even if no change has occurred.
• ngAfterViewInit(): Invoked after a component's views (including child views) have been fully initialized.
• ngAfterViewChecked(): Invoked after every check of a component's view.
• ngOnDestroy(): Invoked just before the component is removed. This allows for writing cleanup code such as resource release.

Interfaces are part of TypeScript but JavaScript doesn't have them, so the transpiled code from TypeScript to JavaScript will not have any interface. Technically, this means that the framework cannot rely upon an interface to invoke lifecycle methods. Thus, Angular simply checks if any lifecycle hook methods are defined on the component and invokes them based on the lifecycle phase. While it's alright to leave out the interface, it's still best to use them so IDEs can c...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• Packt Upsell
• Contributors
• Preface
• What's in Java EE 8?
• The CDI Advantage Combined with JPA
• Understanding Microservices
• Building and Deploying Microservices
• Java EE Becomes JSON Friendly
• Power Your APIs with JAXRS and CDI
• Putting It All Together with Payara
• Basic TypeScript
• Angular in a Nutshell
• Angular Forms
• Building a Real-World Application
• Connecting Angular to Java EE Microservices
• Testing Java EE Services
• Securing the Application
• Other Books You May Enjoy