Angular Development with Typescript, Second Edition
Yakov Fain and Anton Moiseev
  • MEAP began October 2017
  • Publication in December 2018 (estimated)
  • ISBN 9781617295348
  • 568 pages (estimated)
  • printed in black & white
free previous edition included

A very fine update on developing top-grade applications with Angular using TypeScript.

Alain Couniot
Angular Development with Typescript, Second Edition is an intermediate-level tutorial that introduces Angular and TypeScript to developers comfortable with building web applications using other frameworks and tools. You'll start by exploring what makes Angular different by building an online auction app. As you move through the chapters, you'll explore TypeScript as you learn to write type-aware classes, interfaces, generics, and more.
Table of Contents detailed table of contents

1. Introducing Angular

1.1. Why select Angular for Web development

1.2. Why develop in TypeScript and not in JavaScript

1.3. A high-level 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 and AoT Compilations

1.5.1. Creating bundles with the -prod option

1.5.2. Generating files with bundles

1.6. Introducing the sample ngAuction app

1.7. Summary

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.8. The Home component

2.8. Summary

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

3.8. Summary

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 a SPA with multiple router outlets

4.3. Lazy loading of modules

4.3.1. Preloaders

4.4. Summary

5. Dependency injection in Angular

5.1. The Dependency Injection and Inversion of Control patterns

5.1.1. The Dependency Injection pattern

5.1.2. Benefits of dependency injection

5.2. Injectors and providers

5.2.1. How to declare a provider

5.3. A simple app with Angular DI

5.3.1. Injecting a product service

5.3.2. Injecting the HttpClient service

5.4. Switching injectables made easy

5.4.1. Declaring providers with useFactory and useValue

5.4.2. Using InjectionToken

5.5. Dependency injection in a modularized app

5.5.1. Providers in lazy-loaded modules

5.5.2. Providers in eagerly-loaded modules

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

5.6.1. A brief overview of the Angular Material library

5.6.2. Adding Angular Material library to the project

5.6.3. Adding a feature module with AM components

5.6.4. Modifying the appearance of the NavbarComponent

5.6.5. Modifying the UI of the SearchComponent

5.6.7. More fixes with spacing

5.6.8. Using mat-card in ProductItemComponent

5.6.9. Adding styles to HomeComponent

5.7. Summary

6. Reactive programming in Angular

6.1. Handling events without observables

6.2. Turning DOM events into observables

6.3. Handling observable events using forms API

6.4. Discarding results of unwanted HTTP requests with switchMap

6.5. Using AsyncPipe

6.6. Observables and the router

6.7. Summary

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: Re-writing ngAuction

7.2.1. Why re-writing 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

7.3. Summary

8. Implementing component communications

8.1. Inter-component 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

8.6. Summary

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

9.4. Summary

10. Introducing Forms API

10.1. Two Forms API

10.2. Template-driven forms

10.2.1. Forms directives

10.2.2. Applying template-driven API to HTML forms

10.3. Reactive forms

10.3.1. Form model

10.3.2. Reactive directives

10.3.3. Applying 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

10.7. Summary

11. Validating forms

11.1. Using built-in validators

11.2. When the validation starts

11.3. Custom validators in reactive forms

11.3.1. Validating groups of controls

11.4. Checking a form control’s status and validity

11.5. Changing validators dynamically in reactive forms

11.6. Asynchronous validators

11.7. Custom validators in template-driven forms

11.8. Adding a search form to ngAuction

11.8.1. The search-form component

11.8.2. The search-results component

11.8.3. Other code refactoring

11.9. Summary

12. Interacting with servers using HTTP

12.1. An overview of the HttpClient service

12.1.1. Reading a JSON file with HttpClient

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

12.2.1. Creating a simple web server

12.2.2. Serving JSON

12.3. Bringing Angular and Node together

12.3.1. Static assets on the server

12.3.2. Consuming JSON in Angular apps

12.3.3. Configuring the client proxy

12.3.4. Subscribing to observables with async pipe

12.3.5. Injecting HttpClient into a service

12.3.6. Deploying Angular apps on the server with npm scripts

12.4. Posting data to the server

12.4.1. Creating a server for handling post requests

12.4.2. Creating a client for making post requests

12.5. HTTP interceptors

12.6. Progress events

12.7. Summary

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: Splitting ngAuction into two projects

13.4.1. Running ngAuction in dev mode

13.4.2. Reviewing the ngAuction server code

13.4.3. What’s changed in the ngAuction client’s code

13.5. Summary

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 the Jasmine scripts with Karma

14.2.1. Karma’s 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 e2e tests to ngAuction

14.5.1. End-to-End testing of the product search workflow

14.6. Summary

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 an app state in a single place is important

15.2. Introducing ngrx

15.2.1. Getting familiar with store, action, and reducer

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.3. Caveats of ngrx

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

15.5. Summary

15.6. Angular Roadmap


Appendix 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 variables 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.5.1. The Rest operator

A.5.2. The Spread operator

A.5.3. Generator functions

A.5.4. Destructuring

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

A.6.1. Using the forEach() method

A.6.2. Using the for-in loop

A.6.3. Using for-of

A.7. Classes and inheritance

A.7.1. Constructors

A.7.2. The super keyword and the super function

A.7.3. Static variables

A.7.4. Getters, setters, and method definitions

A.8. Asynchronous processing

A.8.1. A callback hell

A.8.2. ES6 promises

A.8.3. Resolving several promises at once

A.8.4. async-await

A.9. ES6 Modules

A.9.1. Imports and exports

Appendix 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. Using type definition files

B.12. Controlling code style with TSLint

Appendix 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

Appendix D: RxJS essentials

D.1. Getting familiar with RxJS terminology

D.2. Observable, observer, and subscriber

D.3. Creating observables

D.4. Operators map, filter, and reduce

D.5. Using Observer’s API

D.6. Using RxJS Subject

D.7. The flatMap operator

D.8. The switchMap operator

D.9. Error handling with the catch operator

About the Technology

Whether you're building lightweight web clients or full-featured SPAs, Angular is a liberating experience for developers used to other web frameworks. Angular feels like a natural extension to HTML, so you don't feel like you're constantly context-switching as you build up your applications. Angular's declarative style makes it easy to define and add features without dozens of lines of manually written boilerplate, and the fully integrated TypeScript language gives you the benefits of a statically typed language within the JavaScript ecosystem. Plus, adding Angular and TypeScript to your resume makes you a hot commodity. Learn Angular, and your apps will be better, you'll be more productive, and you'll be in demand too!

About the book

This practical book covers real-world development concerns like state management, data and views, user interaction with forms, and communicating with servers, as well as testing and deploying your applications. This new edition has been fully revised to cover the latest Angular CLI along with current best practices and updates to Angular 6.

What's inside

  • Angular CLI
  • TypeScript programming
  • Creating a modern-looking UI with Angular Material
  • Dependency Injection
  • Reactive programming
  • Working with the Angular Forms API
  • Maintaining the app state with ngrx

About the reader

Written for intermediate web developers. No prior TypeScript or AngularJS experience is required.

About the authors

Yakov Fain and Anton Moiseev are experienced web application developers. Yakov has written several books on software development.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.

FREE domestic shipping on three or more pBooks

I highly recommended this book for beginners and professionals.

Ruslan Verbelchuk

There is something for both beginners and experienced Angular developers to learn.

Rudi Steinbach