Essential Angular

Victor Savkin, Jeff Cross

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781788291040
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Essential Angular is a concise, complete overview of the key aspects of Angular, written by two Angular core contributors. The book covers the framework's mental model, its API, and the design principles behind it. It is fully up to date with the latest release of Angular.About This Book• Written by two Angular core contributors• A complete overview of the key aspects of Angular• Up to date with the latest Angular releaseWho This Book Is ForTo get the most from this book, you should already have a good understanding of Angular and general web development. The book dives quickly into the core Angular systems without stepping through the basics.What You Will Learn• Understand why and how to use JIT and AOT compilation in Angular• Bootstrap and inject NgModules• Learn about the component lifecycle• Understand the two phases of Change Detection• Visualize and parse the Injector tree• Understand advanced Lazy Loading• Integrate and run different testing strategies on your codeIn DetailEssential Angular is a concise, complete overview of the key aspects of Angular, written by two Angular core contributors. The book covers the framework's mental model, its API, and the design principles behind it. This book is fully up to date with the latest release of Angular.Essential Angular gives you a strong foundation in the core Angular technology. It will help you put all the concepts into the right places so you will have a good understanding of why the framework is the way it is. Read this book after you have toyed around with the framework, but before you embark on writing your first serious Angular application.This book covers concepts such as the differences between Just-In-Time (JIT) and Ahead-Of-Time (AOT) compilation in Angular, alongside NgModules, components and directives. It also goes into detail on Dependency Injection and Change Detection: essential skills for Angular developers to master. The book finishes with a look at testing, and how to integrate different testing methodologies in your Angular code.Style and approachEssential Angular is a complete overview of the key aspects of the latest release of Angular, written by two core Angular contributors. It goes far beyond a how-to-get-started guide and dives into the most important topics in modern Angular development at depth.

Forms

Web applications heavily rely on forms. In many ways Angular is so successful because two-way bindings and ng-model made creating dynamic forms easy.

Although very flexible, the AngularJS 1.x approach has some issues: the data flow in complex user interactions is hard to understand and debug.

Angular 2+ builds up on the ideas from AngularJS 1.x: it preserves the ease of creating dynamic forms, but avoids the issues making data flow hard to understand.

In this chapter we will look at how form handling (or input handling) works in Angular.

Two modules

In AngularJS 1.x, the ng-model directive was baked into the core framework. This is no longer the case. The @angular/core package doesn't contain a form-handling library. It only provides the key primitives we can use to build one.

Of course, making everyone to build their own would not be practical. And that's why the Angular team built the @angular/forms package with two modules: FormsModule and ReactiveFormsModule.

FormsModule implements AngularJS-style form handling. We create a form by placing directives in the template. We then use data bindings to get data in and out of that form.

ReactiveFormsModule is another take on handling input, where we define a form in the component class and just bind it to elements in the template. We tend to use reactive programming to get data in and out of the form, hence the name "reactive".

At first glance, these two modules seem very different. But once we understand the underlying mechanisms, we will see how much they have in common. In addition, it will give us an idea of how to build our own form-handling module if needed.

High-level overview

App model

The app model is an object provided by the application developer. It can be a JSON object fetched from the server, or some object constructed on the client side. Angular doesn't make any assumptions about it.

Form model

The form model is a UI-independent representation of a form. It consists of three building blocks: FormControl, FormGroup, and FormArray. We will look at the form model in detail later in this chapter. Both FormsModule and ReactiveFormsModule use this model.

Form directives

These are the directives connecting the form model to the DOM (for example, NgModel). FormsModule and ReactiveFormsModule provide different sets of these directives.

DOM

These are ours inputs, checkboxes, and radio buttons.

Form model

To make form handling less UI-dependent, @angular/forms provides a set of primitives for modelling forms: FormControl, FormGroup, and FormArray.

FormControl

FormControl is an indivisible part of the form, an atom. It usually corresponds to a simple UI element, such as an input.

 const c = new FormControl('Init Value', Validators.required); 

A FormControl has a value, status, and a map of errors:

 expect(c.value).toEqual('Init Value');
expect(c.errors).toEqual(null); //null means 'no errors'
expect(c.status).toEqual('VALID'); 

FormGroup

FormGroup is a fixed-size collection of controls, a record.

 const c = new FormGroup({
 login: new FormControl(''),
 password: new FormControl('', Validators.required)
}); 

A FormGroup is itself a control, and, as such, has the same methods as FormControl.

 expect(c.value).toEqual({login: '', password: ''});
expect(c.errors).toEqual(null);
expect(c.status).toEqual('INVALID'); 

The value of a group is just an aggregation of the values of its children. Any time the value of a child control changes, the value of the group will change as well.

In opposite to the value, the form group doesn't aggregate the errors of its children. It has its own validators and its own collection of errors.

The status of a group is calculated as follo...

Table of contents

• Title Page
• Copyright
• Credits
• About the Authors
• www.PacktPub.com
• Customer Feedback
• Preface
• Example
• Compilation
• NgModules
• Components and Directives
• Templates
• Dependency Injection
• Change Detection
• Forms
• Testing
• Reactive Programming in Angular