Angular Architecture

Oct 10, 2019 by - Category - Frontend

Angular is a very powerful front-end framework. Here I have explained the Angular architecture that framework in the build of. All these concepts like Components, Templates, services get together and make it a very modular framework.


A module is a combination of components, services, methods, logical groups, etc. We can create multiple modules in our project. Whenever we create a project, one default module is created that is called app module and when we create our other modules as per the requirement in the project that all modules we need to register inside the app module.


A component is the typescript class, here we have defined our all logical methods and we can bind it with the HTML. Every component has its metadata property. When we create a component three files are created,,


A template is an HTML page which consists of the content. It called a presentation layer also. That is rendering on the browser for display data.


@Component() decorator as we have defined in every component and this is taking all metadata object i.e.

Selector: it identifies the component selector name,

templateURL: this includes only one HTML template URL,

stylesURL: it is an array and it can include multiple CSS files for decorating the HTML page.

Data Binding

Data binding is a concept for communication between components and DOM. In data binding, our component data will be bind with the presentation HTML layer.  Different types of data binding.

One way data binding

Example: – {{data}}

Two way data binding

<input type=”text” [(ngModel)]=”[username]” />

Event binding

<button type=”button” (click)=”clickHere()”>Click here</button>

Property binding

Example: – <img [src]=”images/one.jpg” />


Whenever we want to manipulate DOM as we want changes in present data on the HTML template then we can use directive. Our angular directive used to extend the HTML vocabulary.

Angular provides three types of directive

Component directive: – @Component

Structural directive: @ngIf, @ngFor, @ngSwitch

Attribute directive: – @ngClass, @ngStyle


We used services for the communication between two components or components with the database. Service is a Singleton pattern, so we need to define only one-time in-app module providers: [servicesName] and use in multiple components.

Dependency Injection

Dependency injection DI is an angular design pattern. It adds functionally in component at runtime. When we create a services class, an angular injectable decorator is added in-service class, and this injectable decorator allows us can inject this service in any other component.

Leave a Reply

Your email address will not be published. Required fields are marked *

6 + 1 =