L'ultima versione di Angular è stata rilasciata a novembre. Minko Gechev riassume le novità più importanti nel suo annuncio di rilascio.

In questo articolo, condivido risorse che ti insegneranno come funzionano queste nuove funzionalità di Angular:

• API autonome (ora sono stabili)
• API standalone tremolante del router e protezioni del router funzionali
• HttpClient API standalone agitabile ad albero
• API composizione direttiva
• Direttiva immagine

API autonome

Il team di Angular ha introdotto le API standalone in Angular v14 come funzionalità di anteprima per sviluppatori. In Angular v15, non sono più nell'anteprima per sviluppatori e fanno parte della superficie API stabile.

Componenti, direttive e pipe ora possono essere contrassegnati come autonomi: true. Le classi angolari contrassegnate come autonome non devono essere dichiarate in un NgModule.

La guida "Introduzione ai componenti autonomi" nella documentazione di Angular spiega come creare e utilizzare componenti autonomi.

API standalone tremolante del router e protezioni del router funzionali

Andrew Scott spiega come possiamo creare router senza RouterModulee come utilizzare protezioni router funzionali:

Per ulteriori dettagli su come ridurre le dimensioni del pacchetto con router e componenti autonomi, leggi l'articolo di Kevin Kreuzer :

HttpClient API standalone agitabile ad albero

Ora possiamo utilizzare l'API del client HTTP senza l'estensione HttpClientModule. Netanel Basal ci mostra come applicare questa nuova funzionalità e dimostra come possiamo definire gli intercettori nei moduli caricati in modo pigro:

API composizione direttiva

Dalla documentazione ufficiale:

Le direttive angolari offrono un ottimo modo per incapsulare comportamenti riutilizzabili: le direttive possono applicare attributi, classi CSS e listener di eventi a un elemento.

L'API di composizione della direttiva consente di applicare le direttive all'elemento host di un componente dall'interno del componente.

Cédric Exbrayat spiega perché abbiamo bisogno di questa nuova API:

Henrique Custódia illustra con un ottimo esempio come funziona l'API di composizione della direttiva:

Angular 15: utilizzo dell'API di composizione della direttiva

Direttiva immagine

La guida "Introduzione a NgOptimizedImage" nella documentazione di Angular spiega come la nuova NgOptimizedImagedirettiva standalone ci aiuta ad adottare le migliori pratiche di ottimizzazione delle prestazioni per il caricamento delle immagini.

Fábio Englert Moutinho mette alla prova la NgOptimizedImagedirettiva in un esempio di applicazione di e-commerce e ottiene punteggi Lighthouse fino al 50% migliori:

➕ Hai visto altre risorse che dovrei aggiungere a questa guida allo studio di Angular 15? Si prega di inviarmelo in modo che io possa inserirlo nell'articolo!

‍Informazioni sull'autore

Mi chiamo Gergely Szerovay , lavoro come responsabile del capitolo di sviluppo frontend. Insegnare (e imparare) Angular è una delle mie passioni. Consumo quotidianamente contenuti relativi ad Angular: articoli, podcast, conferenze, ecc.

Se sei interessato alla mia raccolta mensile di fantastiche risorse Angular, iscriviti alla mia pubblicazione chiamata Angular Addicts. Puoi leggere i numeri precedenti qui .

E se ultimamente hai visto un buon articolo, tweet o altra risorsa relativa ad Angular, per favore fammelo sapere qui nei commenti o mandami un DM su Twitter ! Potrei presentarlo nel prossimo numero di Angular Addicts!

Inoltre, per favore fatemi sapere quali altri argomenti Angular vi interessano, ho molte bozze di articoli qui su Medium in attesa di essere pubblicate.

Seguimi su Medium , Twitter o LinkedIn per saperne di più su Angular!