In this section, I will present the main building blocks of Angular applications: Service, Component, Template, and Directive. We will also learn what problems are solved by dependency injection, decorators, and zones.

Now, if you picked this book off the (virtual) shelf, you likely have some experience with Angular and want to improve your applications with good practices and design patterns. Therefore, you should have some knowledge about the general architecture of Angular building blocks.

Nevertheless, a quick and pragmatic reminder should not hurt much, and we can be sure that we have a solid architectural basis to build our patterns upon.

Here is an overview of how the main Angular 2 building blocks interact with each other:

High-level architecture of an Angular 2 application

In what follows, I will present an example of each Angular 2 building block by creating an application that manipulates the Floyd array. Here is an example of a letter-based Floyd array:

   a...