Angular 2 Development with TypeScript
Yakov Fain and Anton Moiseev
  • December 2016
  • ISBN 9781617293122
  • 456 pages
  • printed in black & white

An enjoyable and important read. Highly recommended!

David Barkol, Microsoft

Angular 2 Development with Typescript teaches you what you need to start using Angular, while you also learn TypeScript and how to take advantage of its benefits.

Table of Contents detailed table of contents

1. Introducing Angular 2

1.1. A sampler of JavaScript frameworks and libraries

1.2. High-level overview of AngularJS

1.3. High-level overview of Angular

1.3.1. Code simplification

1.3.2. Performance improvements

1.4. An Angular developer's toolbox

1.5. How things are done in Angular

1.6. Introducing the online auction example

1.7. Summary

2. Getting started with Angular

2.1. A first Angular application

2.1.1. Hello World in TypeScript

2.1.2. Hello World in ES5

2.1.3. Hello World in ES6

2.2. The building blocks of an Angular application

2.2.1. Components


2.2.3. Directives

2.2.4. A brief introduction to data binding

2.3. The SystemJS universal module loader

2.3.1. An overview of module loaders

2.3.2. Module loaders vs. <script> tags

2.3.3. Getting started with SystemJS

2.4. Selecting a package manager

2.4.1. Comparing npm and jspm

2.4.2. Starting an Angular project with npm

2.5. Hands-on: getting started with the online auction

2.5.1. Initial project setup

2.5.2. Developing the home page

2.5.3. Launching the online auction application

2.6. Summary

3. Navigation with Angular Router

3.1. Routing Basics

3.1.1. Location Strategies

3.1.2. Building Blocks of Client-Side Navigation

3.2. Passing Data to Routes

3.2.1. Using RouteSegment

3.3. Child Routes

3.4. Hands-on: Adding Navigation to Online Auction

3.4.1. Creating ProductDetailComponent

3.4.2. Creating HomeComponent and Code Refactoring

3.4.3. Simplifying ApplicationComponent and Configuring the Routes

3.4.5. Modifying the Main Script

3.5. Summary

4. Dependency Injection

4.1. Dependency Injection and Inversion of Control Patterns

4.1.1. The Dependency Injection Pattern

4.1.2. The Inversion of Control Pattern

4.1.3. Benefits of Dependency Injection

4.2. Injectors and Providers

4.2.1. How to Create a Provider

4.3. A Sample Application with Angular DI

4.3.1. Injecting a Product Service

4.3.2. Injecting Http Service

4.4. Switching Injectables Made Easy

4.4.1. Declaring Providers with useFactory and useValue

4.5. The Hierarchy of Injectors

4.6. Hands-on: Using DI in Online Auction

4.7. Summary

5. Bindings, Observables, and Pipes

5.1. Data Binding

5.1.1. Binding to Events

5.1.2. Binding to Properties and Attributes

5.1.3. Binding in Templates

5.1.4. Two-Way Data Binding

5.2. Events and Observables

5.2.1. What are Observables

5.2.2. Observable Event Streams

5.2.3. How to Cancel Observables

5.3. Pipes

5.3.1. Custom Pipes

5.4. Hands-on: Filtering Products in Online Auction

5.5. Summary

6. Implementing Components' Communications

6.1. Inter-Component Communications

6.1.1. Input and Output Properties

6.1.2. The Mediator Pattern

6.1.3. Changing Templates at Runtime with ngContent

6.2. Component Lifecycle

6.2.1. Using ngOnChanges

6.3. The High-Level Overview of Change Detection

6.4. Exposing Child Component's API

6.5. Hands-on: Adding Rating Feature to Auction

6.6. Summary

7. Working With Forms

7.1. Overview of HTML Forms

7.1.1. Introducing a User Registration Form

7.1.2. HTML Validation Attributes

7.1.3. Semantic Input Types

7.2. Angular Forms API

7.2.1. Form Controls

7.2.2. Form Directives

7.3. Forms Validation

7.3.1. Programmatic Approach

7.3.2. Custom Validators

7.3.3. Custom Validation Directives

7.4. Template-Driven Forms

7.4.1. Refactoring the Sample Form Template

7.4.2. Creating a Sample Form Component

7.5. Data-Driven Forms

7.5.1. Creating a Sample Form Component

7.5.2. Refactoring a Sample Form Template

7.5.3. Using FormBuilder

7.6. Hands-on: Adding Validation to the Search Form

7.7. Summary

8. Interacting with Servers Using HTTP and Websockets

8.1. Brief Overview of the Http Object API

8.2. Creating a Web Server with Node and TypeScript

8.2.1. Creating a Simple Web Server

8.2.2. Serving JSON

8.2.3. Live TypeScript Recompilation and Code Reload

8.2.4. Adding the RESTful API for Serving Products

