Angular: differenze tra le versioni

Versione delle 16:26, 18 gen 2025

Versione attuale delle 08:54, 26 giu 2025

(5 versioni intermedie di 3 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 167 ⟶ 168:

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 202 ⟶ 207:

</div>

// File: counter.component.css

.counter-container {

font-family: Arial, sans-serif;

Riga 223 ⟶ 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 230 ⟶ 236:

template: `

<div class="counter-container">

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

<div class="button-container">

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

Riga 254 ⟶ 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>