Angular Development with Typescript, Second Edition
Yakov Fain and Anton Moiseev
  • MEAP began October 2017
  • Publication in Spring 2018 (estimated)
  • ISBN 9781617295348
  • 475 pages (estimated)
  • printed in black & white


An eBook copy of the previous edition, Angular 2 Development with TypeScript (First Edition), is included at no additional cost. It will be automatically added to your Manning Bookshelf within 24 hours of purchase.

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. A high-level overview of Angular

1.2. Introducing Angular CLI

1.2.1. Generating a new Angular project

1.2.2. Production Builds

1.3. Introducing the sample ngAuction app

1.4. 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.8. Summary

3. Navigation with the Angular router

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. Guarding routes

3.7.1. Implementing the CanActivate guard

3.7.2. Implementing the CanDeactivate guard

3.7.3. Implementing the Resolve guard

3.8. Developing a SPA with multiple router outlets

3.9. Lazy loading of modules

3.9.1. Preloaders

3.10. Hands-on: adding navigation to the online auction

3.10.1. ProductService

3.10.2. ProductItemComponent

3.10.3. HomeComponent

3.10.4. StarsComponent

3.10.5. ProductDetailComponent

3.11. Summary

4. Dependency injection in Angular

4.1. The Dependency Injection and Inversion of Control patterns

4.1.1. The Dependency Injection pattern

4.1.2. Benefits of dependency injection

4.2. Injectors and providers

4.2.1. How to declare a provider

4.3. A simple app with Angular DI

4.3.1. Injecting a product service

4.3.2. Injecting the HttpClient service

4.4. Switching injectables made easy

4.4.1. Declaring providers with useFactory and useValue

4.4.2. Using InjectionToken

4.5. Dependency injection in a modularized app

4.5.1. Providers in lazy-loaded modules

4.5.2. Providers in eagerly-loaded modules

4.6. Hands-on: using Angular Material components in ngAuction

4.6.1. A brief overview of the Angular Material library

4.6.2. Adding Angular Material library to the project

4.6.3. Adding a feature module with AM components

4.6.4. Modifying the appearance of the NavbarComponent

4.6.5. Modifying the UI of the SearchComponent

4.6.7. More fixes with spacing

4.6.8. Using md-card in ProductItemComponent

4.6.9. Adding styles to HomeComponent

4.7. Summary

5. Reactive programming in Angular

5.1. Handling events without observables

5.2. Turning DOM events into observables

5.3. Handling observable events using forms API

5.4. How to cancel HTTP requests with switchMap

5.5. Using AsyncPipe

5.6. Observables and the router

5.7. Flex Layout and ObservableMedia

5.7.1. Using Flex Layout directives

5.7.2. ObservableMedia service

5.8. Hands-on: Re-writing ngAuction

5.8.1. Why re-writing the ngAuction app from scratch?

5.8.2. Generating a new ngAuction app

5.8.3. Creating a custom Angular Material theme with Saas

5.8.4. Adding a toolbar to the top level component

5.8.5. Creating the product service

5.8.6. Creating the home module

5.8.7. Configuring routes

5.8.8. Running ngAuction

5.9. Summary

6. Implementing component communications

6.1. Inter-component communication

6.2. Input and output properties

6.2.1. Input properties

6.2.2. Output properties and custom events

6.3. Implementing the mediator design pattern

6.3.1. Using a common parent as a mediator

6.3.2. Using an injectable service as a mediator

6.4. Exposing a child component’s API

6.5. Projecting templates at runtime with ngContent

6.5.1. View encapsulation modes

6.5.2. Projecting onto multiple areas

6.6. A high-level overview of change detection

6.7. Component lifecycle

6.7.1. Catching changes in the ngOnChanges hook

6.7.2. Catching changes in the ngDoCheck hook

6.8. Hands-on: adding the product view to ngAuction

6.8.1. Creating product components and the module

6.8.2. Implementing the product component

6.8.3. Implementing the product detail component

6.8.4. Implementing the product suggestions component

6.9. Summary

7. Working With Angular Forms API

8. Interacting with Servers Using HTTP and WebSockets

9. Testing Angular Applications

10. Maintaining App State with NgRX


Appendix A: An overview of ECMAScript

A.1. How to run the code samples

A.2. Template literals

A.2.1. Multiline strings

A.2.2. Tagged template strings

A.3. Optional parameters and default values

A.4. Scope of variables and this

A.4.1. Hoisting of variables declarations

A.4.2. Block scoping with let and const

A.4.3. Block scope for functions

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.5.5. Destructuring arrays

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. Static variables

A.7.3. Getters, setters, and method definitions

A.7.4. The super keyword and the super function

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. Why write Angular apps in TypeScript?

B.2. The role of transpilers

B.3. Getting started with TypeScript

B.3.1. Installing and using the TypeScript compiler

B.3.2. TypeScript as a superset of JavaScript

B.4. How to run the code samples

B.5. Optional types

B.6. Functions

B.6.1. Default parameters

B.6.2. Optional parameters

B.6.3. Arrow-function expressions

B.7. Classes

B.7.1. Access modifiers

B.7.2. Methods

B.7.3. Inheritance

B.8. Interfaces

B.8.1. Declaring custom types with interfaces

B.8.2. Using the implements keyword

B.9. Generics

B.10. The readonly modifier

B.11. Decorators

B.12. Using type definition files

B.13. Controlling code style with TSLint

Appendix C: Node Package Manager

C.1. Specifying project dependencies in package.json

C.2. Semantic versioning

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

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.
MEAP combo $49.99 pBook + eBook + liveBook
MEAP eBook $39.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks