Explain the Architecture Overview of Angular ?
Angular is a client-side front-end framework developed by a team of developers at Google based on Typescript. It is used for building dynamic and single-page web applications (SPAs). Also, Angular is a versatile framework for building web applications and offers a wide range of features and tools to streamline the development process and create robust and maintainable applications.
Angular Architecture Overview
To develop any web application, Angular follows the MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) design patterns, which facilitates a structured and organized approach to designing the application, along with making it easier to manage code, improve maintainability, & etc. These types of design patterns usually maintain a clear distinction between data (Model), user interface (View), and logic (Controller/ViewModel), which results in more scalable and testable applications. It also provides code reusability and ensures a smoother development process for large & complex projects.
An Angular Application contains the following building blocks:
Table of Content
- Modules
- Components
- Templates
- Directives
- Services
- Dependency Injection(DI)
- Router
- State Management
- HTTP Client
We will explore the above topics & will understand their basic syntaxes.
Modules
- A Module is a unit that consists of a separate block to perform specific functionality and enables us to break down the application into smaller chunks.
- In a module, we can export & import the components and services from other modules.
- Modules are created using the @NgModule decorator.
- Types of Modules:
- Core Module/Root Module
- Every Angular application must have at least one root module, which is called the AppModule, defined in the app.module.ts file.
- The root module is the top-level module in an Angular application.
- It imports all of the other modules in the application.
- Feature Module
- Feature modules are used to group related components, directives, pipes, and services together.
- Shared Module
- The most commonly used functionality will be present in the shared module which can be imported by the feature module whenever needed.
- Core Module/Root Module
Example: app.module.ts
Javascript
import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppRoutingModule } from './app-routing.module' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Components
- A Component is the building block of the angular application.
- A component consists of a template(HTML view of UI), styles(CSS appearance/design) and a typescript class which contains business logic.
- To indicate a class as component @Component decorator is used.
- The @Component decorator provides metadata to the component.
- The component metadata properties consist of selectors, directives, providers, styleUrls and templateUrls.
Example: app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { title = 'AngularApp' ; } |
Templates
- The user interface or the view of the end users is defined using the template.
- Templates are created using HTML and it binds the component properties and methods thus helping us to render data dynamically.
- Template syntax includes directives, interpolation, built-in directives, template expression operators, property binding, and event binding for creating dynamic and interactive views.
Example: app.component.html
HTML
< h2 >Welcome to w3wiki</ h2 > < p >Angular Architecture consists of :</ p > < ul > < li >Modules</ li > < li >Components</ li > < li >Templates</ li > < li >Directives</ li > < li >Services</ li > < li >Dependency Injection(DI)</ li > < li >Router</ li > < li >HTTP Client</ li > < li >State Management</ li > </ ul > |
Directives
- Directives are instructions in the DOM (Document Object Model).
- Directives are used in templates to customize the behaviour of the elements.
- Angular provides built-in directives like *ngIf and *ngFor, as well as custom directives created by developers.
- Types of directives:
- Component Directives
- These directives are associated with the template(view) of a component.
- Structural Directives
- These directives are used to change the structure of the DOM using *ngFor,*ngSwitch and *ngIf.
- Attribute Directives
- These directives are used to change the behaviour of the DOM using ngStyle,ngModel and ngClass.
- Custom Directives
- We can create custom directives using @Directive decorator and define the desired behaviour in the class.
- Component Directives
Example:
- app.component.html
HTML
<!-- Structural Directive: ngIf,ngFor,ngSwitch --> < div class = 'card' > < p >ngSwitch Example</ p > < div class = "card-body" > Input string : < input type = 'text' [(ngModel)]="num" /> < div [ngSwitch]="num"> < div * ngSwitchCase = "'1'" >One</ div > < div * ngSwitchCase = "'2'" >Two</ div > < div * ngSwitchCase = "'3'" >Three</ div > < div * ngSwitchCase = "'4'" >Four</ div > < div * ngSwitchCase = "'5'" >Five</ div > < div *ngSwitchDefault>This is Default</ div > </ div > </ div > < div > < p >ngFor and ngIf Example</ p > < div * ngFor = "let emp of employee" > < ng-container *ngIf="emp.age>=30"> < p >{{ emp.name }}: {{ emp.age }}</ p > </ ng-container > </ div > < div > <!-- Attribute Directive: [ngStyle] --> < p [ngStyle]= "{'color': 'blue', 'font-size': 12}"> ngStyle Example </ p > </ div > <!-- Custom Directive: ng g directive uppercase --> < div > < input type = "text" appUppercase placeholder = "Enter text" /> </ div > </ div > </ div > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { title = 'AngularApp' ; num: number = 0; employee: Employee[] = [ { name: 'Emp1' , age: 30 }, { name: 'Emp2' , age: 37 }, { name: 'Emp3' , age: 26 }, ] } class Employee { name: string; age: number; } |
- uppercase.directive.ts
Javascript
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core' ; @Directive({ selector: '[appUppercase]' }) export class UppercaseDirective { constructor(private el: ElementRef, private renderer: Renderer2) { } @HostListener( 'input' , [ '$event' ]) onInputChange(event: Event) { const inputValue = (event.target as HTMLInputElement).value; const newValue = inputValue.toUpperCase(); this .renderer.setProperty( this .el.nativeElement, 'value' , newValue); } } |
Services
- Services are used when specific data or logic needs to be used across different components.
- Services are typically used to centralize data access, HTTP requests, state management, and other common tasks.
- Services are singleton and are registered with Angular’s dependency injection system.
- Components can inject services to access their functionality and data.
- command to create:
ng generate service counter
Example: counter.service.ts
Javascript
import { Injectable } from '@angular/core' ; @Injectable({ providedIn: 'root' , }) export class CounterService { private count = 0; increment(): void { this .count++; } getCount(): number { return this .count; } } |
Dependency Injection(DI)
- Dependency injection simplifies dependency management, facilitates code reusability and simplifies testing.
- DI is a design pattern which increases the flexibility and modularity of the applications by producing and distributing specific parts of the application to other parts of the application that need them.
- We can inject services, configuration values, and other objects into components and services.
- Components and services can declare their dependencies and have them injected automatically using @Injectable decorator.
Router
- The Angular Router manages navigation within the application for changing from one view to another view.
- Routes are defined in the app-routing.module.ts file and map to specific components.
- The router also supports route parameters, route guards, and child routes for creating complex navigation structures.
Example: app-routing.module.ts
Javascript
import { NgModule } from '@angular/core' ; import { Routes, RouterModule } from '@angular/router' ; import { EmployeeListComponent } from './employee-list/employee-list.component' ; import { CreateEmployeeComponent } from './create-employee/create-employee.component' ; import { UpdateEmployeeComponent } from './update-employee/update-employee.component' ; import { EmployeeDetailsComponent } from './employee-details/employee-details.component' ; const routes: Routes = [ { path: 'employees' , component: EmployeeListComponent }, { path: 'create-employee' , component: CreateEmployeeComponent }, { path: '' , redirectTo: 'employees' , pathMatch: 'full' }, { path: 'update-employee/:id' , component: UpdateEmployeeComponent }, { path: 'employee-details/:id' , component: EmployeeDetailsComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
State Management
- State management in angular is achieved using RxJS (Reactive Extensions for JavaScript).
- RxJS is used for handling asynchronous operations, such as handling HTTP requests, user interactions, and event-driven programming.
- Streams of data and events are managed by Observables which is provided by RxJS.
HTTP Client
- HTTP client module in angular is used for making HTTP requests to interact with backend services(API calls) to fetch or send data.
Example: post-list.component.ts
Javascript
import { Component, OnInit } from '@angular/core' ; import { HttpClient } from '@angular/common/http' ; @Component({ selector: 'app-post-list' , templateUrl: './post-list.component.html' , styleUrls: [ './post-list.component.css' ], }) export class PostListComponent implements OnInit { posts: any[] = []; constructor(private http: HttpClient) { } ngOnInit(): void { this .http .get < any[] > ( 'https://jsonplaceholder.typicode.com/posts' ) .subscribe((data) => { this .posts = data; }); } } |
Contact Us