The Building Blocks of an Angular Application

In the previous chapter, we looked at the drivers for the design decisions behind Angular. We described the main reasons that led to the development of a brand new framework; Angular takes advantage of the newest web standards while keeping the past lessons in mind. Although we are familiar with the main drivers, we still haven't described the core concepts of the new framework. Angular took a different path from AngularJS and introduced a lot of changes in the fundamental building blocks used for the development of single-page applications.

The mission of this chapter is to describe the core of the framework and make a brief introduction to its main concepts. In the next couple of pages, we will also make an overview of how these concepts can be put together to help us build professional user interfaces for our web applications. The subsequent sections will give us an overview of everything that we will learn in more detail later in this book.

In this chapter, we will take a look at the following topics:

• A conceptual overview of the framework, showing how different concepts relate to each other.
• Building a user interface as a composition of components.
• What path the directives took in Angular, and how their interface changed compared to AngularJS.
• The reasons for the enforced separation of concerns that led to the decomposition of the directives into two different concepts. In order to get a better sense of them, we will demonstrate the basic syntax for their definition.
• An overview of the improved change detection, and how it involves the context that directives provide.
• What zones are, and how they can make our daily development process easier.
• What pipes are, and how they are related to the AngularJS filters.
• Introduction to the brand new Dependency Injection (DI) mechanism in Angular and how it is related to the services.