In this post, we will understand the architecture of Angular 2 framework. 

These are the modules that Angular 2 architecture contains: 

• Module
• Component
• Template
• Metadata
• Data Binding
• Service
• Directive
• Dependency Injection

Module

It can be defined as a block of code which is used to do some task. The application in angular can be defined as modules and there are different modules that can be used to build any application. You can get any value from the code like class in the module. Angular 2 provides component class which is basic building block and it is exported from a module.

You can use export statement to export the component class from a module and it is defined in a file named app.component.ts. 

export class AppComponent { }

this statement defines a module and its class named AppComponent as public class. so it is accessible to other modules also.

Component

It can be defined like a controller class which contains a template. It is used for view of the app and logic. We can define some code that works as a function and can be used inside the application. You can also define css styles to a component.

@Component is used to register a component. One DOM element will have only one component.

Template

template is used to define the view of any component. It shows how to display a component.

Like in the below template it displays name:

<div>

name is : {{name}}

</div>

Metadata

It tells how to process the class. That means it is used to identify something. Like we have some component class name, @component is a decorator and used to identify that it is a component.

@Component({

 selector : namelist,

 template : '<h1>Name is here</h1>'

 directives : [MyComponentDetails]

})

export class ComponentList{}

Here selector,template and directives are decorators.

Data Binding

It connects the templates and the components.

These are the types of data binding:

Interpolation: It shows the value of component within html div tags.

Property Binding: parent to child property passes.

Event Binding: It is processed when component method name is clicked.

Two-way Binding: ngModel directive is used to bind property and event.

Service

Services are some functions in javascript that can do a particular task. Service can perform any specific task that is defined like any message service or data service.

Directive

metadata is defined by a directive. These are the types of directives:

Component Directive: It is used as custom HTML element.

Decorator Directive: It decorates the elements.

Template Directive: It converts html into a template.

Dependency Injection

It is used in angular in order to use different components across the application by passing them as an object.