Angular: differenze tra le versioni

Versione delle 14:39, 3 ott 2024

Versione attuale delle 08:54, 26 giu 2025

(12 versioni intermedie di 4 utenti non mostrate)

Riga 20:

==Caratteristiche==

[[File:Architecture of an Angular 2 application.png|miniatura|Architettura di un'applicazione fatta con Angular|300x300px]]

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 di programmazione|linguaggio]] [[JavaScript]], Angular è scritto in [[TypeScript]]<ref>{{Cita web|url=https://www.angularminds.com/blog/article/comparison-difference-between-angular1-vs-angular2-vs-angular4.html|titolo=Major differences between Angular 1 vs Angular 2 vs Angular 4|autore=Angular Minds|sito=Medium|data=2017-08-04|accesso=2018-01-18}}</ref>.

Riga 41 ⟶ 42:

=== Dependency injection ===

{{Vedi anche|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.

Riga 47 ⟶ 49:

=== Routing ===

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.

=== 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 <code>ng new</code> permette di creare una nuova applicazione Angular;

Riga 72 ⟶ 74:

!Note

|-

|'''Angular 18'''2

|14 settembre 2016

|22 maggio 2024

|Release iniziale.

|Zoneless change detection sperimentale e miglioramenti del rendering server-side.<ref>{{Cita web|url=https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe|titolo=Angular v18 is now available!|autore=Minko Gechev|sito=Medium|data=2024-05-23|lingua=en|accesso=2024-09-20}}</ref>

|

|-

|Angular 174

|23 marzo 2017

|8 novembre 2023

|Aggiunto il comando <code>ng update</code>

|Nuovo build system, nuova sintassi per il control flow nei template, nuovo sito per i tutorial e la documentazione.<ref>{{Cita web|url=https://blog.angular.dev/introducing-angular-v17-4d7033312e4b|titolo=Introducing Angular v17|autore=Minko Gechev|sito=Medium|data=2023-11-30|lingua=en|accesso=2024-09-20}}</ref>

|[[Retrocompatibilità|Retrocompatibile]] con Angular 2.

|

|-

|Angular 164.3

|18 luglio 2017

|3 maggio 2023

|Introdotto l'HttpClient.

|Partial hydration per il server side rendering (Angular Universal), supporto sperimentale ai test Jet, sistema di sviluppo locale basato su Esbuild.

|

|-

| Angular 155

|181 novembre 20222017

|Supporto per le [[Progressive Web App]].

|Componenti standalone, directive composition.<ref>{{Cita web|url=https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8|titolo=Angular v15 is now available!|autore=Minko Gechev|sito=Medium|data=2022-11-21|lingua=en|accesso=2024-09-20}}</ref>

|

|-

| Angular 146

|24 giugnomaggio 20222018

|SupportSupporto sperimentale per gli elementi html custom.

|Form tipizzati, componenti standalone, nuove primitive per l'Angular CDK (component developer kit).

|

|-

|Angular 137

|18 ottobre 2018

|4 novembre 2021

|Aggiornamenti ad Angular Material e al CDK, migliorate le performance dell'applicazione compilata.

|Rimosso il motore di rendering deprecato View Engine.

|

|-

|Angular 128

|1228 maggio 20212019

|Anteprima di Angular Ivy, caricamento differenziale per il codice dell'applicazione, import dinamici delle rotte, ''[[Webweb worker]]'', supportsupporto adi TypeScript 3.4.

|Deprecato il supporto per [[Internet Explorer 11]].

|

|-

|Angular 119

|116 novembrefebbraio 2020

|Compilazione [[Compilatore AOT|Compilazione AOT]] con motore Ivy abilitata di default.

|Supporto sperimentale a [[Webpack]] 5.

|

|-

Riga 117 ⟶ 119:

|

|-

|Angular 911

|611 febbraionovembre 2020

|Supporto sperimentale a [[Webpack]] 5.

|Compilazione [[Compilatore AOT|AOT]] con motore Ivy abilitata di default.

|

|-

|Angular 812

|2812 maggio 20192021

|Deprecato il supporto per [[Internet Explorer 11]].

|Anteprima di Angular Ivy, caricamento differenziale per il codice dell'applicazione, import dinamici delle rotte, [[Web worker]], support a TypeScript 3.4.

|

|-

|Angular 713

|4 novembre 2021

|18 ottobre 2018

|Rimosso il motore di rendering deprecato View Engine.

|Aggiornamenti ad Angular Material e al CDK, migliorate le performance dell'applicazione compilata.

|

|-

|Angular 614

|42 maggiogiugno 20182022

|Form tipizzati, componenti ''standalone'', nuove primitive per l'Angular CDK (component developer kit).

|Support sperimentale per gli elementi html custom.

|

|-

|Angular 515

|118 novembre 20172022

|Componenti ''standalone'', ''directive composition''.<ref>{{Cita web|lingua=en|autore=Minko Gechev|url=https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8|titolo=Angular v15 is now available!|autore=Minko Gechev|sito=Medium|data=2022-11-21|lingua=en|accesso=2024-09-20}}</ref>

|Supporto per le [[Progressive Web App]].

|

|-

|Angular 4.316

|3 maggio 2023

|18 luglio 2017

|''Partial hydration'' per il ''server side rendering'' (Angular Universal), supporto sperimentale ai test Jet, sistema di sviluppo locale basato su Esbuild.

|Introdotto l'HttpClient.

|

|-

|Angular 417

|8 novembre 2023

|23 marzo 2017

|Nuovo ''build system'', nuova sintassi per il control[[controllo flowdi flusso]] nei template, nuovo sito per i tutorial e la documentazione.<ref>{{Cita web|lingua=en|autore=Minko Gechev|url=https://blog.angular.dev/introducing-angular-v17-4d7033312e4b|titolo=Introducing Angular v17|autore=Minko Gechev|sito=Medium|data=2023-11-30|lingua=en|accesso=2024-09-20}}</ref>

|Aggiunto il comando <code>ng update</code>

|

|[[Retrocompatibilità|Retrocompatibile]] con Angular 2.

|-

|Angular 218

|22 maggio 2024

|14 settembre 2016

|''Zoneless change detection'' sperimentale e miglioramenti del rendering ''server- side rendering''.<ref>{{Cita web|url=https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe|titolo=Angular v18 is now available!|autore=Minko Gechev|sito=Medium|data=2024-05-23|lingua=en|accesso=2024-09-20}}</ref>

|Release iniziale.

|

|-

|Angular 19

|19 novembre 2024

|Le direttive, i componenti e le pipe sono diventate ''standalone'' di default.<ref>{{Cita web|lingua=en|autore=Minko Gechev|url=https://blog.angular.dev/meet-angular-v19-7b29dfd05b84|titolo=Meet Angular v19|data=19 novembre 2024|accesso=28 gennaio 2025}}</ref>

|

|}

=== Supporto e pianificazione deidelle rilasciversioni ===

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 rilasciatapubblicata circa ogni 6 mesi, e per ogni major vengono rilasciatepubblicate da 1 a 3 versioni minor.<ref>{{Cita web|url=https://angular.dev/reference/releases/|titolo=Versioning and release • Angular|sito=angular.dev|lingua=en|accesso=2024-09-20}}</ref>

== 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: <code>counter.component.ts</code>, <code>counter.component.html</code>, <code>counter.component.css</code>.<syntaxhighlight lang="typescript" line="1">

// File: counter.component.ts

import { Component, signal } from '@angular/core';

import { CommonModule } from '@angular/common';

@Component({

selector: 'app-counter', // Selettore

standalone: true,

templateUrl: './counter.component.html', // File del template

imports: [CommonModule],

styleUrls: ['./counter.component.css'] // File degli stili

templateUrl: './counter.component.html', // File del template

styleUrl: './counter.css'

})

export class CounterComponentCounter {

count = signal(0);

increment() {

this.count.update(c => c ++ 1);

}

decrement() {

this.count.update(c => c -- 1);

}

}

// 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>

Riga 196 ⟶ 207:

</div>

// File: counter.component.css

.counter-container {

font-family: Arial, sans-serif;

Riga 217 ⟶ 229:

=== Single file component ===

Lo stesso componente in versione single file è riportato di seguito:<syntaxhighlight lang="typescript" line="1">

// File: counter.component.ts

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

Riga 224 ⟶ 236:

template: `

<div class="counter-container">

<h2>Counter: {{ count() }}</h2>

<div class="button-container">

<button (click)="increment()">+</button>

Riga 248 ⟶ 260:

`]

})

export class CounterComponentCounter {

count = signal(0);

increment() {

this.count.update(c => c ++ 1);

}

decrement() {

this.count.update(c => c -- 1);

}

}

</syntaxhighlight>In un file html di un altro component, a questo punto, è possibile incorporare il componente dichiarato precedentemente inserendo nel template il selettore del componente: <syntaxhighlight lang="html">

<app-counter></app-counter>