Angular

Angular; software
	Logo
Genere	Framework per applicazioni web
Sviluppatore	Google
Data prima versione	14 settembre 2016
Ultima versione	20.2.1 (21 agosto 2025)
Sistema operativo	Multipiattaforma (su web browser)
Linguaggio	TypeScript
Licenza	open source licenza MIT; (licenza libera)
Lingua	Inglese
Sito web	angular.dev

Angular (noto anche come Angular 2) è un framework open source per lo sviluppo di Single-page application con licenza MIT^[1], evoluzione di AngularJS. Sviluppato principalmente da Google, la sua prima release è avvenuta il 14 settembre 2016^[2].

Caratteristiche

Angular è stato concepito da Google come riscrittura da zero di AngularJS, risultando in un prodotto completamente diverso e non compatibile. A differenza di AngularJS, che supporta solo il linguaggio JavaScript, Angular è scritto in TypeScript^[3].

Le applicazioni sviluppate in Angular sono Single-page application, pertanto vengono eseguite interamente dal web browser dopo essere state scaricate dal web server. Angular mantiene la compatibilità con tutti i principali web browser moderni, come Chrome, Microsoft Edge, Opera, Firefox, Safari ed altri^[4].

Architettura a componenti

Angular utilizza un'architettura basata sui componenti che permette agli sviluppatori di costruire interfacce e parti di interfaccia modulari e riutilizzabili.

Ciascun componente incapsula il proprio HTML, CSS e TypeScript, rendendo possibile gestire e testare in maniera indipendente le singole parti di un'applicazione.

Ogni componente è composto da^[5]:

un file TypeScript contenente una classe che definisce la logica di funzionamento;
un file HTML che specifica il template (ovvero quello che viene visualizzato sulla pagina);
un selettore, che serve a definire il nome con cui questo componente viene incluso in altri componenti;
opzionalmente, un file CSS che definisce lo stile specifico per quel componente.

Angular supporta la definizione di template, stili e logica in un singolo file TypeScript (single file component).

Data binding

Angular support il two-way data binding, ovvero la possibilità di mantenere sincronizzato il valore sottostante di un dato e la sua rappresentazione nell'interfaccia grafica. Il framework fornisce delle primitive per garantire che una variazione del dato sottostante venga immediatamente riportata sull'interfaccia, o che un'interazione da parte dell'utente venga riportata sul dato sottostante, ad esempio nel caso di form html. ^[6]

Dependency injection

Angular incorpora un sistema di Dependency injection che permette di gestire e iniettare facilmente le dipendenze dei componenti, promuovendo la modularità delle applicazioni e facilitando il testing.

Direttive

Angular estende l'HTML attraverso le direttive, attributi HTML aggiuntivi che permettono di modificare il comportamento o l'aspetto degli elementi del DOM.

Routing

Angular include un [[ che permette agli sviluppatori di definire e gestire gli stati delle applicazioni e i percorsi di navigazione, rendendo possibile costruire single page applications con strutture ad albero complesse.

Angular CLI

Il progetto Angular include la Angular CLI (command line interface), uno strumento da linea di comando che facilita la creazione e lo sviluppo di applicazioni Angular. Per esempio:

il comando ng new permette di creare una nuova applicazione Angular;
il comando ng generate permette di generare scheletri per i vari componenti di cui è composta un'applicazione:
il comando ng serve permette di avviare l'applicazione per lo sviluppo locale.

Esempi

Componente

Di seguito un componente Counter che permette di visualizzare un contatore e di agire sul suo stato. Il componente e definito in tre file diversi: counter.component.ts, counter.component.html, counter.component.css.

// File: counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter', // Selettore
  templateUrl: './counter.component.html', // File del template
  styleUrls: ['./counter.component.css'] // File degli stili
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

// File: counter.component.html
<div class="counter-container">
  <h2>Counter: {{ count }}</h2> <!-- binding in lettura: il valore di count è mostrato nel template -->
  <div class="button-container">
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  </div>
</div>

// File: counter.component.css
.counter-container {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 20px;
}

.button-container {
  margin-top: 10px;
}

button {
  font-size: 18px;
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

Single file component

Lo stesso componente in versione single file è riportato di seguito:

// File: counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div class="counter-container">
      <h2>Counter: {{ count }}</h2>
      <div class="button-container">
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
      </div>
    </div>
  `,
  styles: [`
    .counter-container {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    .button-container {
      margin-top: 10px;
    }
    button {
      font-size: 18px;
      margin: 0 5px;
      padding: 5px 10px;
      cursor: pointer;
    }
  `]
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

In un file html di un altro component, a questo punto, è possibile incorporare il componente dichiarato precedentemente inserendo nel template il selettore del componente:

<app-counter></app-counter>

Note

^ angular: One framework. Mobile & desktop, Angular, 18 gennaio 2018. URL consultato il 18 gennaio 2018.
^ Angular, version 2: proprioception-reinforcement, su angularjs.blogspot.co.uk. URL consultato il 18 gennaio 2018 (archiviato dall'url originale il 18 gennaio 2018).
^ Angular Minds, Major differences between Angular 1 vs Angular 2 vs Angular 4, su Medium, 4 agosto 2017. URL consultato il 18 gennaio 2018.
^ Angular Docs, su angular.io. URL consultato il 18 gennaio 2018.
^ Anatomy of a component, su angular.dev.
^ (EN) Two-way binding, su angular.dev. URL consultato il 20 settembre 2024.