Basic Architecture Of Angular 2 Applications

Introduction

Angular is a platform for developing web and mobile applications. Angular 2 is not just an update of Angular 1.x but Angular 2.0 is re-written and has many breaking changes. It is completely written in TypeScript (to meet ES 6 specifications). There will be a huge learning curve for the developers of Angular 2. And also, architecture of the Angular 2 is different than Angular 1.x. In this article, we will discuss the architecture of the Angular 2.

The following diagram shows the architecture of Angular 2.



There are main eight blocks of Angular 2 application.

1. Module
2. Component
3. Metadata
4. Template
5. Data Binding
6. Service
7. Directive
8. Dependency Injection

Module

Module is the block of code which is designed to perform a single task. We can export the module in form of class. Angular 2 applications have one or more modules. Every Angular application must have at least one module. If Angular application contains only one module, it is referring as root module. Every Angular application has one root module and many more featured modules.

Angular module is a class which is decorated with @NgModule. NgModule takes a single metadata object and its properties describe the module. Following are the important properties of NgModule.

• exports - It is the subset of declarations which would be used in the component template of other module.
• imports - imports other modules
• providers - It is a creator of services. They can be accessible in all the parts of the application.
• bootstrap - The root module has to set the bootstrap property. It is used to host all other views.
• declarations - It declare the view class that belong to current module. There are three type of view classes supported by Angular components, directives, and pipes.

Module example

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {

}

Component

The component is class with the template that deals with the View of application and it’s containing the core logic for the page. We can compare it with the Controller in Angular 1.x. We need to write the application logic inside the class which is used by the View. The component class interacts with the View through Methods and Properties of API.

Angular creates and updates the required component and destroys the unused component as the user moves through an application.

Component Example

import { Component } from '@angular/core';
@Component({
selector: 'test-app',
template: '<h1>This is my First Angular 2 Application</h1>' +
'<br/>' +
'<input #txtName type = "text" (keyup)="0" />' +
'<br/> ' +
'<p>You have Enter: {{txtName.value}}</p>'
})
export class AppComponent {

}

Metadata

Metadata is the way of defining the processing of a class. In TypeScript, we can define metadata by using decorator. For example, if we define any component in Angular application, we need to tell Angular that this is the component, by using metadata of the class (using @Component decorator).

Metadata example

@Component({
selector: 'test-app',
template: '<h1>This is my First Angular 2 Application</h1>' +
'<br/>' +
'<input #txtName type = "text" (keyup)="0" />' +
'<br/> ' +
'<p>You have Enter: {{txtName.value}}</p>'
})

The decorator @Component is used to configure the object to create the component and its View. The selector is creating the instance of the component. In the above example code, if Angular finds <testapp> tag in HTML, it replaces it with the template defined in component.

Template

The template is the component View that tells Angular how to display the component. It looks like normal HTML.

Data Binding

Data binding is a powerful feature of software development technologies. Data bind is the connection bridge between View and the business logic (View Model) of the application. Data binding in AngularJS is the automatic synchronization between the Model and View.

There are four type of binding supported by Angular 2 application,

 

• Interpolation - It displays the component value within the HTML tags which is also referred as Expression in Angular 1.x.
• Property Binding - It passes the value of property from the parent to the property of the child.
• Event Binding - It fires the event when we click on the components method name.
• Two-way Binding - It is an important form that combines event and property binding in single notation by using ngModel directive.

Service

Service in AngularJS is a function or an object that can be used to share the data and the behavior across the application. It is JavaScript function which is used to perform a specific task. It includes the function, values, or any other feature required by the application. Typical examples of services are logging service, data service, message service etc. There is no base class for service.

Directive

Directives are one of the most important components of AngularJS application. They are extended HTML attributes. These are the markers on the DOM element which provides some special behavior to DOM elements and tell AngularJS's HTML compiler to attach. It is class with directive metadata. To create directive, we have to apply @Directive decorator on attached metadata to the class.

There are three types of directives.

• Decorator Directive - It decorates (@Directive) the elements using additional behavior. There are many built-in directives like ngModel etc.
• Component Directive - It is extended of @Directive decorates with template-oriented features.
• Template Directive - It converts HTML into a reusable template. It is also known as Structural directive.

Dependency Injection

Dependency Injection is a software design pattern in which objects are passed as dependencies. It helps us remove the hard coded dependencies, and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable, and testable.

Point to remember about Dependency Injection,

• It is stimulated into the Angular framework so that it can be use anywhere in an application.
• The injector is a main mechanism to maintain the service instance and can be created using a provider.
• The provider is the way of creating a service.
• We can register the providers along with injectors