The framework itself consists of several libraries (or modules), each of which contains a certain functionality, and each module consists of a combination of classes and their properties and methods.

Let`s see what the architecture of Angular application is.

Each class has its own functional purpose.

Not all libraries are required for use in the application (Angular App), some are loaded as needed, for example, FormsModule or HttpClientModule.

Module

Let`s analyze the modules, Everything in Angular application architecture is based on modules. Each of them has its own set of structural elements:

• component - is responsible for part of the web page and includes an HTML template, CSS styles and behavior logic;
• service - data provider for component;
• directive - converts a specific part of the DOM in a certain way.

All of the above is collected in the root module, which is commonly called the AppModule.

There can be only one root module, but it can use the functionality of other modules declared in the @NgModule() decorator object in the imports property.

@NgModule() is a decorator that accepts a module describing an object.

The list of object properties:

• declarations - components, directives and filters of the root module;
• exports - components, services, directives and filters available for use by developers who will use your module in their development;
• imports - other modules used in the root module;
• providers - application services;
• bootstrap - name of the main component of the application (usually called AppComponent).

Component

A component is a part of the application interface with its own logic. The entire visible part of the Angular App is implemented using components, so you can often hear that the Angular architecture is component based.

The @Component() decorator is responsible for creating the component. The main properties of the object that the decorator recieves:

• selector - component name;
• template (or templateUrl) - HTML markup as a string (or the path to an HTML file);
• providers - list of services that provide data for the component;
• styles - an array of CSS files, containing styles for the component to be created.

Service

Services are needed to provide data to components. This can be not only requests to the server, but also functions that convert the source data according to a given algorithm. They allow the Angular application architecture to be more flexible and scalable.

The task of the service should be narrow and strictly defined.

It will not be considered a mistake if you implement functionality in components, but it is considered good practice to make all calls to the server and functions that return data inside services.

Directive

The purpose of directives is to transform the DOM in a certain way, endowing an element with behavior.

By their implementation, directives are almost identical to components, a component is a directive with an HTML template, but from a conceptual point of view they are different.

There are two kinds of directives:

• structural - add, remove or replace elements in the DOM;
• attributes - give the element a different behavior.

They are created using the @Directive() decorator with the configuration object.

Angular has many built-in directives (*ngFor, *ngIf), but often they are not enough for large applications, so you have to implement your own.