Architecture Overview of Angular

Angular is a TypeScript-based client-side front-end framework developed by Google. 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

• Angular follows a component-based architecture that organizes an application into reusable building blocks.
• It also incorporates concepts inspired by MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) to separate the user interface, business logic, and application data.
• This structured approach improves code organization, maintainability, scalability, and reusability, making Angular suitable for both small and enterprise-level applications.

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.

Note: Modern Angular applications use Standalone Components by default, reducing the dependency on NgModules. However, NgModules are still fully supported and are commonly used in many existing Angular applications.

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

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

<h2>{{ title }}</h2>
<p>Welcome to Angular.</p>

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

<div *ngIf="isLoggedIn">
    Welcome
</div>
<ul>
    <li *ngFor="let item of items">
        {{ item }}
    </li>
</ul>

• app.component.ts

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.

Example: counter.service.ts

@Injectable({
  providedIn:'root'
})
export class UserService{}

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 receive their dependencies through constructor injection, while services are typically marked with the @Injectable decorator.

Router

• The Angular Router manages navigation within the application for changing from one view to another view.
• Routes are commonly defined in the app.routes.ts file and registered using provideRouter(). Each route maps a URL path to a specific component.
• The router also supports route parameters, route guards, and child routes for creating complex navigation structures.

Example: app-routing.module.ts

import { Routes } from '@angular/router';
export const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    }
];

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

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
this.http.get('/api/users');