How does Angular work?

Angular works as a framework for creating single-page applications (SPA). Its key components and principles:

• Modularity: Applications are built from modules. @NgModule defines which components, services, and other elements belong to the module.
• Components: The main building blocks of Angular applications. Each component consists of a template (HTML), a TypeScript class (logic), and styles (CSS). The Component decorator links them together.
• Data Binding: Angular provides a connection between data in the component class and the view in the template. There are one-way bindings (property binding, interpolation) and two-way data binding (ngModel).
• Directives: Change the behavior or appearance of DOM elements. They can be structural (*ngIf, *ngFor) or attribute (ngClass, ngStyle).
• Services: Classes that contain logic which can be used by multiple components. Used for data retrieval, business logic, etc.
• Dependency Injection: A mechanism by which Angular provides services to components or other services. It makes the code more flexible and testable.
• Routing: Allows navigation between different views (components) of the application without reloading the page. Defined using RouterModule and route configuration.
• Component Lifecycle: A series of events that occur with a component from creation to destruction. Angular provides hooks (methods) that can be implemented to perform actions at specific stages (e.g., ngOnInit, ngOnDestroy).
• Change Detection: A mechanism that determines when to update the view (DOM) based on changes in application data. Angular uses zones (NgZone) to track asynchronous events and automatically trigger change detection.
• Templates: HTML with Angular extensions for data binding, directives, and expressions.
• RxJS: Angular actively uses the RxJS library for working with asynchronous data and event streams.

High-level process:

1. Loading: The browser loads index.html.
2. Start: The root of the application is launched, usually in main.ts.
3. Bootstrap: The root module (AppModule) is loaded using platform-browser.
4. Rendering: Angular creates and renders components, starting from the root.
5. Data Binding: Data from component classes is bound to templates.
6. Change Detection: Angular monitors data changes and updates the view.
7. Routing: Transitions between views are handled by the router.

// Example of a simple component
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Tag name for use in template
  template: `<p>{{ message }}</p>`, // Component template
  styles: ['p { color: blue; }'] // Component styles
})
export class GreetComponent {
  // Component logic
  message = 'Hello from Angular!';
}

// Example of using a service with DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Service is available in the root injector
})
export class DataService {
  getData(): string {
    return 'Data from the service';
  }
}

// In a component that uses the service
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Injecting the service
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular compiles TypeScript and HTML templates into JavaScript during the build process (AOT compilation by default), which enhances performance.