00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

Introduzione a Angular

Edoardo Midali
Edoardo Midali

Cos’è Angular

Angular è un framework open-source sviluppato e mantenuto da Google per la creazione di applicazioni web single-page (SPA) e progressive web app (PWA). A differenza di librerie come React, Angular è un framework opinionated e completo che fornisce tutto il necessario per costruire applicazioni enterprise-grade senza dover scegliere librerie esterne per funzionalità fondamentali.

// Un semplice componente Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-benvenuto',
  standalone: true,
  template: `
    <h1>Benvenuto in Angular!</h1>
    <p>{{ messaggio }}</p>
  `
})
export class BenvenutoComponent {
  messaggio = 'Il framework completo per sviluppatori web moderni';
}

Angular include nativamente: routing, gestione form, client HTTP, dependency injection, supporto all’internazionalizzazione (i18n), animazioni, testing e molto altro.

Storia di Angular

Da AngularJS ad Angular

La storia di Angular inizia nel 2010 con AngularJS (Angular 1.x), un framework rivoluzionario che introdusse il two-way data binding nel browser. Tuttavia, con la crescita delle applicazioni web, AngularJS mostrò limiti di performance e scalabilità.

Nel 2016, il team di Google rilasciò Angular 2, una riscrittura completa del framework. Angular 2 abbandonò JavaScript in favore di TypeScript, adottò un’architettura basata su componenti e introdusse un sistema di change detection molto più efficiente.

Evoluzione delle versioni

Versione Anno Novità principali
Angular 2 2016 Riscrittura completa, TypeScript, componenti
Angular 4 2017 Animazioni separate, HTTP client migliorato
Angular 6 2018 Angular Elements, Tree Shakeable Providers
Angular 8 2019 Differential Loading, Lazy Loading semplificato
Angular 14 2022 Standalone Components, Typed Forms
Angular 16 2023 Signals, Server-Side Rendering migliorato
Angular 17 2023 Nuova sintassi di controllo del flusso, Deferrable Views
Angular 18+ 2024 Zoneless change detection, stabilizzazione Signals

Architettura di Angular

L’architettura di Angular si basa su diversi concetti chiave che lavorano insieme per creare applicazioni modulari e manutenibili.

I pilastri dell’architettura

┌─────────────────────────────────────────────┐
│                 Applicazione                 │
├─────────────────────────────────────────────┤
│  Moduli (NgModules) / Standalone Components │
├──────────┬──────────┬───────────────────────┤
│Componenti│ Direttive│        Pipe           │
├──────────┴──────────┴───────────────────────┤
│              Servizi + DI                    │
├─────────────────────────────────────────────┤
│     Router │ Forms │ HttpClient │ RxJS      │
└─────────────────────────────────────────────┘

Componenti

I componenti sono i mattoni fondamentali di un’applicazione Angular. Ogni componente è composto da una classe TypeScript, un template HTML e (opzionalmente) stili CSS.

@Component({
  selector: 'app-profilo-utente',
  standalone: true,
  template: `
    <div class="profilo">
      <h2>{{ utente.nome }}</h2>
      <p>Email: {{ utente.email }}</p>
    </div>
  `,
  styles: [`
    .profilo {
      padding: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
  `]
})
export class ProfiloUtenteComponent {
  utente = { nome: 'Mario Rossi', email: 'mario@esempio.it' };
}

Servizi e Dependency Injection

I servizi incapsulano la logica di business e vengono iniettati nei componenti tramite il sistema di Dependency Injection (DI) di Angular.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private autenticato = false;

  login(email: string, password: string): boolean {
    // logica di autenticazione
    this.autenticato = true;
    return true;
  }

  isAutenticato(): boolean {
    return this.autenticato;
  }
}

TypeScript-First

Angular è stato progettato fin dall’inizio per essere utilizzato con TypeScript. Questo approccio porta vantaggi significativi.

Sicurezza dei tipi

TypeScript cattura errori a compile-time che altrimenti emergerebbero solo a runtime:

interface Prodotto {
  id: number;
  nome: string;
  prezzo: number;
  disponibile: boolean;
}

@Component({
  selector: 'app-lista-prodotti',
  standalone: true,
  template: `
    @for (prodotto of prodotti; track prodotto.id) {
      <div>{{ prodotto.nome }} - {{ prodotto.prezzo | currency:'EUR' }}</div>
    }
  `
})
export class ListaProdottiComponent {
  prodotti: Prodotto[] = [];

  aggiungiProdotto(prodotto: Prodotto): void {
    this.prodotti.push(prodotto);
  }
}

Decoratori

Angular sfrutta i decoratori TypeScript per definire metadati su classi, proprietà e metodi:

// @Component, @Injectable, @Input, @Output sono tutti decoratori
@Component({ /* ... */ })
export class MioComponente {
  @Input() titolo: string = '';
  @Output() cliccato = new EventEmitter<void>();
}

Confronto con React e Vue

Angular vs React

Aspetto Angular React
Tipo Framework completo Libreria UI
Linguaggio TypeScript (nativo) JavaScript/TypeScript
Data Binding Two-way One-way
CLI Angular CLI integrata Create React App / Vite
Gestione stato Servizi + RxJS + Signals Redux / Zustand / Context
Curva di apprendimento Più ripida Più graduale
Ideale per App enterprise complesse App di ogni dimensione

Angular vs Vue

Aspetto Angular Vue
Tipo Framework completo Framework progressivo
Complessità Alta Media
Dimensione bundle Maggiore Minore
Documentazione Dettagliata e vasta Chiara e concisa
Ecosistema Tutto incluso Modulare

Angular eccelle in contesti enterprise dove servono struttura rigida, scalabilità e un ecosistema completo. React e Vue offrono maggiore flessibilità ma richiedono decisioni architetturali aggiuntive.

L’Ecosistema Angular

Strumenti ufficiali

  • Angular CLI: strumento da linea di comando per creare, sviluppare e testare applicazioni
  • Angular Material: libreria di componenti UI basata su Material Design
  • Angular CDK: Component Dev Kit per costruire componenti UI personalizzati
  • Angular Universal: server-side rendering (SSR)
  • Angular DevTools: estensione Chrome per il debug

Librerie della community

  • NgRx: gestione dello stato con pattern Redux
  • NGXS: alternativa più semplice a NgRx
  • Transloco / ngx-translate: internazionalizzazione
  • PrimeNG: suite completa di componenti UI
  • Tailwind CSS: integrabile facilmente con Angular

Quando scegliere Angular

Angular è la scelta ideale quando:

  • Si sviluppano applicazioni enterprise di grandi dimensioni
  • Il team è numeroso e necessita di convenzioni rigide
  • Servono funzionalità built-in come form complessi, routing avanzato e DI
  • Si vuole un ecosistema completo con supporto a lungo termine (LTS) da Google
  • Il progetto richiede TypeScript come requisito

Primo passo

Per iniziare con Angular, il modo più rapido è utilizzare Angular CLI:

# Installare Angular CLI globalmente
npm install -g @angular/cli

# Creare un nuovo progetto
ng new mia-app-angular

# Avviare il server di sviluppo
cd mia-app-angular
ng serve

Il server sarà disponibile su http://localhost:4200 e ogni modifica al codice verrà riflessa automaticamente nel browser grazie all’hot module replacement.

SuccessivoInstallazione e CLI