Le novita in Angular 15

Le novita in Angular 15.

La versione Angular 15, il framework per applicazioni Web basato su TypeScript sviluppato da Google, è stata rilasciata il 16 novembre 2022, con il precedente successo di Angular 14.

L’ultima versione di Angular 15 è stata lanciata ufficialmente il 16 novembre 2022 con API standalone stabili, consentendo agli sviluppatori di eseguire il bootstrap di un’app utilizzando un singolo componente. Mentre parliamo di Angular 14, è stato il più importante rilasciato dal team di Angular, basato su TypeScript. E supporta anche l’ultima versione di TypeScript 4.7.

Tuttavia, il core team di Angular ha rivelato che la rimozione del compilatore legacy e della pipeline di rendering di Angular nell’ultimo anno ha reso possibile implementare una serie di miglioramenti dell’esperienza degli sviluppatori negli ultimi mesi.

Il risultato di tutte le dozzine di perfezionamenti porta all’ultima versione di Angular 15, che include prestazioni migliorate e una migliore esperienza di sviluppo.

L’ultima versione offre Le novita in Angular 15 seguenti:

• API standalone stabili
• HTTP con provideHttpClient
• API di composizione della direttiva
• Miglioramenti di Angular CLI
• Tracce dello stack migliorate per il debug
• Direttive sull’immagine stabile
• Il router scarta le importazioni predefinite
• Importazioni automatiche nel servizio linguistico
• Dependecy Iniection
• Forms
• Listbox CDK
• Migliore supporto ESbuild sperimentale
• Deprecazione

Puntuale come un orologio svizzero, Angular presenta una nuova versione ogni sei mesi. E oggi, Le novita in Angular 15 si sono fatte strada nella comunità degli sviluppatori.

Angular v15 è costituito da piccole modifiche incrementali, che affrontano i colli di bottiglia del framework Angular e i punti deboli degli sviluppatori Angular. Diremo che questo aggiornamento è uno dei rilasci più importanti e interessanti che Angular ha portato negli ultimi due anni.

Con l’ultima versione di Angular 15, un singolo componente funziona in Angular Elements, router, HttpClient e altrove.

Se parliamo di “componenti autonomi”, semplificano il processo di sviluppo e fungono da alternativa a NgModules, un metodo per gestire le dipendenze che gli sviluppatori consideravano inutilmente complesse.

Ecco le caratteristiche di Angular 15.
Angular v15.0.0 offre molte funzionalità interessanti, offrendo una migliore esperienza di sviluppo. Quindi, analizziamo in dettaglio tutte le funzionalità.

API standalone stabili
La buona notizia è che i componenti autonomi in Angular 15 ora sono finalmente stabili. Pertanto, la funzionalità del componente autonomo è fuori dalla modalità “anteprima sviluppatore”.

Ora Angular 15 può consentire agli sviluppatori di creare applicazioni Angular senza alcun modulo.

Questa è la migliore notizia per gli sviluppatori Junior Angular che desiderano semplificare le loro pratiche di sviluppo e ottimizzare la loro esperienza di sviluppo.

Adesso i componenti autonomi di Angular possono funzionare su Angular. Ora sono completamente funzionanti in Angular Elements, router, HttpClient e altro ancora.

Con l’aiuto di API autonome, si può facilmente eseguire il bootstrap di un’applicazione Angular utilizzando un singolo componente.

HTTP con provideHttpClient
Il nuovo mondo Angular 15, dove i moduli sono opzionali, sottolinea un’evoluzione e un adattamento del supporto HTTP. Con l’aiuto di provideHttpClient(), è possibile offrire HttpClient. Anche gli intercettatori HTTP si stanno evolvendo e ora possono essere definiti come funzioni.

API di composizione della direttiva
Un’altra caratteristica di Angular 15 è l’API di composizione della direttiva.

L’API per la composizione delle direttive offre agli sviluppatori la possibilità di aggiungere direttive agli elementi host, offrendo ad Angular un forte approccio al riutilizzo del codice. Tuttavia, funziona solo con direttive autonome.

Questa funzionalità è stata ispirata dalla richiesta di funzionalità più popolare su GitHub, che chiede di applicare direttive a un elemento host.

CLI ottimizzata con una serie di miglioramenti
Nella versione 15, Angular CLI supporta API stabili autonome. Ciò consente di creare un componente autonomo tramite ng g component –standalone.

Tuttavia, il team di Angular sta pianificando di ottimizzare l’output di ng new.

Il primo passaggio è il passaggio di configurazione che viene ridotto rimuovendo test.ts, polyfills.ts e ambienti. Inoltre, puoi anche specificare i tuoi polyfill direttamente in angular.json nella sezione polyfills .

Adesso è possibile specificare la versione ECMAScript di destinazione utilizzando .browserlist per ridurre ulteriormente i costi generali di configurazione.

