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.

Angular Architecture

An Angular Application contains the following building blocks:

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.

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 GeeksForGeeks</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.

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;
                });
    }
}