Architettura
Stack
- Angular 20, componenti standalone (niente NgModules).
- Signals per lo state.
- SCSS per lo styling - niente Tailwind.
- FontAwesome tramite
@fortawesome/angular-fontawesome. @ngx-translateper l'i18n.- Costruito con il builder
@angular/build:application; Bun come gestore di pacchetti.
Struttura
Il codice sorgente dell'applicazione si trova in src/app/:
app.ts,app.config.ts,app.routes.ts- componente root, provider, routing.app.config.server.ts,app.routes.server.ts- configurazione per il server-side rendering.components/- elementi UI riutilizzabili (hero,features,faq,screenshots,download,navigation,footer,legal,language-switcher,theme-toggle).pages/- view instradate (home,not-found).services/- servizi singleton (language,theme).
Convenzioni di codice Angular 20
Queste convenzioni sono obbligatorie per tutti i contributi.
Componenti
- Solo componenti standalone. Non impostare
standalone: truenei decoratori - è il valore predefinito. - Usa le funzioni
input()/output()invece dei decoratori@Input()/@Output(). - Imposta
changeDetection: ChangeDetectionStrategy.OnPush. - Mantieni i componenti piccoli e con una singola responsabilità; per i componenti piccoli preferisci i template inline.
- Preferisci i Reactive Forms ai form template-driven.
- Metti gli host binding nell'oggetto
hostdel decoratore - non usare@HostBinding/@HostListener. - Usa i binding
classestyle- nonngClass/ngStyle. - Usa
NgOptimizedImageper le immagini statiche (nota: non funziona con le immagini base64 inline). - Implementa il lazy loading per le route delle feature.
State
- Usa i signals per lo state locale dei componenti e
computed()per lo state derivato. - Non usare
mutatesui signals - usaupdateoset. - Mantieni le trasformazioni dello state pure e prevedibili.
Template
- Usa il control flow nativo (
@if,@for,@switch) - non*ngIf/*ngFor/*ngSwitch. - Usa la pipe
asyncper gli observable. Mantieni i template privi di logica complessa.
Servizi
- Singola responsabilità;
providedIn: 'root'per i singleton. - Usa la funzione
inject()invece della dependency injection nel costruttore.
TypeScript
- Controllo dei tipi rigoroso. Preferisci l'inferenza dei tipi quando è evidente.
- Evita
any; usaunknownquando il tipo non è certo.
