Angular 7

Angular Architecture and Building blocks of Angular

Angular Architecture and Building blocks of Angular

Angular Architecture is divided into different small parts like Component, Directive, Template, Service, and Module etc.

Before start developing Angular application, we should have basic information about the use of each part of the application. So, it will help us to make our Angular application faster and smoother.

Below is the picture demonstrating the Angular Architecture.

With the help of above Angular Architecture diagram, we can identify the Eight main building blocks of an Angular Application.

  1. Component: Angular 2+ architecture is entirely Component based. Component is nothing but a class that interact with the .html file of the component, to display data on the browser.
  2. Metadata: Metadata is data about the data. It provides details about the component/ module etc.
  3. Template: Templates combines the Angular markup and HTML tags which can helps to modify the data before displaying on browser. Template contains the Design logic (HTML) of program written in component to format and augment the application before displaying.
  4. Data Binding: It is a connection or the communication between HTML element and Component property. It is used to bind data, event and property between them.
  5. Module: Module is the place which contains groups of components, directive, pipes and services, which are related to the angular application.
  6. Service: The main objective of a service is to share business logic, models, or data and functions with different components of an Angular application It contains business logic which can be re-usable that means we can write once and use it anywhere on the application whenever required.
  7. Dependency Injection: DI is a design pattern use for providing dependencies to a class from external resource rather than creating them. It is pattern for handling code dependencies. It is used for Injecting or loading service objects into components.
  8. Directive: it is used for modifying the DOM elements. In short, directives are the instruction to DOM.
  9. Pipe: Pipe is also a building block though it is not mentioned in the above diagram. The main object of pipe is to transform the data into desired output before displaying it to browser.