Angular Architecture

By | | Updated : 2021-03-16 | Viewed : 10938 times

Angular Architecture

Angular is a client side framework, is implemented in HTML and typescript. It contains number of ngmodules. Usually ngmodules are called main blocks for angular application. Here this articles will explain about how each block/class will be interacted one to each other.

Please find the below given diagram for different type of code blocks/clases and how they are interacted each other.

Angular Architecture

If you observe the above diagram contains different type of code blocks or JavaScript classes. Those are

  • Ngmodules

  • Components

  • Templates

  • Directives

  • Services


First we will discuss about the ngmodule. The main theme of making application as modules is maintenance and reusability.

When we want to organize a complex application, we should make application as number of modules. So we can easily maintain application. Ngmodule will be used for maintenance and reusability. We can combine all similar functional code blocks such as services, components as one module. So entire code maintenance will be easy and we can reuse the different modules. Each module will be represented as unique module for specific purpose


Angular component is JavaScript class, will be interacted with html template (view). It controls the view by using the API and methods to render the html template. Here Component can handle the view’s event call back functions. It can get application data from services and same data will be rendered in the Html template. Component is class which contains application data as model and logic to be used for displaying the view.


A template contains html and binding markup. Before rendering the html elements, Angular will create or modify the html elements by using the binding markup. Binding markup will be used by the angular to know the way of rendering. The markup or binding markup will be provided by the directives.


Directive is class, will be used by angular to render the template into the DOM. Directive contains the logic, which will be used to render the template. While before rendering the template as html into DOM, angular will render the html as per directive’s instruction.


Service classes will send/fetch data to/from the server/back end. The fetched data will be used by component to display as view. Simply we can say services are responsible for specific functionality. Some of the services classes are reusable. Actually service classes will injected by Injectors as decencies into components. Service classes contains the metadata, which is useful for injecting the service into the components.

Leave A Reply