Tracce dello stack migliorate per il debug
I miglioramenti nelle tracce dello stack sono stati problemi impegnativi condivisi dagli sviluppatori in un sondaggio per gli sviluppatori al team di Angular. Questo è il motivo per cui il team principale di Angular ha approfondito le difficoltà con l’esperienza di debug.

Di conseguenza, ora Angular 15 offre errori di stack più comprensibili. La versione 15 ora mostra i messaggi di errore focalizzati sul codice invece di mostrare errori da dipendenze di terze parti.

Il team ha collaborato con Chrome DevTools per risolvere questo problema.

Dopo aver collaborato con Chrome DevTools, è stato creato un meccanismo per eliminare gli script provenienti da node_modules con le mappe di origine della notazione tramite la CLI di Angular.

Direttive sull’immagine stabile

La funzionalità della direttiva immagine è ora stabile con Angular 15. Uno dei principali siti Web, Lands’ End, ha implementato questa funzione e ha osservato quasi il 75% dei miglioramenti in LCP.

Le nuove funzionalità per la direttiva immagine sono:

Generazione automatica di srcset: creando la proprietà srcset per te, la direttiva si assicura che venga richiesta l’immagine di dimensioni corrette. Di conseguenza, i tempi di download delle immagini possono essere ridotti.

Modalità riempimento [sperimentale]: facendo in modo che l’immagine riempia il suo contenitore principale, questa opzione elimina la necessità di dichiarare la larghezza e l’altezza dell’immagine. Se non si conoscono le dimensioni delle foto o si vuole utilizzare le immagini di sfondo CSS con la direttiva, questo è uno strumento molto utile.

Si può utilizzare la direttiva autonoma NgOptimizedImage direttamente nel tuo componente o NgModule.

Si semplicemente l’attributo src dell’immagine con ngSrc per usarlo all’interno di un componente e assicurandosi di assegnare alle immagini LCP l’attributo priority.

Il router scarta le importazioni predefinite
Il router ora scarta automaticamente le esportazioni predefinite durante il caricamento lento, semplificando ulteriormente il router e riducendo il boilerplate.

Importazioni automatiche nel servizio linguistico
Ora, i componenti utilizzati nei modelli ma non aggiunti a componenti autonomi o NgModule possono essere importati automaticamente dal servizio per le lingue.

Dependecy Iniection
Il decoratore @Injectable() non è più supportato con la sintassi providedIn: NgModule. Quindi, si può usare providedIn: “root”.

Si utilizza NgModule.providers se i provider devono essere veramente limitati a un singolo NgModule. Inoltre, anche la sintassi providedIn: ‘any’ è deprecata.

Forms
Il pacchetto dei moduli include ora le funzioni di utilità come isFormControl, isFormGroup, isFormRecord e isFormArray.

Poiché i validatori personalizzati includono AbstractControl nelle loro firme ma spesso si sa che il validatore che si scrive è per un certo FormControl, FormGroup, ecc., sono molto utili quando si desidera scrivere un validatore personalizzato.

Listbox CDK
Per la creazione di componenti dell’interfaccia utente, il Component Dev Kit (CDK) fornisce una raccolta di primitive di comportamento. La casella di riepilogo CDK è una nuova primitiva aggiunta nella versione 15 e si può modificare per il proprio progetto.

Per creare interazioni listbox univoche basate sul pattern listbox WAI ARIA, le direttive sono fornite dal modulo @angular/cdk/listbox.

Si ottengono tutti i comportamenti previsti per un’esperienza accessibile quando si usa @angular/cdk/listbox, incluso il supporto per il layout bidi, l’interazione con la tastiera e la gestione dell’attenzione. Ogni direttiva applica i ruoli ARIA ad essa associati all’elemento host.

Migliore supporto ESbuild (sperimentale)
Angular 15 offre supporto sperimentale Sass, modello SVG, sostituzione file e ng build –watch. Va ad aggiornare i tuoi builder angular.json con esbuild da:

“builder”: “@angular-devkit/build-angular:browser”

A:

“builder”: “@angular-devkit/build-angular:browser-esbuild”

Deprecazioni

Ora il provideIn: ‘any’ è deprecato insieme a provideIn: NgModule. Tuttavia, se si desidera utilizzare veri e propri provider di ambito per uno specifico NgModule, si può utilizzare NgModule.providers.

Infatti, con l’evoluzione del layout in CSS, il team smetterà di pubblicare nuove versioni di @angular/flex-layout.

(fonte)

Abbiamo quindi terminato le Le novita in Angular 15 per lo sviluppatore.

Innovaformazione, scuola informatica specialistica promuove la cultura dello sviluppo web e del framework Angular. Per altri articoli del nostro blog cliccate QUI.

Nell’offerta formativa trovate il Corso Angular attivato per le aziende. Modalità classe virtuale online con calendario personalizzabile.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)