Skip to main content
main-content
Top

About this book

Best-selling author Adam Freeman shows you how to use Angular in your projects, starting from the nuts and bolts and building up to the most advanced and sophisticated features, going in-depth to give you the knowledge you need. Chapters include common problems and how to avoid them. Additionally, this book now has accompanying online files for Angular 7; all examples in the book work without changes in Angular 7.

Get the most from Angular, the leading framework for building dynamic JavaScript applications. Understand the MVC pattern and the benefits it can offer.

What You’ll LearnGain a solid architectural understanding of the MVC PatternCreate rich and dynamic web app clients using AngularUse the ng tools to create and build an Angular projectExtend and customize AngularTest your Angular projectsWhat's New in This EditionRevised for the features and changes in Angular 6 and 7Covers @angular/cli, ng command line tools, and WebPackIncludes HttpClient for simplified asynchronous HTTP requestsPresents updates to pipes and localized text display

Who This Book Is For

Web developers with a foundation knowledge of HTML and JavaScript who want to create rich client-side applications

Table of Contents

Getting Started with Angular

Frontmatter

Chapter 1. Getting Ready

Abstract
Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are
Adam Freeman

Chapter 2. Your First Angular App

Abstract
The best way to get started with Angular is to dive in and create a web application. In this chapter, I show you how to set up your development environment and take you through the process of creating a basic application, starting with a static mock-up of the functionality and applying Angular features to create a dynamic web application, albeit a simple one. In Chapters 710, I show you how to create a more complex and realistic Angular application, but for now, a simple example will suffice to demonstrate the major components of an Angular app and set the scene for the other chapters in this part of the book.
Adam Freeman

Chapter 3. Putting Angular in Context

Abstract
In this chapter, I put Angular in context within the world of web app development and set the foundation for the chapters that follow. The goal of Angular is to bring the tools and capabilities that have been available only for server-side development to the web client and, in doing so, make it easier to develop, test, and maintain rich and complex web applications.
Adam Freeman

Chapter 4. An HTML and CSS Primer

Abstract
Developers come to the world of web app development via many paths and are not always grounded in the basic technologies that web apps rely on. In this chapter, I provide a brief primer for HTML and introduce the Bootstrap CSS library, which I use to style the examples in this book. In Chapters 5 and 6, I introduce the basics of JavaScript and TypeScript and give you the information you need to understand the examples in the rest of the book. If you are an experienced developer, you can skip these primer chapters and jump right to Chapter 7, where I use Angular to create a more complex and realistic application.
Adam Freeman

Chapter 5. JavaScript and TypeScript: Part 1

Abstract
In this chapter I provide a quick tour of the most important basic features of the JavaScript language as they apply to Angular development. I don’t have the space to describe JavaScript completely, so I have focused on the essentials that you’ll need to get up to speed and follow the examples in this book. In Chapter 6, I describe some of the more advanced JavaScript features that you will need and some of the additional features provided by TypeScript.
Adam Freeman

Chapter 6. JavaScript and TypeScript: Part 2

Abstract
In this chapter, I describe some of the more advanced JavaScript features that are useful for Angular development. I explain how JavaScript deals with objects, including support for classes, and I explain how JavaScript functionality is packaged into JavaScript modules. I also introduce some of the features that TypeScript provides that are not part of the JavaScript specification and that I rely on for some of the examples later in the book. Table 6-1 summarizes the chapter.
Adam Freeman

Chapter 7. SportsStore: A Real Application

Abstract
In Chapter 2, I built a quick and simple Angular application. Small and focused examples allow me to demonstrate specific Angular features, but they can lack context. To help overcome this problem, I am going to create a simple but realistic e-commerce application.
Adam Freeman

Chapter 8. Spor tsStore: Orders and Checkout

Abstract
In this chapter, I continue adding features to the SportsStore application that I created in Chapter 7. I add support for a shopping cart and a checkout process and replace the dummy data with the data from the RESTful web service.
Adam Freeman

Chapter 9. SportsStore: Administration

