Explain the Architecture Overview of Angular ? (original) (raw)

ngSwitch Example

      <!-- Custom Directive: ng g directive uppercase -->
    <div>
        <input type="text" appUppercase 
               placeholder="Enter text" />
    </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;
            });
}

}

`