Angular Highlevel Architecture

Five building blocks of Angular’s high-level architecture:

Modules

It is a leader building block. It contains components, routing, services, and others. So in design each module can contain specific set of problems to solve. For example, if it is a social network, there can be modules like,

module 1: public posts,

module 2: messages and chats,

module 3: friends

So in this fashion, each module will hold components and services related to that

Components

It forms a part of a DOM tree. It contains the HTML template, data, and logic for that template to behave.

Directives

It can be bound with a dom or template or component or HTML element. It is to change the behavior of the current element and it’s child elements.

Routing

It manipulates the navigation of the app based on the URL state.

Services

This is related to data. The logic not related to a component, like an external API call is managed by service. How we get data for a component is managed by services.