Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Praise for the First Edition

Preface

Acknowledgments

About this book

About the authors

About the cover illustration

Chapter 1. Introducing Angular

1.1. Why select Angular for web development?

1.2. Why develop in TypeScript and not in JavaScript?

1.3. Overview of Angular

1.4. Introducing Angular CLI

1.4.1. Generating a new Angular project

1.4.2. Development and production builds

1.5. JIT vs. AOT compilation

1.5.1. Creating bundles with the --prod option

1.5.2. Generating bundles on the disk

1.6. Introducing the sample ngAuction app

Summary

Chapter 2. The main artifacts of an Angular app

2.1. Components

2.2. Services

2.3. Directives

2.4. Pipes

2.5. Modules

2.5.1. Feature modules

2.6. Understanding data binding

2.6.1. Binding properties and events

2.6.2. One- and two-way data binding in action

2.7. Hands-on: Getting started with ngAuction

2.7.1. The initial project setup for ngAuction

2.7.2. Generating components for ngAuction

2.7.3. The application component

2.7.4. The navbar component

2.7.5. The search component

2.7.6. The footer component

2.7.7. The carousel component

2.7.8. The home component

Summary

Chapter 3. Router basics

3.1. Routing basics

3.2. Location strategies

3.2.1. Hash-based navigation

3.2.2. History API-based navigation

3.3. The building blocks of client-side navigation

3.4. Navigating to routes with navigate()

3.5. Passing data to routes

3.5.1. Extracting parameters from ActivatedRoute

3.5.2. Passing query parameters to a route

3.6. Child routes

3.7. Hands-on: Adding navigation to the online auction

3.7.1. ProductService

3.7.2. ProductItemComponent

3.7.3. HomeComponent

3.7.4. StarsComponent

3.7.5. ProductDetailComponent

Summary

Chapter 4. Router advanced

4.1. Guarding routes

4.1.1. Implementing the CanActivate guard

4.1.2. Implementing the CanDeactivate guard

4.1.3. Implementing the Resolve guard

4.2. Developing an SPA with multiple router outlets

4.2.1. Lazy-loading modules

4.2.2. Preloaders

Summary

Chapter 5. Dependency injection in Angular

5.1. The dependency injection pattern

5.2. Benefits of DI in Angular apps

5.2.1. Loose coupling and reusability

5.2.2. Testability

5.3. Injectors and providers

5.4. A simple app with Angular DI

5.4.1. Injecting a product service

5.4.2. Injecting the HttpClient service

5.5. Switching injectables made easy

5.6. Declaring providers with useFactory and useValue

5.6.1. Using InjectionToken

5.6.2. Dependency injection in a modularized app

5.7. Providers in lazy-loaded modules

5.8. Providers in eagerly loaded modules

5.9. Hands-on: Using Angular Material components in ngAuction

5.9.1. A brief overview of the Angular Material library

5.9.2. Adding the AM library to the project

5.9.3. Adding a feature module with AM components

5.9.4. Modifying the appearance of NavbarComponent

5.9.5. Modifying the SearchComponent UI

5.9.6. Replacing the carousel with an image

5.9.7. More fixes with spacing

5.9.8. Using mat-card in ProductItemComponent

5.9.9. Adding styles to HomeComponent

Summary

Chapter 6. Reactive programming in Angular

6.1. Handling events without observables

6.2. Turning DOM events into observables

6.3. Handling observable events with the Forms API

6.4. Discarding results of unwanted HTTP requests with switchMap

6.5. Using AsyncPipe

6.6. Observables and the router

Summary

Chapter 7. Laying out pages with Flex Layout

7.1. Flex Layout and ObservableMedia

7.1.1. Using Flex Layout directives

7.1.2. ObservableMedia service

7.2. Hands-on: Rewriting ngAuction

7.2.1. Why rewrite the ngAuction app from scratch?

7.2.2. Generating a new ngAuction app

7.2.3. Creating a custom Angular Material theme with Sass

7.2.4. Adding a toolbar to the top-level component

7.2.5. Creating the product service

7.2.6. Creating the home module

7.2.7. Configuring routes

7.2.8. Running ngAuction

Summary

Chapter 8. Implementing component communications

8.1. Intercomponent communication

8.2. Input and output properties

8.2.1. Input properties

8.2.2. Output properties and custom events

8.3. Implementing the Mediator design pattern

8.3.1. Using a common parent as a mediator

8.3.2. Using an injectable service as a mediator

8.4. Exposing a child component’s API

8.5. Projecting templates at runtime with ngContent

8.5.1. View encapsulation modes

8.5.2. Projecting onto multiple areas

Summary

Chapter 9. Change detection and component lifecycle

9.1. A high-level overview of change detection

9.1.1. Change detection strategies

9.1.2. Profiling change detection

9.2. Component lifecycle

9.2.1. Catching changes in the ngOnChanges hook

9.2.2. Catching changes in the ngDoCheck hook

9.3. Hands-on: Adding the product view to ngAuction

9.3.1. Creating product components and the module

9.3.2. Implementing the product component

9.3.3. Implementing the product-detail component

9.3.4. Implementing the product-suggestion component

Summary

Chapter 10. Introducing the Forms API

10.1. Two Forms APIs

10.2. Template-driven forms

10.2.1. Forms directives

10.2.2. Applying the template-driven API to HTML forms

10.3. Reactive forms

10.3.1. Form model

10.3.2. Reactive directives

10.3.3. Applying the reactive API to HTML forms

10.3.4. Dynamically adding controls to a form

10.4. Forms API directives summary

10.5. Updating form data

10.6. Using FormBuilder

Summary

Chapter 11. Validating forms

11.1. Using built-in validators

11.2. Controlling when validation starts

