Angular Development with Typescript, Second Edition
Yakov Fain and Anton Moiseev
  • December 2018
  • ISBN 9781617295348
  • 560 pages
  • printed in black & white
free previous edition included
ePub + Kindle available Dec 24, 2018

Informative, accurate, and insightful.

Kunal Jaggi, General Motors

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.

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 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

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

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

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

4.2.1 Lazy-loading modules

4.2.2 Preloaders

Summary

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.7 More fixes with spacing

5.9.8 Using mat-card in ProductItemComponent

5.9.9 Adding styles to HomeComponent

Summary

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

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

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

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

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

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

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

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

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

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

Appendixes

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 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

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 The union type

B.12 Using type definition files

B.13 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 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

About the Technology

Whether you’re building lightweight web clients or full-featured SPAs, Angular is a clear choice. The Angular framework is fast, efficient, and widely adopted. Add the benefits of developing in the statically typed, fully integrated TypeScript language, and you get a programming experience other JavaScript frameworks just can’t match.

About the book

Angular Development with TypeScript, Second Edition teaches you how to build web applications with Angular and TypeScript. Written in an accessible, lively style, this illuminating guide covers core concerns like state management, data, forms, and server communication as you build a full-featured online auction app. You’ll get the skills you need to write type-aware classes, interfaces, and generics with TypeScript, and discover time-saving best practices to use in your own work.

What's inside

  • Code samples for Angular 5, 6, and 7
  • Dependency injection
  • Reactive programming
  • The Angular Forms API

About the reader

Written for intermediate web developers familiar with HTML, CSS, and JavaScript.

About the authors

Yakov Fain and Anton Moiseev are experienced trainers and web application developers. They have coauthored several books on software development.


placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks

This is the book that you should read, no matter where you are along your Angular learning journey.

Rahul Rai, Telstra

A brilliant revisit of a masterwork—not only about Angular but also about superb use of TypeScript. Inspiring and insightful.

Alain Couniot, STIB-MIVB

A rock-solid guide to the most important web framework today—authoritative, accessible, and complete.

Dennis Sellinger, Géotech