Cosa c'è di nuovo in Angular v16?

Angular, gestito da Google, è un framework open source ampiamente utilizzato per lo sviluppo di applicazioni web. Ti offre un robusto toolkit e una gamma di funzionalità che ti consentono di creare applicazioni Web dinamiche, reattive e scalabili.

Il recente lancio della versione 16 di Angular introduce aggiornamenti e miglioramenti entusiasmanti all'esperienza di sviluppo, nonché migliori prestazioni e stabilità delle applicazioni.

1. Segnali angolari

Segnali angolari è una libreria che consente la definizione di valori reattivi e la creazione di dipendenze tra di loro. Ecco un semplice esempio di come utilizzare Angular Signals all'interno di un'applicazione Angular:

@Componente ({
 selettore: 'mia-app',
 indipendente, autonomo: VERO,
 modello: `
{{ nome e cognome() }} "impostaNome('Giovanni')">Clicca</button>
`,
})
esportareclasse Applicazione {
 nome = segnale('Jane');
 cognome = segnale(





instagram viewer

'cerva');
 fullName = calcolato(() =>`${Questo.nome di battesimo()}${Questo.cognome()}`);
costruttore() {
 effetto(() =>consolare.tronco d'albero('Nome cambiato:', Questo.nome e cognome()));
 }
 impostaNome (nuovoNome: corda) {
Questo.firstName.set (nuovoNome);
 }
}

Il suddetto frammento di codice crea un valore calcolato chiamato fullName, che si basa sui segnali firstName e lastName. Inoltre, definisce un effetto, una funzione di callback che viene eseguita ogni volta che il valore dei segnali che legge cambia.

In questo caso, il valore fullName dipende da firstName e lastName, quindi la modifica di uno di essi attiva l'effetto. Quando il valore di firstName è impostato su John, il browser registra il seguente messaggio nella console:

 Nome cambiato: John Doe.

2. Standalone Ng Nuova collezione

A partire da Angular v16, puoi creare nuovi progetti autonomi fin dall'inizio! Per provare l'anteprima per sviluppatori degli schemi autonomi, assicurati di aver installato Angular CLI v16 ed esegui il seguente comando:

ng new --standalone

In questo modo otterrai una struttura del progetto più semplice senza NgModule. Inoltre, tutti i generatori del progetto produrranno direttive, componenti e tubi autonomi!

3. Mappatura automatica dei parametri del percorso

Considera una configurazione di routing come segue:

esportarecost percorsi: percorsi = [{
 sentiero: 'cerca:/id',
 componente: SearchComponent,
 risolvere: {
 searchDettagli: searchResolverFn
 }
}];

Prima di Angular 16, era necessario iniettare il servizio ActivatedRoute per recuperare parametri URL, parametri di query o dati associati per un determinato URL.

Ecco un esempio di come dovevi farlo:

@Componente({
 ...
})
esportareclasse CercaComponente {
 sola lettura #activatedRoute = iniettare (ActivatedRoute);
 id di sola lettura $ = Questo.#activatedRoute.paramMap (mappa(parametri => params.get('id')));
 dati di sola lettura$ = Questo.#activatedRoute.data.map(({
 cercaDettagli
 }) => searchDettagli);
}

Con Angular 16, non è più necessario iniettare il servizio ActivatedRoute per recuperare vari parametri di route perché è possibile associarli direttamente agli input del componente.

Per attivare questa funzionalità in un'applicazione che utilizza il sistema di moduli, impostare il valore corrispondente nelle opzioni RouterModule:

RouterModule.forRoot (percorsi, {
 bindComponentInput: VERO
})

Per un'applicazione autonoma, invece, devi chiamare una funzione:

provideRoutes (percorsi, conComponentInputBinding());

Una volta attivata questa funzionalità, il componente diventa molto più semplice:

@Componente({
 ...
})
esportareclasse CercaComponente {
@Ingresso() id!: corda;
@Ingresso() cercaDettagli!: CercaDettagli;
}

4. Ingresso richiesto

Una caratteristica molto attesa per la comunità Angular è la possibilità di contrassegnare determinati input come richiesti. Fino ad ora, dovevi utilizzare varie soluzioni alternative per raggiungere questo obiettivo, come generare un errore nel file NgOnInit ciclo di vita se la variabile non è stata definita o modificando il selettore del componente per includere l'obbligatorio ingressi.

Tuttavia, entrambe queste soluzioni presentavano vantaggi e svantaggi. A partire dalla versione 16, rendere obbligatorio un input è semplice come fornire un oggetto di configurazione nei metadati dell'annotazione di input:

@Ingresso({
 necessario: VERO
}) nome!: corda;

5. Vite come Dev Server

Angular 14 ha introdotto un nuovo bundler JavaScript chiamato EsBuild, che ha notevolmente migliorato i tempi di compilazione di circa il 40%. Tuttavia, potresti realizzare questo miglioramento delle prestazioni solo durante la fase di compilazione e non durante lo sviluppo con il server di sviluppo.

Nella prossima versione di Angular, lo strumento di compilazione Vite abilita l'uso di EsBuild anche durante lo sviluppo.

Per attivare questa funzione, aggiorna la configurazione del builder nel file angular.json come segue:

"architetto": {
"costruire": {
"costruttore": "@angular-devkit/build-angular: browser-esbuild",
"opzioni": {
 ...
 }
 }

Tieni presente che questa funzionalità è ancora sperimentale.

Migliorare l'esperienza di sviluppo e le prestazioni

La versione 16 di Angular offre aggiornamenti entusiasmanti come Angular Signals per la gestione dei dati, progetto autonomo creazione, mappatura automatica dei parametri del percorso, input richiesti e integrazione di Vite per il miglioramento sviluppo. Questi miglioramenti migliorano l'esperienza di sviluppo e aumentano le prestazioni dell'applicazione.