A conceptual overview of Angular

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...