Skip to main content
main-content
Top

About this book

Angular 4.0 updates for this book are now available. Follow the Download source code link for this book on the Apress website.

Get the most from Angular 2, the leading framework for building dynamic JavaScript applications. Best-selling author Adam Freeman begins by describing the MVC pattern and the benefits it can offer and then 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.

Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them.

What you’ll learnGain a solid architectural understanding of the MVC PatternLearn how to create rich and dynamic web app clients using Angular 2Learn how to extend and customize Angular 2Learn how to test your Angular 2 projects

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

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 7–10, 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. SportsStore: 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 feature module that will be loaded only when administration is required. In this section, I prepare the application by creating the feature module, adding some initial content, and setting up the rest of the application so that the module can be loaded dynamically.
Adam Freeman

Chapter 10. SportsStore: Deployment

Abstract
In this chapter, I prepare the SportsStore application for deployment by incorporating all of the application content and the Angular framework into a single file and “containerizing” the application using Docker.
Adam Freeman

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. I explain the purpose of every software package, every configuration file, and every code file that is created. 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 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
Throughout these chapters, I describe how custom directives work by re-creating the features provided by some of the built-in directives. This isn’t something you would typically do in a real project, but it provides a useful baseline against which the process can be explained. Table 15-1 puts attribute directives into context.
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, both in terms of how it works and why it can be useful. 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.
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 that are 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

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
Observables Reactive Extensions 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.
Adam Freeman

Chapter 24. Making Asynchronous HTTP Requests

Abstract
HTTP Requests Ajax Web services 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.
Adam Freeman

Chapter 25. Routing and Navigation: Part 1

Abstract
Routing URL Routing 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.
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.
Adam Freeman

Chapter 28. Using Animation

Abstract
Animation 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
Unit testing 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.
Adam Freeman

Erratum to: Pro Angular

Without Abstract
Adam Freeman
Additional information