8.3. Bringing Angular and Node Together

8.3.1. Static Resources on the Server

8.3.2. Making GET Requests with Http Service

8.3.3. Unwrapping Observables Inside Templates with AsyncPipe

8.3.4. Injecting HTTP Into a Service

8.4. Client-Server Communications via WebSockets

8.4.1. Pushing Data From Node Server

8.4.2. Turning WebSocket into Observable

8.5. Hands-on: Implementing Product Search and Bid Notifications

8.5.1. Implementing Product Search using HTTP

8.6. Broadcasting Auction Bids using WebSocket

8.7. Summary

9. Unit Testing Angular Applications

9.1. Getting to Know Jasmine

9.2. What Comes with Angular Testing Library

9.2.1. Testing Services

9.2.2. Testing Component Router

9.2.3. Testing Components

9.3. Testing a Sample Weather Application

9.3.1. Testing the Weather Router

9.3.2. Testing the Weather Service

9.3.3. Testing the Weather Component

9.4. Running Tests with Karma

9.5. Hands-on: Unit Testing of Online Auction

9.6. Summary

10. Bundling and Deploying Applications with Webpack

10.1. Getting to Know Webpack

10.1.1. Hello World with Webpack

10.1.2. How to use Loaders

10.1.3. How to use Plugins

10.2. Creating a Basic Webpack Configuration for Angular

10.2.1. npm run build

10.3. Creating Development and Production Configurations

10.4. Hands-on: Deploying Online Auction with Webpack

10.5. Summary


Appendix A: An Overview of ECMAScript 6

A.1. How to Run Code Samples

A.2. Template Literals

A.2.1. Multi-Line Strings

A.2.2. Tagged Template Strings

A.3. Optional Parameters and Default Values

A.4. Scope of Variables

A.4.1. Variable Hoisting

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. Rest and Spread Operators

A.5.2. Generators

A.5.3. Destructuring

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

A.6.1. Using the Method forEach()

A.6.2. Using the for-in Loops

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

A.8.1. A Callback Hell

A.8.2. ES6 Promises

A.8.3. Resolving Several Promises at Once

A.9. Modules

A.9.1. Imports and Exports

A.9.2. Loading Modules Dynamically With ES6 Module Loader

A.10. Summary

Appendix B: TypeScript as a Language for Angular Applications

B.1. Why Writing Angular Apps in TypeScript

B.2. The Role of Transpilers

B.3. Getting Started With TypeScript

B.3.1. Installing and Using TypeScript Compiler

B.4. TypeScript as a Superset of JavaScript

B.5. Optional Types

B.5.1. Functions

B.5.2. Default Parameters

B.5.3. Optional Parameters

B.5.4. Arrow Function Expressions

B.6. Classes

B.6.1. Access Modifiers

B.6.2. Methods

B.6.3. Inheritance

B.7. Generics

B.8. Interfaces

B.8.1. Declaring Custom Types with Interfaces

B.8.2. Using the Keyword implements

B.8.3. Using Callable Interfaces

B.9. TypeScript Modules

B.10. Adding the Class Metadata With Annotations

B.11. The Type Definition Files

B.11.1. TypeScript Definition Managers

B.11.2. Controlling the Code Style with TSLint

B.12. Overview of the TypeScript/Angular Development Process

B.13. Summary

About the Technology

Whether you're building web clients or full-featured SPAs, using the Angular 2 web framework is a liberating experience. Its declarative style makes it easy to define and add features without a lot of manually written boilerplate, and the fully integrated TypeScript language gives you the benefits of a statically typed language within the JavaScript ecosystem. Not to mention that adding Angular 2 and TypeScript to your skill set makes you a hot commodity.

About the book

Angular 2 Development with Typescript introduces Angular 2 to developers comfortable using AngularJS v1 or other web frameworks. You'll start by exploring how Angular 2 works in an online auction application. Along the way, you'll learn to use TypeScript to write type-aware classes, interfaces, and generics. This is a practical book that covers real-world development concerns like data and views, user interaction with forms, and communicating with servers, as well as testing and deploying your Angular 2 applications.

What's inside

  • Design and build modular applications
  • Transpile TypeScript into today's JavaScript
  • Use modern JavaScript workflow tools like npm, Karma, and Webpack

Growable form example:


About the reader

This book is for intermediate web developers with a working knowledge of JavaScript. No TypeScript or AngularJS experience needed.

About the authors

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

  • combo $44.99 pBook + eBook
  • eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

An instant classic! The only book you need to learn and master Angular 2 and TypeScript.

David DiMaria, MapQuest

Excellent! The purpose of this book is not knowledge but *action*.

Irach Ilish Ramos Hernandez, Groupaxis

Shows you how to leverage the combined power of TypeScript and Angular 2, with all the best practices baked in.

Sebastien Nichele, Pacifica