Updated March 20, 2023
Introduction to Angular 2 Architecture
The following article provides an outline of the angular 2 architecture in detail. Angular is written in TypeScript. It has a very different project structure than the angular previous version we can say totally different. It is a platform to build or design client interface in typescript and html. This can separate our logic can also follow object-oriented programming. So angular 2+ versions are well structured, standardized and provide more readability to the developer.
Top 8 Angular 2 Architecture with Diagram
Basic block for angular application is a module which contains a various object as an array. It also contains the bootstrapping module from where the application flow will get a start.
There are basically eight main things involved in angular architecture:
- Module
- Component
- Template
- Metadata
- Service
- Data Binding
- Directive
- Dependency Injection
1. Module
It is basically 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 the module in it. 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.
- 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.
- Imports: This is used to import other modules to use in the existing module. That can be anything.
- Providers: These are used to create service and they can be associable to any part of the application.
- 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 { }2. Component
The component is a class that contains the core of business logic for the application. It contains the template which is going to display when this class gets invoke. It also contains the corresponding css for that template. Same it contains the service which reads data from the server and renders it to template dor display. This component interacts with the template with the method and property of API.
To class, mush has @Component annotation on it. This also contains various property like:
- selector: we need to specify a unique name for this. Which will act as a unique tagfor this html page?
- templateUrl: a path of you html you want to render.
- styleUrls: it is an array css file path.
- 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 AppComponent3. 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.
4. 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']
})5. Data Binding
Data binding is the main block of angular architecture. It allows us to have communication between a component and a template which is very much necessary to render our business logic to the user in the form of data. There are four types of data binding provided by 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 basically 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>6. Service
It is an injectable class which is used to share data among various class or application. It is also responsible to make the server call and get data to display. Any class annotated with @Injectable and making server calls can be considered as service.
Example:
import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
@Injectable()
export class BookService {}7. Directive
They provide a special behavior to the DOM element. They are extended HTML attributes.
- Decorator Directive: There are many built-in directives like ngModel, ngFor, ngIF, etc. many build-in directives provided by angular.
- Component Directive: It is extended of @Directive decorates with template-oriented features.
- Template Directive: It is also known as Structural directive. It converts HTML into a reusable template.
8. Dependency Injection
Dependency Injectable 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.
Conclusion
So angular 2 + versions are based on typescript to meet ES6 specifications. In which we have a component that is part of the module. By using angular2 structure we can divide our application into small sun components.
Recommended Articles
This is a guide to Angular 2 Architecture. Here we discuss the top 8 Angular 2 Architecture which includes, Module, Component, Template, etc along with respective examples. You can also go through our other suggested articles to learn more –