Abstract
In this chapter, I continue building the SportsStore application by adding administration features. Relatively few users will need to access the administration features, so it would be wasteful to force all users to download the administration code and content when it is unlikely to be used. Instead, I am going to put the administration features in a separate module that will be loaded only when administration is required.
Adam Freeman

Chapter 10. SportsStore: Progressive Features and Deployment

Abstract
In this chapter, I prepare the SportsStore application for deployment by adding progressive features that will allow it to work while offline and show you how to prepare and deploy the application into a Docker container, which can be used on most hosting platforms.
Adam Freeman

Angular in Detail

Frontmatter

Chapter 11. Creating an Angular Project

Abstract
In this chapter, I explain the process of starting a new Angular project and creating an application in detail. The result is a simple Angular application that, admittedly, does little. However, by the end of the chapter, you will understand how the parts of a project fit together and have a foundation on which to apply the more advanced features that are described in the chapters that follow. Table 11-1 summarizes the chapter.
Adam Freeman

Chapter 12. Using Data Bindings

Abstract
The example application in the previous chapter contains a simple template that was displayed to the user and that contained a data binding that showed how many objects were in the data model. In this chapter, I describe the basic data bindings that Angular provides and demonstrate how they can be used to produce dynamic content. In later chapters, I describe more advanced data bindings and explain how to extend the Angular binding system with custom features. Table 12-1 puts data bindings in context.
Adam Freeman

Chapter 13. Using the Built-in Directives

Abstract
In this chapter, I describe the built-in directives that are responsible for some of the most commonly required functionality for creating web applications: selectively including content, choosing between different fragments of content, and repeating content. I also describe some limitations that Angular puts on the expressions that are used for one-way data bindings and the directives that provide them. Table 13-1 puts the built-in template directives in context.
Adam Freeman

Chapter 14. Using Events and Forms

Abstract
In this chapter, I continue describing the basic Angular functionality, focusing on features that respond to user interaction. I explain how to create event bindings and how to use two-way bindings to manage the flow of data between the model and the template. One of the main forms of user interaction in a web application is the use of HTML forms, and I explain how event and two-way data bindings are used to support them and validate the content that the user provides. Table 14-1 puts events and forms in context.
Adam Freeman

Chapter 15. Creating Attribute Directives

Abstract
In this chapter, I describe how custom directives can be used to supplement the functionality provided by the built-in ones provided by Angular. The focus of this chapter is attribute directives, which are the simplest type that can be created and that change the appearance or behavior of a single element. In Chapter 16, I explain how to create structural directives, which are used to change the layout of the HTML document. Components are also a type of directive, and I explain how they work in Chapter 17.
Adam Freeman

Chapter 16. Creating Structural Directives

Abstract
Structural directives change the layout of the HTML document by adding and removing elements. They build on the core features available for attribute directives, described in Chapter 15, with additional support for micro-templates, which are small fragments of contents defined within the templates used by components. You can recognize when a structural directive is being used because its name will be prefixed with an asterisk, such as *ngIf and *ngFor. In this chapter, I explain how structural directives are defined and applied, how they work, and how they respond to changes in the data model. Table 16-1 puts structural directives in context.
Adam Freeman

Chapter 17. Understanding Components

Abstract
Components are directives that have their own templates, rather than relying on content provided from elsewhere. Components have access to all the directive features described in earlier chapters and still have a host element, can still define input and output properties, and so on. But they also define their own content.
Adam Freeman

Chapter 18. Using and Creating Pipes

Abstract
Pipes are small fragments of code that transform data values so they can be displayed to the user in templates. Pipes allow transformation logic to be defined in self-contained classes so that it can be applied consistently throughout an application. Table 18-1 puts pipes in context.
Adam Freeman

Chapter 19. Using Services

Abstract
Services are objects that provide common functionality to support other building blocks in an application, such as directives, components, and pipes. What’s important about services is the way that they are used, which is through a process called dependency injection. Using services can increase the flexibility and scalability of an Angular application, but dependency injection can be a difficult topic to understand. To that end, I start this chapter slowly and explain the problems that services and dependency injection can be used to solve, how dependency injection works, and why you should consider using services in your own projects. In Chapter 20, I introduce some more advanced features that Angular provides for service. Table 19-1 puts services in context.
Adam Freeman

