Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this Book

About the Cover Illustration

Chapter 1. Introducing Angular 2

1.1. A sampler of JavaScript frameworks and libraries

1.1.1. Feature-complete frameworks

1.1.2. Lightweight frameworks

1.1.3. Libraries

1.1.4. What is Node.js?

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

Chapter 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.1.4. Launching applications

2.2. The building blocks of an Angular application

2.2.1. Modules

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

Chapter 3. Navigation with the Angular router

3.1. Routing basics

3.1.1. Location strategies

3.1.2. The building blocks of client-side navigation

3.1.3. Navigating to routes with navigate()

3.2. Passing data to routes

3.2.1. Extracting parameters from ActivatedRoute

3.2.2. Passing static data to a route

3.3. Child routes

3.4. Guarding routes

3.5. Developing a SPA with multiple router outlets

3.6. Splitting an app into modules

3.7. Lazy-loading modules

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

3.8.1. Creating ProductDetailComponent

3.8.2. Creating HomeComponent and code refactoring

3.8.3. Simplifying ApplicationComponent

3.8.4. Adding a RouterLink to ProductItemComponent

3.8.5. Modifying the root module to add routing

3.8.6. Running the auction

3.9. Summary

Chapter 4. Dependency injection

4.1. The 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 declare a provider

4.3. A sample application with Angular DI

4.3.1. Injecting a product service

4.3.2. Injecting the Http service

4.4. Switching injectables made easy

4.4.1. Declaring providers with useFactory and useValue

4.4.2. Using OpaqueToken

4.5. The hierarchy of injectors

4.5.1. viewProviders

4.6. Hands-on: using DI in the online auction application

4.6.1. Changing the code to pass the product ID as a parameter

4.6.2. Modifying ProductDetailComponent

4.7. Summary

Chapter 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. Reactive programming and observables

5.2.1. What are observables and observers?

5.2.2. Observable event streams

5.2.3. Cancelling observables

5.3. Pipes

5.3.1. Custom pipes

5.4. Hands-on: filtering products in the online auction

5.5. Summary

Chapter 6. Implementing component communications

6.1. Inter-component communication

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

6.4. Exposing a child component’s API

6.5. Hands-on: adding a rating feature to the online auction

6.6. Summary

Chapter 7. Working with forms

7.1. Overview of HTML forms

7.1.1. Standard browser features

7.1.2. Angular’s Forms API

7.2. Template-driven forms

7.2.1. Directives overview

7.2.2. Enriching the HTML form

7.3. Reactive forms

7.3.1. Form model

7.3.2. Form directives

7.3.3. Refactoring the sample form

7.3.4. Using FormBuilder

7.4. Form validation

7.4.1. Validating reactive forms

7.5. Hands-on: adding validation to the search form

7.5.1. Modifying the root module to add Forms API support

7.5.2. Adding a list of categories to the SearchComponent

7.5.3. Creating a form model

7.5.4. Refactoring the template

7.5.5. Implementing the onSearch() method

7.5.6. Launching the online auction

7.6. Summary

Chapter 8. Interacting with servers using HTTP and WebSockets

8.1. A brief overview of the Http object’s 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 the Http object

8.3.3. Unwrapping observables in templates with AsyncPipe

8.3.4. Injecting HTTP into a service

8.4. Client-server communication via WebSockets

8.4.1. Pushing data from a Node server

8.4.2. Turning a WebSocket into an observable

8.5. Hands-on: implementing product search and bid notifications

8.5.1. Implementing product search using HTTP

8.5.2. Broadcasting auction bids using WebSockets

8.6. Summary

Chapter 9. Unit-testing Angular applications

9.1. Getting to know Jasmine

9.1.1. What to test

9.1.2. How to install Jasmine

9.2. What comes with Angular’s testing library

9.2.1. Testing services

9.2.2. Testing navigation with the router

9.2.3. Testing components

9.3. Testing a sample weather application

9.3.1. Configuring SystemJS

9.3.2. Testing the weather router

9.3.3. Testing the weather service

9.3.4. Testing the weather component

9.4. Running tests with Karma

9.5. Hands-on: unit-testing the online auction

9.5.1. Testing ApplicationComponent

9.5.2. Testing ProductService

9.5.3. Testing StarsComponent

9.5.4. Running the tests

9.6. Summary

Chapter 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.2.2. npm start

10.3. Creating development and production configurations

10.3.1. Development configuration

10.3.2. Production configuration

10.3.3. A custom type-definition file

10.4. What’s Angular CLI?

10.4.1. Starting a new project with Angular CLI

10.4.2. CLI commands

10.5. Hands-on: deploying the online auction with Webpack

10.5.1. Starting the Node server

10.5.2. Starting the auction client

10.5.3. Running tests with Karma

10.6. Summary

Appendix A. An overview of ECMAScript 6

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

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 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 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 the ES6 module loader

Appendix B. TypeScript as a language for Angular applications

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.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 implements keyword

B.8.3. Using callable interfaces

B.9. Adding class metadata with annotations

B.10. Type-definition files

B.10.1. Installing type-definition files

B.11. An overview of the TypeScript/Angular development process

Index

List of Figures

List of Tables

List of Listings