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

Component is the main building block we will use to create the user interface of our applications with Angular. The Component block is a direct successor of 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, different expressions can reside:

The preceding diagram conceptually illustrates the Change Detection mechanism of Angular. It performs dirty checking, which evaluates the registered expressions in the context of specific UI components. Since the concept of scope has been removed from Angular, the execution context of the expressions are the instances of the controllers of the components associated with them.

The Change Detection mechanism can be enhanced using Differs; this is why there 's a direct relation between these two elements in the diagram.

Pipes are another component of Angular. We can think of Pipes as the filters from AngularJS. Pipes can be used together with components. We can include them in the expressions that are defined in the context of any component.

Now, let's take a look at the following diagram:

Directives and components delegate the business logic to Services. This enforces better separation of concerns, maintainability, and code reusability. Directives receive references to instances of specific services declared as dependencies using the DI mechanism of the framework and delegate the execution of the business-related logic to them. Both directives and components may use the DI mechanism not only to inject services but also to inject the DOM elements and/or other components or directives. Keep in mind that components extend directives, so the template of components is formed as composition of both components and directives.

Modules (also known as NgModules) are a core concept that combines the building blocks into separate, logically related groups. NgModules are quite similar to the AngularJS modules, but bring more semantics on top. Note that NgModules are different from the ES2015 modules that we described in Chapter 4, TypeScript Crash Course. The Angular modules are a framework feature, in contrast to the ES2015 modules, which are a language construct.

NgModules have the following responsibilities:

• Providing the context of the Angular template compiler
• Providing a level of encapsulation where we can have components or directives, which are used only within the boundaries of a given module
• In NgModules, we can configure the providers for the DI mechanism of the framework:

Lastly, the new router is used to define the routes in our application. Since directives do not own a template, only the components can be rendered by the router, representing the different views in our application. The router also uses a set of predefined directives, which allow us to define hyperlinks between the different views and the container where they should be rendered.

Now, we will look more closely at these concepts, and see how they work together to make Angular applications and how they've changed from their AngularJS predecessors.