11.3. Custom validators in reactive forms

11.4. Validating a group of controls

11.5. Checking a form control’s status and validity

11.5.1. touched and untouched form controls

11.5.2. pristine and dirty fields

11.5.3. Pending fields

11.6. Changing validators dynamically in reactive forms

11.7. Asynchronous validators

11.8. Custom validators in template-driven forms

11.9. Adding a search form to ngAuction

11.9.1. The search-form component

11.9.2. The search-results component

11.9.3. Other code refactoring

Summary

Chapter 12. Interacting with servers using HTTP

12.1. Overview of the HttpClient service

12.2. Reading a JSON file with HttpClient

12.3. Creating a web server with Node, Express, and TypeScript

12.3.1. Creating a simple web server

12.3.2. Serving JSON

12.4. Bringing Angular and Node together

12.4.1. Static assets on the server

12.4.2. Consuming JSON in Angular apps

12.4.3. Configuring the client proxy

12.4.4. Subscribing to observables with the async pipe

12.4.5. Injecting HttpClient into a service

12.4.6. Deploying Angular apps on the server with npm scripts

12.5. Posting data to the server

12.5.1. Creating a server for handling post requests

12.5.2. Creating a client for making post requests

12.6. HTTP interceptors

12.7. Progress events

Summary

Chapter 13. Interacting with servers using the WebSocket protocol

13.1. Comparing HTTP and WebSockets

13.2. Pushing data from a Node server to a plain client

13.3. Using WebSockets in Angular clients

13.3.1. Wrapping an observable stream into a service

13.3.2. Angular talking to a WebSocket server

13.4. Hands-on: Node server with WebSockets support

13.4.1. Running ngAuction in dev mode

13.4.2. Reviewing the ngAuction server code

13.4.3. What changed in the ngAuction client code

Summary

Chapter 14. Testing Angular applications

14.1. Unit testing

14.1.1. Getting to know Jasmine

14.1.2. Writing test scripts for a class

14.2. Running Jasmine scripts with Karma

14.2.1. Karma configuration file

14.2.2. Testing in multiple browsers

14.3. Using the Angular testing library

14.3.1. Testing components

14.3.2. Testing services

14.3.3. Testing components that use routing

14.4. End-to-end testing with Protractor

14.4.1. Protractor basics

14.4.2. Angular CLI–generated tests

14.4.3. Testing a login page

14.5. Hands-on: Adding an E2E test to ngAuction

14.5.1. E2E testing of the product-search workflow

Summary

Chapter 15. Maintaining app state with ngrx

15.1. From a convenience store to Redux architecture

15.1.1. What’s Redux?

15.1.2. Why storing app state in a single place is important

15.2. Introducing ngrx

15.2.1. Getting familiar with a store, actions, and reducers

15.2.2. Getting familiar with effects and selectors

15.2.3. Refactoring the mediator app with ngrx

15.2.4. Monitoring state with ngrx store DevTools

15.2.5. Monitoring the router state

15.3. To ngrx or not to ngrx

15.3.1. Comparing ngrx with Angular services

15.3.2. State mutation problems

15.3.3. ngrx code is more difficult to read

15.3.4. The learning curve

15.3.5. Conclusion

15.4. Hands-on: Using ngrx in ngAuction

15.4.1. Adding the router state support to app module

15.4.2. Managing state in the home module

15.4.3. Unit-testing ngrx reducers

Summary

Angular 6, 7, and beyond

A. An overview of ECMAScript

A.1. How to run the code samples

A.2. Scope of variables and this

A.2.1. Hoisting of variable declarations

A.2.2. Block scoping with let and const

A.3. Template literals

A.3.1. Multiline strings

A.4. Optional parameters and default values

A.5. Arrow function expressions, this, and that

A.6. The rest operator

A.7. The spread operator

A.8. Generator functions

A.9. Destructuring

A.9.1. Destructuring objects

A.9.2. Destructuring arrays

A.10. Iterating with forEach(), for-in, and for-of

A.10.1. Using the forEach() method

A.10.2. Using the for-in loop

A.10.3. Using for-of

A.11. Classes and inheritance

A.11.1. Constructors

A.11.2. The super keyword and the super function

A.11.3. Static variables

A.11.4. Getters, setters, and method definitions

A.12. Asynchronous processing

A.12.1. A callback hell

A.12.2. ES6 promises

A.12.3. Resolving several promises at once

A.12.4. async and await

A.13. ES6 modules

A.13.1. import and export

B. TypeScript essentials

B.1. The role of transpilers

B.2. Getting started with TypeScript

B.2.1. Installing and using the TypeScript compiler

B.2.2. TypeScript as a superset of JavaScript

B.3. How to run the code samples

B.4. Optional types

B.5. Functions

B.5.1. Default parameters

B.5.2. Optional parameters

B.6. Classes

B.6.1. Access modifiers

B.6.2. Methods

B.6.3. Inheritance

B.7. Interfaces

B.7.1. Declaring custom types with interfaces

B.7.2. Using the implements keyword

B.8. Generics

B.9. The readonly modifier

B.10. Decorators

B.11. The union type

B.12. Using type definition files

B.13. Controlling code style with TSLint

C. Using the npm package manager

C.1. Specifying project dependencies in package.json

C.2. Semantic versioning

C.3. Yarn as an alternative to npm

D. RxJS essentials

D.1. Getting familiar with RxJS terminology

D.2. Observable, observer, and subscriber

D.3. Creating observables

D.4. Getting familiar with RxJS operators

D.4.1. Pipeable operators

D.5. Using an observer API

D.6. Using RxJS Subject

D.7. The flatMap operator

D.8. The switchMap operator

D.9. Error handling with catchError

Index

List of Figures

List of Tables

List of Listings