Angular: differenze tra le versioni

Versione delle 15:16, 25 feb 2025

Versione attuale delle 08:54, 26 giu 2025

(3 versioni intermedie di uno stesso utente non sono mostrate)

Riga 59:

== 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 è uscitastata 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.

Riga 173:

=== 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 203 ⟶ 207:

</div>

// File: counter.component.css

.counter-container {

font-family: Arial, sans-serif;

Riga 224 ⟶ 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 231 ⟶ 236:

template: `

<div class="counter-container">

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

<div class="button-container">

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

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