Πώς λειτουργεί το Angular;

Το Angular λειτουργεί ως πλαίσιο για τη δημιουργία εφαρμογών μιας σελίδας (SPA). Τα βασικά στοιχεία και αρχές του:

• Μοντελοποίηση: Οι εφαρμογές χτίζονται από modules. Το @NgModule ορίζει ποια components, services και άλλα στοιχεία ανήκουν σε ένα module.
• Components: Βασικά δομικά στοιχεία των εφαρμογών Angular. Κάθε component αποτελείται από ένα πρότυπο (HTML), μια κλάση TypeScript (λογική) και στυλ (CSS). Ο διακοσμητής Component τα συνδέει.
• Δέσιμο δεδομένων (Data Binding): Το Angular διασφαλίζει τη σύνδεση μεταξύ των δεδομένων στην κλάση του component και της παρουσίασης στο πρότυπο. Υπάρχουν μονόδρομο (property binding, interpolation) και διπλόδρομο (ngModel) δέσιμο.
• Οδηγίες (Directives): Αλλάζουν τη συμπεριφορά ή την εμφάνιση των στοιχείων DOM. Υπάρχουν δομικές (*ngIf, *ngFor) και ιδιοτήτων (ngClass, ngStyle).
• Υπηρεσίες (Services): Κλάσεις που περιέχουν λογική που μπορεί να χρησιμοποιηθεί από πολλαπλά components. Χρησιμοποιούνται για την απόκτηση δεδομένων, επιχειρηματική λογική κ.ά.
• Εισαγωγή εξαρτήσεων (Dependency Injection): Μηχανισμός μέσω του οποίου το Angular παρέχει υπηρεσίες σε components ή άλλες υπηρεσίες. Κάνει τον κώδικα πιο ευέλικτο και δοκιμαστικό.
• Routing: Επιτρέπει την πλοήγηση μεταξύ διαφορετικών προσεγγίσεων (components) της εφαρμογής χωρίς ανανέωση σελίδας. Ορίζεται με RouterModule και διαμόρφωση διαδρομών.
• Κύκλος ζωής component: Μια σειρά γεγονότων που συμβαίνουν από τη δημιουργία μέχρι την καταστροφή ενός component. Το Angular παρέχει hooks (μεθόδους) που μπορούν να υλοποιηθούν για την εκτέλεση ενεργειών σε συγκεκριμένα στάδια (ngOnInit, ngOnDestroy).
• Ανίχνευση αλλαγών (Change Detection): Μηχανισμός που καθορίζει πότε πρέπει να ενημερωθεί η παρουσίαση (DOM) βάσει αλλαγών στα δεδομένα της εφαρμογής. Το Angular χρησιμοποιεί ζώνες (NgZone) για την παρακολούθηση ασύγχρονων γεγονότων και την αυτόματη ενεργοποίηση ανίχνευσης αλλαγών.
• Templates: HTML με επεκτάσεις Angular για δέσιμο δεδομένων, οδηγίες και εκφράσεις.
• RxJS: Το Angular χρησιμοποιεί ενεργά τη βιβλιοθήκη RxJS για εργασία με ασύγχρονα δεδομένα και ροές γεγονότων.

Η διαδικασία εργασίας σε υψηλό επίπεδο:

1. Φόρτωση: Ο περιηγητής φορτώνει το index.html.
2. Έναρξη: Ξεκινά η ρίζα της εφαρμογής, συνήθως στο main.ts.
3. Bootstrapping: Το @NgModule για το ριζικό module (συνήθως AppModule) φορτώνεται μέσω του platform-browser.
4. Απεικόνιση: Το Angular δημιουργεί και αποδίδει components, ξεκινώντας από τη ρίζα.
5. Δέσιμο δεδομένων: Τα δεδομένα από τις κλάσεις components συνδέονται με τα πρότυπα.
6. Ανίχνευση αλλαγών: Το Angular παρακολουθεί τις αλλαγές δεδομένων και ενημερώνει την παρουσίαση.
7. Routing: Οι μεταβάσεις μεταξύ προσεγγίσεων διαχειρίζονται από το router.

// Παράδειγμα απλού component
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Όνομα ετικέτας για χρήση στο πρότυπο
  template: `<p>{{ message }}</p>`, // Πρότυπο component
  styles: ['p { color: blue; }'] // Στυλ component
})
export class GreetComponent {
  // Λογική component
  message = 'Γειά από το Angular!';
}

// Παράδειγμα χρήσης υπηρεσίας με DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Η υπηρεσία είναι διαθέσιμη στον ριζικό injector
})
export class DataService {
  getData(): string {
    return 'Δεδομένα από την υπηρεσία';
  }
}

// Στον component που χρησιμοποιεί την υπηρεσία
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) { // Εισαγωγή υπηρεσίας
  }

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

Το Angular μεταγλωττίζει TypeScript και HTML πρότυπα σε JavaScript κατά τη διαδικασία κατασκευής (AOT compilation κατά προεπιλογή), που βελτιώνει την απόδοση.