Before we dive into the different parts of Angular, let's get a conceptual overview of how everything fits together. Let's take a look at the following diagram:

Figure 1

Figure 1 to Figure 4 show the main Angular concepts and the connections between them. The main purpose of these diagrams is to illustrate the core blocks for building single-page applications with Angular, and their relations.

The Component is the main building block we will use to create the user interface of our applications with Angular. The Component is a direct successor of the Directive, which is the primitive for attaching behavior to the DOM. Components extend Directives by providing further features, such as a template, which can be used to render composition of directives. Inside the template of the view can reside different expressions.

Figure 2

The preceding diagram conceptually illustrates the Change Detection mechanism of Angular. It performs dirty checking, which evaluates...

AngularJS introduced the concept of directives in the development of single-page applications. The purpose of directives is to encapsulate the DOM-related logic and allow us to build user interfaces by composing them. This way, we are able to extend the syntax and the semantics of HTML. Initially, like most innovative concepts, directives were viewed controversially because they predispose us to write invalid HTML when using custom elements or attributes without the data- prefix. However, over time, this concept has gradually been accepted and has proved that it is here to stay.

Another drawback of the implementation of directives in AngularJS is the different ways we can use them. This requires an understanding of the attribute values, which can be literals, expressions, callbacks, or microsyntax. This makes tooling essentially impossible.

The latest versions of Angular keep the concept of directives, but take the best parts from AngularJS and add some new ideas and syntax...

Model View Controller (MVC) is a micro-architectural pattern initially introduced for the implementation of user interfaces. As Angular developers, we use different variations of this pattern on a daily basis, most often Model View ViewModel (MVVM). In MVC, we have the model, which encapsulates the business logic of our application, and the view, which is responsible for rendering the user interface, accepting user input, and delegating the user interaction logic to the controller. The view is represented as composition of components, which is formally known as the composite design pattern.

Let's take a look at the following structural diagram, which shows the composite design pattern:

Figure 5

Here, we have three classes:

The Component class defines an abstract operation called operation...

In AngularJS, we have the concept of modules. Modules there are responsible for grouping pieces of related functionality together and registering it internally during the bootstrap process. Unfortunately, they didn't provide features such as encapsulation and lazy loading.

Angular introduced the NgModules as part of the fifth release candidate of the framework. The main purpose of the new modules is to give a context for the Angular compiler and achieve a good level of encapsulation. For instance, if we are building a library with NgModules, we can have a number of declarations, which are used internally but not exported as part of the public interface. Let's take a look at the following example:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TabComponent} from './tab.component';
import {TabItemComponent} from './tab-item.component';

@NgModule({
  imports: [CommonModule],
  declarations: [TabComponent...

In business applications, we often need to have different visual representations of the same piece of data. For example, if we have the number 100,000 and we want to format it as currency, most likely we won't want to display it as plain data; more likely, we'll want something like $100,000.

The responsibility for formatting data in AngularJS was assigned to filters. Another example for a data formatting requirement is when we use collections of items. For instance, if we have a list of items, we may want to filter it based on a predicate (a boolean function); in a list of numbers, we may want to display only the prime numbers. AngularJS has a filter called filter, which allows us to do this. However, the duplication of the names often leads to confusion. That's another reason the core team renamed the filter component to a pipe.

The motivation behind the new name is the syntax used for pipes and filters:

{{expression | decimal | currency}} 

In the preceding example, we apply the...