About this book

Although Angular applications can be developed in JavaScript, using TypeScript is a lot more productive. The framework itself was developed in TypeScript, and in this book we use TypeScript for all the code examples. Chapter 1 has a section titled “Why develop in TypeScript and not in JavaScript?” where we explain our reasons for selecting this language.

Who should read this book

Both authors 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 build a single-page online auction application in the course of this book.

While working both editions of this book, we ran multiple workshops using the code samples from the book. 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 with this book.

Our early drafts had chapters on ECMAScript and TypeScript at the start of the book, but 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 and TypeScript, looking through appendixes A and B first will make it easier to reason about the code samples in the book.

Starting from chapter 6, we use reactive programming and observable streams, which are offered by the RxJS library described in appendix D. If you are new to reactive programming, we suggest you go through appendix D after reading the first five chapters.

Where to get the source code

This book contains many examples of source code both in numbered listings and inline with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code.

In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases, even this was not enough, and 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.

We maintain a GitHub repository with the source code at https://github.com/Farata/angulartypescript. Angular keeps evolving, and we may update the code samples after the book is printed.

How this book is organized

This section provides a brief overview of the book’s content.

Chapter 1 starts with a high-level overview of the Angular architecture, and then we’ll introduce you to Angular CLI—the tool that will generate a new Angular project in less than a minute so you can see the first app running right away. We’ll discuss different ways of compiling Angular projects. Finally, we’ll introduce a sample ngAuction application that you’ll be developing with us starting from chapter 2.

Chapter 2 will get you familiar with the main artifacts of Angular: components, services, directives, pipes and modules. At the end of chapter 2, we provide detailed instructions on creating the first version of the sample ngAuction app. From this point on, most chapters end with a hands-on section where you’ll be working on this sample online auction, gradually adding new features or even doing a complete rewrite.

Chapter 3 introduces the Angular router, used to arrange client-side navigation in a single-page app. You’ll learn how to configure routes and how to pass parameters between them. You’ll also see how to create component hierarchies where both parents and children have their own routes.

Chapter 4 covers more-advanced router features. You’ll learn how to protect routes and create components with multiple router outlets. We’ll show you how to use the router for loading your app modules lazily (on demand). At the end of this chapter, you’ll continue working on ngAuction under our guidance.

Chapter 5 is about dependency injection (DI). We’ll start with an overview of DI as a design pattern, explaining the benefits of having a framework to create and inject object instances. You’ll learn the roles of providers and injectors and how to easily swap the object being injected if need be. At the end of this chapter, you’ll make a small facelift to ngAuction using the Angular Material library of UI components.

Chapter 6 is about working with observable streams of data, and prior to reading this chapter, you need to become familiar with the basics of the RxJS library covered in appendix D. We’ll start by showing you how to treat events with observables. Then you’ll see various Angular APIs that offer ready-to-use observable streams. You’ll also learn how to discard unwanted HTTP requests with the RxJS switchMap operator.

Chapter 7 introduces the Flex Layout library that will allow you to design UI layouts that adapt to the width of user devices. You’ll also see how to use the ObservableMedia service that allows you to apply different CSS depending on the screen size. At the end of this chapter, we’ll start rewriting ngAuction from scratch using the Angular Material and Flex Layout libraries.

Chapter 8 is about arranging intercomponent communications in a loosely coupled manner. You’ll learn about the input and output properties of Angular components and see how two components can communicate without knowing about each other, via a common parent or an injectable service.

Chapter 9 includes an overview of the component lifecycle and the change detection mechanism. At the end of the chapter, we’ll add a product view to ngAuction.

Chapter 10 will get you familiar with the Angular Forms API. You’ll learn the difference between the template-driven and reactive forms. You’ll see how to access form data entered by the user as well as update forms programmatically.

Chapter 11 continues coverage of the Forms API. Here you’ll learn how to validate form data. You’ll learn how to create and use built-in custom validators for both template-driven and reactive forms. Finally, we’ll add a search form to ngAuction so the user can search for products. You’ll have a chance to apply the concepts from chapters 10 and 11 in practice.

Chapter 12 is about communicating with web servers using HTTP. Angular offers an HttpClient service with a rich API. You’ll see how to issue GET and POST requests and intercept all HTTP requests and responses to implement cross-cutting concerns. As an additional bonus, you’ll learn how to write web servers using Node and Express frameworks. We’ll use these servers so Angular clients have someone to talk to, and show you how to write scripts for deploying Angular apps under web servers.

Chapter 13 explains how to write Angular applications that communicate with the server using the WebSocket protocol, which is an efficient and low-overhead way of communication. One of the most valuable features of WebSocket communications is that the server can initiate pushing data to the client when an important event happens, without waiting for the client to request the data. You’ll see a practical use of WebSocket communication in our ngAuction, which implements bidding notifications over WebSockets. The new version of ngAuction comes as two separate projects—one with client-side code and another with server code.

Chapter 14 is about testing. We’ll introduce you to unit testing with Jasmine and end-to-end testing with Protractor. We’ll also show you how to test the search workflow in ngAuction with Protractor.

Chapter 15 is about maintaining app state in Redux style using the ngrx library. It starts with explaining the principles of Redux, and then you’ll see how ngrx implements these principles in Angular apps. The chapter ends with a code review of the final version of ngAuction, which uses ngrx for state management.

This book comes with four appendixes. They cover a new syntax of ECMAScript, TypeScript, basics of the Node package manager (npm), and the library of RxJS extensions.

Appendix A contains an overview of the syntax introduced in ECMAScript 6, 7, and 8. You’ll learn how to use classes, fat-arrow functions, spread and rest operators, what destructuring is, and how to write asynchronous code as if it’s synchronous with the help of the async-await keywords. At the time of this writing, ECMAScript 6 is supported by most of the major web browsers.

Appendix B is an overview of the syntax of TypeScript, which is a superset of JavaScript. TypeScript will increase your productivity when creating JavaScript apps. Not only will you learn how to write classes, interfaces, and generics, but also how to compile TypeScript code into JavaScript that can be deployed in all web browsers today.

Appendix C is a brief overview of the npm and Yarn package managers, which are used to install JavaScript packages, libraries, and frameworks on developer machines. You’ll understand how project dependencies are configured in the package.json file and what semantic versioning is about.

Appendix D is an introduction to RxJS, a popular library of reactive extensions. You’ll learn the roles of observables, observers, and subscribers and how to compose RxJS operators to handle data streams in a functional way. While the RxJS library can be used with any JavaScript app, it’s a crucial part of the Angular framework, so understanding the main concepts of RxJS is a must.

Book forum

Purchase of Angular Development with Typescript, Second Edition 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, go to https://forums.manning.com/forums/angular-development-with-typescript-2E. You can also learn more about Manning’s forums and the rules of conduct at https://forums.manning.com/forums/about.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and authors can take place. It is not a commitment to any specific amount of participation on the part of the authors, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking them some challenging questions lest their interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.