Chapter 20. Using Service Providers

Abstract
In the previous chapter, I introduced services and explained how they are distributed using dependency injection. When using dependency injection, the objects that are used to resolve dependencies are created by service providers, known more commonly as providers. In this chapter, I explain how providers work, describe the different types of provider available, and demonstrate how providers can be created in different parts of the application to change the way that services behave. Table 20-1 puts providers in context.
Adam Freeman

Chapter 21. Using and Creating Modules

Abstract
In this chapter, I describe the last of the Angular building blocks: modules. In the first part of the chapter, I describe the root module, which every Angular application uses to describe the configuration of the application to Angular. In the second part of the chapter, I describe feature modules, which are used to add structure to an application so that related features can be grouped as a single unit. Table 21-1 puts modules in context.
Adam Freeman

Advanced Angular Features

Frontmatter

Chapter 22. Creating the Example Project

Abstract
Throughout the chapters in the previous part of the book, I added classes and content to the example project to demonstrate different Angular features and then, in Chapter 21, introduced feature modules to add some structure to the project. The result is a project with a lot of redundant and unused functionality, and for this part of the book, I am going to start a new project that takes some of the core features from earlier chapters and provides a clean foundation on which to build in the chapters that follow.
Adam Freeman

Chapter 23. Using Reactive Extensions

Abstract
Angular has a lot of features, but the one that grabs the most attention is the way that changes propagate through the application so that filling in a form field or clicking a button causes immediate updates to the application state. But there are limitations to the changes that Angular can detect, and some features require working directly with the library that Angular uses to distribute updates throughout an application. This library is called Reactive Extensions, also known as RxJS.
Adam Freeman

Chapter 24. Making Asynchronous HTTP Requests

Abstract
All the examples since Chapter 11 have relied on static data that has been hardwired into the application. In this chapter, I demonstrate how to use asynchronous HTTP requests, often called Ajax requests, to interact with a web service to get real data into an application. Table 24-1 puts HTTP requests in context.
Adam Freeman

Chapter 25. Routing and Navigation: Part 1

Abstract
The Angular routing feature allows applications to change the components and templates that are displayed to the user by responding to changes to the browser’s URL. This allows complex applications to be created that adapt the content they present in an open and flexible way, with minimal coding. To support this feature, there are data bindings and services that can be used to change the browser’s URL, allowing the user to navigate around the application.
Adam Freeman

Chapter 26. Routing and Navigation: Part 2

Abstract
In the previous chapter, I introduced the Angular URL routing system and explained how it can be used to control the components that are displayed to the user. The routing system has a lot of features, which I continue to describe in this chapter and in Chapter 27. This emphasis on this chapter is about creating more complex routes, including routes that will match any URL, routes that redirect the browser to other URLs, routes that navigate within a component, and routes that select multiple components. Table 26-1 summarizes the chapter.
Adam Freeman

Chapter 27. Routing and Navigation: Part 3

Abstract
In this chapter, I continue to describe the Angular URL routing system, focusing on the most advanced features. I explain how to control route activation, how to load feature modules dynamically, and how to use multiple outlet elements in a template. Table 27-1 summarizes the chapter.
Adam Freeman

Chapter 28. Using Animation

Abstract
In this chapter, I describe the Angular animation system, which uses data bindings to animate HTML elements to reflect changes in the state of the application. In broad terms, animations have two roles in an Angular application: to emphasize changes in content or to smooth them out.
Adam Freeman

Chapter 29. Angular Unit Testing

Abstract
In this chapter, I describe the tools that Angular provides for unit testing components and directives. Some Angular building blocks, such as pipes and services, can be readily tested in isolation using the basic testing tools that I set up at the start of the chapter. Components (and, to a lesser extent, directives) have complex interactions with their host elements and with their template content and require special features. Table 29-1 puts Angular unit testing in context.
Adam Freeman
Additional information