Angular: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
mNessun oggetto della modifica Etichette: Modifica visuale Modifica da mobile Modifica da web per mobile |
|||
| (25 versioni intermedie di 12 utenti non mostrate) | |||
Riga 1:
{{Software
|Nome = Angular
|Logo = <!-- su Wikidata -->
|Sviluppatore = [[Google (azienda)|Google]]
|DataPrimaVersione = {{Data|14|09|2016}}
|UltimaVersione = <!-- su Wikidata -->
|DataUltimaVersione = <!-- su Wikidata -->
|UltimaVersioneBeta =
|DataUltimaVersioneBeta = {{Data|
|SistemaOperativo = multipiattaforma
|NotaSistemaOperativo = {{sp}}(su [[web browser]])
|Linguaggio =
|Genere =
|Licenza = [[open source]] [[licenza MIT]]
|Lingua = Inglese
|SoftwareLibero = Sì
|SitoWeb = <!-- su Wikidata -->
}}
'''Angular
==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>.
Le applicazioni sviluppate in Angular sono Single-page application, pertanto vengono eseguite interamente dal [[web browser]] dopo essere state scaricate dal [[web server]]
=== 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<ref>{{Cita web|url=https://angular.dev/guide/components|titolo=Anatomy of a component}}</ref>:
* 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|form html]].<ref>{{Cita web|url=https://angular.dev/guide/templates/two-way-binding/|titolo=Two-way binding|sito=angular.dev|lingua=en|accesso=2024-09-20}}</ref>
=== 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.
=== Direttive ===
Angular estende l'HTML attraverso le direttive, attributi HTML aggiuntivi che permettono di modificare il comportamento o l'aspetto degli elementi del [[Document Object Model|DOM]].
=== 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;
* il comando <code>ng generate</code> permette di generare scheletri per i vari componenti di cui è composta un'applicazione:
* il comando <code>ng serve</code> permette di avviare l'applicazione per lo sviluppo locale.
== Storia ==
Angular nasce come riscrittura totale di AngularJS da parte di Google. È stato annunciato alla ng-Europe Conference del 22-23 ottobre 2014.<ref>{{Cita web|url=https://web.archive.org/web/20180430113923/https://2015.ngeurope.org/#schedule|titolo=ng-europe - The first AngularJS European conference in Paris, France.|sito=web.archive.org|data=2018-04-30|accesso=2024-09-20}}</ref> 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.<ref>{{Cita web|url=https://v12.angular.io/guide/ivy|titolo=Angular|sito=v12.angular.io|accesso=2024-09-20}}</ref> View Engine è stato poi rimosso completamente con la versione 13.
=== Nome ===
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 [[Versione (sviluppo software)|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.<ref>{{Cita web|url=https://web.archive.org/web/20170204142402/http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html|titolo=Angular: Branding Guidelines for Angular and AngularJS|autore=Stephen Fluin|sito=Angular|data=2017-01-27|accesso=2024-09-20}}</ref>
=== Versioni ===
{| class="wikitable"
|+
!Versione
!Data di pubblicazione
!Caratteristiche principali
!Note
|-
|Angular 2
|14 settembre 2016
|Release iniziale.
|
|-
|Angular 4
|23 marzo 2017
|Aggiunto il comando <code>ng update</code>
|[[Retrocompatibilità|Retrocompatibile]] con Angular 2.
|-
|Angular 4.3
|18 luglio 2017
|Introdotto l'HttpClient.
|
|-
|Angular 5
|1 novembre 2017
|Supporto per le [[Progressive Web App]].
|
|-
|Angular 6
|4 maggio 2018
|Supporto sperimentale per gli elementi html custom.
|
|-
|Angular 7
|18 ottobre 2018
|Aggiornamenti ad Angular Material e al CDK, migliorate le performance dell'applicazione compilata.
|
|-
|Angular 8
|28 maggio 2019
|Anteprima di Angular Ivy, caricamento differenziale per il codice dell'applicazione, import dinamici delle rotte, ''[[web worker]]'', supporto di TypeScript 3.4.
|
|-
|Angular 9
|6 febbraio 2020
|[[Compilatore AOT|Compilazione AOT]] con motore Ivy abilitata di default.
|
|-
|Angular 10
|24 giugno 2020
|Nuovo componente per la selezione degli intervalli di date (Date Range Picker) nella libreria Material UI.
|
|-
|Angular 11
|11 novembre 2020
|Supporto sperimentale a [[Webpack]] 5.
|
|-
|Angular 12
|12 maggio 2021
|Deprecato il supporto per [[Internet Explorer 11]].
|
|-
|Angular 13
|4 novembre 2021
|Rimosso il motore di rendering deprecato View Engine.
|
|-
|Angular 14
|2 giugno 2022
|Form tipizzati, componenti ''standalone'', nuove primitive per l'Angular CDK (component developer kit).
|
|-
|Angular 15
|18 novembre 2022
|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!|sito=Medium|data=2022-11-21|accesso=2024-09-20}}</ref>
|
|-
|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 17
|8 novembre 2023
|Nuovo ''build system'', nuova sintassi per il [[controllo di 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|sito=Medium|data=2023-11-30|accesso=2024-09-20}}</ref>
|
|-
|Angular 18
|22 maggio 2024
|''Zoneless change detection'' sperimentale e miglioramenti del ''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>
|
|-
|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 delle versioni ===
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 pubblicata circa ogni 6 mesi, e per ogni major vengono pubblicate 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.ts</code>, <code>counter.html</code>, <code>counter.css</code>.<syntaxhighlight lang="typescript" line="1">
// File: counter.ts
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-counter',
standalone: true,
imports: [CommonModule],
templateUrl: './counter.html',
styleUrl: './counter.css'
})
export class Counter {
count = signal(0);
increment() {
this.count.update(c => c + 1);
}
decrement() {
this.count.update(c => c - 1);
}
}
// File: counter.html
<div class="counter-container">
<h2>Counter: {{ count() }}</h2>
<div class="button-container">
<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
</div>
</div>
// File: counter.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;
}
</syntaxhighlight>
=== Single file component ===
Lo stesso componente in versione single file è riportato di seguito:<syntaxhighlight lang="typescript" line="1">
// File: counter.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 Counter {
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>
</syntaxhighlight>
==Note==
Riga 35 ⟶ 281:
==Voci correlate==
*[[AngularJS]]
*[[Single-page application]]
*[[
*[[TypeScript]]
==Altri progetti==
Riga 42 ⟶ 289:
== Collegamenti esterni ==
* {{Collegamenti esterni}}
{{Framework per applicazioni web}}
{{Portale|informatica|internet}}
| |||