Angular 2 Architecture

Angular 2 Architecture:-

Angular is written in typescript. It has a very specific assignment structure than the angular previous model we will say one of a kind. It is a platform to build or design purchaser interfaces in typescript and HTML. This could separate our logic also can observe item-orientated programming. So angular 2+ versions are nicely based, standardized, and provide greater clarity to the developer.

Top 8 Angular 2 Architecture with Diagram

A basic block for angular application is a module that contains various objects as an array. It also contains the bootstrapping module from where the application flow will get a start.

There are eight main things involved in angular architecture:

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

Module

It is a block or piece of code that is responsible to perform a single task, it is an independent task. Angular applications can have any number of modules in them. We can also export these modules in the form of a class. The angular application should have at least one module. A module class must be decorated with the following annotations i.e. @NgModule it takes a metadata object.

It has many properties which describe below.

1. Declarations: It is used to declare the view class that belongs to the current module. There are three types of classes provided by my angular i.e. component, pipes, and directive. In this, we define our custom component.
2. Imports: This is used to import other modules to use in the existing module. That can be anything.
3. Providers: These are used to create services and they can be associable with any part of the application.
4. Bootstrap: The root module has to set this property which is going to host all other modules.

Example:-

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { DialogOverviewExampleDialog } from './app.component.dialog';

import { BookService } from './book.service';

@NgModule({

declarations: [

AppComponent,

DialogOverviewExampleDialog

],

imports: [

BrowserModule,

AppRoutingModule,

HttpModule

],

providers: [BookService],

bootstrap: [AppComponent] })

export class AppModule { }

Component:-

The issue is a class that consists of the core of business common sense for the software. It includes the template which is going to show while this magnificence receives invoked. It additionally incorporates the corresponding CSS for that template. Same it consists of the carrier which reads facts from the server and renders it to template dor display. This component interacts with the template with the approach and belongings of API.

To class, mush has @Component annotation on it. This also contains various properties like:

1. selector: we need to specify a unique name for this. Which will act as a unique tag for this HTML page?
2. templateUrl: a path of you HTML you want to render.
3. styleUrls: it is an array CSS file path.
4. providers: If we have any.

Example:

import { Component } from '@angular/core';

import { BookService } from './book.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'] })

export class AppComponent

Metadata:-

In angular, we can define metadata by using a decorator. For example, if we make any component in angular but how will angular identity it as a component? We need to tell it by using the annotation @Component.

Template:-

A template is the HTML that we want to display. It is a simple HTML page that will show the data to the user.

Example:

Below is an example to implement metadata and template together.

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'] })

Data Binding:-

Data binding is the principle block of angular architecture. It lets us have a communique between an aspect and a template which may be very a lot vital to render our business logic to the person inside the form of statistics. There are 4 styles of information binding provided by way of angular 2.

• Interpolation: It is used to display a component property to a template or view. For this, we use double curly braces. We can display anything using this i.e. string, number, array, etc.

Example:

{{ your_property_name }}

class AppComponent

{

name: string;

object: any;

}

{{ name }}

{{ object.roll_number }}

• Property Binding: Property binding allows us to directly access the element property of HTML. We can directly assign our variable to an HTML element.

Example:

[value]="demo"

here we are directly assigning demo to value using property binding.

• Event Binding: This binding uses the event to bind value. We have various events available for instance click.

Example:

(cilck) = "methodName($event)"

It uses parenthesis followed by the function name you want to invoke. In the invoked function we can write our logic.

• Two-Way Binding: This is a combination of property binding and event binding. In which we can simultaneously call our method and bind value to the element property.

Example:

<input [(ngModel)]="username">

<p>Hello {{username}}!</p>

Service

Example:

import { Injectable } from '@angular/core';

import { Headers, Http, RequestOptions } from '@angular/http';

@Injectable()

export class BookService {}

Directive:-

They provide a special behavior to the DOM element. They are extended HTML attributes.

1. Decorator Directive: There are many built-in directives like ngModel, ngFor, gif, etc. many build-in directives provided by angular.
2. Component Directive: It is extended of @Directive decorates with template-oriented features.
3. Template Directive: It is also known as Structural directive. It converts HTML into a reusable template.

Dependency Injection:-

Dependency Injectable is used in many frameworks. it is a design pattern that is used to solve the dependency problem.

In this, we pass the object as dependencies. It makes our application loosely coupled, make our module independent of each other. By using dependency injection we make our application readable, loosely coupled, testable, reusable, and maintainable.