Angular

Da Wikipedia, l'enciclopedia libera.
Vai alla navigazione Vai alla ricerca
Angular
software
Logo
Logo
GenereFramework per applicazioni web
SviluppatoreGoogle
Data prima versione14 settembre 2016
Ultima versione18.2.8 (10 ottobre 2024)
Sistema operativoMultipiattaforma (su web browser)
LinguaggioTypeScript
Licenzaopen source licenza MIT
(licenza libera)
LinguaInglese
Sito webangular.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

[modifica | modifica wikitesto]

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

[modifica | modifica wikitesto]

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).

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

[modifica | modifica wikitesto]

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.

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

Angular include un router 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.

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.

Angular nasce come riscrittura totale di AngularJS da parte di Google. È stato annunciato alla ng-Europe Conference del 22-23 ottobre 2014.[7] La prima versione stabile è stata rilasciata il 14 settembre 2016, dopo una versione in anteprima per gli sviluppatori (aprile 2015), una versione beta (dicembre 2014) ed una release candidate (maggio 2016).

Dalla versione 9 in poi il motore di rendering di default è Ivy, ed è deprecato il predecessore View Engine.[8] View Engine è stato poi rimosso completamente con la versione 13.

Inizialmente ci si riferiva ad Angular come "Angular 2", essendo di fatto l'evoluzione di Angular 1.0 (comunemente noto come AngularJS). L'adozione da parte del team di sviluppo del versionamento semantico ha però spinto Google a standardizzare "AngularJS" come nome per tutte le versioni precedenti alle 2, e Angular per quelle dalla 2 in poi, in modo da distinguere nettamente e da rimuovere qualsiasi ambiguità tra la versione originale e la riscrittura.[9]

Versione Data di pubblicazione Caratteristiche principali Note
Angular 18 22 maggio 2024 Zoneless change detection sperimentale e miglioramenti del rendering server-side.[10]
Angular 17 8 novembre 2023 Nuovo build system, nuova sintassi per il control flow nei template, nuovo sito per i tutorial e la documentazione.[11]
Angular 16 3 maggio 2023 Partial hydration per il server side rendering (Angular Universal), supporto sperimentale ai test Jet, sistema di sviluppo locale basato su Esbuild.
Angular 15 18 novembre 2022 Componenti standalone, directive composition.[12]
Angular 14 2 giugno 2022 Form tipizzati, componenti standalone, nuove primitive per l'Angular CDK (component developer kit).
Angular 13 4 novembre 2021 Rimosso il motore di rendering deprecato View Engine.
Angular 12 12 maggio 2021 Deprecato il supporto per Internet Explorer 11.
Angular 11 11 novembre 2020 Supporto sperimentale a Webpack 5.
Angular 10 24 giugno 2020 Nuovo componente per la selezione degli intervalli di date (Date Range Picker) nella libreria Material UI.
Angular 9 6 febbraio 2020 Compilazione AOT con motore Ivy abilitata di default.
Angular 8 28 maggio 2019 Anteprima di Angular Ivy, caricamento differenziale per il codice dell'applicazione, import dinamici delle rotte, Web worker, support a TypeScript 3.4.
Angular 7 18 ottobre 2018 Aggiornamenti ad Angular Material e al CDK, migliorate le performance dell'applicazione compilata.
Angular 6 4 maggio 2018 Support sperimentale per gli elementi html custom.
Angular 5 1 novembre 2017 Supporto per le Progressive Web App.
Angular 4.3 18 luglio 2017 Introdotto l'HttpClient.
Angular 4 23 marzo 2017 Aggiunto il comando ng update Retrocompatibile con Angular 2.
Angular 2 14 settembre 2016 Release iniziale.

Supporto e pianificazione dei rilasci

[modifica | modifica wikitesto]

Tutte le versioni major sono supportate per 18 mesi. Questi 18 mesi consistono in 6 mesi di supporto attivo, durante i quali vengono effettuati aggiornamenti regolari, e in 12 mesi di supporto a lungo termine (LTS), durante i quali vengono effettuati solo gli aggiornamenti critici e di sicurezza.

In generale una nuova major viene rilasciata circa ogni 6 mesi, e per ogni major vengono rilasciate da 1 a 3 versioni minor.[13]

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

[modifica | modifica wikitesto]

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>
  1. ^ angular: One framework. Mobile & desktop, Angular, 18 gennaio 2018. URL consultato il 18 gennaio 2018.
  2. ^ Angular, version 2: proprioception-reinforcement, su angularjs.blogspot.co.uk. URL consultato il 18 gennaio 2018 (archiviato dall'url originale il 18 gennaio 2018).
  3. ^ Angular Minds, Major differences between Angular 1 vs Angular 2 vs Angular 4, su Medium, 4 agosto 2017. URL consultato il 18 gennaio 2018.
  4. ^ Angular Docs, su angular.io. URL consultato il 18 gennaio 2018.
  5. ^ Anatomy of a component, su angular.dev.
  6. ^ (EN) Two-way binding, su angular.dev. URL consultato il 20 settembre 2024.
  7. ^ ng-europe - The first AngularJS European conference in Paris, France., su web.archive.org, 30 aprile 2018. URL consultato il 20 settembre 2024 (archiviato dall'url originale il 30 aprile 2018).
  8. ^ Angular, su v12.angular.io. URL consultato il 20 settembre 2024.
  9. ^ Stephen Fluin, Angular: Branding Guidelines for Angular and AngularJS, su Angular, 27 gennaio 2017. URL consultato il 20 settembre 2024 (archiviato dall'url originale il 4 febbraio 2017).
  10. ^ (EN) Minko Gechev, Angular v18 is now available!, su Medium, 23 maggio 2024. URL consultato il 20 settembre 2024.
  11. ^ (EN) Minko Gechev, Introducing Angular v17, su Medium, 30 novembre 2023. URL consultato il 20 settembre 2024.
  12. ^ (EN) Minko Gechev, Angular v15 is now available!, su Medium, 21 novembre 2022. URL consultato il 20 settembre 2024.
  13. ^ (EN) Versioning and release • Angular, su angular.dev. URL consultato il 20 settembre 2024.

Voci correlate

[modifica | modifica wikitesto]

Altri progetti

[modifica | modifica wikitesto]

Collegamenti esterni

[modifica | modifica wikitesto]