About this Book

Angular 2 applications can be developed in two flavors of JavaScript (ES5 and ES6), in Dart, or in TypeScript. The framework itself was developed in TypeScript, and in this book we use TypeScript for all the code examples. Appendix B has a section titled “Why write Angular apps in TypeScript?” where we explain our reasons for selecting this language.

Both of us are practitioners, and we wrote this book for practitioners. Not only do we explain the features of the framework using basic code samples, but we also gradually show you how to build a single-page online auction application over the course of the book.

While we were still writing and revising, we ran several training workshops using the code samples. This allowed us to get early (and overwhelmingly positive) feedback about the book’s content. We really hope that you’ll enjoy the process of learning Angular 2.

This book covers Angular 2.0.0 Final.

How to read this book

Our early drafts of this book started with chapters on ECMAScript 6 and TypeScript. Several reviewers suggested we move this material to the appendixes, so readers could start learning about Angular sooner. We made this change, but if you aren’t already familiar with the syntax of ECMAScript 6 and TypeScript, looking through the appendices first will make it easier to follow the code samples in the chapters.

Roadmap

This book consists of 10 chapters and 2 appendixes.

Chapter 1 provides a high-level overview of the Angular 2 architecture, gives a brief summary of popular JavaScript frameworks and libraries, and introduces the sample online auction application that you’ll start to develop in chapter 2.

You’ll be developing this sample application in TypeScript. Appendix B can get you up to speed with this excellent language, which is a superset of JavaScript. Not only will you learn how to write classes, interfaces, and generics, but you’ll also learn how to compile TypeScript code into today’s JavaScript (ECMAScript 5), which can be deployed in all web browsers. TypeScript implements most of the syntax of the latest ECMAScript 6 specification (covered in appendix A) and some syntax that should be included in the future releases of ECMAScript.

In chapter 2, you’ll start developing simple Angular 2 applications, and you’ll create your first Angular components. You’ll learn how to work with the SystemJS module loader, and we’ll offer you our version of the Angular seed project that will be used as a starting point for all the sample applications in the book. At the end of this chapter, you’ll create the first version of the home page for the online auction.

Chapter 3 is about the Angular router, which offers a flexible way of arranging navigation in single-page applications. You’ll learn how to configure routes in parent and child components, how to pass data from one route to another, and how to lazy-load modules. At the end of this chapter, you’ll refactor the online auction into several components and add routing capabilities to it.

In chapter 4, you’ll learn about the Dependency Injection design pattern and how Angular implements it. You’ll get familiar with the concept of providers, which allow you to specify how injectable objects should be instantiated. In the new version of the online auction, you’ll apply dependency injection to populate the Product Details view with data.

In chapter 5, we’ll discuss different flavors of data binding, introduce reactive programming with observable data streams, and show you how to work with pipes. The chapter ends with a new version of the online auction that adds an observable event stream to filter featured products on the home page.

Chapter 6 is about developing components that can communicate with each other in a loosely coupled manner. We’ll discuss components’ input and output parameters, the Mediator design pattern, and a component’s lifecycle. This chapter also includes a high-level overview of Angular’s change-detection mechanism. The online auction gets a product-rating feature.

Chapter 7 is about handling forms in Angular. After covering the basics of the Forms API, we’ll discuss form validation and implement it in the search component, in yet another version of the online auction.

Chapter 8 explains how an Angular client app can communicate with servers using the HTTP and WebSocket protocols, including examples. You’ll create a server app using the Node.js and Express frameworks. Then you’ll deploy Angular’s portion of the online auction in the Node server. The front end of the online auction starts communicating with the Node.js server via the HTTP and WebSocket protocols.

Chapter 9 is about unit testing. We’ll cover the basics of Jasmine and the Angular testing library. You’ll learn how to test services, components, and the router. You’ll also learn how to configure and use Karma for running tests, and you’ll implement several unit tests in the online auction.

Chapter 10 is about automating the build and deployment processes. You’ll see how to use the Webpack bundler to minimize and package your code for deployment. You’ll also see how to use Angular CLI for project generation and deployment. The size of the deployed version of the online auction will be decreased from 5.5 MB (in development) to 350 KB (in production).

Appendix A will get you familiar with the new syntax introduced in ECMAScript 2015 (a.k.a. ES6). Appendix B is an introduction to the TypeScript language.

Code conventions and downloads

This book contains many examples of source code, both in numbered listings and in line with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. In many cases, the original source code has been reformatted; line breaks have been added and indentation reworked as necessary to accommodate the available page space in the book. In some cases, where this was not enough, the listings include line-continuation markers (). Additionally, comments in the source code have often been removed from the listings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts.

Source code for the examples in this book is available for download from the publisher’s website at https://www.manning.com/books/angular-2-development-with-typescript.

The authors have also created a GitHub repository with the source code examples at https://github.com/Farata/angular2typescript. If future releases of Angular break any of the code examples from the book, you can open an issue there, and authors will address it.

Author Online

Purchase of Angular 2 Development with TypeScript includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the authors and from other users. To access the forum and subscribe to it, point your web browser to https://www.manning.com/books/angular-2-development-with-typescript. This page provides information on how to get on the forum once you’re registered, what kind of help is available, and the rules of conduct on the forum.

Manning’s commitment to our readers is to provide a venue where a meaningful dialog between individual readers and between readers and the authors can take place. It is not a commitment to any specific amount of participation on the part of the authors, whose contributions to the AO forum remain voluntary (and unpaid). We suggest you ask the authors challenging questions, lest their interest stray!

About the authors

Yakov Fain is a cofounder of two companies: Farata Systems and SuranceBay. Farata Systems is an IT consulting boutique. Yakov runs the training department there and teaches Angular and Java workshops around the globe. SuranceBay is a product company that automates various workflows in the insurance industry in the United States, offering applications that use the software as a service (SaaS). Yakov manages various projects there.

Yakov is a Java Champion. He has authored multiple books on software development and written more than a thousand blog entries at yakovfain.com. Although most of his books are printed, his Java Programming for Kids, Parents and Grandparents is available as a free download in several languages at http://myflex.org/books/java4kids/java4kids.htm. His Twitter handle is @yfain.

Anton Moiseev is a lead software developer at SuranceBay. He’s been developing enterprise applications for 10 years with Java and .NET technologies. He has a solid background in developing rich internet applications using various platforms. Anton has a strong focus on web technologies, implementing best practices to make the front end work seamlessly with the back end. He has taught a number of training sessions on the AngularJS and Angular 2 frameworks.

Anton occasionally blogs at antonmoiseev.com. His Twitter handle is @antonmoiseev.